Thread: button overlapping the other button

the title says it all, I wanted to make it look like this: as.png

The inner button(red) and the outer button(yellow) should be a separate
buttons because I have this:

@Override
protected void paintComponent(Graphics g){
    if(getModel().isArmed()){
        g.setColor(new Color(255,255,255,128));
    else{
        g.setColor(new Color(255,255,255,0));
    }
 
    g.fillOval(...);
 
    super.paintComponent(g);
}

like when a button is clicked it has different color:
0.png1.png

please help

What is your question?

... how do you make the buttons overlap each other?

You could construct your own subclass of AbstractButton that contains references to the two buttons of interest as instance variables.

But I still don't see why you want two separate buttons. Whether a thing is one button or two depends, I would say, on its behaviour not its appearance. If it's a region that detects and responds to clicks, then it's a (single) button whatever its appearance. A single button can paint itself however it likes depending on its state (armed, disabled etc) - and that includes painting itself as two concentric circles.

Originally Posted by xchan

... how do you make the buttons overlap each other?

None of the code posted seems related to your question. I see an if statement which seems to decide what color to draw an oval.

Where is the code you are trying to use to overlap your buttons? What happens when you give the buttons the same location on the canvas?

I'm a bit confused, are you trying to get the buttons to have that overall appearance but function as 1 button OR are you trying to get 2 buttons with different functions/roles overlap each other?

If you want the latter, then make 2 buttons with the desired appearance and have them physically overlap. This can be done through various Layout Managers, such as GridBagLayout. Since they would overlap, you have to determine how the compiler will know which button has been pressed to avoid both of them firing and creating a confusion. This route though is overly complicated though and you'd be better of sticking to the former of either drawing a shape (i.e. yellow circle) then putting the button in it, or making a button that has the overall design.

...to look at this with a fresh set of eyes....

Are you asking how to have one button with two different looks?

Originally Posted by Norm

Or have one button that is a circle and another button that is a ring. The circle button being located inside the ring button.

exactly, when i try to set their location the same, they tend to relocate each other(side by side)

--- Update ---

Originally Posted by SunshineInABag

I'm a bit confused, are you trying to get the buttons to have that overall appearance but function as 1 button OR are you trying to get 2 buttons with different functions/roles overlap each other?

If you want the latter, then make 2 buttons with the desired appearance and have them physically overlap. This can be done through various Layout Managers, such as GridBagLayout. Since they would overlap, you have to determine how the compiler will know which button has been pressed to avoid both of them firing and creating a confusion. This route though is overly complicated though and you'd be better of sticking to the former of either drawing a shape (i.e. yellow circle) then putting the button in it, or making a button that has the overall design.

that is my main problem, the layouts. i dont know which layout to use but ill try that gridbag

Originally Posted by xchan

exactly, when i try to set their location the same, they tend to relocate each other(side by side)[COLOR="Silver"]

This is the behavior expected from the standard layout managers. When an item is added the layout manager places it in the place you specify, or in the next available place. A layout manager's intentions are to prevent overlapping elements, not cause it.

Is this the only "button" (or pair of buttons) on the page? There are many ways to do what you describe, the best one will depend on your project.

According to the code in post #1 it looks like you are just drawing ovals. I can't tell if you are making button objects, or other objects, or what...

If your two buttons are objects, the objects themselves could detect clicks. Placing the small one (circle button) on top of the larger one would intercept all clicks on the smaller one before they hit the large one (ring button). The ring would respond only when the ring itself was clicked. The ring button can be a full circle itself, (and probably should be).

If you are not dealing with objects, but painting shapes, you can intercept mouse clicks in other ways and do some quick math to determine if the ring or button was clicked.

Share any details of your desired finished product if you need more ideas.

Originally Posted by xchan

that is my main problem, the layouts. i dont know which layout to use but ill try that gridbag

Most layout managers try to ensure each JComponent is side-by-side or some other arrangement other than overlapping. However, there are a few that rely on overlapping, such as CardLayout (not sure if this is what you want), JLayeredPane (not an actual layout manager) and probably a few others. GridBagLayout on the other hand gives immense control of how you want JComponents arranged, including overlapping but it does take more work to use.

You'll need a lot more work before any layout manager can help, such as creating JButtons, implementing listeners and registering them. After all that, then GridBagLayout or any other layout manager will be of use.

Check this out before diving right into GridBagLayout: How to Use GridBagLayout (The Java™ Tutorials > Creating a GUI With JFC/Swing > Laying Out Components Within a Container)