how to layer two buttons with graphics/color that are set programmatically

280 views Asked by At

I have to layer two Buttons. The first (top) button is created like this using a .png for the icon.

// create circular button and colorize
View button1 = v.findViewById(bId);
GradientDrawable backgroundGradient = (GradientDrawable)imgIcon.getBackground();
backgroundGradient.setColor(getResources().getColor(R.color.holo_gray_light));

// set icon
button1.setImageDrawable(getResources().getDrawable(R.drawable.ic_phone_ib));

For the 2nd button (bottom):

Button button2 = (Button) v.findViewById(R.id.textButton);
button2.setBackgroundResource(R.drawable.gray_rect);

what I have tried:

1 set the drawable left on the bottom button to the drawable of top button. result: icon only is displayed not the background colored circle.

2 create a RoundRectangle using ShapeDrawable then create 2 layers and use LayerDrawable to set the background of the button:

 int r= 20;
 float[] outerR=new float[]{r,r,r,r,r,r,r,r};
 RoundRectShape rr=new RoundRectShape(outerR,null,null);
 ShapeDrawable drawable=new ShapeDrawable(rr);
 drawable.getPaint().setColor(getResources().getColor(R.color.gray_189));


 // get bitmap from button1
 BitmapDrawable bm1 = (BitmapDrawable)button1.getDrawable();

 // layer them
 Drawable drawableArray[]= new Drawable[]{drawable, bm1};  
 LayerDrawable layerDraw = new LayerDrawable(drawableArray);  
 layerDraw.setLayerInset(1, 15, 15, 0, 0);//set offset of 2 layer  

 textButton.setBackground(layerDraw);

result: same as for (1).

Here is the desired result:

2 layered buttons

button1 is blue with icon, button2 is gray rounded rectangle with text.

1

There are 1 answers

0
droideckar On BEST ANSWER

figured it out using RelativeLayout in the xml for the list item. I used 2 table rows, one for each button and oriented them such that the button layers accordingly and I was able to set the icon and background color programmatically.

layered buttons