Customize Text Input Layout

Question

I want to apply border to TextInputLayout as shown in image.

right now i have implemented like this.

but, I want as following as shown in image (i.e. label is placed within border).

The code i have implemented for EditText is as below.

<customviews.MyEditText
             android:id="@+id/email"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:background="@drawable/edittext_border_background"
             android:layout_marginEnd="30dp"
             android:layout_marginStart="30dp"
             android:layout_marginTop="45dp"
             android:gravity="start"
             android:hint="@string/hint_username"
             android:imeOptions="actionNext|actionDone"
             android:inputType="textEmailAddress|text"
             android:padding="10dp"
             android:textColor="@color/primary_text"
             android:textColorHint="@color/secondary_text"
             android:textSize="16sp"
            />

and, for border i have applied background editetext_border_background.xml is as follow

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:padding="20dp">
    <solid android:color="#FFFFFF"/>
    <corners
        android:bottomRightRadius="0dp"
        android:bottomLeftRadius="0dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="0dp"/>
    <stroke 
        android:width="1dip"
        android:color="@color/primary" />

</shape>

when I tried to apply border to TextInputLayout it doesn't give expected output.

Can anyone help me??

try adding android:top="16dp" on your shape tag in your drawable. — mudit_sen, Nov 08 '17 at 05:38
I think you need to find top y position of each custom EditText and try to move place holder label to that position additional provide some static margin to show label into border centre. — Haresh Chhelana, Nov 08 '17 at 05:48
can you please try this : https://stackoverflow.com/a/46564875/1343788 — Mehul Kabaria, Nov 08 '17 at 05:50
Possible duplicate of [Rounded rectangle background editext with hint in left top of background border](https://stackoverflow.com/questions/46564749/rounded-rectangle-background-editext-with-hint-in-left-top-of-background-border) — Ratilal Chopda, Nov 08 '17 at 05:51
This is the answer https://stackoverflow.com/a/46567677/3983054 — King of Masses, Nov 08 '17 at 05:52
I found my answer here : https://stackoverflow.com/a/45012947/8730233 — Riddhi Daftary, Nov 09 '17 at 13:30

score 10 · Answer 1 · answered Sep 03 '18 at 11:53

10

You should use Material Design style for Outline Box. Just simple use:

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

in TextInputLayout. See Text Field for Android in Material Design Guide

answered Sep 03 '18 at 11:53

Francis

5,871
3
42
59

score 0 · Answer 2 · answered Nov 08 '17 at 05:46

With "android:state_focused" option, you can archive your goal.

Details: https://stackoverflow.com/a/23417544/850347

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

<item android:state_enabled="true"
        android:state_focused="true">
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle"
        android:padding="20dp">
        <solid android:color="#FFFFFF"/>
        <corners
        android:bottomRightRadius="0dp"
        android:bottomLeftRadius="0dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="0dp"/>
    <stroke 
        android:width="1dip"
        android:color="#0000FF" />

</shape>
</item>
<item android:state_enabled="true">
          <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle"
        android:padding="20dp">
        <solid android:color="#FFFFFF"/>
        <corners
        android:bottomRightRadius="0dp"
        android:bottomLeftRadius="0dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="0dp"/>
    <stroke 
        android:width="1dip"
        android:color="@color/primary" />

</shape>
</item>

And, in java code:

editText.setBackgroundResource(R.drawable.yourFile);

With this we can only change the color of edittext but the QA needs some different behavior as mentioned in question — King of Masses, Nov 08 '17 at 05:49
@KingofMasses this is duplicate question you should close it — Ratilal Chopda, Nov 08 '17 at 05:54

score 0 · Answer 3 · answered Nov 08 '17 at 07:58

Change color and border as per your use and where ever in any of your views where you want to apply this border and it in background property like... android:background="@drawable/border"

Use this code to make drawable file with name border in android drawable folder in resource directory.

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
   <solid android:color="#ffffff" />
    <stroke
       android:width="1dip"
       android:color="#000000" />
    <corners android:radius="4dip" />
    <padding
        android:bottom="0dip"
        android:left="0dip"
        android:right="0dip"
        android:top="0dip" />
</shape>

score 0 · Answer 4 · answered Nov 21 '19 at 13:16

This will work 'hint' is inside in box .I  changed this property and add roundbox in background
  app:boxBackgroundMode="none" and app:boxCollapsedPaddingTop="5dp"
This is layout and change design according to your need.

<com.google.android.material.textfield.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="52dp"
                android:layout_marginTop="30dp"
                android:background="@drawable/round_box"
                app:boxBackgroundMode="none"
                app:boxCollapsedPaddingTop="5dp">
                <com.google.android.material.textfield.TextInputEditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@null"
                    android:gravity="center_vertical"
                    android:hint="hint"
                    android:inputType="textMultiLine"
                    android:maxLines="6"
                    android:paddingStart="5dp"
                    android:textSize="14dp" />
            </com.google.android.material.textfield.TextInputLayout>

round_box.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/listview_background_shape">
    <stroke android:width="2dp"
        android:color="#000000"
        />
    <padding android:left="2dp"
        android:top="2dp"
        android:right="2dp"
        android:bottom="2dp" />
    <corners android:radius="4dp" />
    <solid android:color="#2C000000" />
</shape>

    enter code here

sorry for my bad english

Customize Text Input Layout

4 Answers4