Material Design和appcompat在旧版API上不起作用 [英] Material Design and appcompat not working on older API versions

问题描述

我正在使用appcompat v7(23.1.1)来实现MaterialDesign的向后兼容性.在API 21设备上看起来不错.在较旧的API版本上，我的风格没有受到影响.为什么?

I am using appcompat v7 (23.1.1) for a MaterialDesign backward compability. On a API 21 device it looks nice. On older API versions nothing of my styles is affecting. Why?

API 21的结果(目标):

Result in API 21 (goal):

API 17的结果(错误):

Result in API 17 (bad):

这是我的style.xml放在values文件夹中:

Here is my style.xml inside values folder:

<resources>

<!--
    Base application theme, dependent on API level. This theme is replaced
    by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
-->
<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
    <!--
        Theme customizations available in newer API levels can go in
        res/values-vXX/styles.xml, while customizations related to
        backward-compatibility can go here.
    -->
    <!-- customize the color palette -->
    <item name="android:colorPrimary">@color/teal200</item>
    <item name="android:colorPrimaryDark">@color/teal500</item>
    <item name="android:colorAccent">@color/material_green_A200</item>
    <item name="android:statusBarColor">@color/teal500</item>
    <item name="android:navigationBarColor">@color/teal500</item>
    <item name="android:windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="android:colorButtonNormal">@color/button</item>
    <item name="colorControlNormal">@color/deeporange300</item>
    <item name="colorControlActivated">@color/deeporange500</item>
    <item name="colorControlHighlight">@color/material_green_A200</item>        
</style>
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
    <!-- All customizations that are specific to a particular API-level befor 21 can go here. -->
</style>

这是values-v21文件夹中的styles.xml:

Here is the styles.xml inside values-v21 folder:

    <?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="AppBaseTheme">
        <!-- Customize your theme using Material Design here. -->
        <item name="android:buttonStyle">@style/button</item>
        <item name="android:buttonStyleToggle">@style/togglebutton</item>
    </style>
    <style name="button" parent="@android:style/Widget.Material.Button">
        <item name="android:textColor">@color/buttontextcolor</item>
    </style>
    <style name="togglebutton" parent="@android:style/Widget.Material.Button.Toggle">
        <item name="android:textColor">@color/buttontextcolor</item>
    </style>
</resources>

这是布局文件:

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/background"
    tools:context="com.skymedium.theblowdryer.MainActivity"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:background="@color/menue"
        android:id="@+id/menue" >
        <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:gravity="center_vertical"
        android:id="@+id/row1" >

            <Button
                android:id="@+id/tab"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="0.5"
                android:text="@string/jukebox" />

            <RelativeLayout
                android:gravity="center_vertical"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:layout_weight="0.5"
                android:id="@+id/subrow" >
                <ImageView
                    android:id="@+id/tooltip"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="15dp"
                    android:layout_alignParentRight="true"
                    android:scaleType="fitCenter"
                    android:src="@drawable/abc_ab_share_pack_holo_dark" />
            </RelativeLayout>

        </LinearLayout>/
        <LinearLayout
        android:gravity="center_vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:id="@+id/row2" >
            <ToggleButton
            android:id="@+id/onoff"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="ToggleButton"
            android:layout_marginRight="5dp"
            android:layout_weight="0.7" />
            <SeekBar
            android:id="@+id/seekBar1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_weight="0.3" />
        </LinearLayout>
    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:id="@+id/swipearea" >
        <ProgressBar
        android:id="@+id/progressBar1"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_height="wrap_content" />
        <ImageView
        android:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="fitCenter"
        android:adjustViewBounds="true"
        android:layout_gravity="top"
        android:src="@drawable/abc_ab_share_pack_holo_dark" />

    </LinearLayout>



</LinearLayout>

我试图设置<item name="colorButtonNormal">@color/button_color</item> 在较旧的API上也不起作用.

I tried to set <item name="colorButtonNormal">@color/button_color</item> It doesnt work too on older APIs.

提前谢谢！

推荐答案

您将其倒退.让我解释一下，

You have it backwards. Let me explain,

styles.xml

styles.xml

<resources>

<!--
    Base application theme, dependent on API level. This theme is replaced
    by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
-->
<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
    <!--
        Theme customizations available in newer API levels can go in
        res/values-vXX/styles.xml, while customizations related to
        backward-compatibility can go here.
    -->
    <!-- customize the color palette -->


    <!--Notice!!! No "android" prefix!-->
    <item name="colorPrimary">@color/teal200</item>
    <item name="colorPrimaryDark">@color/teal500</item>
    <item name="colorAccent">@color/material_green_A200</item>



    <item name="android:statusBarColor">@color/teal500</item>
    <item name="android:navigationBarColor">@color/teal500</item>
    <item name="android:windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="android:colorButtonNormal">@color/button</item>
    <item name="colorControlNormal">@color/deeporange300</item>
    <item name="colorControlActivated">@color/deeporange500</item>
    <item name="colorControlHighlight">@color/material_green_A200</item>        
</style>
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
    <!-- All customizations that are specific to a particular API-level befor 21 can go here. -->
</style>

styles-v21

styles-v21

<resources>
    <style name="AppTheme" parent="AppBaseTheme">
        <!-- Customize your theme using Material Design here. -->


        <!--Be sure to define your colors here as well! but this time use "android:"-->
        <item name="android:colorPrimary">@color/teal200</item>
        <item name="android:colorPrimaryDark">@color/teal500</item>
        <item name="android:colorAccent">@color/material_green_A200</item>





        <item name="android:buttonStyle">@style/button</item>
        <item name="android:buttonStyleToggle">@style/togglebutton</item>
    </style>
    <style name="button" parent="@android:style/Widget.Material.Button">
        <item name="android:textColor">@color/buttontextcolor</item>
    </style>
    <style name="togglebutton" parent="@android:style/Widget.Material.Button.Toggle">
        <item name="android:textColor">@color/buttontextcolor</item>
    </style>
</resources>

styles.xml表示< API 21不应为颜色使用"android"前缀.

styles.xml for < API 21 should not use the "android" prefix for your colors.

使用android前缀定义颜色.上面的XML应该可以使用！

in styles.xml v-21 define your colors WITH the android prefix. The XML above should work!

这篇关于Material Design和appcompat在旧版API上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！