В Android, как создать выделенное выпадающее меню (спиннер), как указано в документации по дизайну материала?

Question

Документация по проектированию материала упоминает о выделенном выпадающем меню, которое выглядит следующим образом:

Как создать это в моем приложении для Android? Другими словами, я хочу создать спиннер с контуром и подсказкой сверху.

Answer 1

Для создания выделенного прямоугольного меню, необходимо выполнить следующие шаги:

1.Создайте нарисованный файл в папке для рисования с именем drawable_spinner_border.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#ffffff"/>
    <corners android:radius="5dp"/>
    <stroke android:width="1dp"
            android:color="#797979"/>
</shape>

2.Создайте layout_custom_spinner.xml в папке Layout, вы можете изменить текст и идентификатор в соответствии с вашими требованиями.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/fragment_qc_flSelectWorkDone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    <FrameLayout
            android:layout_marginTop="6dp"
            android:background="@drawable/drawable_spinner_border"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

        <Spinner
                android:layout_marginTop="5dp"
                android:id="@+id/fragment_qc_spSelectWorkDone"
                android:layout_width="match_parent"
                android:textSize="12sp"
                android:spinnerMode="dropdown"
                android:layout_height="30dp"/>
    </FrameLayout>

    <TextView
            android:paddingStart="2dp"
            android:paddingEnd="2dp"
            android:layout_marginStart="10dp"
            android:layout_marginBottom="15dp"
            android:textSize="9sp"
            android:text="Select Work Done"
            android:background="#FFFFFF"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
</FrameLayout>

Answer 2

Они обновили библиотеку материалов:

<com.google.android.material.textfield.TextInputLayout
    style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/hint_text">

  <AutoCompleteTextView
      android:id="@+id/filled_exposed_dropdown"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"/>

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

Это ссылка: https://material.io/develop/android/components/menu/

Answer 3

Согласно репозиторию github по дизайну материалов андроида, это запланировано (что означает, что они все еще начнут работать над ним) Вы не можете найти прямой способ реализовать это.

Answer 4

Ну, до сих пор нет официальных библиотек. Итак, вы должны создать его на заказ. Мне кажется, что это прикрепленное изображение. Я сделал несколько простых шагов.

Шаг 1: Добавить один shape_

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@android:color/transparent"/>
<stroke android:width="1dip" android:color="#424242" />
<corners android:radius="3dip"/>
<padding android:left="0dip" 
android:top="0dip" 
android:right="0dip" 
android:bottom="0dip" />

Вы можете легко изменить свой цвет обводки здесь.

шаг 2: дизайн прядильщика _

<RelativeLayout
                android:id="@+id/lyGiftList"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/lyPhysicianList"
                android:layout_marginLeft="@dimen/_5sdp"
                android:layout_marginTop="@dimen/_5sdp"
                android:layout_marginRight="@dimen/_5sdp">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_margin="@dimen/_3sdp"
                        android:layout_weight="8"
                        android:orientation="horizontal"
                        android:background="@drawable/border"
                        tools:ignore="UselessParent">

                        <Spinner
                            android:id="@+id/spnGift"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:overlapAnchor="false"
                            android:spinnerMode="dropdown" />

                </LinearLayout>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="@dimen/_9sdp"
                    android:layout_marginTop="-5dp"
                    android:background="@color/colorLightGrey"
                    android:paddingLeft="@dimen/_3sdp"
                    android:paddingRight="@dimen/_3sdp"
                    android:text="@string/gift"
                    android:textColor="@color/colorDarkGrey" />
            </RelativeLayout>

И если вы хотите, чтобы ваш текст был выбран другим цветом, вы можете сделать это из кода.

 @Override
        public void onItemSelected(AdapterView<?> parent, View view, int position, long id) { 
            ((TextView) view).setTextColor(ContextCompat.getColor(MainActivity.this, R.color.colorAccent));
        }

Answer 5

Я попытался сделать это с рамкой, как показано ниже.

Установить счетчик в действии

<LinearLayout
        android:layout_centerInParent="true"
        android:background="@drawable/border"
        android:layout_width="wrap_content" android:layout_height="wrap_content" tools:ignore="UselessParent">

    <Spinner
            android:id="@+id/spinner1"
            android:layout_width="wrap_content"
            android:backgroundTint="#ff0000"
            android:overlapAnchor="false"
            android:layout_height="wrap_content"
            android:spinnerMode="dropdown"/>

</LinearLayout>

Создать файл border.xml в режиме рисования

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#80ffffff"/>
<stroke android:width="1dip" android:color="#ff0000" />
<corners android:radius="3dip"/>
<padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />

И заполняйте его любым удобным для вас способом.

val items = arrayOf("NM", "NY", "NC", "ND")
    val adapter = ArrayAdapter(this, android.R.layout.simple_spinner_dropdown_item, items)
    spinner1.adapter = adapter

Я не знаю, как поставить титр на спиннер.

Результат выглядит так.

Небольшие корректировки, и я думаю, что вы можете создать то, что вы ищете.