如何更改主题更改时浮动操作按钮的颜色?

Posted

技术标签:

【中文标题】如何更改主题更改时浮动操作按钮的颜色?【英文标题】:How to change color of floating action button on theme change? 【发布时间】:2016-02-16 05:41:04 【问题描述】:

我想在我的应用程序中应用不同的主题。我想更改导航栏和浮动操作按钮的颜色。

现在我可以更改导航栏的颜色,但浮动操作按钮的颜色不会改变。更改主题时如何动态更改fab的颜色?

风格:

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="colorAccent_500">@color/accent_500</item>
        <item name="colorAccent_700">@color/accent_700</item>

        <item name="windowActionBarOverlay">false</item>

        <item name="windowActionBar">false</item>

        <item name="windowNoTitle">true</item>
        <item name="android:windowBackground">@color/background_material_light</item>
    </style>
    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />


    <style name="BlueTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">#3F51B5</item>
        <item name="colorPrimaryDark">#303F9F</item>
        <item name="colorAccent">#03A9F4</item>

        <item name="windowActionBarOverlay">false</item>

        <item name="windowActionBar">false</item>

        <item name="windowNoTitle">true</item>
        <item name="android:windowBackground">@color/background_material_light</item>
    </style>


    <style name="AppTheme.Solarized">
        <item name="colorPrimary">@color/orange300</item>
        <item name="colorPrimaryDark">@color/orange500</item>
        <item name="colorAccent">@color/solarizedOrange</item>
        <item name="android:textColorPrimary">@color/solarizedBase01</item>
        <item name="android:textColorSecondary">@color/solarizedBase1</item>
    </style>


</resources>

工厂:

    <?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main_fab"
    android:layout_
    android:layout_
    android:layout_gravity="bottom|end">

    <View
        android:id="@+id/myfab_shadow"
        android:layout_
        android:layout_
        android:layout_gravity="center"
        android:background="@drawable/fab_shadow"
        android:focusable="false" />

    <ImageButton
        android:id="@+id/imgbtn_fab"
        android:layout_
        android:layout_
        android:layout_gravity="center"
        android:background="@drawable/fab_selector"
        android:cropToPadding="true"
        android:padding="10dp"
        android:src="@drawable/ic_add_white_36dp"
        android:stateListAnimator="@animator/fab_elevation_selector" />

</FrameLayout>

工厂选择器:

  <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true">
        <shape android:shape="oval">
            <solid android:color="@color/colorAccent" />
        </shape>
    </item>

    <item android:state_focused="true">
        <shape android:shape="oval">
            <solid android:color="@color/accent_700" />
        </shape>
    </item>

    <item>
        <shape android:shape="oval">
            <solid android:color="@color/accent_500" />
        </shape>
    </item>

</selector>

谢谢你..

【问题讨论】:

从 color.xml 文件中更改强调色的颜色值 【参考方案1】:

浮动操作按钮的颜色基于您的 colorAccent

<style name="AppTheme" parent="Base.Theme.AppCompat.Light">
    <item name="colorAccent">@color/accent</item>
</style>

或来自代码:

fab.setBackgroundTintList(getResources().getColorStateList(R.color.blue));

或来自 XML:

改变app:backgroundTint的属性

但您似乎使用的是 ImageButton 而不是 FloatingActionButton,您应该使用:

 <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_
        android:layout_
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin" />

并在依赖项中添加:

dependencies 
    compile 'com.android.support:design:23.1.1'

【讨论】:

fab 的颜色在 fab 选择器中设置。我怎样才能在那里改变颜色? 为此,他需要用 替换自定义 fab 布局示例:github.com/android/platform_development/blob/master/samples/… 看来您使用的是 ImageButton 而不是 FloatingActionButton,请参阅编辑后的答案【参考方案2】:

感谢您的回答。但我只是更改了 fab 选择器。

<item android:state_pressed="true">
    <shape android:shape="oval">
        <solid android:color="?attr/colorAccent" />
    </shape>
</item>

<item android:state_focused="true">
    <shape android:shape="oval">
        <solid android:color="?attr/colorAccent" />

    </shape>
</item>

<item>
    <shape android:shape="oval">
        <solid android:color="?attr/colorAccent" />
    </shape>
</item>

这行得通..

【讨论】:

【参考方案3】:

请使用带有浮动按钮的材质形状主题,现在非常简单,无需自定义

【讨论】:

以上是关于如何更改主题更改时浮动操作按钮的颜色?的主要内容,如果未能解决你的问题,请参考以下文章

如何在主题中全局更改android按钮文本颜色

MUI - 更改主题中的按钮文本颜色

如何更改浮动操作按钮的颜色?

如何更改 Material-UI AppBar 的明暗主题颜色?

更改android应用程序的基本主题颜色

当主题更改 vuetify 时,使用“辅助”组件的颜色不会改变