How do I create an input box using Android's Layout mechanism?

Question

Using Android's Layout mechanism, how do I create an input box with the password icon, and a split between the icon and the input field, as shown below? I'd like to have the border around the input field as well.

score 1 · Answer 1 · answered Sep 10 '19 at 11:46

1

you can use imageview and an edit text inside a layout like this

<RelativeLayout
        android:layout_width="@dimen/_280sdp"
        android:layout_height="@dimen/_30sdp"
        android:id="@+id/rl_password"
        android:layout_centerHorizontal="true">
        <ImageView
            android:layout_width="@dimen/_15sdp"
            android:layout_height="@dimen/_15sdp"
            android:src="@drawable/key"
            android:layout_centerVertical="true"
            android:id="@+id/iv_password"/>
        <EditText
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:hint="Password"
            android:layout_toRightOf="@+id/iv_password"
            android:layout_centerVertical="true"
            android:background="#00000000"
            android:layout_marginLeft="@dimen/_8sdp"/>
</RelativeLayout>

answered Sep 10 '19 at 11:46

Rishabh Sehgal

21
9

i want a line as well as border around all of it. – Kush Pandya Sep 10 '19 at 11:54
for border there are several methods, but i'll suggest you making a custom drawable. you can search google for best suitable method for you i.e., here's a link to recommended method https://stackoverflow.com/questions/15111402/how-can-i-create-a-border-around-an-android-linearlayout – Rishabh Sehgal Sep 10 '19 at 11:57
and to add a line as separator (not as in this picture), you can use tag in your XML file – Rishabh Sehgal Sep 10 '19 at 11:58
I know this way but is there another better way to do it like direct through some xml vector file? and please see image properly there is a line in between text and icon. @Rishbh Sehgal – Kush Pandya Sep 10 '19 at 12:00
hey i suggested you the best possible way, just check with the link i shared, and yeah i saw the image properly , you just need to implement some logic in your xml designs and thats all done. – Rishabh Sehgal Sep 10 '19 at 12:16

score 0 · Answer 2 · answered Sep 10 '19 at 11:46

0

Sorry, but you will not find a tutorial here. we guys here don't put tutorial if you have any problem in implementing your code you can ask. for now, you can watch this tutrial may help.

answered Sep 10 '19 at 11:46

Rajat Tyagi

101
2
4

score 0 · Accepted Answer · answered Sep 10 '19 at 16:25

Try This ....

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:background="@drawable/background"
        android:layout_margin="40dp">

        <ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:padding="10dp"
            android:src="@drawable/your_image" />

        <View
            android:id="@+id/view"
            android:layout_width="1dp"
            android:layout_height="match_parent"

            android:background="#dbdbdb" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Password"
            android:padding="10dp"
            android:inputType="textPassword"
            android:background="@android:color/transparent"/>
    </LinearLayout>

@drawable/background.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#fafafa" />
            <corners android:radius="2dp" />
            <stroke android:width="1dp" android:color="#dbdbdb" />
        </shape>
    </item>

</selector>

How do I create an input box using Android's Layout mechanism?

3 Answers3