Android XML drawable rounded corners with bitmap tag

Question

I have next XML drawable blue_button

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <layer-list>
      <item><bitmap android:src="@drawable/button_blue_bg" />
      </item>
      <item >
         <shape>
                <corners android:radius="50dip" />
                <stroke android:width="1dip" android:color="#ccffffff" />
                <solid android:color="#00000000" />
                <padding android:bottom="3dip" 
                         android:left="3dip"
                         android:right="3dip"
                         android:top="3dip" />
         </shape>
       </item>
     </layer-list>
  </item>
</selector>

And i have image button_blue_bg with gradient with 1px width.

When i set button background i get next image

As you can see i have background not clipped with rounded border.

How i need modificate xml for background gradient image be not outside border?

I understand why it happended, because i use layers - so this like sandwich- but i also programming on objective c, and there it's also use layers. But in Apple it's wotks fine.

Answer 1

i use this.... First a Layer for the basic definition, set this layer as backgound of your layout:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
        <stroke android:width="0.2dp" android:color="@color/anycolor" />
        <corners android:radius="10dp" > </corners> 
    </shape>
  </item>
  <item>
      <bitmap android:src="@drawable/imgback" />
  </item>
 </layer-list>

i use this function for making round corners:

    public static Bitmap getRoundedCornerBitmap(Bitmap bitmap) {

        Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
            bitmap.getHeight(), Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

        final int color = 0xff424242;
        final Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
        final RectF rectF = new RectF(rect);
        final float roundPx = 12;

        paint.setAntiAlias(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(color);
        canvas.drawRoundRect(rectF, roundPx, roundPx, paint);

        paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
        canvas.drawBitmap(bitmap, rect, rect, paint);

        return output ;
      }     

and finaly, the code in the activity:

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.menu);
    // i use a Relative Layout  
    RelativeLayout rl = (RelativeLayout) findViewById(R.id.rlmenu);
    // Obtain then backgroud of RelativeLayout
    LayerDrawable layer = (LayerDrawable) rl.getBackground();
    // obtain the image set in the Layer
    BitmapDrawable bg = (BitmapDrawable) layer.getDrawable(1);
    // create a new BitmapDrawable from the function
    Drawable d =new BitmapDrawable(getRoundedCornerBitmap(bg.getBitmap()));
    // set the new roundcorner image in the layer
    layer.setDrawableByLayerId(1, d);
    rl.setBackgroundDrawable(d);

}