Cómo cambiar el color del icono de hamburguesa en el cajón de navegación de material design


88

Estoy siguiendo este ejemplo

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

y en este ejemplo muestra el ícono de la hamburguesa en blanco, quiero personalizarlo y hacerlo negro, pero no puedo encontrar nada sobre cómo cambiarlo, ¿alguien puede decir cómo personalizarlo?

Manifiesto

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

estilo

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

Actividad principal

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

simplemente use la siguiente línea <item name = "homeAsUpIndicator"> @ drawable / icon_top_menu </item> en el tema style.xml. ,, reemplace icon_top_menu con un elemento de diseño personalizado
Reprator

agrego este <item name = "homeAsUpIndicator"> @ drawable / icon_top_menu </item> .. ahora puedes decir qué hacer ..
Aditya

agregue otra imagen en su dibujable con el icono del menú de hamburguesas del color deseado y reemplace icon_top_menu con el de arriba
Nitesh

icon_top_menu debería ser una imagen, ¿verdad?
Aditya

Agregué una imagen <item name = "homeAsUpIndicator"> @ drawable / hamburger </item> y todavía muestra una imagen en blanco
Aditya

Respuestas:


230

Para cambiar el color del icono de la hamburguesa tienes que abrir la clase "style.xml", luego prueba este código:

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

Así que revisa la <item name="color">@android:color/black</item>línea. Simplemente cambie el color deseado aquí.


de todos modos, puede consultar este enlace github.com/codepath/android_guides/wiki/… . Tiene un buen tutorial.
Anand Singh

así que escribe el código anterior en tu MainActivity, funcionará.
Anand Singh

pero no permite la descarga
Aditya


Buena respuesta. ¿Sabría por casualidad cómo cambiar el color del icono para las actividades seleccionadas?
AndroidDevBro

63

hazlo programáticamente agrega esta línea

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

pero ¿cómo obtenemos una referencia a actionBarDrawerToggle? (ejecutar el código sugerido devolverá nulo porque no hacemos una referencia a actionBarDrawerToggle)
Daron

1
No busque más, Sai Gopi N respondió la pregunta correctamente. Para responder a Daron, debes crear una instancia en tu actividad principal. ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle (esto, drawerLayout, barra de herramientas, R.string.drawer_open, R.string.drawer_close);
KeepAtIt

15

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

2.En style.xml.

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

3. Luego, su clase de tema principal (nombre de archivo style.xml). Tengo "AppTheme".

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

13

También funciona anular colorControlNormal.

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

8

Para eso puede proceder de la siguiente manera:

protected ActionBarDrawerToggle drawerToggle;

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

@Gratien Asimbahwe, este código que publicó se bloqueará porque no hay ninguna referencia a drawerToggle ... ¿cómo obtenemos una referencia?
Daron

8

suProyecto / res / valores / styles.xml

en styles.xml agregue:

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

solo para API 20 en adelante
Paixols

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

eliminar temas también

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

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

quita esto

*** aplicación: popupTheme = "@ style / AppThemeNoActionBar.PopupOverlay">

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

finalmente agrega esto

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

A tu hemo principal

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

    </style>

1

Esto funciona bien cuando configuras app: theme = "@ style / MyMaterialTheme"


O si hace coincidir el nombre de su tema de manifiesto de Android con el nombre de estilo en su styles.xml.
Nic Parmee

0

Después de una lucha de 2 horas, esta publicación me ayudó. En el ejemplo de material de Androidhive, cambie el color primario a otro para obtener un nuevo color de barra de acción. este código a continuación es para obtener una marca de flecha en la barra de acción y hacer texto personalizado. Finalmente entendí que el ícono de flecha estará en los archivos de recursos de appcompat pero el ícono de hamburguesa no estará presente en los recursos. si está presente, podemos cambiarlo en tiempo de ejecución

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

para cambiar el botón de inicio, seguí la respuesta de @anandsingh.


2
Esa es una forma bastante hacky y difícil de mantener. Yo diría que sería mejor no hacer nada que seguir esto. Sin embargo, eso podría ayudar a que una muestra funcione para una demostración.
OlivierM

@Tarun Voora - esto podría ser justo lo que estoy buscando ... estoy buscando una manera de cambiarlo usando código ... investigaré esto en los próximos días ... ¡gracias de antemano! .. Sin embargo, estoy buscando el icono del menú de hamburguesas ... pero esto puede indicarme la dirección correcta.
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

Si desea cambiar el color solo al ícono del cajón de navegación, intente esto:

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

directamente en su activity_drawer.xml


-1

El icono de la hamburguesa está controlado por tu ActionBarDrawerToggleclase de acción . Si está utilizando las bibliotecas de compatibilidad de Android, que es imprescindible en este momento. Puedes cambiar el color así:

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

este código que publicaste fallará porque no hay ninguna referencia a drawerToggle .... ¿cómo obtenemos una referencia?
Daron
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.