Question: TextInputLayout startIcon support. How to set padding between the icon and text?

[Zeliret]

There is a new option in this component: startIcon. How to set paddings to it? Like android:drawablePadding. The question is for both startIcon and endIcon.

[leticiarossi]

Setting android:drawablePadding on the TextInputEditText wrapped by the TextInputLayout should work as expected. Does it not work for you?

[heitorcolangelo]

When passwordToggleEnabled="true" the padding on TextInputEditText does not work.

I wish I could show this icon closer to the bottom line and avoid text to overlay the icon.

[ldjcmu]

We've recently made several changes to TextInputLayot. If this is still an issue, please reopen.

[PaulWoitaschek]

It's still an issue. How do I set padding on the start/end icon? @ldjcmu

[jgavazzisp]

Still an issue, also when you want to remove the padding start/end from the EditText the issue manifests itself in a different form, at this time adding extra padding to the start/end again.

[CoenQian]

please offer a attribute like 'endIconPadding(Left、Right、Top、Bottom...)'

[tobioyelekan]

Has this issue been resolved??

[appdev]

you can set like android:drawablePadding="-15dp"

[shubhral]

It's a surprise that this issue still persists and hasn't been resolved yet. I am using ExposedDropdownMenu in my project for which I had to include AutoCompleteTextView inside the TextInputLayout as per Material Layout guidelines.

After reading and trying a couple of solutions on Stackoverflow and the above solution by appdev, here's how I fixed it -

1. Change AutoCompleteTextView to AppCompatAutoCompleteTextView
2. After this change, the view becomes editable for some reason even though the inputType is None, so to counter that add focusable = false, focusableInTouchMode = false, and cursorVisible = false
3. Finally reduce the padding between the text and endIcon by adding drawablePadding.

So finally it should look like this -

<androidx.appcompat.widget.AppCompatAutoCompleteTextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:cursorVisible="false"
                android:drawablePadding="-12dp"
                android:focusable="false"
                android:focusableInTouchMode="false"
                android:inputType="none"/>

[marianpavel-thoughtworks]

This is still an issue and giving negative drawalePadding is not working, at last not for me, not on TextInputEditTexxt. Can be an update on this?

[P1NG2WIN]

As a workaround, you can manually write the necessary margins for the view

  binding.textInputLayout.findViewById<CheckableImageButton>(R.id.text_input_end_icon)
      ?.let {
          val padding = resources.getDimensionPixelOffset(R.dimen.default_padding_small)
          it.updateLayoutParams<MarginLayoutParams> {
              setMargins(leftMargin, topMargin, rightMargin, bottomMargin + padding)
          }
      }

[Musfick]

`<com.google.android.material.textfield.TextInputLayout android:id="@+id/dropdown_input" style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.Dense.ExposedDropdownMenu" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="@dimen/margin_standard" android:hint="District" android:paddingRight="-16dp" android:background="@android:color/transparent" app:boxBackgroundColor="@android:color/transparent" app:endIconTint="@color/color_grey_800" app:hintTextColor="@color/color_pink_900_light">

        <com.google.android.material.textfield.MaterialAutoCompleteTextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:maxLength="11"
            android:imeOptions="actionNext"
            android:paddingStart="0dp"
            android:paddingEnd="0dp" />

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

[burhanshakir]

I resolved this by creating a new drawable XML and added android:start="5dp" to give the icon some padding.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/ic_start_icon"
        android:end="5dp" />
</layer-list>

You can use android:end in the layer-list to add padding to endIconDrawable

[JorisBodin]

What's new?

[wiryadev]

findViewById<CheckableImageButton>(R.id.text_input_end_icon) ?.let { val padding = resources.getDimensionPixelOffset(R.dimen.default_padding_small) it.updateLayoutParams<MarginLayoutParams> { setMargins(leftMargin, topMargin, rightMargin, bottomMargin + padding) } }

unfortunately it doesn't work for horizontal margin, only work for the vertical one

[bytebeats]

As a workaround, you can manually write the necessary margins for the view

  binding.textInputLayout.findViewById<CheckableImageButton>(R.id.text_input_end_icon)
      ?.let {
          val padding = resources.getDimensionPixelOffset(R.dimen.default_padding_small)
          it.updateLayoutParams<MarginLayoutParams> {
              setMargins(leftMargin, topMargin, rightMargin, bottomMargin + padding)
          }
      }

I tried setPadding to achieve the same, take a look:

fun TextInputLayout.setEndIconPadding(@DimenRes all: Int) {
  findViewById<CheckableImageButton>(R.id.text_input_end_icon)?.apply {
    setPadding(resources.getDimensionPixelSize(all))
  }
}

[Navi2167]

endIconMinSize and startIconMinSize, would help you fix margins on both sides.

[josipfrljic]

For now, you can only edit icon, if you grab icon from theme you can edit it on this way

@BindingAdapter({"inputIcon"})
public static void setInputIcon(TextInputLayout textInputLayout,int drawableInt) {
        Context context = textInputLayout.getContext();
        Drawable dismissDrawable = ContextCompat.getDrawable(context, drawableInt);
        float density = context.getResources().getDisplayMetrics().density;
        int padding=4;
        int size=16;
        int paddingDp = (int) (padding * density);
        int sizeDp = (int) (size * density);
        if(dismissDrawable != null){
            Drawable[] layers = new Drawable[] {
                    createBitmapDrawable(dismissDrawable, sizeDp, sizeDp)
            };
            LayerDrawable layerDrawable = new LayerDrawable(layers);
            layerDrawable.setLayerInset(0, paddingDp/2, paddingDp, paddingDp, paddingDp/2);
            textInputLayout.setEndIconDrawable(layerDrawable);
        }
}

private static Drawable createBitmapDrawable(Drawable drawable, int width, int height) {
    Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
    drawable.draw(canvas);
    return new BitmapDrawable(Resources.getSystem(), bitmap);
}

in this example i use dataBinding so in xml i com.google.android.material.textfield.TextInputLayout app:inputIcon="@{item.icon== variable which is int for example R.drawable.ic_icon_from_theme}"

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

/> In this example i use databinding, which i find harder to setup in this case