Alors maintenant qu'Android 5.0 est sorti, je me demandais comment implémenter les icônes de la barre d'action animée.

Cette bibliothèque l' implémente ici très bien pour moi, mais puisque la bibliothèque appcompat v7 l'a, comment peut-elle être implémentée?

La bibliothèque y fait référence dans themes.xml

 <item name="drawerArrowStyle">@style/Widget.AppCompat.DrawerArrowToggle</item>

Sous ce style

 <style name="Base.V7.Theme.AppCompat" parent="Platform.AppCompat">

METTRE À JOUR

Je l'ai implémenté en utilisant le DrawerToggle v7. Cependant, je ne peux pas le styliser. Veuillez aider

J'ai trouvé le style pour cela dans le v7 styles_base.xml

<style name="Base.Widget.AppCompat.DrawerArrowToggle" parent="">
    <item name="color">?android:attr/textColorSecondary</item>
    <item name="thickness">2dp</item>
    <item name="barSize">18dp</item>
    <item name="gapBetweenBars">3dp</item>
    <item name="topBottomBarArrowSize">11.31dp</item>
    <item name="middleBarArrowSize">16dp</item>
    <item name="drawableSize">24dp</item>
    <item name="spinBars">true</item>
</style>

J'ai ajouté cela à mes styles et je n'ai pas fonctionné. Également ajouté à mon attr.xml

<declare-styleable name="DrawerArrowToggle">
    <!-- The drawing color for the bars -->
    <attr name="color" format="color"/>
    <!-- Whether bars should rotate or not during transition -->
    <attr name="spinBars" format="boolean"/>
    <!-- The total size of the drawable -->
    <attr name="drawableSize" format="dimension"/>
    <!-- The max gap between the bars when they are parallel to each other -->
    <attr name="gapBetweenBars" format="dimension"/>
    <!-- The size of the top and bottom bars when they merge to the middle bar to form an arrow -->
    <attr name="topBottomBarArrowSize" format="dimension"/>
    <!-- The size of the middle bar when top and bottom bars merge into middle bar to form an arrow -->
    <attr name="middleBarArrowSize" format="dimension"/>
    <!-- The size of the bars when they are parallel to each other -->
    <attr name="barSize" format="dimension"/>
    <!-- The thickness (stroke size) for the bar paint -->
    <attr name="thickness" format="dimension"/>
</declare-styleable>

Mais se bloque et dit une erreur de type de couleur en le faisant. Qu'est-ce que je rate?

Tout d'abord, vous devez savoir maintenant que le android.support.v4.app.ActionBarDrawerToggleest obsolète.

Vous devez le remplacer par android.support.v7.app.ActionBarDrawerToggle.

Voici mon exemple et j'utilise le nouveau Toolbarpour remplacer le ActionBar.

MainActivity.java

public class MainActivity extends ActionBarActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(mToolbar);
    DrawerLayout mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(
        this,  mDrawerLayout, mToolbar,
        R.string.navigation_drawer_open, R.string.navigation_drawer_close
    );
    mDrawerLayout.setDrawerListener(mDrawerToggle);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    getSupportActionBar().setHomeButtonEnabled(true);
    mDrawerToggle.syncState();
}

styles.xml

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

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

Vous pouvez lire les documents sur AndroidDocument # DrawerArrowToggle_spinBars

Cet attribut est la clé pour implémenter l'animation menu-flèche.

public static int DrawerArrowToggle_spinBars Indique

si les barres doivent tourner ou non pendant la transition
Doit être une valeur booléenne, "true" ou "false".

Donc, vous définissez ceci: <item name="spinBars">true</item>.

Ensuite, l'animation peut être présentée.

J'espère que cela peut vous aider.

Si vous utilisez la bibliothèque de support fournie DrawerLayout comme suggéré dans la formation Création d'un tiroir de navigation , vous pouvez utiliser le nouveau fichier android.support. v7 .app.ActionBarDrawerToggle (note: différent de android.support. v4 .app.ActionBarDrawerToggle désormais obsolète ):

affiche une icône Hamburger lorsque le tiroir est fermé et une flèche lorsque le tiroir est ouvert. Il s'anime entre ces deux états lorsque le tiroir s'ouvre.

Bien que la formation n'ait pas été mise à jour pour prendre en compte la dépréciation / la nouvelle classe, vous devriez pouvoir l'utiliser presque exactement le même code - la seule différence dans sa mise en œuvre est le constructeur.

J'ai créé une petite application qui avait des fonctionnalités similaires

Activité principale

public class MyActivity extends ActionBarActivity {

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

        DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawer);
        android.support.v7.widget.Toolbar toolbar = (android.support.v7.widget.Toolbar) findViewById(R.id.toolbar);
        ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(
                this,
                drawerLayout,
                toolbar,
                R.string.open,
                R.string.close
        )

        {
            public void onDrawerClosed(View view)
            {
                super.onDrawerClosed(view);
                invalidateOptionsMenu();
                syncState();
            }

            public void onDrawerOpened(View drawerView)
            {
                super.onDrawerOpened(drawerView);
                invalidateOptionsMenu();
                syncState();
            }
        };
        drawerLayout.setDrawerListener(actionBarDrawerToggle);

        //Set the custom toolbar
        if (toolbar != null){
            setSupportActionBar(toolbar);
        }

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        actionBarDrawerToggle.syncState();
    }
}

Mon XML de cette activité

<android.support.v4.widget.DrawerLayout 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=".MyActivity"
    android:id="@+id/drawer"
    >

    <!-- The main content view -->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
        <include layout="@layout/toolbar_custom"/>
    </FrameLayout>
    <!-- The navigation drawer -->
    <ListView
        android:layout_marginTop="?attr/actionBarSize"
        android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"
        android:background="#457C50"/>


</android.support.v4.widget.DrawerLayout>

Ma barre d'outils personnalisée XML

<?xml version="1.0" encoding="utf-8"?>

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/toolbar"
    android:background="?attr/colorPrimaryDark">
    <TextView android:text="U titel"
        android:textAppearance="@android:style/TextAppearance.Theme"
        android:textColor="@android:color/white"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
</android.support.v7.widget.Toolbar>

Mon style de thème

<resources>
    <style name="AppTheme" parent="Base.Theme.AppCompat"/>

    <style name="AppTheme.Base" parent="Theme.AppCompat">
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primaryDarker</item>
        <item name="android:windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
    </style>

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

    <color name="primary">#457C50</color>
    <color name="primaryDarker">#580C0C</color>
</resources>

Mes styles dans values-v21

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="AppTheme.Base">
        <item name="android:windowContentTransitions">true</item>
        <item name="android:windowAllowEnterTransitionOverlap">true</item>
        <item name="android:windowAllowReturnTransitionOverlap">true</item>
        <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
        <item name="android:windowSharedElementExitTransition">@android:transition/move</item>
    </style>
</resources>

Pour répondre à la partie mise à jour de votre question: pour styliser l'icône / la flèche du tiroir, vous avez deux options:

Style de la flèche elle-même

Pour ce faire, remplacez drawerArrowStylevotre thème comme suit:

<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
    <item name="drawerArrowStyle">@style/MyTheme.DrawerArrowToggle</item>
</style>
<style name="MyTheme.DrawerArrowToggle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="color">@android:color/holo_purple</item>
    <!-- ^ this will make the icon purple -->
</style>

Ce n'est probablement pas ce que vous voulez , car l'ActionBar lui-même devrait avoir un style cohérent avec la flèche, donc, très probablement, vous voulez l'option deux:

Thème l'ActionBar / Toolbar

Remplacez l' attribut android:actionBarTheme( actionBarThemefor appcompat) du thème d'application global avec votre propre thème (dont vous devriez probablement dériver ThemeOverlay.Material.ActionBar/ThemeOverlay.AppCompat.ActionBar) comme suit:

<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
    <item name="actionBarTheme">@style/MyTheme.ActionBar</item>
</style>
<style name="MyTheme.ActionBar" parent="ThemeOverlay.AppCompat.ActionBar">
    <item name="android:textColorPrimary">@android:color/white</item>
    <!-- ^ this will make text and arrow white -->
    <!-- you can also override drawerArrowStyle here -->
</style>

Une note importante ici est que lorsque vous utilisez une mise en page personnalisée avec une Toolbarimplémentation ActionBar au lieu de stock (par exemple, si vous utilisez le combo DrawerLayout- NavigationView- Toolbarpour obtenir l'effet de tiroir de style Material là où il est visible sous la barre d'état translucide), l' actionBarThemeattribut n'est évidemment pas ramassé automatiquement (car il est censé être pris en charge par le AppCompatActivitypar défaut ActionBar), donc pour votre personnalisation, Toolbarn'oubliez pas d'appliquer votre thème manuellement:

<!--inside your custom layout with DrawerLayout
and NavigationView or whatever -->
<android.support.v7.widget.Toolbar
        ...
        app:theme="?actionBarTheme">

- cela résoudra soit la valeur par défaut d'AppCompat, ThemeOverlay.AppCompat.ActionBarsoit votre remplacement si vous définissez l'attribut dans votre thème dérivé.

PS un petit commentaire sur le drawerArrowStyleremplacement et l' spinBarsattribut - que de nombreuses sources suggèrent qu'il devrait être réglé truepour obtenir l'animation tiroir / flèche. Le fait est que spinBarsc'est true par défaut dans AppCompat (vérifiez le Base.Widget.AppCompat.DrawerArrowToggle.Commonstyle), vous n'avez pas du tout à remplacer actionBarThemepour que l'animation fonctionne. Vous obtenez l'animation même si vous la remplacez et définissez l'attribut sur false, c'est juste une animation différente, moins sinueuse. L'important ici est d'utiliser ActionBarDrawerToggle, c'est ce qui attire le dessin animé fantaisie.

Je veux corriger un peu le code ci-dessus

    public class MainActivity extends ActionBarActivity {
        @Override
        protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
        DrawerLayout mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(
            this,  mDrawerLayout, mToolbar,
            R.string.navigation_drawer_open, R.string.navigation_drawer_close
        );
        mDrawerLayout.setDrawerListener(mDrawerToggle);

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

et toutes les autres choses resteront les mêmes ...

Pour ceux qui ont des problèmes de Drawerlayoutsuperposition de la barre d'outils

ajouter android:layout_marginTop="?attr/actionBarSize"à la disposition racine du contenu du tiroir