如何在material design导航抽屉中更改汉堡图标的颜色

94

我正在跟随这个例子:

http://www.androidhive.info/2015/04/android-getting-started-with-material-design/

在这个例子中,汉堡图标是白色的,我想自定义并将其变为黑色,但我找不到如何更改它的任何信息,有人能告诉我如何自定义吗?

清单文件

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="info.androidhive.materialdesign" >


    <uses-permission android:name="android.permission.INTERNET"></uses-permission>

    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"></uses-permission>
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/MyMaterialTheme" >
        <activity
            android:name=".activity.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>
<resources>

    <style name="MyMaterialTheme" parent="MyMaterialTheme.Base">

    </style>

    <style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="homeAsUpIndicator">@drawable/hamburger</item>
    </style>

</resources>

主活动

public class MainActivity extends AppCompatActivity implements FragmentDrawer.FragmentDrawerListener {

    private static String TAG = MainActivity.class.getSimpleName();

    private Toolbar mToolbar;
    private FragmentDrawer drawerFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
       mToolbar = (Toolbar) findViewById(R.id.toolbar);

        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayShowHomeEnabled(true);

        drawerFragment = (FragmentDrawer)
                getSupportFragmentManager().findFragmentById(R.id.fragment_navigation_drawer);
        drawerFragment.setUp(R.id.fragment_navigation_drawer, (DrawerLayout) findViewById(R.id.drawer_layout), mToolbar);
        drawerFragment.setDrawerListener(this);

        // display the first navigation drawer view on app launch
        displayView(0);
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        if(id == R.id.action_search){
            Toast.makeText(getApplicationContext(), "Search action is selected!", Toast.LENGTH_SHORT).show();
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    @Override
    public void onDrawerItemSelected(View view, int position) {
        displayView(position);
    }

    private void displayView(int position) {
        Fragment fragment = null;
        String title = getString(R.string.app_name);
        switch (position) {
            case 0:
                fragment = new HomeFragment();
                title = getString(R.string.title_home);
                break;
            case 1:
                fragment = new FriendsFragment();
                title = getString(R.string.title_friends);
                break;
            case 2:
                fragment = new MessagesFragment();
                title = getString(R.string.title_messages);
                break;
            case 3:
                fragment = new ContactUsFragment();
                title = getString(R.string.title_contactus);
                break;
            case 4:
                fragment = new AboutUsFragment();
                title = getString(R.string.title_aboutus);
                break;
            default:
                break;
        }

        if (fragment != null) {
            FragmentManager fragmentManager = getSupportFragmentManager();
            FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
            fragmentTransaction.replace(R.id.container_body, fragment);
            fragmentTransaction.commit();

            // set the toolbar title
            getSupportActionBar().setTitle(title);
        }
    }

在style.xml主题中,将<item name="homeAsUpIndicator">@drawable/icon_top_menu</item>替换为自定义的drawable。 - Reprator
我添加了这个 <item name="homeAsUpIndicator">@drawable/icon_top_menu </item>,现在你能告诉我该怎么做吗? - Aditya
在drawable中添加另一张带有所需颜色的汉堡菜单图标,并将icon_top_menu替换为上述图标。 - Nitesh
icon_top_menu 应该是图片,对吗? - Aditya
我添加了一张图片<item name="homeAsUpIndicator">@drawable/hamburger</item>,但它仍然显示白色的图片。 - Aditya
请发布您的清单文件和style.xml。 - Reprator
13个回答

254

要更改汉堡图标的颜色,您需要打开"style.xml"类,然后尝试使用以下代码:

<style name="MyMaterialTheme" parent="MyMaterialTheme.Base">

</style>

<style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>

<style name="DrawerArrowStyle" parent="@style/Widget.AppCompat.DrawerArrowToggle">
    <item name="spinBars">true</item>
    <item name="color">@android:color/black</item>
</style>

所以请检查<item name="color">@android:color/black</item>这行代码。在这里更改您想要的颜色即可。


无论如何,您可以检查此链接https://github.com/codepath/android_guides/wiki/Fragment-Navigation-Drawer。它有很好的教程。 - Anand Singh
所以在你的MainActivity中编写上述代码,它将正常工作。 - Anand Singh
但它不允许下载。 - Aditya
让我们在聊天中继续这个讨论。 - Aditya
有没有办法将DrawerArrowStyle设置为特定的工具栏?它的默认值是什么? - android developer
显示剩余4条评论

70

以编程方式完成,添加此行

actionBarDrawerToggle.getDrawerArrowDrawable().setColor(getResources().getColor(R.color.white));

但是我们如何获取对actionBarDrawerToggle的引用?(运行您建议的代码将返回null,因为我们没有对actionBarDrawerToggle的引用) - Daron
1
不用再找了,Sai Gopi N已经正确回答了这个问题。要回答Daron的问题,你需要在主活动中创建一个实例。ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close); - KeepAtIt

17

1. 在 Color.xml 中:<color name="hamburgerBlack">#000000</color>

2. 在 style.xml 中。

<style name="DrawerIcon" parent="Widget.AppCompat.DrawerArrowToggle">
        <item name="color">@color/hamburgerBlack</item>
    </style>

3. 接着是你的主题类(文件名style.xml)。我这里使用了“AppTheme”。

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

请提供在 Kotlin 中应用图标的完整步骤。 - Kashinath

14

覆盖colorControlNormal也能起作用。

<item name="colorControlNormal">@android:color/holo_red_dark</item>

13

您的项目/res/values/styles.xml

在styles.xml中添加:

<style name="BaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="colorControlNormal">@color/white</item> 
</style>

仅适用于API 20及以上版本 - Paixols

12

你可以按照以下步骤继续:

protected ActionBarDrawerToggle drawerToggle;

drawerToggle.getDrawerArrowDrawable().setColor(getResources().getColor(R.color.black));

@Gratien Asimbahwe,你发布的代码会崩溃,因为没有引用drawerToggle...我们如何获取引用? - Daron

2
<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorTransparent"

remove themes too

    android:theme="@style/AppThemeNoActionBar.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
      ***

删除此内容

*** app:popupTheme="@style/AppThemeNoActionBar.PopupOverlay">

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

最后添加这个

 <style name="AppThemeNoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

回到你的主题。
        <item name="colorControlNormal">@color/colorRedTitle</item>

    </style>

1
当您设置 app:theme="@style/MyMaterialTheme" 时,这将正常工作。

或者,如果您将Android清单主题名称与styles.xml中的样式名称匹配。 - Nic Parmee

0
经过两个小时的挣扎,这篇文章帮助了我。 在Androidhive材料示例中,将主要颜色更改为其他颜色以获取新的操作栏颜色。 下面的代码是用于在操作栏上获取箭头标记并制作自定义文本。 最后我明白了,箭头图标将在appcompat资源文件中,但汉堡包图标不在资源中。如果它存在,我们可以在运行时更改它。
setSupportActionBar(toolbar);
        final Drawable upArrow = getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
        upArrow.setColorFilter(getResources().getColor(R.color.black), PorterDuff.Mode.SRC_ATOP);
        getSupportActionBar().setHomeAsUpIndicator(upArrow);
        getSupportActionBar().setTitle(Html.fromHtml("<font color=\"black\">" + "All Addresses" + "</font>"));
        getSupportActionBar().show();

更改主页按钮,我遵循了@anandsingh的答案。


2
这是一种相当粗糙且难以维护的方式...我认为最好不要这样做,而不是跟随这种方式。虽然这可能有助于为演示获得一个工作样本。 - OlivierM
@Tarun Voora - 这可能正是我正在寻找的...我正在寻找一种使用代码来更改它的方法...我将在接下来的几天内研究这个...提前感谢!...我正在寻找汉堡菜单图标,但这可能会指引我朝着正确的方向。 - Daron

0
  val drawerToggle = DrawerArrowDrawable(this)
    drawerToggle.color = ContextCompat.getColor(this,R.color.white)
    (actionBarDrawerToggle as ActionBarDrawerToggle).drawerArrowDrawable = drawerToggle

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接