How to create a circular EditText View in android

You obsrved several app use the Circlular View with rounded corner for taking user input edittext. In this post we are going to explore to create a Circular EditText view for user input. Let's start the creation of the Circular EditText View.

Create The Circlular EditText Demo Project

Creating the new project is everyday work if you are a mobile app developer, but just adding steps who is new in the android mobile app development.

For creating the new project go to the File menu in android studio and click on File -> New-> New Project. In the next windows select the Activity Type I will in this demo will select Empty Activity. Choose the Application name like Circle EditText Demo and Finish.

Attach the EditText and Button to layout

Now, We need to create an EditText and Button into the main layout located inside the res->layout directory.

Circular Image View Project

Now, add the EditText and button to the activity_main.xml. In this example, androidx is used so you can migrate to androidx or modify the layout like below.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <androidx.appcompat.widget.AppCompatEditText
            android:layout_marginTop="16dp"
            android:hint="Ready to be Circular"
            android:id="@+id/circular_edit_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="12"
            android:textSize="24sp"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>
    <Button

            android:text="Click Me"
            style="?android:attr/borderlessButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/btn_click_me"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:textSize="18sp"
            android:textColor="@color/colorPrimary"
            app:layout_constraintTop_toBottomOf="@+id/circular_edit_text"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Create Background Drawable Resource for Circular EditText

So far we have created simple EditText and button and we need to create a background drawable resource to convert the normal editText to a Circular EditText.

First of all, create a background resource file with rectangle shape like below.

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
</shape>

Create the border of the shape. If you want no border just set the width to 0dp.

  <stroke
    android:width="2dp"
    android:color="@color/colorPrimary"
    />

Round the corner of the rectangle. You can change the radius as per requirement.

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

Now, We will add some padding to the shape.

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

Set the background color of the background drawable.

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

Below is the complete circular_edit_text.xml

<!-- circular_edit_text.xml-->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
    <stroke
    android:width="2dp"
    android:color="@color/colorPrimary"
    />
    <corners
    android:radius="360dp"
    />
    <padding
    android:left="10dp"
    android:right="10dp"
    android:bottom="5dp"
    android:top="5dp"
    />
<solid
android:color="#FFFFFF"
/>
</shape>

So, we have created our background resource for our circular EditText now set it as the background of the EditText.

 android:background="@drawable/circular_edit_text"

Let's run the project and check the view now we have circular EditText as per the above image. Some description of the background resource file as given below so that you can customize it as per requirement.

Borderless Circular EditText

As described above we can create the borderless Circular EditText as well by just making the stoke to 0dp.

Create Circular TextView

For creating the circular text view we just need to set the created drawer as background like below.

<androidx.appcompat.widget.AppCompatTextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="@string/dummy_string"
        android:id="@+id/circular_text"
        android:ems="12"
        android:gravity="center"
        android:textSize="16sp"
        android:layout_marginStart="24dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:background="@drawable/circular_edit_text"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginLeft="24dp"/>

Wrapping Up

So for creating the custom background of any type of view we need to create the background drawable and set it as the background of the View. What we have done is create a TextView, EditText, and Button as normal View. Then we have to change the background of that view in the XML layout file.