如何在 Android 中更改微调器背景？

How to change the spinner background in Android?

提问by vinothp

I am developing an app in which I need to change the spinner background layout to match the background color. I researched and found that I need to create a 9 patch image. I have done creating the 9 patch image and used in the app but it looks bigger than the normal spinner and also I couldn't see the drop down button in the spinner as well.

我正在开发一个应用程序，我需要在其中更改微调器背景布局以匹配背景颜色。我研究并发现我需要创建一个 9 补丁图像。我已经创建了 9 个补丁图像并在应用程序中使用，但它看起来比普通微调器大，而且我也看不到微调器中的下拉按钮。

I am so happy if you guys provide me a clear tutorial from start creating the 9 patch image for Spinner and using it in the app.

如果你们从开始为 Spinner 创建 9 补丁图像并在应用程序中使用它提供清晰的教程，我很高兴。

Code for the Spinner

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

回答by Jakob

You can set the spinners background color in xml like this:

您可以像这样在 xml 中设置微调器背景颜色：

android:background="YOUR_HEX_COLOR_CODE"

and if you use the drop down menu with you spinner you can set its background color like this:

如果您将下拉菜单与微调器一起使用，您可以像这样设置其背景颜色：

android:popupBackground="YOUR_HEX_COLOR_CODE"

回答by Binesh Kumar

You can change background color and drop down icon like doing this way

您可以像这样做一样更改背景颜色和下拉图标

Step1: In drawable folder make background.xml for border of spinner.

步骤1：在drawable文件夹中为微调器的边框制作background.xml。

<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

Step2: for layout design of spinner use this drop down icon or any image drop.pnj

步骤 2：对于微调器的布局设计，请使用此下拉图标或任何图像 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>

Finally looks like below image and it is every where clickable in round area and no need of to write click Lister for imageView.

最后看起来像下图，它在圆形区域中的每个地方都可以点击，不需要为 imageView 编写点击列表。

For more details , you can see Here

有关更多详细信息，您可以在此处查看

回答by Nashe

Even though it is an older post but as I came across it while looking for same problem so I thought I will add my two cents as well. Here is my version of Spinner's background with DropDown arrow. Just the complete background, not only the arrow.

尽管这是一篇较旧的帖子，但当我在寻找相同问题时遇到它，所以我想我也会加上我的两分钱。这是我的带有下拉箭头的 Spinner 背景版本。只是完整的背景，而不仅仅是箭头。

This is how it looks..

这是它的样子..

Apply on spinner like...

涂抹在微调器上，如...

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

spinner_bg.xml

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/InputBgshould be replaced by the color you want as your background.

@color/InputBg应该替换为您想要作为背景的颜色。

First it fills the background with desired color. Then a child layer-list makes a square and rotates it by 45 degrees and then a second Rectangle with background color covers the top part of rotated square making it look like a down arrow. (There is an extra stroke in rotated rectangle with is not really required)

首先，它用所需的颜色填充背景。然后子图层列表制作一个正方形并将其旋转 45 度，然后第二个带有背景颜色的矩形覆盖旋转正方形的顶部，使其看起来像一个向下的箭头。（旋转矩形中有一个额外的笔划，实际上并不需要）

回答by Md Imran Choudhury

Spinner code

微调代码

<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

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>

回答by Jonik

As Jakob pointed out, android:popupBackgroundis the key attribute for the dropdown (opened state of the Spinner), but instead of using just a colour, I got the best results with a 9-patch drawable like this:

正如Jakob 所指出的，android:popupBackground是下拉菜单的关键属性（Spinner 的打开状态），但不是仅使用颜色，我使用 9-patch drawable 获得了最佳效果，如下所示：

menu_dropdown_panel.9.png

menu_dropdown_panel.9.png

Note that it's very easy to generate this 9-patch image for the background colour of your choice, for example using this online toolas I explained in this answer!

请注意，为您选择的背景颜色生成这个 9 色块图像非常容易，例如使用我在这个答案中解释的这个在线工具！

So, my Spinner XML definition looks like:

因此，我的 Spinner XML 定义如下所示：

<Spinner
    android:id="@+id/spinner"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/navigationBlue"
    android:spinnerMode="dropdown"
    android:popupBackground="@drawable/menu_dropdown_panel"
    />

And the result:

结果：

(For custom fonts, as in the screenshot above, a custom SpinnerAdapter is neededtoo.)

（对于自定义字体，如上面的屏幕截图所示，还需要自定义 SpinnerAdapter。）

Works at least on Android 4.0+ (API level 14+).

至少适用于 Android 4.0+（API 级别 14+）。

回答by heisenberg

You need to create a new personalized layout for your spinner items, like this, I will name it:

您需要为您的微调项目创建一个新的个性化布局，像这样，我将其命名为：

spinner_item.xml:

spinner_item.xml:

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textSize="20sp"
    android:textColor="#ff0000" />

Then on your spinner declaration, you need to make your spinner use the new layout in the adapter:

然后在您的微调器声明中，您需要让微调器使用适配器中的新布局：

ArrayAdapter adapter = ArrayAdapter.createFromResource(this,
R.layout.spinner_item, YOUR_SPINNER_CONTENT);
spinner.setAdapter(adapter);

To personalize elements from the dropdown list, you need to create another layout, I will name it spinner_dropdown_item.xml:

要个性化下拉列表中的元素，您需要创建另一个布局，我将其命名为 spinner_dropdown_item.xml：

<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    style="?android:attr/spinnerDropDownItemStyle"
    android:singleLine="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
    android:ellipsize="marquee"
    android:textColor="#aa66cc"/>

and then on the adapter:

然后在适配器上：

ArrayAdapter adapter = ArrayAdapter.createFromResource(this,
R.layout.spinner_item, YOUR_SPINNER_CONTENT);
adapter.setDropDownViewResource(R.layout.spinner_dropdown_item);
spinner.setAdapter(adapter);

回答by Adarsh Vijayan P

When you set the spinner background color using android:background="@color/your_color"your spinner default arrow will disappear

当您使用android:background="@color/your_color"微调器默认箭头设置微调器背景颜色时，它会消失

And also need to add fixed width and height to spinner so you can show the full content of the spinner.

并且还需要为微调器添加固定的宽度和高度，以便您可以显示微调器的全部内容。

so i found a way to do it , just like the above image.

所以我找到了一种方法，就像上图一样。

Write your spinner code inside a frame layout, here you don't need to use a separate image view for showing drop down icon.

在框架布局中编写您的微调器代码，在这里您不需要使用单独的图像视图来显示下拉图标。

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

Create a new xml for Frame layout background or set android:background="@color/your_color"

为 Frame 布局背景创建一个新的 xml 或设置 android:background="@color/your_color"

custom_spn_background.xml

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

回答by Samet ?ZTOPRAK

spinner code:

微调代码：

<TextView
    android:id="@+id/spinner"
    android:gravity="bottom"
    android:layout_marginTop="16dp"
    android:background="@drawable/spinner_selector"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:paddingLeft="16dp"
    android:textSize="16sp"
    android:text="TextView" />

spinner_selector.xml

spinner_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/spinner_enable" android:state_enabled="true" android:state_pressed="false"  /> <!-- enable -->
    <item android:drawable="@drawable/spinner_clicked" android:state_pressed="true"  android:state_enabled="true"  />
    <item android:drawable="@drawable/spinner_disable" android:state_enabled="false" /> <!-- disable -->
</selector>

spinner_disable.xml

spinner_disable.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="#ddf" />
            <padding android:bottom="1dp" />
        </shape>
    </item>
    <item android:bottom="1dp">
        <shape android:shape="rectangle" >
            <solid android:color="#fff" />

            <padding
                android:left="0dp"
                android:right="0dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#fff" />
        </shape>
    </item>
    <item
        android:gravity="center_vertical|right"
        android:right="8dp">
        <layer-list>
            <item
                android:width="12dp"
                android:height="12dp"
                android:bottom="10dp"
                android:gravity="center">
                <rotate
                    android:fromDegrees="45"
                    android:toDegrees="45">
                    <shape android:shape="rectangle">
                        <solid android:color="#ddf" />
                        <stroke
                            android:width="1dp"
                            android:color="#aaaaaa" />
                    </shape>
                </rotate>
            </item>
            <item
                android:width="30dp"
                android:height="10dp"
                android:bottom="21dp"
                android:gravity="center">
                <shape android:shape="rectangle">
                    <solid android:color="@android:color/white" />
                </shape>
            </item>
        </layer-list>
    </item>
</layer-list>

spinner_clicked.xml

spinner_clicked.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="#00f" />
            <padding android:bottom="1dp" />
        </shape>
    </item>
    <item android:bottom="1dp">
        <shape android:shape="rectangle" >
            <solid android:color="#fff" />

            <padding
                android:left="0dp"
                android:right="0dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#fff" />
        </shape>
    </item>
    <item
        android:gravity="center_vertical|right"
        android:right="8dp">
        <layer-list>
            <item
                android:width="12dp"
                android:height="12dp"
                android:bottom="10dp"
                android:gravity="center">
                <rotate
                    android:fromDegrees="45"
                    android:toDegrees="45">
                    <shape android:shape="rectangle">
                        <solid android:color="#00f" />
                        <stroke
                            android:width="1dp"
                            android:color="#aaaaaa" />
                    </shape>
                </rotate>
            </item>
            <item
                android:width="30dp"
                android:height="10dp"
                android:bottom="21dp"
                android:gravity="center">
                <shape android:shape="rectangle">
                    <solid android:color="@android:color/white" />
                </shape>
            </item>
        </layer-list>
    </item>
</layer-list>

spinner_enable.xml

spinner_enable.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="#00f" />
        <padding android:bottom="1dp" />
    </shape>
</item>
<item android:bottom="1dp">
    <shape android:shape="rectangle" >
        <solid android:color="#BBDEFB" />

        <padding
            android:left="0dp"
            android:right="0dp" />
    </shape>
</item>
<item>
    <shape android:shape="rectangle" >
        <solid android:color="#BBDEFB" />
    </shape>
</item>
<item
    android:gravity="center_vertical|right"
    android:right="8dp">
    <layer-list>
        <item
            android:width="12dp"
            android:height="12dp"
            android:bottom="10dp"
            android:gravity="center">
            <rotate
                android:fromDegrees="45"
                android:toDegrees="45">
                <shape android:shape="rectangle">
                    <solid android:color="#00f" />
                    <stroke
                        android:width="1dp"
                        android:color="#aaaaaa" />
                </shape>
            </rotate>
        </item>
        <item
            android:width="30dp"
            android:height="10dp"
            android:bottom="21dp"
            android:gravity="center">
            <shape android:shape="rectangle">
                <solid android:color="#BBDEFB" />
            </shape>
        </item>
    </layer-list>
</item>
</layer-list>

it works fine without nine-patch pictures. api 21+

它在没有九个补丁图片的情况下工作正常。api 21+

回答by Samet ?ZTOPRAK

spinner_selector.xml

spinner_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/spinner_enabled" android:state_enabled="true" android:state_pressed="false" /> <!-- enable -->
    <item android:drawable="@drawable/spinner_clicked" android:state_enabled="true" android:state_pressed="true" />
    <item android:drawable="@drawable/spinner_disabled" android:state_enabled="false" /> <!-- disable -->
</selector>

spinner_enabled.xml

spinner_enabled.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="#00f" />
        <padding android:bottom="2dp" />
    </shape>
</item>

<item>
    <shape android:shape="rectangle" >
        <solid android:color="#fff" />
    </shape>
</item>

<item>
    <rotate
        android:fromDegrees="90"
        android:pivotX="100%"
        android:pivotY="60%"
        android:toDegrees="135">
        <rotate
            android:fromDegrees="135"
            android:pivotX="100%"
            android:pivotY="60%"
            android:toDegrees="45">
            <shape android:shape="rectangle">
                <stroke
                    android:width="10dp"
                    android:color="#00f" />
                <solid android:color="#00f" />
            </shape>
        </rotate>
    </rotate>
</item>
</layer-list>

spinner_disabled.xml

spinner_disabled.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="#ddf" />
        <padding android:bottom="2dp" />
    </shape>
</item>

<item>
    <shape android:shape="rectangle" >
        <solid android:color="#fff" />
    </shape>
</item>

<item>
    <rotate
        android:fromDegrees="90"
        android:pivotX="100%"
        android:pivotY="60%"
        android:toDegrees="135">
        <rotate
            android:fromDegrees="135"
            android:pivotX="100%"
            android:pivotY="60%"
            android:toDegrees="45">
            <shape android:shape="rectangle">
                <stroke
                    android:width="10dp"
                    android:color="#ddf" />
                <solid android:color="#ddf" />
            </shape>
        </rotate>
    </rotate>
</item>
</layer-list>

spinner_focused.xml

spinner_focused.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="#00f" />
        <padding android:bottom="2dp" />
    </shape>
</item>

<item>
    <shape android:shape="rectangle" >
        <solid android:color="#BBDEFB" />
    </shape>
</item>

<item>
    <rotate
        android:fromDegrees="90"
        android:pivotX="100%"
        android:pivotY="60%"
        android:toDegrees="135">
        <rotate
            android:fromDegrees="135"
            android:pivotX="100%"
            android:pivotY="60%"
            android:toDegrees="45">
            <shape android:shape="rectangle">
                <stroke
                    android:width="10dp"
                    android:color="#00f" />
                <solid android:color="#00f" />
            </shape>
        </rotate>
    </rotate>
</item>
</layer-list>

it works fine without nine-patch pictures. api 10+

它在没有九个补丁图片的情况下工作正常。接口 10+

回答by Kishore Reddy

I tried above samples but not working for me. The simplest solution is working for me awesome:

我尝试了上面的示例，但对我不起作用。最简单的解决方案对我来说很棒：

<RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#fff" >
        <Spinner
            android:id="@+id/spinner1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:entries="@array/Area"/>
    </RelativeLayout>