Give Rounded Corners to Views and Layouts in Android

You can give your Android views and layouts rounded corners, borders, solid fill colors and even create circles by making a drawable and implementing it in XML.

Rounded Corners with Transparent Inside

Our first step is to create a new Drawable Resource File of type shape. To do that right click on drawable (under resources), choose New, choose Drawable Resource File.

Name the resource rounded_blue_border and make the root element shape.

Android View > drawable > New > Drawable Resource File > shape

We will use the attributes stroke, corners and padding.

• The stroke determines the width and color of the border.

• The corner radius determines how curved the corners are. A smaller number makes them more square, a larger number more circular.

• The padding adds a blank space between a view and its contents.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
        
        // The width and color of the border  
        <stroke
            android:width="4dp"
            android:color="#52B1E5" />

        // The corner radius, reduce it to make it more square                    
        <corners android:radius="360dp"/>

         // Add your desired padding
        <padding
            android:left="20dp"
            android:top="10dp"
            android:right="20dp"
            android:bottom="10dp" >

        </padding>
</shape>

Applying the Border to a Layout or View

Set the above drawable as a background to your View or Layout for example a Button, LinearLayout, FrameLayout, TextView, etc.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Rounded border transparent inside"
        android:textSize="32sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_margin="40dp"
        android:gravity="center"
        android:background="@drawable/rounded_blue_border"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Less Rounded Corners

To make less rounded corners reduce the radius in the Drawable Resource File. The example to the left has a corner radius of 15dp.

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

    <stroke
        android:width="4dp"
        android:color="#52B1E5" >
    </stroke>

    <corners
        android:radius="15dp"/>

    <padding
        android:top="10dp"
        android:bottom="10dp"
        android:left="20dp"
        android:right="20dp"/>
</shape>

Rounded Corners with Color Inside

To give your shape's background a solid fill color, include the <solid/> element and the color attribute with a color resource or a hexadecimal value.

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

    <solid
        android:color="#52B1E5"/>

    <corners
        android:radius="360dp"/>

    <padding
        android:top="10dp"
        android:bottom="10dp"
        android:left="20dp"
        android:right="20dp"/>

</shape>

BONUS: Rounded Button that Changes Color When Pressed

Step 1:

To create a button with rounded corners that changes color when pressed you need to create a new Drawable Resource File of type "selector." You can name it rounded_button_selector. The code below makes a yellow button that turns dark pink when pressed.

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

    <item android:state_pressed="false">

        <shape android:shape="rectangle">

            <solid android:color="#F5CC46"/>

            <corners android:radius="24dp"/>

            <padding
                android:top="10dp"
                android:bottom="10dp"
                android:left="20dp"
                android:right="20dp"/>
        </shape>

    </item>

    <item
        android:state_pressed="true">

        <shape android:shape="rectangle">

            <solid android:color="#E35173"/>

            <corners android:radius="24dp"/>

            <padding
                android:top="10dp"
                android:bottom="10dp"
                android:left="20dp"
                android:right="20dp"/>
        </shape>

    </item>

</selector>

Applying the Selector to the Button

You may have an issue with your button's background color. It is important that in the xml file where you name your button you choose an AppCompatButton. Set the background to rounded_button_selector. Please see my activity_main.xml below:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.AppCompatButton
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Press for Color"
        android:textSize="32sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_margin="40dp"
        android:gravity="center"
        android:background="@drawable/rounded_button_selector" />

</androidx.constraintlayout.widget.ConstraintLayout>

BONUS: Making Circles

It is simple to create a circle in Android Studio. There is no need to implement it programmatically. It is done entirely in XML.

Step 1: Create a new Drawable Resource File name it circle. Make the root element shape.

Android View > drawable > New > Drawable Resource File > shape

The code below makes a dark pink oval.

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

    <solid
        android:color="#E35173"/>

</shape> 

Step 2: In your XML, create an ImageView. Set the android:layout_width and the android:layout_height to the same value. Set the android:src to "@drawable/circle"

See my activity_main.xml below:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    
    <ImageView
        android:layout_width="80dp"
        android:layout_height="80dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:src="@drawable/circle"/>

</androidx.constraintlayout.widget.ConstraintLayout>

You have a lot of options now. You can create a background inside the circle. You can make it clickable (i.e. a circular button). You can give it elevation and thereby create a shadow.

Explore what you can do and leave a comment with your favorite ideas.