Testuję nowe funkcje projektowania materiałów w Appcompat 21. Dlatego stworzyłem Toolbar taki jak ten:
<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"/>
i umieściłem go w moim głównym pliku układu.
Następnie ustawiłem go jako supportActionBar w ten sposób:
Toolbar toolBar = (Toolbar)findViewById(R.id.activity_my_toolbar);
setSupportActionBar(toolBar);
To działa, ale jakoś nie mogę do końca zrozumieć, jak dostosować pasek narzędzi. Jest szara, a tekst na niej czarny. Jak zmienić kolor tła i tekstu?
Przeszedłem przez te instrukcje:
http://android-developers.blogspot.de/2014/10/appcompat-v21-material-design-for-pre.html
Co ja nadzorowałem, żeby zmienić kolory?
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="android:windowActionBar" tools:ignore="NewApi">false</item>
<item name="windowActionBar">false</item>
</style>
EDYCJA :
Udało mi się zmienić kolor tła, dodając następujące linie kodu do motywu:
<item name="colorPrimary">@color/actionbar</item>
<item name="colorPrimaryDark">@color/actionbar_dark</item>
Ale nie wpłyną one na kolor tekstu. czego mi brakuje? Zamiast czarnego tekstu i czarnego przycisku menu wolałbym biały tekst i białe przyciski menu:
android
android-actionbar
android-appcompat
android-actionbar-compat
android-toolbar
user2410644
źródło
źródło
Odpowiedzi:
znowu to wszystko jest w podanym przez Ciebie łączu
aby zmienić tekst na biały, wystarczy zmienić motyw.
użyj tego motywu
<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"/>
źródło
AppCompatActivity
zamiastActivity
.UPDATE 12/11/2019: Biblioteka komponentów materiałowych
Dzięki komponentom materiałów i bibliotekom Androidx możesz używać:
android:background
atrybut w układzie:<com.google.android.material.appbar.MaterialToolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary"
zastosuj styl domyślny:
style="@style/Widget.MaterialComponents.Toolbar.Primary"
lub dostosuj styl dziedziczący po nim:<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"
nadpisz domyślny kolor za pomocą
android:theme
atrybutu:<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"
z:
<style name="MyThemeOverlay_Toolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary"> <item name="android:textColorPrimary">....</item> <item name="colorPrimary">@color/..... <item name="colorOnPrimary">@color/....</item> </style>
STARE: Obsługa bibliotek:
możesz użyć
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
motywu zgodnie z sugestią w innych odpowiedziach, ale możesz też użyć rozwiązania takiego:<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"/>
Dzięki tym stylom możesz mieć pełną kontrolę nad elementami interfejsu użytkownika:
<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>
źródło
Hej, jeśli chcesz zastosować motyw Materiał tylko dla Androida 5.0, możesz dodać do niego ten motyw
<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>
Poniższa linia jest odpowiedzialna za kolor tekstu paska Actionbar of Material Design.
<item name="android:textColorPrimary">@android:color/white</item>
źródło
Możesz dynamicznie ustawić kolor niestandardowego elementu paska narzędzi, tworząc niestandardową klasę paska narzędzi:
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); // } // }); } } } } } } }
następnie odwołaj się do tego w pliku układu. Teraz możesz ustawić własny kolor za pomocą
toolbar.setItemColor(Color.Red);
Źródła:
Znalazłem informacje, aby to zrobić tutaj: Jak dynamicznie zmieniać kolor ikon paska narzędzi Android
a potem go wyedytowałem, poprawiłem i opublikowałem tutaj: GitHub: AndroidDynamicToolbarItemColor
źródło
Jest to tzw. DarkActionBar, co oznacza, że aby uzyskać żądany styl, należy użyć następującego motywu:
<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" />
źródło
Możesz zmienić kolor tekstu na pasku narzędzi za pomocą:
<item name="android:textColorPrimary">#FFFFFF</item> <item name="android:textColor">#FFFFFF</item>
źródło
Osiągnij to, używając w
toolbar
ten sposób:<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"/>
źródło
Wypróbuj to w swoim styles.xml:
colorPrimary będzie kolorem paska narzędzi.
<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>
Swoją drogą, zbudowałeś to w Eclipse?
źródło
rozwiązałem ten problem po dalszych badaniach ...
dla Api21 i więcej
<item name="android:textColorPrimary">@color/white</item>
dla niższych wersji użyj
<item name="actionMenuTextColor">@color/white</item>
źródło
Jeśli chcesz zmienić kolor paska narzędzi w całej aplikacji, użyj pliku styles.xml. Generalnie unikam zmiany komponentów interfejsu użytkownika w moim kodzie java, chyba że próbuję zrobić coś programowo. Jeśli jest to zestaw jednorazowy, powinieneś zrobić to w XML, aby kod był bardziej przejrzysty. Oto jak będzie wyglądał plik styles.xml:
<!-- 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>
Upewnij się, że używasz powyższego stylu w pliku AndroidManifext.xml jako takiego:
<application android:theme="@style/YourAppName.AppTheme"> </application>
Chciałem mieć różne kolory paska narzędzi dla różnych działań. Więc ponownie wykorzystałem style w ten sposób:
<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>
ponownie zastosuj style do każdego działania w pliku AndroidManifest.xml jako takie:
<activity android:name=".Activity2" android:theme="@style/YourAppName.AppTheme.Activity2" </activity> <activity android:name=".Activity1" android:theme="@style/YourAppName.AppTheme.Activity1" </activity>
źródło
Dla osób, które używają AppCompatActivity z paskiem narzędzi jako białym tłem. Użyj tego kodu.
Aktualizacja: grudzień 2017 r
<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>
źródło