Develop Reference

How to make an Image button circular and inside the circle,an image will be shown and a border will be there around the image

I have been looking SO how to make an Image button circular and inside the circle, an image will be shown. But I could not find any helpful sources. I have only 24 hours and my client will check it.
My aim is to create Image Button(black colored circle, see the picture below and an image can be displayed inside it). See image below:
Here is my XML part...the ImageButton is between two comment lines
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/backg"
android:orientation="vertical"
android:weightSum="10"
tools:context="sudhirpradhan.example.com.clientpptapp.mainIconFragment">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="0dp"
android:layout_weight="5" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="4.5">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<!--here is my imageButton need to be look like a circle and within that circle ,a picture will be shown .............. -->
<ImageButton
android:id="#+id/imageButton"
android:layout_width="0dp"
android:padding="10dp"
android:scaleType="fitCenter"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:layout_weight="3"
android:background="#drawable/roundbutton"
android:src="#drawable/frontbutton" />
<!-- ..........................................................-->
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="0dp"
android:layout_weight="0.5" />
</LinearLayout>
here is #drawable/roundbutton xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#50d050"
android:endColor="#008000"
android:angle="270"/>
<stroke android:width="5px"
android:color="#000000"/>
</shape>
How can I implement that..any suggestion and thank you.

NEW EDITION
As per your comments I got a better idea of what you needed so I'll provide here (re-edited) the solution I have for you.
First I extended an ImageView like this:
public class CircleImageView extends AppCompatImageView {
private int borderColor;
private float borderWidth;
public CircleImageView(Context context) {
super(context);
}
public CircleImageView(Context context, AttributeSet attrs) {
super(context, attrs);
parseAttributes(attrs);
}
public CircleImageView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
parseAttributes(attrs);
}
#Override
protected void onDraw(Canvas canvas) {
Drawable drawable = getDrawable();
if (drawable == null) {
return;
}
if (getWidth() == 0 || getHeight() == 0) {
return;
}
Bitmap b = ((BitmapDrawable) drawable).getBitmap();
if(b == null || b.isRecycled())
return;
Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);
int w = getWidth(), h = getHeight();
int imgRadius = w - 2 * (int)this.borderWidth;
final Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setColor(this.borderColor);
canvas.drawCircle(this.getWidth() / 2,
this.getHeight() / 2,
this.getWidth() / 2, paint);
Bitmap roundBitmap = getRoundedCroppedBitmap(bitmap, imgRadius);
canvas.drawBitmap(roundBitmap, this.borderWidth, this.borderWidth, null);
}
public static Bitmap getRoundedCroppedBitmap(Bitmap bitmap, int radius) {
Bitmap finalBitmap;
if (bitmap.getWidth() != radius || bitmap.getHeight() != radius)
finalBitmap = Bitmap.createScaledBitmap(bitmap, radius, radius,
false);
else
finalBitmap = bitmap;
Bitmap output = Bitmap.createBitmap(finalBitmap.getWidth(),
finalBitmap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, finalBitmap.getWidth(),
finalBitmap.getHeight());
paint.setAntiAlias(true);
paint.setFilterBitmap(true);
paint.setDither(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(Color.parseColor("#BAB399"));
canvas.drawCircle(
finalBitmap.getWidth() / 2,
finalBitmap.getHeight() / 2,
finalBitmap.getWidth() / 2,
paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(finalBitmap, rect, rect, paint);
return output;
}
private void parseAttributes(AttributeSet attrs){
TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.CircleImageView);
this.borderColor = ta.getColor(R.styleable.CircleImageView_border_color, 0xffffff); // default color white
this.borderWidth = ta.getDimension(R.styleable.CircleImageView_border_width, 1.0f);
}
}
Then we need to set some styleable attributes for borderColor and borderWidth, place it in res/values/attrs.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="CircleImageView">
<attr name="border_color" format="color" />
<attr name="border_width" format="dimension" />
</declare-styleable>
</resources>
Then you can just include it in your layout - it will be like:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="10"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="0dp"
android:layout_weight="5" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="4.5">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<!--here is my imageButton need to be look like a circle and within that circle ,a picture will be shown .............. -->
<com.mucodes.roundbuttonexample.CircleImageView
android:layout_width="200dp"
android:layout_height="200dp"
app:border_color="#ffff0000"
app:border_width="7dp"
android:src="#drawable/random"/>
<!-- ..........................................................-->
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="0dp"
android:layout_weight="0.5" />
</LinearLayout>
You can then use the method setOnClickListener to make the CircleImageView act like a button when clicked.
Here is a video of the result: example of using
Hope now this is what you need.

Sorry, can not comment due to a reputation.
Try to take a look at fancy buttons library.
Here you can set a radius to your button, background color, image and so on.
If you can not use third-party libraries - check library's source code, its pretty simple.

android - How to set corner radius programmatically?

I have two ListViews (leftList, rightList). I also have one TextView which I use as row view in both of them.
I have a rectangle drawable shape and set it as background to the TextView.
I would like to change this shape and have rounded corners on the left.
What I tried :
GradientDrawable gradientDrawable = new GradientDrawable();
// gradientDrawable.setCornerRadius(30);
((GradientDrawable)gradientDrawable.mutate()).setCornerRadius(30);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
viewHolderPattern.digits.setBackground(gradientDrawable);
}
I have created a new layout in drawable with the right corner radius set and set that to the textView with setBackgroundRescource but still didn't work.
The TextView that I use as items in both listViews
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/digitsTextView"
android:textSize="15dp"
android:paddingTop="7dp"
android:paddingBottom="8dp"
android:fontFamily="monospace"
android:textColor="#color/selected_items"
android:background="#drawable/digital_text_shape">
</TextView>
Shape layout digital_text_shape.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/orange" />
<solid android:color="#color/orange" />
<corners
android:bottomLeftRadius="20dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="20dp"
android:topRightRadius="0dp"
/>
<padding
android:bottom="0dp"
android:left="20dp"
android:right="0dp"
android:top="0dp" />
</shape>
Left list and Right list
<!-- Left ListView -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
>
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:id="#+id/left_listView"
android:divider="#android:color/transparent"
android:dividerHeight="0.1sp"
android:choiceMode="singleChoice"
>
</ListView>
</LinearLayout>
<!-- Right ListView -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
>
<ListView
android:id="#+id/right_listView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#android:color/transparent"
android:dividerHeight="0.1sp"
android:choiceMode="singleChoice"
>
</ListView>
</LinearLayout>

Here example for how to create GradientDrawable shape programmatically.
GradientDrawable shape = new GradientDrawable();
shape.setShape(GradientDrawable.RECTANGLE);
shape.setColor(Color.RED);
shape.setStroke(3, Color.YELLOW);
For change the radius for all corners of the gradient.
shape.setCornerRadius(15);
For Change the radius for specific corners of the gradient.
shape.setCornerRadii(new float[] { 8, 8, 8, 8, 0, 0, 0, 0 });
You can use this drawable as a background as below :
view.setBackgroundDrawable(shape);

The answer of #Rohit Suthar in Kotlin, with dp converted to pixel, and color resources:
private val STROKE_WIDTH_PX = 2.dpToPx
private val CORNER_RADIUS_PX = 5.dpToPx.toFloat()
val shape = GradientDrawable()
shape.shape = GradientDrawable.RECTANGLE
shape.setColor(ContextCompat.getColor(context, R.color.pink))
shape.setStroke(STROKE_WIDTH_PX, ContextCompat.getColor(context, R.color.black))
// choose either cornerRadius or cornerRadii
shape.cornerRadius = CORNER_RADIUS_PX
shape.cornerRadii = floatArrayOf(
// top left
0f,
0f,
// top right
CORNER_RADIUS_PX,
CORNER_RADIUS_PX,
// bottom right
CORNER_RADIUS_PX,
CORNER_RADIUS_PX,
// bottom left
0f,
0f
)
view.background = shape
To convert dp to px:
val Int.dpToPx: Int
get() = (this * Resources.getSystem().displayMetrics.density).toInt()

How to add dynamically circular image view with some specified background color

I am working on an instant chat application.I have to implement following screen.
In the screenshot you can see we have a circular image view where we are displaying the profile pic of the user.On profile pic we have a small circle having green color indicating that the user is online.I am implementing the screen using following xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="#dimen/padding10">
<FrameLayout
android:id="#+id/frame"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="#dimen/margin10">
<com.almabay.almachat.circularImageView.CircularImageView
android:id="#+id/imgContact"
android:layout_width="80dp"
android:layout_height="80dp "
android:layout_gravity="bottom|left" />
<com.almabay.almachat.circularImageView.CircularImageView
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_gravity="top|right"
android:background="#78dd63" />
</FrameLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/margin10"
android:layout_toRightOf="#+id/frame"
android:orientation="vertical"
android:padding="#dimen/padding5">
<TextView
android:id="#+id/txtNam"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Neeraj"
android:textSize="15sp" />
<TextView
android:id="#+id/stats"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin10"
android:text="Welocme to Almachat" />
</LinearLayout>
</RelativeLayout>
But i am getting the screen as is given below:
Here you can see that green color is not displayed in circle .It is displayed in square.However I have set the color in the design ,in actual practice i want to set it as green using java code when the user will be online .I have taken a circular image view .Still the background color is shown in square.Please guide me how can i fix the issue.
Solved the Issue:
Create a drawable named circle_green.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<gradient
android:angle="270"
android:endColor="#color/green_color"
android:startColor="#color/green_color" />
<stroke
android:width="2dp"
android:color="#color/while_color"></stroke>
</shape>
Used it in the background of an imageview
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="#dimen/padding10">
<com.almabay.almachat.circularImageView.CircularImageView
android:id="#+id/imgContact"
android:layout_width="80dp"
android:layout_height="80dp "
android:layout_alignParentLeft="true" />
<ImageView
android:id="#+id/online"
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_alignRight="#+id/imgContact"
android:layout_alignTop="#+id/imgContact"
android:background="#drawable/circle_green" />
It is working for me now.

You need to create a CustomImageView like this...
public class CircularImageView extends ImageView {
public CircularImageView(Context context,AttributeSet attributeSet){
super(context,attributeSet);
}
#Override
protected void onDraw(Canvas canvas) {
Drawable drawable = getDrawable();
if (drawable == null) {
return;
}
if (getWidth() == 0 || getHeight() == 0) {
return;
}
Bitmap b = ((BitmapDrawable) drawable).getBitmap();
Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);
int w = getWidth(), h = getHeight();
Bitmap roundBitmap = getRoundedCroppedBitmap(bitmap, w);
canvas.drawBitmap(roundBitmap, 0, 0, null);
}
public static Bitmap getRoundedCroppedBitmap(Bitmap bitmap, int radius) {
Bitmap finalBitmap;
if (bitmap.getWidth() != radius || bitmap.getHeight() != radius)
finalBitmap = Bitmap.createScaledBitmap(bitmap, radius, radius,
false);
else
finalBitmap = bitmap;
Bitmap output = Bitmap.createBitmap(finalBitmap.getWidth(),
finalBitmap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, finalBitmap.getWidth(),
finalBitmap.getHeight());
paint.setAntiAlias(true);
paint.setFilterBitmap(true);
paint.setDither(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(Color.parseColor("#BAB399"));
canvas.drawCircle(finalBitmap.getWidth() / 2 + 0.7f,
finalBitmap.getHeight() / 2 + 0.7f,
finalBitmap.getWidth() / 2 + 0.1f, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(finalBitmap, rect, rect, paint);
return output;
}
}
And use the imageview class in your xml layout like this...
<com.xxxx.xxx.xxxx.CircularImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:id="#+id/std_img"
android:layout_alignParentLeft="true"
android:layout_marginLeft="15dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="20dp"/>

you can do something like this :
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/imgUserImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:scaleType="centerCrop"
android:src="#drawable/user_temp" />
<ImageView
android:id="#+id/imgOnlineIndicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imgUserImage"
android:layout_alignTop="#+id/imgUserImage"
android:layout_marginLeft="#dimen/margin_small"
android:src="#drawable/online_indicator" />
</RelativeLayout>
This is just an example from my app.You can modify it accordingly and it serves your purpose.
* i used a small green image to show as online indicator.

You can use the powerful Constraint Layout.
The advantages are:
Consistency in different layout sizes.
Simple to implement.
You can animate the dot =).
Create a drawable named circle_green.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<gradient
android:angle="270"
android:endColor="#color/green_color"
android:startColor="#color/green_color" />
<stroke
android:width="2dp"
android:color="#color/while_color"></stroke>
</shape>
Align the online dot on your ImageView within the Constraint Layout.
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_image"
android:layout_width="#dimen/avatar_profile_height"
android:layout_height="#dimen/avatar_profile_height"
android:layout_marginTop="#dimen/margin_medium"
android:src="#drawable/avatar_1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/online"
android:layout_width="12dp"
android:layout_height="12dp"
android:background="#drawable/circle_green"
android:contentDescription="#string/online_status"
app:layout_constraintCircle="#id/profile_image"
app:layout_constraintCircleAngle="150"
app:layout_constraintCircleRadius="#dimen/avatar_profile_radius" />
Ignore the warning that the ImageView is not constrained.
Finally, in order to animate, do the following:
view.button_home.setOnClickListener {
//1
val layoutParams = view.online.layoutParams as ConstraintLayout.LayoutParams
val startAngle = layoutParams.circleAngle
val endAngle = startAngle + 360
//2
val anim = ValueAnimator.ofFloat(startAngle, endAngle)
anim.addUpdateListener { valueAnimator ->
//3
val animatedValue = valueAnimator.animatedValue as Float
val layoutParam = view.online.layoutParams as ConstraintLayout.LayoutParams
layoutParam.circleAngle = animatedValue
view.online.layoutParams = layoutParam
//4
view.online.rotation = (animatedValue % 360 - 150)
}
//5
anim.duration = 2000
//6
anim.interpolator = LinearInterpolator()
anim.start()
}

android - How to remove black field on Widget ImageView

Thanks for helping me to solve the problem.
I use setImageViewBitmap to widget imageview from a bitmap by drawing round corners with canvas, but it has a black field in imageview's corners. I don't know why this only happens on Widget but didn't happens on my Activity view.
How to let my corners on Widget look like corners on Activity?
here is my situation
on Widget :
http://goo.gl/YpzhJh
on Activity :
http://goo.gl/bc09oL
here is my code of 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 int color = 0xff000000;
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 = 60;
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;
}
here is the code of setting widget remoteviews
bitmap = getRoundedCornerBitmap(orgin_bitmap);
if(bitmap!=null)
views.setImageViewBitmap(R.id.main_imageview, bitmap);
here is widget xml :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/widget_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/main_imageview"
android:layout_width="600dp"
android:layout_height="600dp"
android:layout_centerInParent="true"
android:background="#color/transparent"
android:visibility="visible"
android:src="#drawable/widget_back3" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="600dp"
android:layout_height="600dp"
android:visibility="visible"
android:layout_centerInParent="true"
android:src="#drawable/widget_back2" />
<ImageView
android:id="#+id/imageView_redheart"
android:layout_width="600dp"
android:layout_height="600dp"
android:layout_centerInParent="true"
android:background="#color/blue"
android:visibility="visible"
android:src="#drawable/widget_back1" />
<TextView
android:id="#+id/now"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:background="#color/transparent"
android:fontFamily="sans-serif-condensed"
android:gravity="center"
android:shadowColor="#color/black"
android:shadowRadius="3.0"
android:text="9999"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/trans"
android:textSize="25sp"
android:textStyle="bold" />
</RelativeLayout>
</LinearLayout>

setbackground(null);
will help
in xml
android:background="#null"

how to show imageview with no white space

my imageview not fully show on imageview width see this image its show white space http://imgur.com/3fDXgij but i want to show mageview like this shape http://imgur.com/g8UeI4b and image show full in imageview no white space below is my code please help me
<ImageView
android:id="#+id/test_button_image"
android:layout_width="80dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="15dp"
android:layout_height="60dp"
android:layout_alignParentTop="true"
android:background="#drawable/border6"
android:src="#drawable/ic_launcher" >
</ImageView>

android:adjustViewBounds="true"
Reference: http://developer.android.com/reference/android/widget/ImageView.html#attr_android:adjustViewBounds
this should fix your problems. In this case scaling is not your problem, because image is already scaled. Problem is that container is trying to get all possible space inside layout, but image cannot expand its width because its trying to keep its ratio.
<ImageView
android:id="#+id/test_button_image"
android:layout_width="80dp"
android:adjustViewBounds="true"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="15dp"
android:layout_height="60dp"
android:layout_alignParentTop="true"
android:background="#drawable/border6"
android:src="#drawable/ic_launcher" >
</ImageView>
This attribute will "crop" the remaining not used space in ImageView.
Also you should check your background image if its properly 9patch image.
I would recommend you to put the imageview without any background inside FrameLayout, and set border image for this FrameLayout.

Imageview to fill a layout (in your xml):
android:scaleType="fitXY"
If you want to cut the corners you have to :
public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, int pixels) {
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 = pixels;
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;
}
reference

<LinearLayout
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#Android:Color:white"
android:padding="1dp" >
<ImageView
android:id="#+id/test_button_image"
android:layout_width="wrapcontent"
android:layout_height="wrapcontent"
android:background="#drawable/border6"
>
</ImageView>
</LinearLayout>