Open In App

How to Make a Layout with Rounded Corners in Android?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn about How we can Make a Layout With rounded corners with the help of Drawables. We can create and use any type of shape for different UI Components because of the Flexibility of the Android. Various attractive designs for creating user interfaces can be created using a layout with rounded corners like: 

  1. For login Design
  2. For designing Cards in Cardview
  3. For chat app for showing the messages.
  4. To Make an attractive Bottom Sheet as we see in Many Apps.

So let’s start with the implementation, In this article, we will design a Simple Login Screen with a Rounded Shaped Layout.

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Project just refer to this article on How to Create New Project in Android Studio. The code can be implemented in both Java and Kotlin Programming Language for Android.

Step 2: Working with XML Files.

Firstly we will create a Simple Drawable file For The Rounded Shape.

Go to res > drawable folder > Right Click on it and click on New > Drawable Resource file. In a pop up fill the Required details like file name And root element as shape(shown below image)

rounded_login_ui.xml

XML




<?xml version="1.0" encoding="utf-8"?>
    android:shape="rectangle" >
    
    <!-- shape property for the view based on the value particular view would be drawn -->
    <corners
        android:radius="25dp" />
    <stroke android:width="0.9dp"
        android:color="@color/black" />  
    <!--  stroke for defining a border for view -->
    
    <size
        android:height="40dp"
        android:width="40dp" />
    <!-- size element is used to define a design here height & width are same means square with some radius -->
</shape>


activity_main.xml

XML




<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="#1976D2" >
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="Login"
        android:textColor="#689F38"
        android:textSize="50dp"
        android:textStyle="bold|italic" />
  
    <RelativeLayout
        android:layout_width="360dp"
        android:layout_height="360dp"
        android:layout_centerInParent="true"
        android:layout_marginStart="?actionBarSize"
        android:layout_marginEnd="?actionBarSize"
        android:alpha="0.5"
        android:background="@drawable/rounded_login_ui"
        android:backgroundTint="#B3B1B1"
        android:elevation="60dp" >
  
        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/password"
            android:layout_width="240dp"
            android:layout_height="40dp"
            android:layout_below="@id/username"
            android:layout_centerInParent="true"
            android:layout_margin="10dp"
            android:alpha="0.4"
            android:background="@color/black"
            android:hint="password"
            android:inputType="textPassword"
            android:textColorHint="@color/black" />
  
        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/username"
            android:layout_width="240dp"
            android:layout_height="40dp"
            android:layout_centerInParent="true"
            android:alpha="0.4"
            android:background="@color/black"
            android:hint="username"
            android:inputType="textPersonName"
            android:textColorHint="@color/black" />
  
        <com.google.android.material.button.MaterialButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/password"
            android:layout_centerInParent="true"
            android:alpha="1"
            android:layout_marginTop="35dp"
            android:background="@color/white"
            android:backgroundTint="@color/white"
            android:text="submit" />
  
    </RelativeLayout>
</RelativeLayout>


Since there is no change in the Java/Kotlin MainActivity File, we’ve only provided the XML File Code.

In the above File, we have used an inner Relative layout with the drawable file we have set the background property of the inner relative layout as rounded_shape drawable so according to that file, the layout would be drawn on the screen.

We have also removed the action bar from the main activity by defining android:theme=”@style/Theme.MaterialComponents.NoActionBar” inside the manifest.xml file for the main activity.

Output:

Layout with Rounded Corners in Android

 



Last Updated : 15 Jul, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads