In this tutorial we will see how to make a Button with rounded corners. In some applications we can see the button with rounded corners and borders.Android is not providing any default Button widget with rounded corners , but we can achieve this by setting a drawable background for the default Button in android.
Steps
- Create new project in android studio
- Implement custom drawable file for button
- Create the Button in layout file with custom background
- Add the required colors
Create project in android studio
Refer Android beginners app development guide if you are beginner or if you don’t know how to create project in android studio.
Implement custom drawable file for textview
If we want a custom background for a button we need to have a drawable file which defines the shape,size and color of the button layout and this will be the drawable which will set as background of the button in the layout file. So in this step you need to have an xml file under your res/drawable/
rounded_corner_button.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape android:shape="rectangle"> <solid android:color="@color/colorPrimary"/> <stroke android:color="@color/colorAccent" android:width="2dp" /> <corners android:radius="15dp" /> </shape> </item> </selector>
Create the Button in layout file with custom background
Once the drawable file is created you need to create the button in your layout file and simply use the above drawable file in your textview as in the following code
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Rounded Button" android:background="@drawable/rounded_corner_button" android:textColor="@color/white" android:layout_centerVertical="true" android:layout_centerHorizontal="true" android:padding="15dp" />
Add the required colors
Add the following colors into colors.xml which is using in above codes
<color name="colorPrimary">#3F51B5</color> <color name="colorAccent">#FF4081</color> <color name="white">#FFFFFF</color>
output
