How to make an underline below TextView and EditText in Android

Question

I want to achieve something like this, I am able to do just TextView but with EditText adjacent to it, I am stuck.

Here is my code so far -

Drawable -

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="line">
    <stroke android:color="#3F51B5" android:width="2dp"/>
    <padding android:top="-30dp" />
</shape>

Layout -

                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:background="@drawable/signup_screen_input_field"
                android:layout_marginTop="20dp"
                android:orientation="horizontal">

            <TextView
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:padding="5dp"
                    android:text="UserName"
                    android:textColor="@android:color/black"/>

            <EditText
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@android:color/transparent"
                    android:gravity="center"
                    android:hint="John Doe"
                    android:padding="5dp"
                    android:textColor="@android:color/white"
                    android:textColorHint="@android:color/white"/>

        </LinearLayout>

Also my code is hacky, which isn't good. The image of what I am trying to achieve -

check [this](https://stackoverflow.com/questions/9915793/shape-drawable-as-background-a-line-at-the-bottom) — Mohammed Alaa, Jan 03 '20 at 20:58

davidm · Answer 1 · 2020-01-03T11:30:14.793

This view should draw a full width line under your TextView and EditText.

<View 
   android:layout_width="fill_parent"
   android:layout_height="1dp"       
   android:background="#00ffff" />

The layout XML should look as follows

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:orientation="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:padding="5dp"
            android:text="@string/username"
            android:textColor="@android:color/black" />

        <EditText
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:hint="@string/john_doe"
            android:padding="5dp"
            android:textColor="#ff0000"
            android:textColorHint="#ff0000" />

    </LinearLayout>

    <View
        android:layout_width="fill_parent"
        android:layout_height="1dp"
        android:background="#00ff00" />

</LinearLayout>

Below you can see how it looks, of course don't forget to change the colors.

I edited my answer I hope now it works as expected, You have to add another vertical LinearLayout... If you have multiple ViewGroups consider to use a Constraint Layout which can easily flat your XML structure. — davidm, Jan 03 '20 at 11:32

How to make an underline below TextView and EditText in Android

1 Answers1