Appcompat 21でツールバーの色を変更する
私は新しいAppcompat 21 Material Designの機能を試しています。そこで私はこのようなツールバーを作りました：
<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"/>
そしてそれを私のメインレイアウトファイルに含めました。
それから私はそのようにsupportActionBarとしてそれを設定しました：
Toolbar toolBar = (Toolbar)findViewById(R.id.activity_my_toolbar);
setSupportActionBar(toolBar);
それは動作していますが、どういうわけか私はツールバーをカスタマイズする方法をかなり理解することができません。それは灰色で、その上のテキストは黒です。背景とテキストの色を変更するにはどうすればいいですか。
私はこの説明を読み終えました：
http://Android-developers.blogspot.de/2014/10/appcompat-v21-material-design-for-pre.html
色を変えるために私は何を監督しましたか？
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="Android:windowActionBar" tools:ignore="NewApi">false</item>
<item name="windowActionBar">false</item>
</style>
EDIT：
テーマにこれらのコード行を追加することで背景色を変更することができました。
<item name="colorPrimary">@color/actionbar</item>
<item name="colorPrimaryDark">@color/actionbar_dark</item>
しかし、それらはテキストの色には影響しません。何が足りないの？黒いテキストボタンと黒いメニューボタンの代わりに、白いテキストボタンと白いメニューボタンを使用したいと思います。
これもすべてあなたが提供したリンクに入っています
テキストを白に変更するには、テーマを変更するだけです。
このテーマを使う
<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"/>
他の回答で提案されているようにapp:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"テーマを使うことができますが、このような解決策を使うこともできます。
<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"/>
そして、あなたはこれらのスタイルであなたのui要素を完全にコントロールすることができます：
<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>
あなたは唯一のAndroid 5.0のためにMaterialテーマを適用したいのであればねえあなたはそれの中にこのテーマを追加することができます
<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>
こちらの下の行はマテリアルデザインのアクションバーのテキスト色を担当しています。
<item name="Android:textColorPrimary">@Android:color/white</item>
カスタムツールバークラスを作成することで、カスタムツールバーのアイテムの色を動的に設定できます。
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);
// }
// });
}
}
}
}
}
}
}
その後、レイアウトファイルでそれを参照してください。これでカスタムカラーを設定できます。
toolbar.setItemColor(Color.Red);
出典：
私はここでこれを行うための情報を見つけた： 動的にアンドロイドツールバーのアイコンの色を変更する方法
それから私はそれを編集し、それを改良してここに投稿しました。 GitHub：AndroidDynamicToolbarItemColor
これがDarkActionBarとして知られているもので、これはあなたが望むスタイルを得るためにあなたが次のテーマを使うべきであることを意味します：
<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" />
あなたはこれらでツールバーのテキストの色を変えることができます：
<item name="Android:textColorPrimary">#FFFFFF</item>
<item name="Android:textColor">#FFFFFF</item>
これを実現するには、次のように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"/>
Styles.xmlでこれを試してください。
colorPrimaryはツールバーの色になります。
<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>
ところでEclipseでこれを作ったのですか？
私はもっと研究してこの問題を解決しました...
api21以上での使用
<item name="Android:textColorPrimary">@color/white</item>
下位バージョン用
<item name="actionMenuTextColor">@color/white</item>
アプリケーション全体でツールバーの色を変更したい場合は、styles.xmlを利用してください。一般に、プログラムで何かをやろうとしているのでなければ、私は自分のJavaコードの中のuiコンポーネントを変更することを避けます。これが1回限りの場合は、コードをきれいにするためにxmlで行うべきです。 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>
AndroidManifext.xmlで上記のスタイルを次のように使用してください。
<application
Android:theme="@style/YourAppName.AppTheme">
</application>
活動ごとにツールバーの色を変えたいと思いました。だから私は再びこのようなスタイルを活用しました：
<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>
もう一度、AndroidManifest.xmlの各アクティビティに次のようにスタイルを適用します。
<activity
Android:name=".Activity2"
Android:theme="@style/YourAppName.AppTheme.Activity2"
</activity>
<activity
Android:name=".Activity1"
Android:theme="@style/YourAppName.AppTheme.Activity1"
</activity>
AppCompatActivityをツールバーと一緒に白い背景として使用している人のためのものです。このコードを使ってください。
更新日：2017年12月
<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>