Come cambiare il colore dell'icona dell'hamburger nel cassetto di navigazione del design dei materiali


88

Sto seguendo questo esempio

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

e in questo esempio mostra l'icona dell'hamburger bianca, voglio personalizzarla e renderla nera, ma non riesco a trovare nulla su come cambiarla, qualcuno può dire come personalizzarla?

Manifesto

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

stile

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

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

usa semplicemente la seguente riga <item name = "homeAsUpIndicator"> @ drawable / icon_top_menu </item> nel tema style.xml., sostituisci icon_top_menu con custom drawable
Reprator

aggiungo questo <item name = "homeAsUpIndicator"> @ drawable / icon_top_menu </item> .. ora puoi dire cosa fare ..
Aditya

aggiungi un'altra immagine nel tuo disegnabile con l'icona del menu dell'hamburger del colore desiderato e sostituisci icon_top_menu con quella sopra
Nitesh

icon_top_menu dovrebbe essere l'immagine giusta?
Aditya

ho aggiunto un'immagine <item name = "homeAsUpIndicator"> @ drawable / hamburger </item> che mostrava ancora un'immagine bianca
Aditya

Risposte:


232

Per cambiare il colore dell'icona dell'hamburger devi aprire la classe "style.xml", quindi provare questo codice:

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

Quindi controlla la <item name="color">@android:color/black</item>linea. Basta cambiare il colore desiderato qui.


in ogni caso puoi controllare questo link github.com/codepath/android_guides/wiki/… . Ha un buon tutorial.
Anand Singh

quindi scrivi sopra il codice nella tua MainActivity, funzionerà.
Anand Singh

ma non consente il download
Aditya


Buona risposta. Sapresti invece come cambiare il colore dell'icona per le attività selezionate?
AndroidDevBro

63

farlo a livello di codice aggiungere questa riga

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

ma come si ottiene un riferimento a actionBarDrawerToggle? (l'esecuzione del codice suggerito restituirà null perché non facciamo riferimento a actionBarDrawerToggle)
Daron

1
Non cercate oltre, Sai Gopi N ha risposto correttamente alla domanda. Per rispondere a Daron, devi creare un'istanza nella tua attività principale. ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle (this, drawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close);
KeepAtIt

15

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

2.In style.xml.

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

3. Quindi la classe del tema principale (nome file style.xml). Ho "AppTheme".

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

13

Funziona anche l'override di colorControlNormal.

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

9

Per questo puoi procedere come segue:

protected ActionBarDrawerToggle drawerToggle;

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

@Gratien Asimbahwe questo codice che hai postato andrà in crash perché non c'è alcun riferimento a drawerToggle .... come otteniamo un riferimento?
Daron

8

yourProject / res / values ​​/ styles.xml

in styles.xml aggiungi:

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

solo per API 20 e
versioni successive

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

rimuovi anche i temi

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

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

rimuovilo

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

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

finalmente aggiungi questo

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

Al tuo eme principale

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

    </style>

1

Funziona bene quando imposti app: theme = "@ style / MyMaterialTheme"


O se abbini il nome del tema del tuo manifest Android al nome dello stile nel tuo styles.xml.
Nic Parmee

0

Dopo una lotta di 2 ore, questo post mi ha aiutato. Nell'esempio di materiale Androidhive, cambia il colore primario con un altro per ottenere un nuovo colore della barra delle azioni. questo codice sottostante serve per ottenere il segno di freccia sulla barra delle azioni e creare testo personalizzato. Finalmente ho capito che, l'icona della freccia sarà nei file di risorse appcompat ma l'icona dell'hamburger non è presente nelle risorse. se è presente possiamo cambiarlo in runtime

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

per cambiare il pulsante home, ho seguito la risposta di @anandsingh.


2
Questo è un modo piuttosto complicato e difficile da mantenere .. Direi che sarebbe meglio non fare nulla che seguire questo. Ciò potrebbe aiutare a ottenere un campione funzionante per una demo.
OlivierM

@ Tarun Voora - questo potrebbe essere proprio quello che sto cercando ... sto cercando un modo per cambiarlo usando il codice ... lo esaminerò entro i prossimi due giorni ... grazie in anticipo! .. Sto cercando l'icona del menu dell'hamburger però ... ma questo potrebbe indirizzarmi nella giusta direzione.
Daron

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

Se vuoi cambiare il colore solo per l'icona del cassetto di navigazione, prova questo:

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

direttamente nel tuo activity_drawer.xml


-1

L'icona dell'hamburger è controllata dalla tua ActionBarDrawerToggleclasse d' azione . Se stai usando le librerie compat di Android, al momento è un must. Puoi cambiare il colore in questo modo:

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

questo codice che hai postato andrà in crash perché non c'è alcun riferimento a drawerToggle .... come otteniamo un riferimento?
Daron
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.