TextInputLayout endIcon background color

user_4037411 0
Viewed 3194

Is it possible to have background color only behind endIcon?

enter image description here

At the moment all I can do is only showing the custom icon.

enter image description here

Here the code I write to get current design.

<com.google.android.material.textfield.TextInputLayout
                android:id="@+id/date_of_birth_input_layout"
                style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="6dp"
                app:endIconDrawable="@drawable/ic_calendar"
                app:endIconMode="custom"
                app:endIconTint="@color/redText"
                app:endIconTintMode="multiply"
                app:hintEnabled="false"
                app:layout_constraintTop_toBottomOf="@id/date_of_birth_title">

                <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/date_of_birth_input"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="@dimen/activity_horizontal_margin"
                    android:layout_marginTop="6dp"
                    android:layout_marginEnd="@dimen/activity_horizontal_margin"
                    android:focusable="false"
                    android:fontFamily="@font/opensans_regular"
                    android:hint="@string/date_of_birth_hint"
                    android:imeOptions="actionNext"
                    android:inputType="text"
                    android:paddingLeft="10dp"
                    android:paddingTop="13dp"
                    android:paddingRight="10dp"
                    android:paddingBottom="13dp"
                    android:textSize="16sp" />
            </com.google.android.material.textfield.TextInputLayout>
android-textinputlayout material-components-android android
1 Answers

Add new calendar.xml to drawable

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:bottom="1.5dp"
    android:top="1.5dp"
    android:right="1.5dp"
    android:drawable="@drawable/background"
    android:gravity="center_horizontal|center_vertical"
    android:width="48dp"
    android:height="48dp"
    />
<item
    android:drawable="@drawable/ic_calendar"
    android:gravity="center_horizontal|center_vertical"
    android:width="36dp"
    android:height="36dp"
    />
</layer-list>

backgroud.xml like this:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle" >
<solid android:color="@color/red"  />
<corners android:bottomRightRadius="2.5dp" 
android:topRightRadius="2.5dp"/>
</shape>

and change like this:

app:endIconDrawable="@drawable/calendar"

enter image description here

if you get an error(vector) you should add this to build.gradle: 

defaultConfig {
    vectorDrawables.useSupportLibrary = true
}
user_89566040
Related