TextField in Material Design UI Android

user_14343164 0
Viewed 143

I want to do a editext like below. I dont want to use TableRow to do this. Is there any way to do in Material Design TextField? I set background for TextInputEditText rounded shape.

There are some problem with my design.

  • first line I want to have more space between text and image.
  • second line picture and text not in the same line.
  • background of TextInputLayout cannot change.

Please help me. Thank in advance!

wantodo

android-textinputlayout material-components-android material-design textfield android
2 Answers

You can use:

       <com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:placeholderText="Name"
            app:startIconDrawable="@drawable/..."
            app:startIconTint="@color/...."
            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.rounded"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>

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

with:

<style name="ShapeAppearanceOverlay.App.rounded" parent="">
    <item name="cornerSize">50%</item>
</style>

enter image description here

user_20165620

This is how you can achieve using material design TextFiled

  • if you want more space between text and Image use

android:drawablePadding="16dp"

  • Set Text Gravity

android:gravity="center"

  • for round corner radius without out line border set style

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox" Blockquote

if you want to achieve round coroner border set

 app:boxCornerRadiusBottomEnd="32dp"
 app:boxCornerRadiusBottomStart="32dp"
 app:boxCornerRadiusTopEnd="32dp"
 app:boxCornerRadiusTopStart="32dp"

Below are the code snippet

  <com.google.android.material.textfield.TextInputLayout   
 style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:layout_marginStart="32dp"
                 android:layout_marginEnd="32dp"
                 app:boxCornerRadiusBottomEnd="32dp"
                 app:boxCornerRadiusBottomStart="32dp"
                 app:boxCornerRadiusTopEnd="32dp"
                 app:boxCornerRadiusTopStart="32dp"
                 app:boxStrokeColor="@color/color_red"
                 app:startIconDrawable="@drawable/ic_user">
 
                 <com.google.android.material.textfield.TextInputEditText
 
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
                     android:drawablePadding="16dp"
                     android:gravity="center"
                     android:hint="hint"
                     android:inputType="text" />
             </com.google.android.material.textfield.TextInputLayout>
user_42173460
Related