Comment modifier l'arrière-plan de la barre d'outils dans Android ?

Question

Je développe une application dans laquelle je dois changer la disposition de l'arrière-plan du spinner pour qu'il corresponde à la couleur de l'arrière-plan. J'ai fait des recherches et j'ai découvert que je devais créer une image à 9 patchs. J'ai créé l'image 9 patch et je l'ai utilisée dans l'application mais elle semble plus grande que le spinner normal et je ne pouvais pas non plus voir le bouton déroulant dans le spinner.

Je serais très heureux si vous me fournissiez un tutoriel clair depuis le début de la création de l'image 9 patch pour Spinner et de son utilisation dans l'application.

Code pour le Spinner

 <Spinner
        android:id="@+id/spnIncredientone"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/txtMixtureTitle" 
        android:layout_marginLeft="5dip"
        android:layout_marginRight="5dip"
        android:background="@drawable/spinner_background"
        android:prompt="@string/selectmixture" />

Answer 1

Vous pouvez définir la couleur d'arrière-plan des spinners dans le fichier xml de la manière suivante :

android:background="YOUR_HEX_COLOR_CODE"

et si vous utilisez le menu déroulant avec un spinner, vous pouvez définir sa couleur d'arrière-plan comme ceci :

android:popupBackground="YOUR_HEX_COLOR_CODE"

Answer 2

Vous pouvez modifier la couleur d'arrière-plan et l'icône du menu déroulant en procédant de la manière suivante

Etape 1 : Dans le dossier drawable, créer background.xml pour la bordure du spinner.

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@android:color/transparent" />
<corners android:radius="5dp" />
<stroke
    android:width="1dp"
    android:color="@color/darkGray" />
</shape>  //edited

Étape 2 : pour la mise en page du spinner, utilisez cette icône déroulante ou n'importe quelle image drop.pnj

  <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="3dp"
                    android:layout_weight=".28"
                    android:background="@drawable/spinner_border"
                    android:orientation="horizontal">

                    <Spinner
                        android:id="@+id/spinner2"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_centerVertical="true"
                        android:layout_gravity="center"
                        android:background="@android:color/transparent"
                        android:gravity="center"
                        android:layout_marginLeft="5dp"
                        android:spinnerMode="dropdown" />

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentRight="true"
                        android:layout_centerVertical="true"
                        android:layout_gravity="center"
                        android:src="@mipmap/drop" />

                </RelativeLayout>

Au final, l'image ressemble à l'image ci-dessous et elle est cliquable partout dans la zone ronde et il n'est pas nécessaire d'écrire une liste de clics pour imageView.

Pour plus de détails, vous pouvez consulter Ici

Answer 3

Bien qu'il s'agisse d'un article plus ancien, je suis tombé dessus alors que je cherchais à résoudre le même problème, j'ai donc pensé ajouter mon grain de sel. Voici ma version de l'arrière-plan du Spinner avec la flèche DropDown. Juste l'arrière-plan complet, pas seulement la flèche.

Voici à quoi cela ressemble.

Appliquer sur le spinner comme...

<Spinner
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:background="@drawable/spinner_bg" />

spinner_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <color android:color="@color/InputBg" />
    </item>
    <item android:gravity="center_vertical|right" android:right="8dp">
        <layer-list>
            <item android:width="12dp" android:height="12dp" android:gravity="center" android:bottom="10dp">
                <rotate
                    android:fromDegrees="45"
                    android:toDegrees="45">
                    <shape android:shape="rectangle">
                        <solid android:color="#666666" />
                        <stroke android:color="#aaaaaa" android:width="1dp"/>
                    </shape>
                </rotate>
            </item>
            <item android:width="30dp" android:height="10dp" android:bottom="21dp" android:gravity="center">
                <shape android:shape="rectangle">
                    <solid android:color="@color/InputBg"/>
                </shape>
            </item>
        </layer-list>
    </item>
</layer-list>

@color/InputBg doit être remplacé par la couleur que vous souhaitez pour l'arrière-plan.

Il remplit d'abord l'arrière-plan avec la couleur souhaitée. Ensuite, une liste de calques enfant crée un carré et le fait pivoter de 45 degrés, puis un deuxième rectangle avec la couleur de fond couvre la partie supérieure du carré pivoté, ce qui lui donne l'aspect d'une flèche vers le bas. (Il y a un trait supplémentaire dans le rectangle pivoté qui n'est pas vraiment nécessaire).

Answer 4

Lorsque vous définissez la couleur d'arrière-plan du spinner à l'aide de android:background="@color/your_color" y la flèche par défaut disparaîtra

Il faut également ajouter une largeur et une hauteur fixes au spinner afin de pouvoir afficher l'intégralité du contenu du spinner.

J'ai donc trouvé un moyen de le faire, comme dans l'image ci-dessus.

Ecrivez le code de votre spinner dans un cadre, ici vous n'avez pas besoin d'utiliser une vue d'image séparée pour afficher l'icône de la liste déroulante.

  <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Floor"
            android:textColor="@color/white"/>

        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/margin_short"
            android:background="@drawable/custom_spn_background">

            <Spinner
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:dropDownSelector="@color/colorAccent"
                android:dropDownWidth="@dimen/dp_70"
                android:spinnerMode="dropdown"
                android:tooltipText="Select floor" />
        </FrameLayout>

Créer un nouveau xml pour l'arrière-plan de la mise en page du cadre ou le définir android:background="@color/your_color"

custom_spn_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="@dimen/dp_5" />
<solid android:color="@color/white" />

Answer 5

Code de la roulette

<Spinner
    android:id="@+id/spinner"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textColor="@color/text.white"
    android:paddingBottom="13dp"
    android:background="@drawable/bg_spinner"/>

bg_spinner.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimaryDark"/>
            <corners android:radius="10dp" />
        </shape>
    </item>
    <item android:gravity="center_vertical|right" android:right="8dp">
        <layer-list>
            <item android:width="12dp" android:height="12dp"  android:gravity="center" android:bottom="10dp">
                <rotate
                    android:fromDegrees="45"
                    android:toDegrees="45">
                    <shape android:shape="rectangle">
                        <solid android:color="#ffffff" />
                        <stroke android:color="#ffffff" android:width="1dp"/>
                    </shape>
                </rotate>
            </item>
            <item android:width="20dp" android:height="10dp" android:bottom="21dp" android:gravity="center">
                <shape android:shape="rectangle">
                    <solid android:color="@color/colorPrimaryDark"/>
                </shape>
            </item>
        </layer-list>
    </item>
</layer-list>