In Android, AutoCompleteTextView is not centered while using Exposed Dropdown Menus in Material Design Component

Question

In newly published Material Design Component, there is no Spinner component. That's why I want to use Exposed Dropdown Menus to implement something similar like Spinner. The Problem I am facing is AutoCompleteTextView is not aligned in center compare to the endIconDrawable. My Code is given bellow

activity.main.xml

<com.google.android.material.textfield.TextInputLayout
        style="@style/OutLinedEditTextStyle.Spinner"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Select Country"
        android:layout_margin="@dimen/_10sdp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.578"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/materialToolbar"
        app:layout_constraintVertical_bias="0.0">

        <AutoCompleteTextView
            android:id="@+id/filled_exposed_dropdown"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:completionThreshold="1"
            android:dropDownVerticalOffset="@dimen/_5sdp"/>

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

style.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="OutLinedEditTextStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>

        <item name="boxBackgroundMode">outline</item>
        <item name="boxBackgroundColor">@color/colorWindowBackground</item>

        <item name="boxStrokeColor">@color/colorTextPrimary</item>
        <item name="boxStrokeErrorColor">@color/red</item>
        <item name="boxStrokeWidth">@dimen/_2sdp</item>
        <item name="boxStrokeWidthFocused">@dimen/_2sdp</item>

        <item name="errorTextColor">@color/red</item>
        <item name="errorEnabled">true</item>

        <item name="hintEnabled">true</item>
        <item name="hintTextColor">@color/colorTextPrimary</item>
        <item name="android:textColorHint">@color/colorTextSecondary</item>

    </style>


    <style name="OutLinedEditTextStyle.Spinner">
        <item name="materialThemeOverlay">@style/ThemeOverlay.MaterialComponents.AutoCompleteTextView.FilledBox</item>
        <item name="endIconMode">custom</item>
        <item name="endIconDrawable">@drawable/ic_download</item>
        <item name="endIconContentDescription">Drop down</item>
    </style>

</resources>

score 0 · Accepted Answer · answered Mar 10 '20 at 10:26

Finally I can solve the problem. The fault was, I inherit the wrong Parent class of Dropdown menu.

<style name="SpinnerStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>

        <item name="boxBackgroundMode">outline</item>
        <item name="boxBackgroundColor">@color/colorWindowBackground</item>

        <item name="boxStrokeColor">@color/colorTextPrimary</item>
        <item name="boxStrokeErrorColor">@color/red</item>
        <item name="boxStrokeWidth">@dimen/_2sdp</item>
        <item name="boxStrokeWidthFocused">@dimen/_2sdp</item>

        <item name="errorTextColor">@color/red</item>
        <item name="errorEnabled">true</item>

        <item name="hintEnabled">true</item>
        <item name="hintTextColor">@color/colorTextPrimary</item>
        <item name="android:textColorHint">@color/colorTextSecondary</item>

        <item name="endIconMode">clear_text</item>

    </style>

In Android, AutoCompleteTextView is not centered while using Exposed Dropdown Menus in Material Design Component

1 Answers1