How to create customized Buttons in Android with different shapes and colors

A Button is a user interface that are used to perform some action when clicked or tapped.

Default Shape of Button

In this article, we will try to change the shape and color of Button to various designs, like:

  • Oval Button
  • Rectangular Button
  • Cylindrical Button

Approach:

Below are the various steps to created customized Buttons:
Step 1: Start a new Android Studio project
Please refer to this article to see in detail about how to create a new Android Studio project.

Step 2: Add the Button
Since we only need to customize Buttons, we will just add Buttons in our layout. We don’t need any other widget. This can be done either by writing the code in XML or using the Design Tab. Here, we will do so by adding its XML code.



Now since we need to customize the Button as per 3 shapes (as shown above), we will add 3 buttons and add the customization of each separately, lets say the buttons be – oval, rectangle and cylindrical.

activity_main.xml

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:background="#ffff00">
  
    <!-- 1st Button: Oval -->
    <Button
        android:layout_width="180dp"
        android:layout_height="60dp"
        android:layout_marginLeft="180dp"
        android:layout_marginTop="20dp"
        android:text="oval"
        android:textColor="#388e3c"/>
  
    <!-- 2nd Button: Rectangle -->
    <Button
       android:layout_width="180dp"
       android:layout_height="60dp"
       android:layout_marginLeft="180dp"
       android:layout_marginTop="20dp"
       android:text="rectangle"
       android:textColor="#FFFF"/>
  
    <!-- 3rd Button: Cylindrical -->
    <Button
       android:layout_width="180dp"
       android:layout_height="60dp"
       android:layout_marginLeft="180dp"
       android:layout_marginTop="20dp"
       android:text="cylindrical"
       android:textColor="#3e2723"/>
  
</LinearLayout>

chevron_right


Initially, all three buttons have default values and will look as per the default look shown above.

Step 3: Customizing the button
In order to customize the button, as shown above, we will be needing few attributes of Button in particular:

  1. shape: This defines the shape of the widget that is being used. For example: oval, rectangle, etc.
  2. color This attribute takes the Hexadecimal color code as parameter and sets the color as per the code
  3. corner::radius: This attribute defines how much curved corners of the button has to be. For example, no curve will lead to rectangle and increasing the curve can result in circle as well.
  4. stroke: This attribute refers to the thickness of the outline of the button. The more the stroke, the thicker the outline will be.

These attributes can be set for a widget with the help of a Drawable resource file.

  1. Creating a new drawable resource file:

    We will be creating a new drawable file which will contain the customizations such as shape, color, and gradient which we want to set on our button. To create a drawable file, click on: app -> res -> drawable(right click) -> New -> Drawable resource file and name it anything you want.
    Creating a new drawable resource file

  2. Adding code to the resource file:

    Now that we have this drawable resource file, we can customize our button by adding tags like shape, color, stroke, or any other attribute which we want.



    custom_button.xml

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?xml version="1.0" encoding="utf-8"?>
    <shape
        android:shape="oval" >
      
        <stroke
            android:color="#388e3c"
            android:width="2dp"/>
        <corners
            android:radius="5dp"/>
        <solid
            android:color="#ffff"/>
    </shape>

    chevron_right

    
    

    custom_button2.xml

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?xml version="1.0" encoding="utf-8"?>
    <shape 
        android:shape="rectangle">
        <stroke
            android:color="@color/colorPrimary"
            android:width="1dp"/>
        <corners
            android:radius="15dp"/>
        <gradient
            android:startColor="#2e7d32"
            android:endColor="#e0f7fa"/>
    </shape>

    chevron_right

    
    

    custom_button3.xml

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?xml version="1.0" encoding="utf-8"?>
    <shape
        android:shape="rectangle">
      
        <stroke
            android:color="@color/colorPrimary" 
            android:width="1dp"/>
        <corners 
            android:radius="190dp"/>
        <solid 
            android:color="#76ff03"/>
        <gradient 
            android:startColor="#76ff03"/>
    </shape>

    chevron_right

    
    

  3. Adding these customizations to our original button:
    We can now add these customizations to the default button which we created previously. To do this, we just change the background attribute of our Button to the drawable resource file we just created.

    android:background=”@drawable/custom_button”

This is how our activity_main.xml file will look now:

activity_main.xml

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:background="#ffff00">
  
    <!-- 1st Button: Oval -->
    <Button
        android:layout_width="180dp"
        android:layout_height="60dp"
        android:layout_marginLeft="180dp"
        android:layout_marginTop="20dp"
        android:text="oval"
        android:textColor="#388e3c"
        android:background="@drawable/custom_button"/>
  
    <!-- 2nd Button: Rectangle -->
    <Button
       android:layout_width="180dp"
       android:layout_height="60dp"
       android:layout_marginLeft="180dp"
       android:layout_marginTop="20dp"
       android:text="rectangle"
       android:textColor="#FFFF"
       android:background="@drawable/custom_button2"/>
  
    <!-- 3rd Button: Cylindrical -->
    <Button
       android:layout_width="180dp"
       android:layout_height="60dp"
       android:layout_marginLeft="180dp"
       android:layout_marginTop="20dp"
       android:text="cylindrical"
       android:textColor="#3e2723"
       android:background="@drawable/custom_button3"/>
  
</LinearLayout>

chevron_right


Step 4: Running the project to see the output

Output:
output-ui

Attention reader! Don’t stop learning now. Get hold of all the important Java and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.