Appcompat 21'de Araç Çubuğu rengini değiştirin

94

Yeni Appcompat 21 Materyal Tasarımı özelliklerini test ediyorum. Bu nedenle, bunun gibi bir Araç Çubuğu oluşturdum:

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

ve ana düzen dosyama ekledim.

Sonra bunu supportActionBar olarak ayarladım:

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

Çalışıyor, ancak bir şekilde araç çubuğunu nasıl özelleştireceğimi tam olarak çözemiyorum. Gri ve üzerindeki yazı siyah. Arka plan ve metin rengini nasıl değiştirmeliyim?

Bu talimatları uyguladım:

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

Renkleri değiştirmek için neyi denetledim?

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

DÜZENLE :

Bu kod satırlarını temaya ekleyerek arka plan rengini değiştirebildim:

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

Ancak metin rengini etkilemezler. Neyi kaçırıyorum? Siyah metin ve siyah menü düğmesi yerine beyaz metin ve beyaz menü düğmelerini tercih ederim:

görüntü açıklamasını buraya girin

android  android-actionbar  android-appcompat  android-actionbar-compat  android-toolbar 
— user2410644
kaynak
Aktivite için temanız nasıl görünüyor? oradaki Araç Çubuğu için olması gerektiği gibi renginizi belirlediniz mi?
— tyczj
@tyczj Mesajıma temayı ekliyorum
— user2410644
tamam, cevap verdin mi renklerini belirleme
— tyczj
@tyczj, Evet, gönderimi yeniden düzenledim, birincil renk ve birincildarkcolor ekledim, ancak hangi özellik metin rengini değiştirir?
— user2410644

Yanıtlar:

186

yine bunların hepsi sağladığınız bağlantıda

Metni beyaza çevirmek için tek yapmanız gereken temayı değiştirmek.

bu temayı kullan

<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"/>
— Tyczj
kaynak
4
Evet, sadece aynı şeyi fark ettim, aniden karanlık eylem çubuğunun açık metin ve açık eylem çubuğu koyu metin olması kafa karıştırıcı oldu ... Teşekkürler!
— user2410644
4
Bunu yaptım ama yine de siyah renkli yazı tipine sahibim, bir şey mi kaçırdım?
— alijandro
6
Dolayısıyla, uygulamadaki @ style / ThemeOverlay.AppCompat.Dark.ActionBar gibi görünüyor : theme, araç çubuğunun metnini beyaza ve @ style / ThemeOverlay.AppCompat.Light'ı siyah olarak değiştirir. Arka plan rengi android: arka plan özniteliğinden seçilir. Uygulamada ise: popupTheme: @ style / ThemeOverlay.AppCompat.Dark, beyaz metin ve siyah arka plan, @ style / ThemeOverlay.AppCompat.Light ise siyah metin ve beyaz arka plan verir. gist.github.com/mnemonicflow/7cba09f6461ec86b22b7
— Alex Bitek
1
Teşekkürler! : D google, araç çubuğunun android üzerindeki stilini gerçekten bozdu. Bu sorunun 50 olumlu oy içermesi ve 22 başlangıç ​​olması bunun kanıtıdır.
— FRR
1
Stilleri ayarladıktan sonra başlık hala siyah kalıyorsa. AppCompatActivityBunun yerine uzattığınızdan emin olun Activity.
— stefana
61

GÜNCELLEME 12/11/2019: Material Components Library

Materyal Bileşenleri ve Androidx kitaplıkları ile şunları kullanabilirsiniz:

  • android:backgrounddüzeninde özellik:

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

  • varsayılan stili uygulayın: style="@style/Widget.MaterialComponents.Toolbar.Primary"veya ondan devralan stili özelleştirin:

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

  • şu android:themeözelliği kullanarak varsayılan rengi geçersiz kılın :

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

ile:

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

ESKİ: Destek kitaplıkları: Diğer yanıtlarda önerildiği gibi
bir app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"temayı kullanabilirsiniz , ancak bunun gibi bir çözüm de kullanabilirsiniz:

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

Ve şu stillerle kullanıcı arabirimi öğelerinizin tam kontrolüne sahip olabilirsiniz:

<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>
— Gabriele Mariotti
kaynak
Bu benim için çalışmıyor. Açılır menü hala beyaz metinle siyah arka planda duruyor
— Sunkas
1
Yararlı değil. Min API seviyesi 21 gerektirir
— Vaibhav Gupta
3
@VaibhavGupta Appcompat için minSdk = 7 değil 21 gerekir.
— Gabriele Mariotti
11

Hey, Materyal temasını yalnızca android 5.0 için uygulamak istiyorsanız, o zaman bu temayı buna ekleyebilirsiniz.

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

Aşağıdaki satır, Material tasarımının Actionbar'ın metin renginden sorumludur.

<item name="android:textColorPrimary">@android:color/white</item>
— Herry
kaynak
6

Özel bir araç çubuğu sınıfı oluşturarak dinamik olarak özel bir araç çubuğu öğesi rengi ayarlayabilirsiniz :

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);
//                                  }
//                              });
                        }
                    }
                }
            }
        }
    }



}

daha sonra mizanpaj dosyanızda buna bakın. Şimdi kullanarak özel bir renk ayarlayabilirsiniz

toolbar.setItemColor(Color.Red);

Kaynaklar:

Bunu yapmak için gerekli bilgileri burada buldum: Android Araç Çubuğu simgelerinin rengini dinamik olarak değiştirme

ve sonra düzenledim, geliştirdim ve buraya gönderdim: GitHub: AndroidDynamicToolbarItemColor

— Michael Kern
kaynak
5

Bu, DarkActionBar olarak bilinen şeydir; bu, istediğiniz stili elde etmek için aşağıdaki temayı kullanmanız gerektiği anlamına gelir:

<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" />
— MrEngineer13
kaynak
2

Araç çubuğundaki metnin rengini aşağıdakilerle değiştirebilirsiniz:

<item name="android:textColorPrimary">#FFFFFF</item>
<item name="android:textColor">#FFFFFF</item>
— Chris Cromer
kaynak
2

Bunu şu şekilde kullanarak başarın toolbar:

<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"/>
— Clementiano
kaynak
1

Bunu styles.xml dosyanızda deneyin:

colorPrimary, araç çubuğu rengi olacaktır.

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

Bu arada bunu Eclipse'de mi yaptın?

1

Bu sorunu daha fazla çalıştıktan sonra çözdüm ...

Api21 ve daha fazla kullanım için

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

Daha düşük sürümler için kullanın

   <item name="actionMenuTextColor">@color/white</item>
— Dinesh
kaynak
1

Araç çubuğunuzun rengini uygulamanızın tamamında değiştirmek istiyorsanız, styles.xml'den yararlanın. Genel olarak, programlı bir şekilde bir şeyler yapmaya çalışmıyorsam, java kodumdaki ui bileşenlerini değiştirmekten kaçınıyorum. Bu tek seferlik bir setse, kodunuzu daha temiz hale getirmek için xml'de yapmalısınız. Styles.xml dosyanız şöyle görünecek:

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

AndroidManifext.xml dosyanızda yukarıdaki stili kullandığınızdan emin olun:

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

Farklı etkinlikler için farklı araç çubuğu renkleri istedim. Bu yüzden stillerden yine şu şekilde yararlandım:

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

yine, stilleri AndroidManifest.xml dosyanızdaki her etkinliğe aşağıdaki gibi uygulayın:

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

<activity
    android:name=".Activity1"
    android:theme="@style/YourAppName.AppTheme.Activity1"
</activity>
— Ryan Newsom
kaynak
0

AppCompatActivity'yi Araç Çubuğu ile beyaz arka plan olarak kullanan kişiler için. Bu kodu kullanın.

Güncelleme: Aralık, 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>
— Zackygaurav
kaynak
1
Varsayılan bir Araç Çubuğunun farkı nedir?
— CoolMind
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.