Material Design Input Text

Question

Is there a way to create an input field that looks like the ones on this image - Icon on the left, input on the right - using only the default TextInputLayout?

I've tried several combinations, and the icon always stays inside the TextInputEditText. I've tried changing the TextInputLayout orientation to horizontal but it didn't work as well. Is there anyway of doing this without placing an ImageView and an EditText inside of another ViewGroup?

Below is the code I used to create an input field, but with the icon remains inside the TextInputEditText.

<android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Test"
        >
        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableStart="@drawable/ic_bank_card_back_grey_24dp"
            android:drawablePadding="@dimen/default_padding"            
            />
    </android.support.design.widget.TextInputLayout>

I would assume that's a `TableLayout`, with three columns for icon, field, and `Spinner`, but use `uiautomatorviewer` to examine the structure of that UI and find out. — CommonsWare, Oct 19 '16 at 00:21
might help http://stackoverflow.com/questions/3554377/handling-click-events-on-a-drawable-within-an-edittext — zombie, Oct 19 '16 at 00:23

score 2 · Answer 1 · answered Oct 19 '16 at 00:57

2

Does this fit the bill ? :

<android.support.design.widget.TextInputLayout
    android:id="@+id/TextInputLayout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >  

    <android.support.v7.widget.AppCompatEditText
        android:id="@+id/EditText1"
        android:hint="code"
        android:text="0044"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:imeOptions="actionNext"
        android:inputType="phone"
        android:minWidth="350dp"
        android:drawableLeft="@drawable/cross"
        android:drawableStart="@drawable/cross"
        android:textColor="#00ff00"
        android:textColorHint="#ff0000"
        android:textCursorDrawable="@null"
        />
</android.support.design.widget.TextInputLayout>

image from code:

answered Oct 19 '16 at 00:57

Jon Goodwin

9,053
5
35
54

Nop. This is the same as I did. If you look at the attached image, you can see that there's no underline on the icon. I can achieve something similar using a LinearLayout and an ImageView, but I think there's a better way of doing this. Any other thoughts? – Jefferson Tavares Oct 19 '16 at 01:09
@JeffersonTavares That's just how compound drawables work in `EditText`s. To change that behavior, you'd have to subclass the `EditText` class you're using, or do some rather clunky reflection, or use some padding hack on the background drawable, etc. It's just easier to use a separate `ImageView`, which is what the image you've posted appears to be doing. – Mike M. Oct 19 '16 at 01:55
Thanks man. I'm gonna close this question because it won't be of much help to other users. As the TextInputLayout inherits from LinearLayout, it should be a simple and easy task to wrap an ImageView and an EditText inside of it, but sometimes things just doesn't work as expected, I guess xD – Jefferson Tavares Oct 19 '16 at 11:19
Yes @Mike M is right, I thought you had some kind of bug with padding (text over writing image). So android.support.v7.widget.AppCompatEditText might have helped (I did not spot you were already using it, it was very late at night ;O)). It (EditText) is functioning as I expect it to. Yes do as you yourself suggest, it's more flexible anyway. – Jon Goodwin Oct 19 '16 at 14:50

Material Design Input Text

1 Answers1