CODEWITHSUNDEEP
androidmaterial-designandroid-textinputlayout
modul-23
modul-23

Reputation: 53

How can I move the EndIconDrawable to End|Bottom in a multiline TextInputLayout

I'm trying to add an EndIconDrawable to a multiline TextInputLayout with gravity end|bottom. The default position of the EndIconDrawable is end|center. Now my question: Is this possible with the default settings of the material element or do I have to implement this as a CustomElement.

This is my current source for this Element:

    <com.google.android.material.textfield.TextInputLayout
        style="@style/Theme.MyApp.BoxedLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:hint="Outlinebox"
        app:endIconCheckable="true"
        app:endIconDrawable="@drawable/ic_mic_black_24dp"
        app:endIconMode="custom">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="top"
            android:maxLines="5"
            android:minLines="5"
            android:textColor="@color/blue_grey_900" />

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

and this is the style part:

    <style name="Theme.MyApp.BoxedLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
        <item name="boxStrokeColor">@color/blue_grey_900</item>
        <item name="boxStrokeWidth">2dp</item>
    </style>

This picture shows how the result should look like: TextInputLayout with multiline and EndIcon on BottomEnd (edited)

Upvotes: 5

Views: 1113

Answers (1)

davidm
davidm

Reputation: 1750

I faced the same problem and found out that the end icon is a CheckableImageButton with the ID com.google.android.material.R.id.text_input_end_icon placed inside a FrameLayout. So just customize the FrameLayout.Params as needed.

enter image description here

Check the following code snippet:

// using viewbinding
       private ActivityCommentBinding mBinding;

// change the end icon gravity
       FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) mBinding.commentTextLayout
                .findViewById(com.google.android.material.R.id.text_input_end_icon)
                .getLayoutParams();
        params.gravity = Gravity.BOTTOM;
        mBinding.commentTextLayout
                .findViewById(com.google.android.material.R.id.text_input_end_icon)
                        .setLayoutParams(params);

The runtime result:

enter image description here

I also opened a GitHub feature request here.

Upvotes: 3

Related Questions