web-dev-qa-db-fra.com

Comment remplacer l'icône de hamburger utilisé pour ActionBarToggle sur la barre d'outils Android par un dessin personnalisable?

J'ai implémenté un ActionBarDrawerToggle de base à l'aide de la nouvelle barre d'outils d'Android 5.0.

Cependant, je ne parviens pas à comprendre comment changer l’icône de hamburger par défaut fournie. dessin personnalisable ... Ce dessin montre une icône Hamburger lorsque le tiroir est fermé et une flèche lorsque le tiroir est ouvert. Elle s'anime entre ces deux états lorsque le tiroir s'ouvre. "

Actuellement, tout cela fonctionne correctement avec le code suivant. Cependant, je souhaite remplacer le hamburger fourni par défaut par mon propre dessin.

Voici mon code actuel:

MainActivity.Java

@InjectView(R.id.main_activity_toolbar)
Toolbar mToolbar;

@InjectView(R.id.main_activity_drawer_layout)
DrawerLayout mDrawerLayout;

@Override
protected void onCreate(Bundle savedInstanceState) {
    setContentView(R.layout.main_activity);
    super.onCreate(savedInstanceState);

    setSupportActionBar(mToolbar);
    mToolbar.setNavigationIcon(R.drawable.navigation);

    mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.drawer_open, R.string.drawer_close) {
        public void onDrawerClosed(View view) {
            super.onDrawerClosed(view);
            invalidateOptionsMenu();
        }

        public void onDrawerOpened(View drawerView) {
            super.onDrawerOpened(drawerView);
            invalidateOptionsMenu();
        }
    };

    mDrawerLayout.setDrawerListener(mDrawerToggle);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    getSupportActionBar().setHomeButtonEnabled(true);
}

Cette ligne:

mToolbar.setNavigationIcon(R.drawable.navigation);

ne semble pas fonctionner.

Est-ce possible? Merci!

Documentation ActionBarToggle - https://developer.Android.com/reference/Android/support/v7/app/ActionBarDrawerToggle.html

androidnavigation-drawerandroid-toolbar
27
jet

Vous pouvez utiliser la barre d'outils en mode autonome, ce qui signifie que vous devez pas utiliser votre barre d'outils dans le cadre de votre constructeur ActionBarDrawerToggle, vous pouvez y parvenir à l'aide du code ci-dessous:

mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, null,
                       R.drawable.appbar, R.drawable.appbar)

(Notez que l'occurrence de la barre d'outils n'est pas envoyée au constructeur ActionBarDrawerToggle)

En outre, vous devriez gonfler votre menu manuellement 

mToolbar = (Toolbar) findViewById(R.id.nav_toolbar);
mToolbar.inflateMenu(R.menu.base);

And remove the setSupportActionBar (mToolbar); ligne de code.

Bien entendu, vous devrez gérer vous-même le clic de navigation:

mToolbar.setOnMenuItemClickListener(new OnMenuItemClickListener() ...

Ensuite, vous pouvez ouvrir votre tiroir comme ceci:

drawerButton = (BadgeDrawerButton) findViewById(R.id.badge_drawer_button);
drawerButton.setOnClickListener(
                       new View.OnClickListener() {

                              @Override
                              public void onClick(View v) {
                                     mDrawerLayout.openDrawer(Gravity.LEFT);
                              }
                       });

J'espère que cela peut aider.

23
Roisgoen

Ces deux lignes de code fonctionnent pour moi: 

mDrawerToggle.setDrawerIndicatorEnabled(false); //disable "hamburger to arrow" drawable
mDrawerToggle.setHomeAsUpIndicator(R.drawable.ic_drawer); //set your own

Et puis appelez ceci:

mDrawerToggle.syncState();
24
PhoEn-X

Le menu par défaut pouvant être dessiné pour ActionBarDrawerToggle est DrawerArrowDrawable.

Vous pouvez sous-classer ceci pour ajouter des fonctionnalités personnalisées, telles que des badges, comme suit:

public class BadgedDrawerArrowDrawable extends DrawerArrowDrawable {

    /**
     * @param context used to get the configuration for the drawable from
     */
    public BadgedDrawerArrowDrawable(Context context) {
        super(context);

        setColor(context.getResources().getColor(R.color.colorAccent));
    }

    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);

        Paint paint = new Paint();
        Paint.setStyle(Paint.Style.FILL);
        Paint.setColor(Color.RED);
        Paint.setTextSize(60);
        canvas.drawText("!", canvas.getWidth() - 60, 25, Paint);
    }
}

Usage:

actionBarDrawerToggle.setDrawerArrowDrawable(new BadgedDrawerArrowDrawable(activity));
7
Kevin

Ma solution consiste à sous-classer ActionBarDrawerToggle.

public class MyActionBarDrawerToggle extends Android.support.v7.app.ActionBarDrawerToggle {

    public MyActionBarDrawerToggle(Activity activity, final DrawerLayout drawerLayout, Toolbar toolbar, int openDrawerContentDescRes, int closeDrawerContentDescRes) {
        super(activity, drawerLayout, toolbar, openDrawerContentDescRes, closeDrawerContentDescRes);

        setHomeAsUpIndicator(R.drawable.drawer_toggle);
        setDrawerIndicatorEnabled(false);

        setToolbarNavigationClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View view) {
                drawerLayout.openDrawer(Gravity.LEFT);
            }
        });
     }
}
6
Dody Rachmat Wicaksono

ce qui a bien fonctionné pour moi, c’est que j’avais juste besoin d’appeler toolbar.setNavigationIcon(R.drawable.ic_camera_alt_24dp); à la fin de onCreate, ou du moins après mDrawerToggle = new ActionBarDrawerToggle...

5
pgarzina

à partir de janvier 2018, c'est une solution qui fonctionne (du moins pour moi):

    //setSupportActionBar(toolbar)

    val toggle = ActionBarDrawerToggle(this, drawer_layout, null, R.string.navigation_drawer_open, R.string.navigation_drawer_close)
    toolbar.inflateMenu(R.menu.menu_main)
    toolbar.setNavigationIcon(R.drawable.ic_menu)
    toolbar.setNavigationOnClickListener {
        drawer_layout.openDrawer(Gravity.START)
    }

    toolbar.setOnMenuItemClickListener {
        true
    }

    drawer_layout.addDrawerListener(toggle)
    toggle.syncState()

    nav_view.setNavigationItemSelectedListener(this)

choses à soigner:

  • setSupportActionBar devrait être commenté
  • ActionBarDrawerToggle ne prend pas une référence à toolbar
  • Nous devrions gonfler nous-mêmes le menu et gérer onClicks. onCreateOptionsMenu et onOptionsItemSelected ne fonctionneront pas.
  • N'oubliez pas d'appeler toggle.syncState()
2
guness

En ce qui concerne la bibliothèque de support v7 - vous pouvez créer votre propre représentation de DrawerArrowDrawable.

mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close) {

            public void onDrawerClosed(View view) {
                supportInvalidateOptionsMenu();
            }

            public void onDrawerOpened(View drawerView) {
                supportInvalidateOptionsMenu();
            }
        };
        mDrawerToggle.setDrawerIndicatorEnabled(true);

        DrawerArrowDrawable drawerArrowDrawable = new DrawerArrowDrawable(this);
        drawerArrowDrawable.setAlpha(1);
        drawerArrowDrawable.setSpinEnabled(false);
        drawerArrowDrawable.setDirection(DrawerArrowDrawable.ARROW_DIRECTION_LEFT);
        drawerArrowDrawable.setColor(Color.BLACK);

        mDrawerToggle.setDrawerArrowDrawable(drawerArrowDrawable);
2
Nikita Yankov

Voici comment j'ai pu enfin faire fonctionner le mien.

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

if (toolbar != null) {
    setSupportActionBar(toolbar);
    toolbar.setNavigationIcon(R.drawable.ic_drawer);

    mDrawerToggle = new ActionBarDrawerToggle(this,
                mDrawerLayout,
                toolbar,
                R.string.drawer_open,
                R.string.drawer_close) {

        /** Called when a drawer has settled in a completely closed state. */
        public void onDrawerClosed(View view) {
            super.onDrawerClosed(view);
        }

        /** Called when a drawer has settled in a completely open state. */
        public void onDrawerOpened(View drawerView) {
            super.onDrawerOpened(drawerView);
        }
    };

    // Set the drawer toggle as the DrawerListener
    mDrawerLayout.setDrawerListener(mDrawerToggle);
    mDrawerToggle.syncState();

    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    getSupportActionBar().setHomeButtonEnabled(true);
}

Il s’est avéré être le 

mDrawerToggle.syncState();

Cela a finalement tout pour fonctionner.

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

final DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
final ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this,drawer,toolbar,R.string.navigation_drawer_open,R.string.navigation_drawer_close);
drawer.setDrawerListener(toggle);

toggle.syncState();
toolbar.setNavigationIcon(R.drawable.ic_action_name);
0
Dasun Athapaththu

Je pense qu'il est recommandé de mettre l'appel à syncState() dans la méthode du cycle de vie onPostCreate(...).

@Override
public void onPostCreate(Bundle savedInstanceState) {
    super.onPostCreate(savedInstanceState);
    mDrawerToggle.syncState();
}
0
Michio