材料设计输入文字

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>

Answer 1

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: