TextField in Material Design UI Android

Question

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!

score 1 · Accepted Answer · answered Apr 16 '21 at 07:24

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>

Furqan · Answer 2 · 2021-04-16T09:50:11.613

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>

TextField in Material Design UI Android

2 Answers2