Skip to main content

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>




Circular Edit Text without change




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"




Circular EditText  Wtih Border




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.


Comments

  1. You have shared a nice article here about the migrate to androidx. Your article is very informative and useful for those who are interested to know more about the process of creating a circular EditText View in android. Thank you for sharing this article here.

    ReplyDelete

Post a Comment

Popular posts from this blog

Flutter How to Start Android Activity from Flutter View

Flutter and Dart is an excellent combination for creating the UI, but for accessing the platform-specific service we need to open platform-specific activity. So lets in this article we will explore how to start an android activity and access the service from Flutter View. Create a Project for this Android Activity Flutter View Demo Create a Project From File menu select the New Flutter Project Enter the project name Select the AndroidX support and click on next After the above, we step click on Finish We will have the following project structure created. Create the Second Activity in Android Just go to the android folder and open it in separate windows. We will have the following project structure. Create the Activity Just right-click on the Kotlin folder and create a blank activity from the menu. If you create the activity then you may be required to upgrade the Gradle and do some import. So Just click on update and wait for the project s

WordPress Android App with REST API And Retrofit

Retrofit is the library which converts your JSON data into Java object. In this tutorial, we will learn about how to implement the Retrofit to create a WordPress Mobile App. As we all know, WordPress is the one of the biggest CMS (Content Management System) of the world. Wordpress full fill the requirements for all most every type of the website. So, in this tutorial, I am going to learn how to create an Android App using the WordPress REST API and Retrofit. What is Retrofit? If you want to know about Retrofit, I would like to give you just a simple one-line explanation of the Retrofit. It is a library which converts your REST HTTP request to Java interface. We will learn how we can do all these stuff using some very simple steps. Further, you can check the Retrofit Library here . So, In this tutorial, we will use the Retrofit to retrieve all post and there except ( A short Description of Post) form a WordPress website. Prerequisite for using the Retrofit for WordPress Android App Ther

Kotlin Parcelable Array Objects Send To Activity

We know that IPC (Inter Process Communication) between the activity is an extremely important part of any application development. We often required that we need to send some data to other activity. For example, we may be required to send an array of data, data could be an Integer, String, Long, Double, Float or any other custom data objects. So, In this example, we are going to learn how to implement the Kotlin Parcelable Array object to send the data from one activity to second activity. What is Parcel? The parcel class is designed as a high-performance IPC transport. A Parcel can contain both flattened data that will be unflattened on the other side of the IPC, and references to live IBinde r objects that will result in the other side receiving a proxy IBinder connected with the original IBinder in the Parcel. Create Kotlin Parcelable Array Objects Parcelable is API for placing the arbitrary objects into the Parcel. In Actual in android app development, Parcelable is an interface