web-dev-qa-db-ja.com

ツールバーナビゲーションおよびオーバーフローメニューアイコンを変更する方法（appcompat v7）

V7ツールバーで苦労しています。かつてActionBarの単純なタスクであったものが、今では非常に複雑に思えます。どのスタイルを設定しても、ナビゲーションアイコン（引き出しを開く）またはオーバーフローメニューアイコン（メニューを開く）を変更することはできません。

だから私は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:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:background="@color/ghex"
    Android:minHeight="?attr/actionBarSize"
    app:theme="@style/ThemeOverlay.AppCompat.Light"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    >

私はそれがこのように見えるようにコーディングします

//before in the code I do
mToolbar = (Toolbar) findViewById(R.id.toolbar);

private void initToolbar() {
    setSupportActionBar(mToolbar);
    getSupportActionBar().setDisplayShowTitleEnabled(false);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    getSupportActionBar().setHomeButtonEnabled(true);
}

次に、これら2つのアイコンのDrawableを変更する必要があります。

Compat v7 Toolbarに対してこれを行うにはどうすればよいですか？引き出しが開いているときに表示される矢印を変更する必要があると思います（Android 5.0）。

androidandroid-layoutmaterial-designandroid-appcompatandroid-toolbar
30
sandalone

ナビゲーションアイコンを変更するには、次を使用できます。

Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
setSupportActionBar(toolbar);
toolbar.setNavigationIcon(R.drawable.my_icon);

オーバーフローアイコンを変更するには、次のようなスタイルを定義できます。

<style name="AppTheme.Base" parent="Theme.AppCompat.Light">
    <item name="actionOverflowButtonStyle">@style/OverFlow</item>
</style>

<style name="OverFlow" parent="Widget.AppCompat.ActionButton.Overflow">
    <item name="Android:src">@drawable/my_overflow_menu</item>
</style>

いずれにせよ、オーバーフローメニューのような標準アイコンを変更するのは得策ではありません。

アイコンの色を変更する場合は、次を使用できます。

<Android.support.v7.widget.Toolbar
  app:theme="@style/ThemeToolbar" />


<style name="ThemeToolbar" parent="Theme.AppCompat.Light">

   <!-- navigation icon color -->
   <item name="colorControlNormal">@color/my_color</item>

    <!-- color of the menu overflow icon -->
    <item name="Android:textColorSecondary">@color/my_color</item>
</style>
111
Gabriele Mariotti
mToolbar.setNavigationIcon(R.mipmap.ic_launcher);
mToolbar.setOverflowIcon(ContextCompat.getDrawable(this, R.drawable.ic_menu));
19
androidmalin

正しいメニューの場合、次のことができます。

public static Drawable setTintDrawable(Drawable drawable, @ColorInt int color) {
            drawable.clearColorFilter();
            drawable.setColorFilter(color, PorterDuff.Mode.SRC_IN);
            drawable.invalidateSelf();
            Drawable wrapDrawable = DrawableCompat.wrap(drawable).mutate();
            DrawableCompat.setTint(wrapDrawable, color);
            return wrapDrawable;
        }

そしてあなたの活動で

@Override
 public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_profile, menu);
        Drawable send = menu.findItem(R.id.send);
        Drawable msg = menu.findItem(R.id.message);
        DrawableUtils.setTintDrawable(send.getIcon(), Color.WHITE);
        DrawableUtils.setTintDrawable(msg.getIcon(), Color.WHITE);
        return true;
    }

これが結果です：

enter image description here

5
chry

ハンバーガー/戻るアイコンの色のみを変更する必要がある場合は、シンプルで簡単で優れたアプローチがあります。

colorControlNormalおよびAndroid:textColorSecondaryはツールバーの他の子ビューにも影響する可能性がありますが、目的のアイコンの色のみを変更するため、より優れています。

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>

<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="spinBars">true</item>
    <item name="color">@Android:color/white</item>
</style>
3
Sachin Gupta

アイコンをVectorに変更する場合は、新しいアイコンを作成します。そしてActivity.Javaで：

Toolbar toolbar = findViewById(R.id.your_toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
toolbar.setNavigationIcon(R.drawable.your_icon);
mToolbar.setOverflowIcon(ContextCompat.getDrawable(this, R.drawable.your_icon2));

ベクターアイコンの色を変更するには、ベクターXMLファイル ..に移動します。この場合、your_icon.xmlになります。次のようになります。

<vector xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:width="24dp"
    Android:height="24dp"
    Android:viewportWidth="24.0"
    Android:viewportHeight="24.0">
<path
    Android:fillColor="@color/Your_Color"
    Android:pathData="M15.41,7.41L14,6l-6,6 6,6 1.41,-1.41L10.83,12z"/>

これらの属性を使用してベクターの色を設定したことに注意してください。

Android:fillColor="@color/Your_Color"

編集：colors.XMLまたは他の場所から色を使用することはできません。色はベクターのXMLファイルで直接デカールする必要があります。したがって、次のようになります。

Android:fillColor="#FFF"
2
Tamim Attafi

上記のソリューションはすべて、API 21以降では機能しましたが、API 19（KitKat）では機能しませんでした。小さな変更を加えると、以前のバージョンで私にとってはうまくいきませんでした。 Widget.Holoの代わりにWidget.AppCompatに注意してください

<style name="OverFlowStyle"    parent="@Android:style/Widget.Holo.ActionButton.Overflow">
    <item name="Android:src">@drawable/ic_overflow</item>
</style>
1
Eric B.

この行にデフォルトのテーマを追加します。

   <item name="colorControlNormal">@color/my_color</item>
1
alicanozkara

メニュー項目アイコン、矢印アイコン（バックアップ/アップ）、および3ドットアイコンを変更する場合は、Android:tintを使用できます

  <style name="ToolbarTheme" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="Android:tint">@color/your_color</item>
  </style>
1
user25

オプションメニュー項目の色を変更するには

override fun onCreateOptionsMenu(menu: Menu?): Boolean {
    menuInflater.inflate(R.menu.your_menu, menu)

    menu?.forEach {
        it.icon.setTint(Color.your_color)
    }

    return true
}
0
Belogurow

このコードを使用できます

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.toolbar_Like:
            item.setIcon(R.drawable.is_like);
            break;
    }
    return true;
}
0
Diako Hasani

アクティビティで使用したテーマを1行のコードの下に追加します

白のために

<style name="AppTheme.NoActionBar">
      <item name="Android:tint">#ffffff</item>
  </style>

or 
 <style name="AppThemeName" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="Android:tint">#ffffff</item>
</style>

黒のため

   <style name="AppTheme.NoActionBar">
      <item name="Android:tint">#000000</item>
  </style>

or 
 <style name="AppThemeName" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="Android:tint">#000000</item>
</style>
0
pruthwiraj.kadam