วิธีตั้งค่าข้อความแถบเครื่องมือและสีลูกศรย้อนกลับ


116

พื้นหลังของแถบเครื่องมือเป็นสีเข้มฉันต้องการให้ข้อความและลูกศรย้อนกลับเป็นสีขาว ฉันพยายามติดตาม แต่มันไม่ได้ผล

<style name="Theme.MyTheme" parent="Theme.AppCompat.Light.NoActionBar">

        <item name="colorPrimary">@color/blue</item>
        <item name="colorPrimaryDark">@color/blue_darker</item>
        <item name="colorAccent">@color/purple</item>
        <!-- item name="android:textColorPrimary">@color/white</item--> // I don't want to set this, changes everywhere. 
        <item name="android:textColorSecondary">@color/white</item>
        <item name="android:toolbarStyle">@style/AppTheme.ToolbarStyle</item>
        <item name="toolbarStyle">@style/AppTheme.ToolbarStyle</item>

        <item name="drawerArrowStyle">@style/AppTheme.DrawerArrowStyle</item>

    </style>

    <style name="AppTheme.ToolbarStyle" parent="Base.Widget.AppCompat.Toolbar">
        <!--<item name="actionOverflowButtonStyle">@style/AppTheme.OverflowButtonStyle</item>-->
        <item name="android:textColor">@color/white</item> // doesn't work
        <item name="titleTextAppearance">@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse</item>
        <item name="android:titleTextAppearance">@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse</item>
        <item name="subtitleTextAppearance">@style/TextAppearance.Widget.AppCompat.Toolbar.Subtitle</item>
    </style>

10
พยายามเพิ่มapp:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"ของคุณ<android.support.v7.widget.Toolbar>; ลูกศรย้อนกลับและข้อความจะเป็นสีขาวเหมือนที่ @yubarajpoudel กล่าว
1111161171159459134

คำตอบ:


153

มีโอกาสที่คุณจะขยายความจากผู้ปกครองที่ไม่ถูกต้อง หากไม่เป็นเช่นนั้นคุณสามารถลองเพิ่มstyleลงในtoolbarเค้าโครงได้โดยตรงหากคุณต้องการแทนที่การตั้งค่าของธีม

ในเค้าโครงแถบเครื่องมือของคุณ:

 <android.support.v7.widget.Toolbar
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      android:id="@+id/toolbar"
      android:layout_width="match_parent"
      android:layout_height="?attr/actionBarSize"
      android:minHeight="?attr/actionBarSize"
      app:theme="@style/ToolBarStyle"
      app:popupTheme="@style/ToolBarPopupStyle"
      android:background="@color/actionbar_color" />

ในสไตล์ของคุณ:

 <!-- ToolBar -->
  <style name="ToolBarStyle" parent="Theme.AppCompat">
      <item name="android:textColorPrimary">@android:color/white</item>
      <item name="android:textColorSecondary">@android:color/white</item>
      <item name="actionMenuTextColor">@android:color/white</item>      
      <item name="actionOverflowButtonStyle">@style/ActionButtonOverflowStyle</item>
      <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
 </style>

5
ให้ข้อผิดพลาดขณะเพิ่มสไตล์นี้ในstyles.xmlไฟล์
Gopal Singh Sirvi

1
คุณไม่จำเป็นต้องมีส่วน DrawerArrowStyle เพื่อตอบคำถาม
luckyhandler

124

เพิ่มสิ่งต่อไปนี้เป็น toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:fitsSystemWindows="true"
    android:minHeight="?attr/actionBarSize"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    android:background="?attr/colorPrimary">

</android.support.v7.widget.Toolbar>

จากนั้นในเค้าโครงที่คุณต้องการ

<include layout="@layout/toolbar"/>

สนุก


10
ใช่ได้ผล! app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"โดยเฉพาะ
1111161171159459134

1
ควรจะเป็น<include layout="@layout/toolbar"/>
ทิม

64

ภายในกิจกรรมคุณสามารถใช้

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    toolbar.setTitleTextColor(getResources().getColor(android.R.color.white));

หากคุณชอบที่จะเลือก xml สำหรับทั้งสีชื่อและลูกศรย้อนกลับสีขาวเพียงแค่เพิ่มสไตล์นี้ใน style.xml

 <style name="ToolBarStyle" parent="Theme.AppCompat">
    <item name="android:textColorPrimary">@android:color/white</item>
    <item name="android:textColorSecondary">@android:color/white</item>
    <item name="actionMenuTextColor">@android:color/white</item>
</style>

และแถบเครื่องมือมีลักษณะดังนี้:

 <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        app:theme="@style/ToolBarStyle"
        android:layout_height="?attr/actionBarSize"
  />

1
ได้ผล! คำตอบแบบสุ่มมากมาย - ฉันคิดว่าสิ่งที่ควรทราบก็คือสิ่งนี้ใช้ได้กับ: android.support.v7.widget แถบเครื่องมือที่ซ้อนอยู่ภายใน: android.support.design.widget.AppBarLayout ขอบคุณมาก
Sagar Patel

1
โซลูชัน java ไม่เปลี่ยนสีลูกศร
java-love

19

วิธีนี้อาจจะง่ายกว่า แต่ต้องใช้ API เวอร์ชันที่สูงกว่า (23) เพียงเพิ่มรหัสนี้ในแถบเครื่องมือของคุณใน XML:

<Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?android:attr/actionBarSize"
    android:background="?android:attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    android:titleTextColor="#ffffffff" />

@VygintasB true
Tom Esendam

1
ไม่จำเป็นต้องตั้งค่า android: titleTextColor = "# ffffffff" เพียงแค่ android: theme = "@ style / ThemeOverlay.AppCompat.Dark.ActionBar" และ app: popupTheme = "@ style / ThemeOverlay.AppCompat.Light"
Almeida

16

หากคุณใช้AndroidX(ณ เดือนกรกฎาคม 2019) คุณสามารถเพิ่มสิ่งเหล่านี้:

<androidx.appcompat.widget.Toolbar
  android:id="@+id/toolbar"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  app:layout_collapseMode="pin"
  app:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar"
  app:popupTheme="@style/ThemeOverlay.MaterialComponents.Light"/>

บันทึก! สิ่งนี้ได้รับการทดสอบแล้วว่าใช้งานได้หากคุณToolbarวางไว้ด้านในโดยตรงAppBarLayoutแต่ไม่ใช่ด้านในCollapsingToolbarLayout


9
<android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimaryDark"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>

นี่คือคำตอบหากคุณมีappbarlayoutไฟล์. ขอบคุณ!
Nuhman

8

วิธีนี้ช่วยฉันได้

<style name="AppTheme" parent="Theme.AppCompat.Light">
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primaryDark</item>
        <item name="colorAccent">@color/highlightRed</item>
        <item name="actionBarTheme">@style/ToolbarStyle</item>
</style>

<style name="ToolbarStyle" parent="Widget.AppCompat.ActionBar">
        <item name="android:textColorPrimary">@color/white</item>
</style>

6
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/actionBar"
app:titleTextAppearance="@style/ToolbarTitleText"
app:theme="@style/ToolBarStyle">

<TextView
    android:id="@+id/title"
    style="@style/ToolbarTitleText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="hh"/>

<!-- ToolBar -->
<style name="ToolBarStyle" parent="Widget.AppCompat.Toolbar">
    <item name="actionMenuTextColor">#ff63BBF7</item>
</style>

ใช้แอป: theme = "@ style / ToolBarStyle"

แหล่งข้อมูลอ้างอิง: http: //blog.csdn.net/wyyl1/article/details/45972371


1
โปรดอธิบายคำตอบของคุณเพียงแค่การโพสต์รหัสยังไม่ชัดเจนในการตอบคำถาม
SuperBiasedMan

3

ลองใช้กับไฟล์ XML ของคุณ

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        app:titleTextColor="@color/colorAccent"
        app:theme="@style/ToolbarColoredBackArrow"
        app:subtitleTextColor="@color/colorAccent"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

และเพิ่มนี่คือไฟล์ colors.xml ของคุณ

    <color name="colorAccent">YOUR_COLOR</color>

1
โปรดแชร์สิ่งที่อยู่ในแอปนี้ให้เราฟังได้ไหม: theme = "@ style / ToolbarColoredBackArrow"
Simon


1

ลองใช้หลายวิธีใน API เวอร์ชันต่ำวิธีที่เป็นไปได้คือ<item name="actionMenuTextColor">@color/your_color</item>และอย่าใช้เนมสเปซ Android

PS:

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

    <!-- change the textColor -->
    <item name="actionMenuTextColor">@color/actionMenuTextColor</item>
</style>

1

ฉันใช้ตัวยึดตำแหน่งดังนั้นเพียงทำตามเพราะคุณอาจต้องการคงการสืบทอดจากรูปแบบเดิม

ก่อน

<android.support.v7.widget.Toolbar
    android:id="@+id/toolBar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    android:theme="@style/{{originalBaseStyle}}"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

หลังจาก:

styles.xml

<style name="{{yourToolbarStyle}}" parent="{{originalBaseStyle}}">
    <item name="android:textColorPrimary">@android:color/white</item>
    <item name="android:textColorSecondary">@android:color/white</item>
    <item name="actionMenuTextColor">@android:color/white</item>
    <item name="actionOverflowButtonStyle">@style/ActionButtonOverflowStyle</item>
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>

ดังนั้น

<android.support.v7.widget.Toolbar
    android:id="@+id/toolBar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    android:theme="@style/{{yourToolbarStyle}}"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

1

หากเราทำตามเทมเพลตกิจกรรมที่สร้างโดย Android Studios นั่นคือ AppBarLayout ที่ต้องมีธีมของ AppBarOverlay สำหรับ Android ซึ่งคุณควรกำหนดใน styles.xml ของคุณ สิ่งนี้ควรให้ข้อความสี toobar / actionbar สีขาวของคุณ

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">  ...

ใน styles.xml ตรวจสอบให้แน่ใจว่ามีสิ่งต่อไปนี้:

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

1

วิธีนี้ใช้ได้ผลสำหรับฉันโดยใช้ไลบรารีส่วนประกอบวัสดุ:

ในstyles.xml:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <!-- Your styles here -->

    <item name="toolbarStyle">@style/AppTheme.Toolbar</item>
</style>

<style name="AppTheme.Toolbar" parent="Widget.MaterialComponents.Toolbar">
    <item name="titleTextColor">@android:color/white</item>
</style>

ดัดแปลงจากคำตอบนี้: https://stackoverflow.com/a/48205577/238753


0

ในการเปลี่ยนไอคอนด้านหลังของ Toolbar ที่วาดได้คุณสามารถใช้สิ่งนี้:
เพิ่ม<item name="toolbarStyle">@style/ToolbarStyle</item>ลงในธีมของคุณ
และนี่คือToolbarStyleตัวของมันเอง:

<style name="ToolbarStyle" parent="Widget.AppCompat.Toolbar">
    <item name="navigationIcon">@drawable/ic_up_indicator</item>
</style>

0

หากใช้การทำซ้ำล่าสุดของ Android Studio 3.0 และสร้างคลาสกิจกรรมในไฟล์สไตล์ของคุณจะเปลี่ยนสิ่งนี้:

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

สำหรับสิ่งนี้:

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.ActionBar" />
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.