Android Material Edit Text endIcon

Question

I've added an EditText view from Google's material library and set the endIcon mode to clear_text. However, the endIcon is too big (it fits the text view entirely), whereas, from looking at the documentation, I believe it should be a little smaller. I tried to play around with the layout XML but can't seem to find out why this is. I've also looked at the endIcon attributes in the Material repository and there seems to be no endIconSize attribute. I'd appreciate it if someone could point out where I made the mistake.

TextView XML

<com.google.android.material.textfield.TextInputLayout
android:id="@+id/descriptionTextField"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:boxBackgroundColor="@android:color/white"
app:boxStrokeColor="@color/colorSecondaryLight"
app:boxStrokeWidth="2dp"
app:endIconMode="clear_text"
app:errorEnabled="false"
app:layout_constraintBottom_toBottomOf="@+id/taskConfirmedBtn"
app:layout_constraintEnd_toStartOf="@+id/taskConfirmedBtn"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/taskConfirmedBtn">

<com.google.android.material.textfield.TextInputEditText
  android:id="@+id/descriptionInput"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:fontFamily="sans-serif"
  android:inputType="textCapSentences"
  android:singleLine="true"
  android:textColor="@color/colorOnSurface" />

Styles xml

<resources>
<!-- Base application theme -->
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<item name="android:colorBackground">@color/background</item>

<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryVariant">@color/colorPrimaryLight</item>
<item name="colorOnPrimary">@color/colorOnPrimary</item>

<item name="colorSecondary">@color/colorSecondary</item>
<item name="colorSecondaryVariant">@color/colorSecondaryLight</item>
<item name="colorOnSecondary">@color/colorOnSecondary</item>

<item name="toolbarStyle">@style/Widget.Taskeroo.Toolbar</item>
<item name="actionBarTheme">@style/Widget.Taskeroo.ActionBar</item>
<item name="floatingActionButtonStyle">@style/Widget.Taskeroo.FloatingActionButton</item>
<item name="imageButtonStyle">@style/Widget.Taskeroo.ImageButton</item>
<item name="materialCardViewStyle">@style/Widget.Taskeroo.CardView</item>
<item name="bottomSheetDialogTheme">@style/CustomBottomSheetDialog</item>

<item name="android:textViewStyle">@style/SanSerifLightTextView</item>
<item name="android:buttonStyle">@style/SansSerifLightButton</item>
<item name="android:radioButtonStyle">@style/SansSerifLightButton</item>

</style>

<!-- Themes -->

<style name="SplashScreenTheme" parent="AppTheme.NoActionBar">
<item name="android:windowBackground">@drawable/splash_screen_bitmap</item>
</style>

<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

<style name="AppTheme.NoActionBar.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

<style name="AppTheme.NoActionBar.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

<!-- Widgets -->

<style name="Widget.Taskeroo.ActionBar" parent="Widget.MaterialComponents.ActionBar.Primary">
<item name="android:colorControlNormal">@color/colorOnPrimary</item>
<item name="android:iconTint">@color/colorOnPrimary</item>
</style>

<style name="Widget.Taskeroo.Toolbar" parent="Widget.MaterialComponents.Toolbar.Primary">
<item name="titleTextColor">@color/colorOnPrimary</item>
</style>

<style name="Widget.Taskeroo.FloatingActionButton" parent="Widget.MaterialComponents.FloatingActionButton">
<item name="android:backgroundTint">@color/colorSecondaryLight</item>
<item name="tint">@color/colorOnSecondary</item>
</style>

<style name="Widget.Taskeroo.CardView" parent="Widget.MaterialComponents.CardView">
<item name="cardBackgroundColor">@color/colorSurface</item>
<item name="cardElevation">10dp</item>
<item name="android:elevation">8dp</item>
</style>

<style name="DividerStyle">
<item name="android:background">@color/colorSecondary</item>
</style>

<style name="Widget.Taskeroo.ImageButton" parent="Widget.AppCompat.Button.Borderless.Colored">
<item name="tint">@color/colorSecondary</item>
</style>

<!-- Components -->

<style name="CustomBottomSheetDialog" parent="@style/ThemeOverlay.MaterialComponents.BottomSheetDialog">
<item name="bottomSheetStyle">@style/CustomBottomSheet</item>
</style>

<style name="CustomBottomSheet" parent="Widget.MaterialComponents.BottomSheet">
<item name="shapeAppearanceOverlay">@style/CustomShapeAppearanceBottomSheetDialog</item>
<item name="backgroundTint">@color/colorSurface</item>
</style>

<style name="CustomShapeAppearanceBottomSheetDialog" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSizeTopRight">16dp</item>
<item name="cornerSizeTopLeft">16dp</item>
<item name="cornerSizeBottomRight">0dp</item>
<item name="cornerSizeBottomLeft">0dp</item>
</style>

<!-- Fonts -->

<style name="SanSerifLightTextView" parent="android:Widget.TextView">
<item name="android:fontFamily">sans-serif-light</item>
</style>

<style name="SansSerifLightButton" parent="android:Widget.Holo.Button">
<item name="android:fontFamily">sans-serif-light</item>
</style>

<style name="SansSerifLightRadioButton" parent="android:Widget.Holo.CompoundButton.RadioButton">
<item name="android:fontFamily">sans-serif-light</item>
</style>

<style name="AppTheme.NoActionBar.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
</resources>

Answer 1

Try this solution in your_view.xml

     <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/til_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:errorEnabled="true"
            app:hintEnabled="false"
            app:passwordToggleDrawable="@drawable/show_password_selector" <-- add this line
            app:endIconMode="password_toggle" <-- add this line
            app:passwordToggleEnabled="true"> <-- add this line

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/et_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/hint_password"
                android:inputType="textPassword"/>

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

You can also use this solution for the start icon

I hope help

Answer 2

Your issue is here:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
   <item name="imageButtonStyle">@style/Widget.Taskeroo.ImageButton</item>
</style>

<style name="Widget.Taskeroo.ImageButton" parent="Widget.AppCompat.Button.Borderless.Colored">
    <item name="tint">@color/colorSecondary</item>
</style>

You are using Widget.AppCompat.Button.* instead of Widget.AppCompat.ImageButton.

The style Widget.AppCompat.Button.Borderless.Colored has a custom dimens.

Answer 3

try this--> Add dependency: Gradle:

allprojects {
repositories {
  ...
  maven { url 'https://jitpack.io' }
}
}

dependency:

implementation 'com.github.HITGIF:TextFieldBoxes:1.4.3'

Use app:endIcon in xml or setEndIcon(Int resourceID) to set the icon of the ImageButton that is shown at the end of the field if you want there to be one.

<studio.carbonylgroup.textfieldboxes.TextFieldBoxes
...
app:endIcon="@drawable/ic_mic_black_24dp"
>

in java:

final TextFieldBoxes textFieldBoxes = findViewById(R.id.text_field_boxes);
textFieldBoxes.getEndIconImageButton().setOnClickListener(new 
View.OnClickListener() {
@Override
public void onClick(View view) {
    // What you want to do when it's clicked
}
});

Answer 4

Change the code like this :

<com.google.android.material.textfield.TextInputLayout 
    app:endIconDrawable="@drawable/customDrawable"> 
    ...
</com.google.android.material.textfield.TextInputLayout>

where custom drawable, is a vector/png image of any shape and size you will define.

If this still doesn't solve your problem, try downgrading to :

implementation 'com.google.android.material:material:1.0.0'

Most probably it will solve your problem.