Rounded Corners Button
A rounded corners button is more lucrative than a rectangular-shaped button. So that an android developer seeking a way to make an android button into a rounded corner shape. This tutorial will guide you to make a rounded corners button.
The following code snippets consist of two XML files. The first is an activity XML file and another one is an XML drawable file. In the XML layout file, we put a background property inside the Button tag. The button’s background property value point to an XML drawable file that is located inside the drawable folder.
The actual code snippet is written in that drawable XML file which renders a rounded corners button widget in-app interface. XML drawable file holds a selector with an item tag. The item tag defines the shape of the button widget. Here we put the corners radius value that we want to apply to our button widget. In this tutorial, we also define here the button stroke color and width and the button background color. The following image shows a 15 dp radius rounded corners button widget.
The following code snippets consist of two XML files. The first is an activity XML file and another one is an XML drawable file. In the XML layout file, we put a background property inside the Button tag. The button’s background property value point to an XML drawable file that is located inside the drawable folder.
The actual code snippet is written in that drawable XML file which renders a rounded corners button widget in-app interface. XML drawable file holds a selector with an item tag. The item tag defines the shape of the button widget. Here we put the corners radius value that we want to apply to our button widget. In this tutorial, we also define here the button stroke color and width and the button background color. The following image shows a 15 dp radius rounded corners button widget.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F8F8FF">
<Button
android:id="@+id/push_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/button_bg_rounded_corners"
android:padding="15dp"
android:text="Rounded Corners Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
res/drawable/button_bg_rounded_corners.xml
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<!--button pressed state background color-->
<item android:state_pressed="true">
<shape android:shape="rectangle">
<solid android:color="#03A9F4"/>
<stroke
android:color="#CCEBFA"
android:width="2dp"
/>
<!--corners allow us to make the rounded corners button-->
<corners android:radius="15dp" />
</shape>
</item>
<!--button default background color-->
<item>
<shape android:shape="rectangle">
<solid android:color="#03A9F4"/>
<stroke
android:color="#3F51B5"
android:width="2dp"
/>
<!--corners allow us to make the rounded corners button-->
<corners android:radius="15dp" />
</shape>
</item>
</selector>
