Android: как создать пользовательский интерфейс TextInputLayout

Question

Я пытаюсь создать пользовательский TextInputLayout. Как я могу создать ниже пользовательский TextInputLayout?

Любая помощь или руководство будут высоко оценены.

Answer 1

Просто используйте TextInputLayout, предоставленный Библиотекой компонентов материалов .

Что-то вроде:

    <com.google.android.material.textfield.TextInputLayout
       app:boxBackgroundColor="@color/...."    
       app:boxStrokeColor="@color/..."
       android:hint="..."
       ..>

         <com.google.android.material.textfield.TextInputEditText
           ../>

    </com.google.android.material.textfield.TextInputLayout>

О закругленных углах :

Поведение по умолчанию для FilledBox (Widget.MaterialComponents.TextInputLayout.FilledBox) - округленное полев верхних углах (4dp) и прямоугольной рамке в нижней части (0dp), как вы можете видеть на изображении выше.
Если вы хотите округлую коробку, я предлагаю вам использовать стиль OutlinedBox:

 <com.google.android.material.textfield.TextInputLayout
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    ..>

Результат:

В противном случае вы можете использовать обходной путь, подобный этому (мне это не нравитсяпоскольку оно нарушает норматив материала):

<com.google.android.material.textfield.TextInputLayout       
app:shapeAppearanceOverlay="@style/Rounded_ShapeAppearanceOverlay.MaterialComponents.TextInputLayout.FilledBox"
            app:boxStrokeWidth="0dp"
            app:boxStrokeColor="yourActivityBackgroundColor"
            ..>

, где атрибут app:shapeAppearanceOverlay изменяет форму нижних углов:

  <style name="Rounded_ShapeAppearanceOverlay.MaterialComponents.TextInputLayout.FilledBox" parent="">
    <item name="cornerSizeBottomLeft">@dimen/mtrl_shape_corner_size_small_component</item>
    <item name="cornerSizeBottomRight">@dimen/mtrl_shape_corner_size_small_component</item>
  </style>

, где mtrl_shape_corner_size_small_component=4dp

Answer 2

попробуйте как показано ниже

  <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".Main2Activity"
        android:orientation="vertical"
        android:background="#d4d4d4"
        android:weightSum="1">

      <com.google.android.material.textfield.TextInputLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:hint="fullname"

          android:background="#FFFFFF"
          android:layout_margin="10dp"
          android:padding="10dp"
          >
          <com.google.android.material.textfield.TextInputEditText
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:text="Aalina Rodgers"
              android:padding="10dp"/>
      </com.google.android.material.textfield.TextInputLayout>
        <com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="fullname"
            android:background="#FFFFFF"
            android:layout_margin="10dp"
            android:padding="10dp"
            >
            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Aalina Rodgers"
                android:padding="10dp"/>
        </com.google.android.material.textfield.TextInputLayout>
        <com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="fullname"
            android:background="#FFFFFF"
            android:layout_margin="10dp"
            android:padding="10dp"
            >
            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Aalina Rodgers"
                android:padding="10dp"/>
        </com.google.android.material.textfield.TextInputLayout>
    </LinearLayout>