Android Button Design Blog is written keeping in mind Material Design guidelines.
Need some career advice or prepping for an Android developer interview? Hit me up on Topmate.io, and let's chat!
Button Widget in an Android App plays a very important role in user interaction. It prompts user to interact with the app and brings more meaning to app design.
Here are 6 different android XML files that you can use as reference for android button design in your app.
1. Android Button Basic Design
We have used Android constraint layout in the following example.
To achieve this basic design style, write following lines of code:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="56dp"
android:textColor="@color/white"
android:textSize="17sp"
android:padding="20dp"
android:textAllCaps="false"
android:backgroundTint="@color/colorAccent"
android:text="View Reports"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />2. Android Button Rounded Rectangle Design
To achieve a rounded rectangle design as shown above, you’ve to first create a new android drawable resource file.
To create this file, in ‘Android’ section of Project Panel on the left, go to app > res > drawable
Right click on ‘drawable’ folder and select ‘New > Drawable Resource File’
Create a new file named ’rounded_rectangle’
In this new file write the following line of code:
<?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="@color/colorAccent"/> <!-- this one is the color of the Rounded Button -->
<corners
android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp"/>
</shape>Once done, go back to your main xml file which contains the button and add following attribute to it:
android:background="@drawable/rounded_rectangle"
To achieve what we have got in the image above, add following lines of code:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="56dp"
android:textColor="@color/white"
android:textSize="17sp"
android:paddingTop="15dp"
android:paddingBottom="15dp"
android:paddingStart="25dp"
android:paddingEnd="25dp"
android:focusable="true"
android:textAllCaps="false"
android:background="@drawable/rounded_btn"
android:text="View Reports"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />Note: In case you would like to change the button color, you’ll have to change the shape color attribute in rounded_rectangle.xml file or add android:backgroundTint attribute to ‘Button’ widget!
3. Rounded Design
Rounded Design looks quite good. In order to achieve this style you’ll have to first create a new android drawable resource file.
To create this file, in ‘Android’ section of Project Panel on the left, go to app > res > drawable
Right click on ‘drawable’ folder and select ‘New > Drawable Resource File’
Create a new file named ’rounded_rectangle’
In this new file write the following line of code:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="50dp"/> // if you want clear round shape then make radius size is half of your button`s height.
<solid android:color="@color/colorAccent"/> // Button Colour
<padding
android:bottom="10dp"
android:left="25dp"
android:right="25dp"
android:top="10dp"/>
</shape>Once done, go back to your main xml file which contains the button and add following attribute to it:
android:background="@drawable/rounded_rectangle"
To achieve what we have got in the image above, add following lines of code:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="56dp"
android:textColor="@color/white"
android:textSize="17sp"
android:focusable="true"
android:textAllCaps="false"
android:background="@drawable/rounded_btn"
android:text="View Reports"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />Note: In case you would like to change the button color, you’ll have to change the shape color attribute in rounded_rectangle.xml file or add android:backgroundTint attribute to ‘Button’ widget!
4. On Press Change Color
If you like to add more colors to your Android Button Design, you can add state_focused and state_pressed to your Android Button widgets and change color of your button whenever user presses the button.
To achieve this, you’ll have to first create a new android drawable resource file.
To create this file, in ‘Android’ section of Project Panel on the left, go to app > res > drawable
Right click on ‘drawable’ folder and select ‘New > Drawable Resource File’
Create a new file named ’rounded_rectangle’
In this new file write the following line of code:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape android:shape="rectangle" >
<corners android:radius="12dp" />
<stroke android:width="1dp"
android:color="#E91E63" />
<gradient android:angle="-90"
android:startColor="#E91E63"
android:endColor="#F44336" />
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="rectangle" >
<corners android:radius="12dip" />
<stroke android:width="1dip"
android:color="#F44336" />
<solid android:color="@color/colorAccent"/>
</shape>
</item>
<item >
<shape android:shape="rectangle" >
<corners android:radius="12dp" />
<stroke android:width="5dp"
android:color="#FF9800" />
<gradient android:angle="-90"
android:startColor="#FF9800"
android:endColor="#FFC107" />
</shape>
</item>
</selector>Once done, go back to your main xml file which contains the button and add following attribute to it:
android:background="@drawable/rounded_rectangle"
To achieve what we have got in the image above, add following lines of code:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="56dp"
android:textColor="@color/white"
android:textSize="17sp"
android:paddingTop="15dp"
android:paddingBottom="15dp"
android:paddingStart="25dp"
android:paddingEnd="25dp"
android:focusable="true"
android:textAllCaps="false"
android:background="@drawable/rounded_btn"
android:text="View Reports"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />Note: In case you would like to change the button color, you’ll have to change the shape color attribute in rounded_rectangle.xml file.
5. Empty Button Design
One of our favorite, the empty button design style. As shown above, in this button design xml file we have added radius to make button rounded and filled it with the transparent color (” #00000000 “) !
To achieve this, you’ll have to first create a new android drawable resource file.
To create this file, in ‘Android’ section of Project Panel on the left, go to app > res > drawable
Right click on ‘drawable’ folder and select ‘New > Drawable Resource File’
Create a new file named ’rounded_rectangle’
In this new file write the following line of code:
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="50dp" />
<stroke android:width="3dp"
android:color="@color/colorAccent" />
<gradient android:angle="-90"
android:startColor="#00000000"
android:endColor="#00000000" />
</shape>Once done, go back to your main xml file which contains the button and add following attribute to it:
android:background="@drawable/rounded_rectangle"
To achieve what we have got in the image above, add following lines of code:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="56dp"
android:textColor="@color/colorAccent"
android:textSize="17sp"
android:paddingTop="15dp"
android:paddingBottom="15dp"
android:paddingStart="25dp"
android:paddingEnd="25dp"
android:focusable="true"
android:textAllCaps="false"
android:background="@drawable/rounded_btn"
android:text="View Reports"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />Note: In case you would like to change the button color, you’ll have to change the shape color attribute in rounded_rectangle.xml file.
6. Custom Button Design
If you’re someone who would like to create your own custom design and style, here is way you can do. We’ve created a custom shape and shared its tutorial below!
To achieve this, you’ll have to first create a new android drawable resource file.
To create this file, in ‘Android’ section of Project Panel on the left, go to app > res > drawable
Right click on ‘drawable’ folder and select ‘New > Drawable Resource File’
Create a new file named ’rounded_rectangle’
In this new file write the following line of code:
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<!--Radius of all four corners-->
<corners
android:bottomRightRadius="50dp"
android:bottomLeftRadius="10dp"
android:topLeftRadius="50dp"
android:topRightRadius="10dp"/>
<!--Stroke size and color-->
<stroke android:width="3dp"
android:color="@color/colorAccent" />
<!--Fill Color of the Button-->
<gradient android:angle="-90"
android:startColor="#00000000"
android:endColor="#00000000" />
</shape>
Once done, go back to your main xml file which contains the button and add following attribute to it:
android:background="@drawable/rounded_rectangle"
To achieve what we have got in the image above, add following lines of code:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="56dp"
android:textColor="@color/colorAccent"
android:textSize="17sp"
android:paddingTop="15dp"
android:paddingBottom="15dp"
android:paddingStart="25dp"
android:paddingEnd="25dp"
android:focusable="true"
android:textAllCaps="false"
android:background="@drawable/rounded_btn"
android:text="View Reports"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />Note:
- In case you would like to change the button color, you’ll have to change the android:startColor=”#00000000″ and android:endColor=”#00000000″ attribute in rounded_rectangle.xml file.
- In case you would like to change the stroke size, you’ll have to change the android:width=”3dp” attribute.
- To change the shape of button you’ll have to change the following attributes!
<corners
android:bottomRightRadius="50dp"
android:bottomLeftRadius="10dp"
android:topLeftRadius="50dp"
android:topRightRadius="10dp"/>
Interested in adding more customization to your button? See here Android Material Loading Button
6 comments