web-dev-qa-db-fra.com

Sous Android, comment créer un menu déroulant décrit (spinner) comme spécifié par la documentation de conception du matériau?

Documentation sur la conception des matériaux mentionne à propos du menu déroulant décrit, qui ressemble à ceci:

enter image description here

Comment créer cela dans mon Android? En d'autres termes, je veux créer un spinner avec un contour et un indice en haut.

androidxmlandroid-layoutmaterial-design
24
mumayank

Ils ont mis à jour la bibliothèque de conception de matériaux:

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

C'est le lien: https://material.io/develop/Android/components/menu/

15
Jimmy Alvarez

Eh bien, aucune bibliothèque officielle n'a été publiée jusqu'à présent. Donc, vous devez le créer sur mesure. La mienne ressemble à cette image jointe. J'ai fait quelques étapes simples.

Étape 1: ajouter une forme_

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

vous pouvez facilement changer la couleur de votre trait à partir d'ici.

étape 2: Concevez le spinner _

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

Et si vous voulez que la couleur du texte sélectionnée par votre spinner soit différente, vous pouvez le faire à partir du code.

 @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

6
Ananna Rahman

Pour créer un spinner de menu de boîte décrit, les étapes que vous devez suivre sont les suivantes:

1.Créez un fichier dessinable dans un dossier dessinable nommé 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.Créez layout_custom_spinner.xml sous le dossier Layout, vous pouvez modifier le texte et l'identifiant selon vos besoins.

<?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>
2
Paulami Biswas

J'ai essayé de le faire avec une bordure comme ci-dessous.

Mettre le spinner en activité

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

Créer border.xml en dessinable

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

Et remplissez-le comme vous le souhaitez.

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

Je ne sais pas comment mettre le titre sur le spinner.

Le résultat ressemble à ceci.

enter image description here

Petits ajustements et je pense que vous pouvez créer ce que vous cherchez.

2
Amit Bhandari

Ajoutez ceci si cela ne fonctionne pas <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>
1
Latief Anwar

Résultat:

enter image description here

Code entièrement fonctionnel ci-dessous:

  1. Disposition
<com.google.Android.material.textfield.TextInputLayout          
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:hint="Hello"
    >

    <EditText
        Android:id="@+id/editText"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:clickable="true"
        Android:cursorVisible="false"
        Android:focusable="false"
        Android:focusableInTouchMode="false"
        Android:importantForAutofill="no"
        />

</com.google.Android.material.textfield.TextInputLayout>
  1. Activité/Fragment
editText.setOnClickListener {
    PopupMenu(context!!, editText).apply {
        menuInflater.inflate(R.menu.menu_in_transaction, menu)
        setOnMenuItemClickListener { item ->
            editText.setText(item.title)
            true
        }
        show()
    }
}
  1. Menu
<?xml version="1.0" encoding="utf-8"?>
<menu
    xmlns:Android="http://schemas.Android.com/apk/res/Android">

    <item
        Android:id="@+id/type1"
        Android:title="Type 1"
        />

    <item
        Android:id="@+id/type2"
        Android:title="Type 2"
        />

</menu>
1
mac229

Selon le référentiel github de conception matérielle d'Android, il est prévu (ce qui signifie qu'ils continueront à travailler dessus). Vous ne pouvez pas trouver un moyen direct de mettre en œuvre cela.

0
Muhammed Sabry