Custom Design for EditText in XML

Question

I want to get this design in android xml, not exactly but something close to it. I'm still new to android so please be more specific in your appreciated answers.

Custom EditText

tried using custom background to get closer to the design above, but couldn't keep that label on top of Input Field.

Thanks

Answer 1

You can use the TextInputLayout by Material Design, which is the recommeded design guidelines for Android by Google.

You can read more about the different TextInputLayout Designs here.

Add material design dependency to the app level module of your application.

implementation("com.google.android.material:material:1.9.0")

Create a round-corner border for the background in res/drawable folder

<?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="@android:color/holo_blue_dark" />
    <corners android:radius="12dp" />
</shape>

Create a TextInputLayout and apply the rounded background drawable. Set the hint to text you want to show as label. Initially it will show as hint, but as you start typing it will animate to top and and will show as label like you want.

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/textField"
        android:layout_width="match_parent"
        app:boxBackgroundMode="none"
        android:paddingTop="16dp"
        android:textColorHint="@android:color/holo_blue_dark"
        app:hintTextColor="@android:color/holo_blue_dark"
        android:layout_centerInParent="true"
        android:layout_marginHorizontal="12dp"
        android:background="@drawable/round_border_bg"
        android:layout_height="wrap_content"
        android:hint="Email Address">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:paddingTop="8dp"
            android:layout_height="wrap_content" />
    </com.google.android.material.textfield.TextInputLayout>

Sample Output:

Normal - text shows as hint

When user inputs - text is shown as label