Mostrando entradas con la etiqueta DrawerLayout. Mostrar todas las entradas
Mostrando entradas con la etiqueta DrawerLayout. Mostrar todas las entradas

viernes, 20 de junio de 2014

Changing Menu Icons and the Drawer layout Icon depending the Theme

First generate the attrs.xml in values folder:

<resources>
    <declare-styleable name="customAttrs">
        <attr name="customUserInfoIcon" format="reference" />
        <attr name="customDrawerLayoutIcon" format="reference" />
        <attr name="customInfoDetailsIcon" format="reference" />
    </declare-styleable>
</resources>

Second generate your diferent styles:

    <style name="REDAppTheme" parent="AppTheme">
        <item name="android:actionBarStyle">@style/REDActionBar</item>
        <item name="customUserInfoIcon">@drawable/ic_action_userinfo_black</item>
        <item name="customDrawerLayoutIcon">@drawable/ic_drawer_black</item>
        <item name="customInfoDetailsIcon">@drawable/ic_action_info_details_black</item>
    </style>

    <style name="REDActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">
        <item name="android:background">@color/vbz_red</item>
        <item name="android:titleTextStyle">@style/RED.ActionBar.TitleTextStyle</item>
        <item name="android:icon">@drawable/icon_red</item>
    </style>

    <style name="RED.ActionBar.TitleTextStyle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">
        <item name="android:textColor">@color/black</item>
    </style>

    <style name="BLUEAppTheme" parent="AppTheme">
        <item name="android:actionBarStyle">@style/BLUEActionBar</item>
        <item name="customUserInfoIcon">@drawable/ic_action_userinfo_white</item>
        <item name="customDrawerLayoutIcon">@drawable/ic_drawer_white</item>
        <item name="customInfoDetailsIcon">@drawable/ic_action_info_details_white</item>
    </style>

    <style name="BLUEActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">
        <item name="android:background">@color/vbz_blue</item>
        <item name="android:titleTextStyle">@style/BLUE.ActionBar.TitleTextStyle</item>
        <item name="android:icon">@drawable/icon</item>
    </style>

    <style name="BLUE.ActionBar.TitleTextStyle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">
        <item name="android:textColor">@color/white</item>
    </style>

Then you can use the different icons in your menu depending of the style you have chosen:

<menu xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:id="@+id/userinfo"
        android:orderInCategory="100"
        android:showAsAction="always"
        android:title="@string/userinfo"
        android:icon="?attr/customUserInfoIcon"/>

     <item
        android:id="@+id/info"
        android:orderInCategory="100"
        android:showAsAction="always"
        android:title="@string/info"
        android:icon="?attr/customInfoDetailsIcon"/>

</menu>

And for the drawer layout you have to get the referenced Id and put it in the ActionBarDrawerToggle constructor:

    TypedArray a = getTheme().obtainStyledAttributes(R.style.AppTheme, new int[] {R.attr.customDrawerLayoutIcon});     
    int attributeResourceId = a.getResourceId(0, 0);

    // ActionBarDrawerToggle ties together the the proper interactions
    // between the sliding drawer and the action bar app icon
    drawerToggle = new ActionBarDrawerToggle(this, /* host Activity */
    drawerLayout, /* DrawerLayout object */
    attributeResourceId, /* nav drawer image to replace 'Up' caret */
    R.string.drawer_open, /* "open drawer" description for accessibility */
    R.string.drawer_close /* "close drawer" description for accessibility */
    ) {
        public void onDrawerClosed(View view) {
            getActionBar().setTitle(mTitle);
            invalidateOptionsMenu(); // creates call to
                                        // onPrepareOptionsMenu()
        }

        public void onDrawerOpened(View drawerView) {
            getActionBar().setTitle(mDrawerTitle);
            invalidateOptionsMenu(); // creates call to
                                        // onPrepareOptionsMenu()
        }
    };