材料设计输入文本

时间:2016-10-19 00:13:06

标签: android android-layout material-design

有没有办法创建一个看起来像这个图像上的输入字段 - 左边的图标,右边的输入 - 只使用默认的TextInputLayout

我尝试了几种组合,图标始终位于TextInputEditText内。我已经尝试将TextInputLayout方向更改为水平,但它也不起作用。无论如何在没有将ImageViewEditText置于另一个ViewGroup内的情况下执行此操作?

以下是我用来创建输入字段的代码,但图标仍保留在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>

Material Design Input Text

1 个答案:

答案 0 :(得分:2)

这符合要求吗? :

<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