Ubah warna Toolbar di Appcompat 21


93

Saya menguji fitur Appcompat 21 Material Design yang baru. Oleh karena itu saya telah membuat Toolbar seperti ini:

<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/activity_my_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="@style/ThemeOverlay.AppCompat.ActionBar"/>

dan memasukkannya ke dalam file tata letak utama saya.

Lalu saya menetapkannya sebagai supportActionBar seperti itu:

Toolbar toolBar = (Toolbar)findViewById(R.id.activity_my_toolbar);
setSupportActionBar(toolBar);

Ini berfungsi, tetapi entah bagaimana saya tidak tahu cara menyesuaikan bilah alat. Warnanya abu-abu dan teks di atasnya berwarna hitam. Bagaimana cara mengubah latar belakang dan warna teks?

Saya telah melalui instruksi ini:

http://android-developers.blogspot.de/2014/10/appcompat-v21-material-design-for-pre.html

Apa yang telah saya awasi untuk mengubah warna?

 <style name="AppTheme" parent="Theme.AppCompat.Light">
    <item name="android:windowActionBar" tools:ignore="NewApi">false</item>
    <item name="windowActionBar">false</item>
</style>

EDIT :

Saya bisa mengubah warna latar belakang dengan menambahkan baris kode berikut ke tema:

<item name="colorPrimary">@color/actionbar</item>
<item name="colorPrimaryDark">@color/actionbar_dark</item>

Tapi mereka tidak akan mempengaruhi warna teks. Apa yang saya lewatkan? Alih-alih teks hitam dan tombol menu hitam, saya lebih suka teks putih dan tombol menu putih:

masukkan deskripsi gambar di sini


seperti apa tema Anda untuk aktivitas tersebut? apakah Anda menyetel warna untuk Toolbar di sana seperti yang seharusnya?
tyczj

@tyczj Saya menambahkan tema ke posting saya
user2410644

ok baik ada Anda menjawab Anda tidak mengatur warna Anda
tyczj

@tyczj, Ya, saya telah mengedit posting saya lagi, saya menambahkan primarycolor dan primarydarkcolor, tetapi atribut mana yang mengubah warna teks?
pengguna2410644

Jawaban:


185

sekali lagi ini semua ada di tautan yang Anda berikan

untuk mengubah teks menjadi putih yang harus Anda lakukan adalah mengubah tema.

gunakan tema ini

<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/activity_my_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

4
Ya, baru saja menyadari hal yang sama, tiba-tiba membingungkan bahwa bilah aksi gelap memiliki teks terang dan bilah aksi terang teks gelap ... Terima kasih!
pengguna2410644

4
Saya telah melakukan seperti ini, tetapi masih mendapatkan font warna hitam, apakah saya melewatkan sesuatu?
alijandro

6
Jadi, sepertinya @ style / ThemeOverlay.AppCompat.Dark.ActionBar di app: theme mengubah teks toolbar menjadi putih dan @ style / ThemeOverlay.AppCompat.Light mengubahnya menjadi hitam. Warna latar belakang diambil dari atribut android: background. Sedangkan pada app: popupTheme: @ style / ThemeOverlay.AppCompat.Dark memberikan teks putih dan background hitam dan @ style / ThemeOverlay.AppCompat.Light memberikan teks hitam dan latar belakang putih. gist.github.com/mnemonicflow/7cba09f6461ec86b22b7
bitek

1
Terima kasih! : D google benar-benar mengacaukan gaya Toolbar di android. Fakta bahwa pertanyaan ini memiliki 50 suara positif dan 22 suara mulai adalah buktinya.
FRR

1
Jika judul masih tetap hitam setelah mengatur gaya. Pastikan Anda memperpanjang, AppCompatActivitybukan Activity.
Stefana

60

UPDATE 12/11/2019: Pustaka Komponen Material

Dengan Material Components dan library Androidx, Anda dapat menggunakan:

  • yang android:backgroundatribut dalam tata letak:

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
  • terapkan gaya default: style="@style/Widget.MaterialComponents.Toolbar.Primary"atau sesuaikan gaya yang diwarisi darinya:

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        style="@style/Widget.MaterialComponents.Toolbar.Primary"
  • ganti warna default menggunakan android:themeatribut:

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:theme="@style/MyThemeOverlay_Toolbar"

dengan:

  <style name="MyThemeOverlay_Toolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
    <item name="android:textColorPrimary">....</item>
    <item name="colorPrimary">@color/.....
    <item name="colorOnPrimary">@color/....</item>
  </style>

LAMA: Pustaka dukungan:
Anda dapat menggunakan app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"tema seperti yang disarankan dalam jawaban lain, tetapi Anda juga dapat menggunakan solusi seperti ini:

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    style="@style/HeaderBar"
    app:theme="@style/ActionBarThemeOverlay"
    app:popupTheme="@style/ActionBarPopupThemeOverlay"/>

Dan Anda dapat memiliki kontrol penuh atas elemen ui Anda dengan gaya ini:

<style name="ActionBarThemeOverlay" parent="">
    <item name="android:textColorPrimary">#fff</item>
    <item name="colorControlNormal">#fff</item>
    <item name="colorControlHighlight">#3fff</item>
</style>

<style name="HeaderBar">
    <item name="android:background">?colorPrimary</item>
</style>

<style name="ActionBarPopupThemeOverlay" parent="ThemeOverlay.AppCompat.Light" >
    <item name="android:background">@android:color/white</item>
    <item name="android:textColor">#000</item>
</style>

Ini tidak berhasil untuk saya. Menu popup masih berlatar belakang hitam dengan teks putih
Sunkas

1
Tidak membantu. Ini membutuhkan level API Min 21
Vaibhav Gupta

3
@VaibhavGupta Appcompat membutuhkan minSdk = 7 bukan 21.
Gabriele Mariotti

10

Hai jika Anda ingin menerapkan tema Material hanya untuk android 5.0 maka Anda dapat menambahkan tema ini di dalamnya

<style name="AppHomeTheme" parent="@android:style/Theme.Material.Light">

        <!-- customize the color palette -->
        <item name="android:colorPrimary">@color/blue_dark_bg</item>
        <item name="android:colorPrimaryDark">@color/blue_status_bar</item>
        <item name="android:colorAccent">@color/blue_color_accent</item>
        <item name="android:textColor">@android:color/white</item>
        <item name="android:textColorPrimary">@android:color/white</item>
        <item name="android:actionMenuTextColor">@android:color/black</item>
    </style> 

Di sini, baris di bawah ini bertanggung jawab atas warna teks dari Actionbar desain Material.

<item name="android:textColorPrimary">@android:color/white</item>

6

Anda dapat menyetel warna item toolbar kustom secara dinamis dengan membuat kelas toolbar kustom:

package view;

import android.app.Activity;
import android.content.Context;
import android.graphics.ColorFilter;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffColorFilter;
import android.support.v7.internal.view.menu.ActionMenuItemView;
import android.support.v7.widget.ActionMenuView;
import android.support.v7.widget.Toolbar;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AutoCompleteTextView;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.TextView;

public class CustomToolbar extends Toolbar{

    public CustomToolbar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // TODO Auto-generated constructor stub
    }

    public CustomToolbar(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
    }

    public CustomToolbar(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
        ctxt = context;
    }

    int itemColor;
    Context ctxt;

    @Override 
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        Log.d("LL", "onLayout");
        super.onLayout(changed, l, t, r, b);
        colorizeToolbar(this, itemColor, (Activity) ctxt);
    } 

    public void setItemColor(int color){
        itemColor = color;
        colorizeToolbar(this, itemColor, (Activity) ctxt);
    }



    /**
     * Use this method to colorize toolbar icons to the desired target color
     * @param toolbarView toolbar view being colored
     * @param toolbarIconsColor the target color of toolbar icons
     * @param activity reference to activity needed to register observers
     */
    public static void colorizeToolbar(Toolbar toolbarView, int toolbarIconsColor, Activity activity) {
        final PorterDuffColorFilter colorFilter
                = new PorterDuffColorFilter(toolbarIconsColor, PorterDuff.Mode.SRC_IN);

        for(int i = 0; i < toolbarView.getChildCount(); i++) {
            final View v = toolbarView.getChildAt(i);

            doColorizing(v, colorFilter, toolbarIconsColor);
        }

      //Step 3: Changing the color of title and subtitle.
        toolbarView.setTitleTextColor(toolbarIconsColor);
        toolbarView.setSubtitleTextColor(toolbarIconsColor);
    }

    public static void doColorizing(View v, final ColorFilter colorFilter, int toolbarIconsColor){
        if(v instanceof ImageButton) {
            ((ImageButton)v).getDrawable().setAlpha(255);
            ((ImageButton)v).getDrawable().setColorFilter(colorFilter);
        }

        if(v instanceof ImageView) {
            ((ImageView)v).getDrawable().setAlpha(255);
            ((ImageView)v).getDrawable().setColorFilter(colorFilter);
        }

        if(v instanceof AutoCompleteTextView) {
            ((AutoCompleteTextView)v).setTextColor(toolbarIconsColor);
        }

        if(v instanceof TextView) {
            ((TextView)v).setTextColor(toolbarIconsColor);
        }

        if(v instanceof EditText) {
            ((EditText)v).setTextColor(toolbarIconsColor);
        }

        if (v instanceof ViewGroup){
            for (int lli =0; lli< ((ViewGroup)v).getChildCount(); lli ++){
                doColorizing(((ViewGroup)v).getChildAt(lli), colorFilter, toolbarIconsColor);
            }
        }

        if(v instanceof ActionMenuView) {
            for(int j = 0; j < ((ActionMenuView)v).getChildCount(); j++) {

                //Step 2: Changing the color of any ActionMenuViews - icons that
                //are not back button, nor text, nor overflow menu icon.
                final View innerView = ((ActionMenuView)v).getChildAt(j);

                if(innerView instanceof ActionMenuItemView) {
                    int drawablesCount = ((ActionMenuItemView)innerView).getCompoundDrawables().length;
                    for(int k = 0; k < drawablesCount; k++) {
                        if(((ActionMenuItemView)innerView).getCompoundDrawables()[k] != null) {
                            final int finalK = k;

                            //Important to set the color filter in seperate thread, 
                            //by adding it to the message queue
                            //Won't work otherwise. 
                            //Works fine for my case but needs more testing

                            ((ActionMenuItemView) innerView).getCompoundDrawables()[finalK].setColorFilter(colorFilter);

//                              innerView.post(new Runnable() {
//                                  @Override
//                                  public void run() {
//                                      ((ActionMenuItemView) innerView).getCompoundDrawables()[finalK].setColorFilter(colorFilter);
//                                  }
//                              });
                        }
                    }
                }
            }
        }
    }



}

kemudian lihat di file layout Anda. Sekarang Anda dapat mengatur warna khusus menggunakan

toolbar.setItemColor(Color.Red);

Sumber:

Saya menemukan informasi untuk melakukan ini di sini: Cara mengubah warna ikon Toolbar Android secara dinamis

dan kemudian saya mengeditnya, memperbaikinya, dan mempostingnya di sini: GitHub: AndroidDynamicToolbarItemColor


5

Inilah yang dikenal sebagai DarkActionBar yang berarti Anda harus menggunakan tema berikut untuk mendapatkan gaya yang Anda inginkan:

<android.support.v7.widget.Toolbar  
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="@dimen/triple_height_toolbar"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

2

Anda dapat mengubah warna teks di toolbar dengan ini:

<item name="android:textColorPrimary">#FFFFFF</item>
<item name="android:textColor">#FFFFFF</item>

2

Capai ini dengan menggunakan toolbarseperti ini:

<android.support.v7.widget.Toolbar
        android:id="@+id/base_toolbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

1

Coba ini di styles.xml Anda:

colorPrimary akan menjadi warna toolbar.

<resources>

<style name="AppTheme" parent="Theme.AppCompat">
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_pressed</item>
    <item name="colorAccent">@color/accent</item>
</style>

Apakah Anda membuat ini di Eclipse?


1

saya memecahkan masalah ini setelah studi lebih lanjut ...

untuk Api21 dan lebih banyak digunakan

   <item name="android:textColorPrimary">@color/white</item>

untuk penggunaan versi yang lebih rendah

   <item name="actionMenuTextColor">@color/white</item>

1

Jika Anda ingin mengubah warna toolbar di seluruh aplikasi Anda, manfaatkan styles.xml. Secara umum, saya menghindari mengubah komponen ui dalam kode java saya kecuali saya mencoba melakukan sesuatu secara programatik. Jika ini adalah satu set waktu, maka Anda harus melakukannya dalam xml untuk membuat kode Anda lebih bersih. Berikut adalah tampilan styles.xml Anda:

    <!-- Base application theme. -->
<style name="YourAppName.AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Color Primary will be your toolbar color -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <!-- Color Primary Dark will be your default status bar color -->
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
</style>

Pastikan Anda menggunakan gaya di atas dalam AndroidManifext.xml Anda seperti:

    <application
        android:theme="@style/YourAppName.AppTheme">
    </application>

Saya menginginkan warna toolbar yang berbeda untuk aktivitas yang berbeda. Jadi saya memanfaatkan gaya lagi seperti ini:

    <style name="YourAppName.AppTheme.Activity1">
    <item name="colorPrimary">@color/activity1_primary</item>
    <item name="colorPrimaryDark">@color/activity1_primaryDark</item>
</style>

<style name="YourAppName.AppTheme.Activity2">
    <item name="colorPrimary">@color/activity2_primary</item>
    <item name="colorPrimaryDark">@color/activity2_primaryDark</item>
</style>

sekali lagi, terapkan gaya ke setiap aktivitas di AndroidManifest.xml Anda seperti:

<activity
    android:name=".Activity2"
    android:theme="@style/YourAppName.AppTheme.Activity2"
</activity>

<activity
    android:name=".Activity1"
    android:theme="@style/YourAppName.AppTheme.Activity1"
</activity>

0

Untuk orang yang menggunakan AppCompatActivity dengan Toolbar sebagai latar belakang putih. Gunakan kode ini.

Diperbarui: Desember 2017

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

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_edit"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:popupTheme="@style/AppTheme.AppBarOverlay"
        app:title="Edit Your Profile"/>

</android.support.design.widget.AppBarLayout>

1
Apa bedanya dengan Toolbar default?
CoolMind
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.