How to round the input text in EditText in Android

Question

I want to have an EditText in Android which I can see the previous input in rounded box with the ability to remove it. Besides, I can write a new input and save it like the following image.

Answer 1

You may use nested views and add them dynamically. You don't have to show the tags in the EditText, instead, you could try to make a layout that contains the EditText and add TextViews dynamically into it. You can set a boarder as the background for the layout. You may define the border in the res/drawable folder and assign it to the layout that contains the tags and your EditText. And it would look like the picture you provided. The border.xml could be like this, you may play with the params:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <stroke android:width="2dp"
        android:color="#80FFFFFF" />
    <corners android:radius="5dp" />
</shape>

Then you need to define the layout of the 'rounded box', we name it layout_tag.xml, which can be a simple LinearLayout with a customised background, i.e. the box. It should be very similar to the way you decorate the outer layout. The layout_tag.xml may contain a TextView. You may also add an ImageView or a button with the delete icon after the TextView and wrap these two views in your layout_tag.xml.

Then you need to add them dynamically into the search field layout, which you could find plenty of posts to help, such as: Android: add a TextView to LinearLayout programatically.

In the above link, you may adjust the first piece of code block to your layout_tag.xml. The second piece of code tells you how to add the layout_tag dynamically into your outer layout, i.e. the container of the Tags.

At last, you can wire this up whenever a user submits a tag, also remember to add an OnClickListener on the delete image/button.