Comment changer la couleur de l'icône de hamburger dans le tiroir de navigation de conception matérielle


88

Je suis cet exemple

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

et dans cet exemple, l'icône de hamburger est blanche, je veux la personnaliser et la rendre noire, mais je ne suis pas en mesure de trouver quoi que ce soit pour la changer, est-ce que quelqu'un peut dire comment le personnaliser?

Manifeste

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

style

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

Activité principale

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

utilisez simplement la ligne suivante <item name = "homeAsUpIndicator"> @ drawable / icon_top_menu </item> dans le thème style.xml. ,, remplacez icon_top_menu par custom drawable
Reprator

j'ajoute ce <item name = "homeAsUpIndicator"> @ drawable / icon_top_menu </item> .. maintenant pouvez-vous dire quoi faire ..
Aditya

ajoutez une autre image dans votre dessin avec l'icône du menu burger de la couleur souhaitée et remplacez icon_top_menu par celle ci
Nitesh

icon_top_menu devrait être une image, non?
Aditya du

J'ai ajouté une image <item name = "homeAsUpIndicator"> @ drawable / hamburger </item> son toujours montrant une image blanche
Aditya

Réponses:


230

Pour changer la couleur de l'icône du hamburger, vous devez ouvrir la classe "style.xml", puis essayez ce code:

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

Alors vérifiez la <item name="color">@android:color/black</item>ligne. Changez simplement la couleur souhaitée ici.


de toute façon, vous pouvez consulter ce lien github.com/codepath/android_guides/wiki/… . Il a un bon tutoriel.
Anand Singh

alors écrivez le code ci-dessus dans votre MainActivity, cela fonctionnera.
Anand Singh

mais il ne permet pas le téléchargement
Aditya


Bonne réponse. Sauriez-vous plutôt comment changer la couleur de l'icône des activités sélectionnées?
AndroidDevBro

63

faites-le par programme, ajoutez cette ligne

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

mais comment obtenir une référence à actionBarDrawerToggle? (l'exécution de votre code suggéré renverra null car nous ne faisons pas référence à actionBarDrawerToggle)
Daron

1
Ne cherchez plus, Sai Gopi N a répondu correctement à la question. Pour répondre à Daron, vous devez créer une instance dans votre activité principale. ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle (this, drawLayout, toolbar, R.string.drawer_open, R.string.drawer_close);
KeepAtIt

15

1.Dans Color.xml.<color name="hamburgerBlack">#000000</color>

2.Dans style.xml.

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

3. Ensuite, votre classe de thème principal (nom de fichier style.xml). J'ai «AppTheme».

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

13

Le remplacement de colorControlNormal fonctionne également.

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

8

Pour cela, vous pouvez procéder comme suit:

protected ActionBarDrawerToggle drawerToggle;

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

@Gratien Asimbahwe ce code que vous avez posté plantera car il n'y a aucune référence à drawToggle .... comment obtenir une référence?
Daron le

8

votreProjet / res / values ​​/ styles.xml

dans le styles.xml ajoutez:

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

uniquement pour API 20 et plus
Paixols

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

supprimer les thèmes aussi

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

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

enlève ça

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

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

enfin ajouter ceci

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

À votre hème principal

        <item name="colorControlNormal">@color/colorRedTitle</item>

    </style>

1

Cela fonctionne bien lorsque vous définissez app: theme = "@ style / MyMaterialTheme"


Ou si vous faites correspondre le nom de votre thème de manifeste Android au nom du style dans votre styles.xml.
Nic Parmee

0

Après une lutte de 2 heures, ce post m'a aidé. Dans l'exemple de matériau Androidhive, remplacez la couleur primaire par une autre pour obtenir une nouvelle couleur de barre d'action. ce code ci-dessous sert à obtenir une flèche sur la barre d'action et à créer un texte personnalisé. Enfin, j'ai compris que l'icône de flèche sera dans les fichiers de ressources appcompat mais l'icône de hamburger n'est pas présente dans les ressources. s'il est présent, nous pouvons le changer au moment de l'exécution

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();

pour changer le bouton d'accueil, j'ai suivi la réponse @anandsingh.


2
C'est un moyen assez hacky et difficile à maintenir ... Je dirais qu'il vaudrait mieux ne rien faire que de suivre ça. Cela pourrait cependant aider à faire fonctionner un échantillon pour une démo.
OlivierM

@Tarun Voora - c'est peut-être exactement ce que je recherche ... je cherche un moyen de le changer en utilisant le code ... je vais examiner cela dans les prochains jours ... merci d'avance! .. Je suis à la recherche de l'icône du menu hamburger cependant ... mais cela peut m'indiquer dans la bonne direction.
Daron le

0
//----------your own toolbar-----------------------------

            <?xml version="1.0" encoding="utf-8"?>
            <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:elevation="4dp"
                android:padding="1dp"
                android:background="@color/blue"
                >
                </android.support.v7.widget.Toolbar>

    //-----------Main activity xml, add your own toolbar-----------------------------------------------
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.v1technologies.sgcarel.FrameActivity">
        <include
            android:id="@+id/toolbar"
            layout="@layout/toolbar"
            />
        <FrameLayout
            android:padding="2dp"
            android:layout_marginTop="70dp"
            android:id="@+id/frame_frame_activity"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

    </FrameLayout>
    </RelativeLayout>


        //----  In your activity-----------------------

                   toolbar = (Toolbar) findViewById(R.id.toolbar);       
                    setSupportActionBar(toolbar);

            //===========================================================================

             @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);

                    int color = Color.parseColor("#334412");
                    final PorterDuffColorFilter colorFilter = new PorterDuffColorFilter(color, PorterDuff.Mode.SRC_ATOP);

                    for (int i = 0; i < toolbar.getChildCount(); i++) {
                        final View v = toolbar.getChildAt(i);

                        if (v instanceof ImageButton) {
                            ((ImageButton) v).setColorFilter(colorFilter);
                        }
                    }
                    return true;
                }

0

Si vous souhaitez modifier la couleur uniquement en icône de votre tiroir de navigation, essayez ceci:

<android.support.design.widget.NavigationView
    app:itemIconTint="@color/thecolorthatyouwant"
 />

directement dans votre activity_drawer.xml


-1

L'icône de hamburger est contrôlée par votre ActionBarDrawerToggleclasse d' action . Si vous utilisez les bibliothèques de compatibilité Android, ce qui est indispensable pour le moment. Vous pouvez changer la couleur comme ceci:

    toggle?.drawerArrowDrawable?.color = ContextCompat.getColor(context, R.color.colorPrimary)

ce code que vous avez posté plantera car il n'y a pas de référence à drawToggle .... comment obtenir une référence?
Daron le
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.