【问题标题】:Android: how to change color of back button, font family and text size of title in material tool bar?Android:如何在材质工具栏中更改后退按钮的颜色、字体系列和标题的文本大小?
【发布时间】:2020-10-18 11:54:38
【问题描述】:

我在我的活动中使用自定义材质工具栏(显示后退按钮和活动标题)。我希望后退按钮和标题为黑色。

此活动的导航和状态栏(电池、时间)目前是沉浸式的。我尝试使用下面的链接使用材质工具栏方法覆盖默认颜色,但它不起作用。后退按钮仍然是白色的。我不确定为什么会这样。我什至四处看看工具栏是否向我显示打开的 sans,但它并没有改变 textSize 工作。 How to change color of Toolbar back button in Android?

在我的清单文件中,我的活动使用以下主题。

<activity 
     android:name=".RegisterActivity"
     android:theme="@style/CustomActivityTheme">
</activity>

在我的自定义 action_bar_layout.xml 文件中

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_gravity="center"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:fontFamily="@font/open_sans"
        android:textSize="24sp"
        style="@style/Widget.MaterialComponents.Toolbar.Primary"
        android:theme="@style/MyThemeOverlay_Toolbar2"
        />
</LinearLayout>

在我的颜色文件中

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#00BEBA</color>
    <color name="colorPrimaryDark">#00BEBA</color>
    <color name="colorAccent">#F60606</color>
    <color name="appBackgroundColor">#00BEBA</color>
    <color name="textFieldColor">#000000</color>
</resources>

在我的样式文件中

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/textFieldColor</item>
    </style>

 <style name="CustomActivityTheme" parent="AppTheme">
        <!-- Customize your theme here. -->
        <item name="windowNoTitle">false</item>
        <item name="windowActionBar">true</item>
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowAnimationStyle">@android:style/Animation</item>
    </style>

    <style name="MyThemeOverlay_Toolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
        <!-- color used by navigation icon and overflow icon -->
        <item name="colorOnPrimary">@color/textFieldColor</item>
        <item name="actionBarTheme">@style/MyThemeOverlay_Toolbar2</item>
        <item name="colorControlNormal">@color/colorAccent</item>
    </style>

    <style name="MyThemeOverlay_Toolbar2" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
        <!-- This attributes is used by title -->
        <item name="android:textColorPrimary">@color/textFieldColor</item>
        <!-- This attributes is used by navigation icon and overflow icon -->
        <item name="colorOnPrimary">@color/textFieldColor</item>
    </style>

在我的 registerActivity java 代码中

import androidx.appcompat.app.ActionBar;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
public class RegisterActivity extends AppCompatActivity implements View.OnClickListener{

    Toolbar actionBar;
    int currentApiVersion;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_register);

        Log.d("TestToolBar", "inside Register Activity");

        //using custom toolbar instead of custom textView as action bar
        getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
        getSupportActionBar().setCustomView(R.layout.action_bar_layout);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        actionBar = findViewById(R.id.tvTitle);
        actionBar.setTitle(R.string.RegisterActionBar);

        hideNavigationBar();

    }

    public void hideNavigationBar() {
        currentApiVersion = android.os.Build.VERSION.SDK_INT;
        Log.d("TestToolBar", "api version is " + currentApiVersion);
        
        if (Build.VERSION.SDK_INT <= 21) {
            View v = this.getWindow().getDecorView();
            v.setSystemUiVisibility(View.GONE);
        } else {
            this.getWindow().getDecorView().setSystemUiVisibility(
                    View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY |
                            View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |
                            View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION |
                            View.SYSTEM_UI_FLAG_HIDE_NAVIGATION |
                            View.SYSTEM_UI_FLAG_FULLSCREEN);

            getWindow().setStatusBarColor(getResources().getColor(R.color.colorPrimary));
            getWindow().setNavigationBarColor(getResources().getColor(R.color.colorPrimary));
        }
    }

已更新。 使用 setSupportActionBar(toolbar);这行得通。但是我仍然需要修改我的activity_register.xml。使用 include 将我的 action_bar_layout 包含在内。如果不是我的 RegisterActivity.java 找不到我的工具栏。(空异常错误)

可以通过在 action_bar_layout.xml 中的 MaterialToolbar 中添加一个 textview 来更改字体系列

【问题讨论】:

  • 您的主题覆盖不起作用,因为您使用的是 ActionBar 而不是 Toolbar。使用 setSupportActionBar(toolbar)。

标签: android android-toolbar back-button material-components-android


【解决方案1】:

据我所知,还有更简单的方法。在您的工具栏中,添加以下属性:

app:titleTextAppearance="@style/ToolbarTheme"
app:navigationIcon="@drawable/ic_back"

然后在styles.xml中,添加

<style name="ToolbarThemeC" parent="ThemeOverlay.AppCompat.ActionBar">
    <item name="android:fontFamily">@font/lato</item>
    <item name="fontFamily">@font/lato</item>
    <item name="android:background">@color/White</item>
    <item name="android:textSize">24sp</item>
    <item name="iconTint">@color/colorPrimary</item>
    <item name="android:colorForeground">@color/colorPrimary</item>
    <item name="android:textColor">@color/colorPrimary</item>
    <item name="android:textColorSecondary">@color/colorPrimary</item>
    <item name="actionOverflowButtonStyle">@style/OverFlowTheme</item>
    <item name="actionOverflowMenuStyle">@style/OverFlowMenuTheme</item>
</style>

以及您想要的任何其他属性。

【讨论】:

    猜你喜欢
    • 2020-09-13
    • 1970-01-01
    • 2016-01-25
    • 2015-10-03
    • 2016-08-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-12-03
    相关资源
    最近更新 更多