Rounded Button in Android
You can do a rounded corner button without resorting to an ImageView.
A background selector resource, button_background.xml
:
<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states
-->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/button_unfocused" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/button_unfocused" />
<!-- Focused states
-->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/button_focus" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/button_focus" />
<!-- Pressed
-->
<item android:state_pressed="true" android:drawable="@drawable/button_press" />
</selector>
For each state, a drawable resource, e.g. button_press.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke android:width="1dp" android:color="#FF404040" />
<corners android:radius="6dp" />
<gradient android:startColor="#FF6800" android:centerColor="#FF8000" android:endColor="#FF9700" android:angle="90" />
</shape>
Note the corners
element, this gets you rounded corners!
Then set the background drawable on the button:
android:background="@drawable/button_background"
EDIT (9/2018): The same technique can be used to create a circular button. A circle is really just a square button with radius size set to 1/2 the side of the square
Additionally, in the example above the stroke
and gradient
aren't necessary elements, they are just examples and ways that you'll be able to see the rounded corner shape
If you need a rounded button in Android, then create an XML file "RoundShapeBtn.xml" as drawable.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:padding="10dp">
<solid android:color="#6E6E6E"/> <!-- this one is ths color of the Rounded Button -->
<corners
android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp"/>
</shape>
Add this to your button code:
android:background="@drawable/RoundShapeBtn"
create xml file in drawable folder in android like :
rounded_button.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="20dp"/> // if you want clear round shape then make radius size is half of your button`s height.
<solid android:color="#EEFFFFFF"/> // Button Colour
<padding
android:bottom="5dp"
android:left="10dp"
android:right="10dp"
android:top="5dp"/>
</shape>
Now this xml file as your buttons background.
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@drawable/rounded_button"
android:text="@string/button_text"
android:textColor="@color/black"/>
Extend ImageView
like so:
public class RoundedImageView extends ImageView {
private static final String TAG = "RoundedImageView";
private float mRadius = 0f;
public RoundedImageView(Context context) {
super(context);
}
public RoundedImageView(Context context, AttributeSet attrs) {
super(context, attrs);
// retrieve styles attributes
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.RoundedView);
mRadius = a.getDimension(R.styleable.RoundedView_radius, 0f);
a.recycle();
}
@Override
protected void onDraw(Canvas canvas) {
// only do this if we actually have a radius
if(mRadius > 0) {
RectF rect = new RectF(0, 0, getWidth(), getHeight());
Path clipPath = new Path();
clipPath.addRoundRect(rect, mRadius, mRadius, Path.Direction.CW);
canvas.clipPath(clipPath);
}
super.onDraw(canvas);
}
}
And apply your normal background resource to it and it should be clipped with rounded corners.