Rounded Shaped Buttons

Button Shapes – Shape Drawable | AndroidMonks

Button Styles – Creating Different Shape Buttons

In this tutorial we will create multiple styled buttons with different shapes in particular. If you are new to creating Buttons. you can check the tutorial here. You can also see more about Views and Viewgroups before jumping here.

We will see 3 different shapes for our Buttons (You can reuse them for any other Views as well).

YOU ARE YOUR BOSS
I agree to have my personal information transfered to MailChimp ( more information )
Join over 5.000 visitors who are receiving our free content and learn how to program with Android. The growth of Android is estimated to reach a whooping 83% by 2020. Hop on the train and start making money!
We hate spam. Your email address will not be sold or shared with anyone else.

Creating a Rounded Corner Buttons

Before we jump into creating Different Styled Buttons. you will have to quickly know about the Shape Drawable, which is a Android Specific (Similar to  SVG’s) Graphical Element to draw on a Canvas. We will be using them to achieve the shapes we need for our Buttons.

Know more about Shapes here. Inorder to reuse them, we will be slightly extending our knowledge of creating a Layout into creating different Styles in Android. Lets get Creative, and start coding.

Firstly, our adjective here is to create a Rounded Shape Button like below.

Rounded Shaped Buttons
Rounded Shaped Buttons

These are filled Buttons, but can also be empty ones as well.

Straight into the code for this. Create a simple layout and create a normal button like below.

<Button
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:text="Rate Us"
 />

Note at this point, you only have a empty Rectangle Shaped Button. Our aim is to give it a rounded Corner.

You can achieve this by creating your own drawable in the res>drawable folder.

Go to res>drawable and create your style named rate_us.xml (Right click on res>choose new xml file>Layout File).

This will create a empty XML layout file. We will have to create a Shape Root tag and add our properties like below.

<?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="#4FC3F7"/> // Button Colour
    <padding
        android:bottom="5dp"
        android:left="10dp"
        android:right="10dp"
        android:top="5dp"/>
</shape>

From this, it is very clear as to what we are trying to do. We have created a shape root tag, and set its android shape property to rectangle.

We have set rectangle here because, a rounded Corner is achieved by setting radius to a Rectangle only.

  • The solid tag fills the shape with a color of our choice.
  • The corners tag provides us with the radius we need.

Once done, we can provide padding (If needed, the Text will still sit properly inside the Rounded Shape properly, but at time with longer text might create havoc).

The Shape we have created can be reused in our Button with the help of the android:background tag like below.

<Button
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:text="Rate Us"
    android:textColor="#fff"
    android:background="@drawable/rate_us"/>

This will successfully create our Rounded Filled Shaped Button like we saw above.

Creating a Transparent, corner rounded button like below, involves similar procedure like above.

Transparent Rounded Button
Transparent Rounded Button

Additionally add a Stroke tag inside the shape tag like below, and set the solid color to transparent.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <corners android:radius="50dp"/>
    <stroke
        android:color="#FFFFFF"
        android:width="2dp" />
    <solid android:color="@android:color/transparent"/>
    <padding
        android:bottom="5dp"
        android:left="10dp"
        android:right="10dp"
        android:top="5dp"/>

</shape>

Include this in the place of your Button Style and you get the Transparent Rounded Corner Button.

Creating a Oval Button

How about playing with the Shape attribute some more and create our Oval Shaped Button. This is going to be pretty easy, all you have to do is add the shape property to oval instead of rectangle, and you will have your Oval Shaped Button like below.

Oval Shaped Button with a Stroke
Oval Shaped Button with a Stroke

Style.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <corners android:radius="50dp"/> // if you want clear round shape then make radius size is half of your  button`s height.
    <solid android:color="#4FC3F7"/> // Button Colour
    <stroke
        android:color="#FFFFFF"
        android:width="2dp" />
    <padding
        android:bottom="5dp"
        android:left="10dp"
        android:right="10dp"
        android:top="5dp"/>
</shape>

Creating Complex Shapes

How about a button like below.

Looks crazy, but might be useful somewhere
Looks crazy, but might be useful somewhere

These kind of complex shapes can also be created with the help of some additional parameters and some grouping.

How about, create not one, but multiple shapes and joining them together to achieve our Custom Shape. Confusing? Check below.

We are in need of a Trapezoid of sorts, but how are we going to achieve it. this is possible by combining 3 rectangles with one another. Think of the first Rectangle that is occupying the Rectangle Box we have. Now, for the two sides, think about a rectangle that is 45 Degrees rotated. Not sure what i am talking about, see the following diagram.

Follow the series of pictures below.

Step 1
Step 1 – Create 3 rectangle, one in the center, 2 rotated 45 degrees opp to each other
Step 2
Step 2- Bring them closer such the edges are touching the corners of the center rectangle
Step 3
Step 3 – Make sure the edges are touching the corner of the rectangle properly.
Step 4
Step 4 – Change the color of Blue to White. Voila!!

Following the steps above, it is pretty clear how we are going to create our Trapezoid Background.

In this Style, we will be additionally using the tag layer-list, which is responsible for holding multiple shapes together.

Once we are sure how we are going to create our Trapezoid, the below layer-list is achieved.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- Colored rectangle-->
    <item>
        <shape android:shape="rectangle">
            <padding android:top="35dp"/>
            <size android:width="200dp" android:height="40dp" />
            <solid android:color="#123321" />
        </shape>
    </item>

    <!-- This rectangle for the right side -->
    <!--Make it same as your layout background-->
    <item
        android:right="-200dp"
        android:left="200dp"
        android:top="-200dp"
        android:bottom="-200dp">
        <rotate android:fromDegrees="45">
            <shape android:shape="rectangle">
                <padding android:top="-5dp"/>
                <solid android:color="#fff" />
            </shape>
        </rotate>
    </item>
    <!-- This rectangle for the left side -->
    <item
        android:right="200dp"
        android:left="-200dp"
        android:top="-200dp"
        android:bottom="-200dp">
        <rotate android:fromDegrees="-45">
            <shape android:shape="rectangle">
                <padding android:top="-35dp"/>
                <solid android:color="#ffffff" />
            </shape>
        </rotate>
    </item>
</layer-list>

Include this as the background in your button, and its done!

You can play around with the shape and create much more complex shaped backgrounds, it will be really cool to see your styles in the comments below.

“Learn and Be curious”

Also Read  Android Shared Preferences - Implementation & Design Patterns

Leave a Comment

Your email address will not be published. Required fields are marked *