Search code examples
androidmaterial-designandroid-textinputlayoutmaterial-components-androidmaterial-components

Material design Spinner using TextInputLayout.OutlinedBox styling


I am currently using Material Design TextInputLayout OutlinedBox as shown below:

        <android.support.design.widget.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.design.widget.TextInputEditText
                android:id="@+id/myEditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Title"
                android:inputType="text"/>

        </android.support.design.widget.TextInputLayout>

I am trying to add a dropdown box Spinner under my TextInputEditText, and would like to keep the same styling: OutlinedBox.

I see that dropdowns seem to be supported in Material Design, Material Design Text Fields. As shown on here for the Area:

As shown on here for the Area

I am currently using a Spinner to generate the Dropdown.

        <Spinner
            style="@style/Widget.AppCompat.Spinner.DropDown"
            android:id="@+id/option"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:dropDownWidth="match_parent" />

It doesn't seem possible to add a dropdown following the OutlinedBox design. Is there a library out there that would allow me to make this happen, or is there a better way to implement this within Material Design?


Solution

  • I believe that this document isn't showing a Spinner at all. I think it's showing a TextInputLayout with a dropdown icon.

    In the Anatomy section, at the Icons subsection, it says

    5. Dropdown icon

    A dropdown arrow indicates that a text field has a nested selection component.

    Now, how you provide the "nested selection component" I'm not sure...