如何更改android的微调器背景设计和颜色？

Question

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

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

微调器的代码

 <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

您可以在xml中设置微调背景颜色，如下所示：

android:background="YOUR_HEX_COLOR_CODE"

如果您使用下拉菜单与您的微调器，您可以设置其背景颜色，如下所示：

android:popupBackground="YOUR_HEX_COLOR_CODE"

Answer 2

我试过上面的样品，但没有为我工作。最简单的解决方案对我来说很棒：

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

Answer 3

<FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    <Spinner
        android:layout_marginTop="8dp"
        android:background="@drawable/edit_border"
        android:visibility="visible"
        android:id="@+id/teach_repeat"
        android:entries="@array/on_off"
        android:textSize="12sp"
        android:textColor="#ffffff"
        android:layout_width="match_parent"
        android:layout_height="40dp" />
        <ImageView
            android:layout_marginTop="8dp"
            android:layout_gravity="end"
            android:src="@drawable/ic_arrow_drop_down_white_18dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </FrameLayout>

Answer 4

它需要在微调器中使用透明背景。

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

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

    <item
        android:bottom="-2dp"
        android:left="-3dp"
        android:right="-3dp"
        android:top="-3dp">
        <shape>
            <solid android:color="#00000000" />
            <stroke

                android:width="2dp"
                android:color="#00aedb" />
        </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="#00aedb" />
                    <solid android:color="#00aedb" />
                </shape>
            </rotate>
        </rotate>
    </item>
</layer-list>

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

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

<item
    android:bottom="-2dp"
    android:left="-3dp"
    android:right="-3dp"
    android:top="-3dp">
    <shape>
        <solid android:color="#00000000" />
        <stroke

            android:width="2dp"
            android:color="#d9dadc" />
    </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="#d9dadc" />
                <solid android:color="#d9dadc" />
            </shape>
        </rotate>
    </rotate>
</item>
</layer-list>

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_disable" android:state_enabled="false" /> <!-- disable -->
</selector>

Answer 5

你只需使用这段代码

            <LinearLayout

            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:baselineAligned="false">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.80">

                <FrameLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center_vertical|start"
                    android:paddingBottom="5dp"
                    android:paddingTop="5dp">

                    <Spinner
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"

                        android:background="@drawable/spiner_back"
                        android:visibility="visible" />

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical|end"
                        android:src="@drawable/ic_arrow_drop_down_black_24dp" />
                </FrameLayout>


            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.20">

                <Button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@color/colorred"
                    android:fontFamily="@font/raleway_extrabold"
                    android:text="GO"
                    android:textColor="@color/colorwhite" />

            </LinearLayout>
        </LinearLayout>

这是我用过的背景......

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

在这里我们去这是我存档的视图...

Answer 6

Android Studio有预定义的代码，您可以直接使用它。 android：popupBackground =“HEX COLOR CODE”

Answer 7

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

Step1：在drawable文件夹中为后台创建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

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

最后看起来像下面的图像，它是在圆形区域可点击的每个地方，无需为imageView写点击Lister。

有关更多详细信息，请参阅Here

Answer 8

即使它是一个较旧的帖子，但我在寻找同样的问题时遇到它，所以我想我也会加上我的两分钱。这是我使用DropDown箭头的Spinner背景版本。只是完整的背景，不仅仅是箭头。

这就是它的样子..

适用于微调器......

<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应该用您想要的颜色替换为背景。

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

Answer 9

微调器代码

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

Answer 10

您需要为您的微调器项目创建一个新的个性化布局，如下所示，我将其命名为：

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

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

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

要从下拉列表中个性化元素，您需要创建另一个布局，我将其命名为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"/>

然后在适配器上：

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

Answer 11

作为Jakob pointed out，android:popupBackground是下拉列表的关键属性（Spinner的打开状态），但不是仅使用一种颜色，而是使用这样的9-patch drawable得到了最好的结果：

menu_dropdown_panel.9.png

请注意，为您选择的背景颜色生成这个9补丁图像非常容易，例如使用this online tool作为我explained in this answer！

所以，我的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"
    />

结果如下：

（对于自定义字体，如上面的屏幕截图所示，也是custom SpinnerAdapter is needed。）

至少在Android 4.0+（API级别14+）上运行。

Answer 12

旋转代码：

<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

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

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

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

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

没有九张补丁图片，它工作正常。 api 21+

Answer 13

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

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

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

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

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

为Frame布局背景创建一个新的xml或设置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 14

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

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

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

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

没有九张补丁图片，它工作正常。 api 10+