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

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

enter image description here

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

Ответы

Ответ 1

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

<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/

Ответ 2

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

Шаг 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));
        }

enter image description here

Ответ 3

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

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

<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

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

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

enter image description here

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

Ответ 4

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

Ответ 6

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

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

Ответ 7

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

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>

Ответ 8

Добавьте это, если не работает <androidx.appcompat.widget.AppCompatAutoCompleteTextView

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

   <androidx.appcompat.widget.AppCompatAutoCompleteTextView
      android:id="@+id/gender"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:hint="Gender"/>
</com.google.android.material.textfield.TextInputLayout>