Designing Buttons For Android App

Android Button Design Blog is written keeping in mind Material Design guidelines.

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"/>