Custom item for MiniDrawer for new libary version

[zayn1991]

Hi Mike! I looked at the closed issues in search of my problem, but the answers I needed were relevant to older versions of the library. Help me, please, or give some advice I have such a problem: I need CustomItem for work in MiniDrawer and the same CustomItem for work in MaterialDrawer (i have 2 drawers at same time - as in Gmail) That is, how i need:

That is how i have now: I can't set badges at that items and can't change text color dynamically, by selecting item

And connected MaterialDrawer with that tems works fine (is second drawer): In MaterialDrawer badges and colors works fine.

For item i created material_drawer_item_mini2.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="72dp"
    android:layout_height="76dp"
    android:paddingBottom="@dimen/material_mini_drawer_item_padding"
    android:paddingEnd="@dimen/material_mini_drawer_item_padding_sides"
    android:paddingLeft="@dimen/material_mini_drawer_item_padding_sides"
    android:paddingRight="@dimen/material_mini_drawer_item_padding_sides"
    android:paddingStart="@dimen/material_mini_drawer_item_padding_sides"
    android:paddingTop="@dimen/material_mini_drawer_item_padding">

    <ImageView
        android:id="@+id/material_drawer_icon"
        android:layout_width="@dimen/material_mini_drawer_item_icon"
        android:layout_height="@dimen/material_mini_drawer_item_icon"
        android:layout_gravity="center"
        android:padding="@dimen/material_mini_drawer_item_icon_padding"
        android:scaleType="fitXY" />

    <TextView
        android:id="@+id/material_drawer_badge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|end"
        android:fontFamily="sans-serif"
        android:gravity="center"
        android:lines="1"
        android:maxLines="1"
        android:padding="1dp"
        android:paddingLeft="1dp"
        android:paddingRight="1dp"
        android:textSize="@dimen/material_mini_drawer_item_badge_text"
        tools:text="99" />

    <TextView
        android:id="@+id/material_drawer_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        tools:text=""
        android:textColor="@color/color_black"
        android:textSize="11sp"/>
</FrameLayout>

That is how i created CustomMiniDrawerItem:

import android.support.annotation.LayoutRes;
import android.widget.TextView;
import com.mikepenz.materialdrawer.model.MiniDrawerItem;
import com.mikepenz.materialdrawer.model.PrimaryDrawerItem;
import ru.test.app.Application;
import ru.test.app.R;

/**
 * Created by mikepenz on 03.02.15.
 */
public class CustomMiniDrawerItem extends MiniDrawerItem{

    public CustomMiniDrawerItem() {

    }
    public CustomMiniDrawerItem(PrimaryDrawerItem primaryDrawerItem) {
        this.mIdentifier = primaryDrawerItem.getIdentifier();
        this.mTag = primaryDrawerItem.getTag();

//        this.mBadge = primaryDrawerItem.getBadge(); // i didn't understood, how to connect this
//        this.mBadgeStyle = primaryDrawerItem.getBadgeStyle();// i didn't understood, how to connect this

        this.mEnabled = primaryDrawerItem.isEnabled();
        this.mSelectable = primaryDrawerItem.isSelectable();
        this.mSelected = primaryDrawerItem.isSelected();

        this.icon = primaryDrawerItem.getIcon();
        this.selectedIcon = primaryDrawerItem.getSelectedIcon();

        this.iconTinted = primaryDrawerItem.isIconTinted();
        this.selectedColor = primaryDrawerItem.getSelectedColor();

        this.iconColor = primaryDrawerItem.getIconColor();
        this.selectedIconColor = primaryDrawerItem.getSelectedIconColor();
        this.disabledIconColor = primaryDrawerItem.getDisabledIconColor();
    }

    @Override
    public void bindView(MiniDrawerItem.ViewHolder viewHolder) {

        super.bindView(viewHolder);
        //this is my title, added in xml 
        TextView title = (TextView) viewHolder.itemView.findViewById(R.id.material_drawer_title);
        // this is crutch because i wanted get texts for title from getName(); or from .withName(); at create items
        switch ((int)getIdentifier()){

            case 0: {
                title.setText("" + Application.getAppContext().getResources().getString(R.string.side_bar_profile));
                break;
            }
            case 1: {
                title.setText("" + Application.getAppContext().getResources().getString(R.string.side_bar_catalog));
                break;
            }
        }
          // i did that for changing color, but it works once. I have no idea? where else change colors for title
//        if (isSelected()){
//            title.setTextColor(Application.getAppContext().getResources().getColor(R.color.color_e3000b));
//        } else {
//            title.setTextColor(Application.getAppContext().getResources().getColor(R.color.color_black));
//        }
    }

    @Override
    @LayoutRes
    public int getLayoutRes() {
        return R.layout.material_drawer_item_mini2;
    }
}

That is how i created CustomMiniDrawer:

import com.mikepenz.materialdrawer.MiniDrawer;
import com.mikepenz.materialdrawer.model.MiniProfileDrawerItem;
import com.mikepenz.materialdrawer.model.PrimaryDrawerItem;
import com.mikepenz.materialdrawer.model.ProfileDrawerItem;
import com.mikepenz.materialdrawer.model.interfaces.IDrawerItem;

/**
 * Created by zayn on 20.08.2017.
 */

public class CustomMiniDrawer extends MiniDrawer {
    private boolean mEnableProfileClick = true;
    private boolean mEnableSelectedMiniDrawerItemBackground = false;

    @Override
    public int getMiniDrawerType(IDrawerItem drawerItem) {
        if (drawerItem instanceof MiniProfileDrawerItem) {
            return PROFILE;
        } else if (drawerItem instanceof CustomMiniDrawerItem) {
            return ITEM;
        }
        return -1;
    }

    @Override
    public IDrawerItem generateMiniDrawerItem(IDrawerItem drawerItem) {

        if (drawerItem instanceof PrimaryDrawerItem) {
            return new CustomMiniDrawerItem((PrimaryDrawerItem) drawerItem).withEnableSelectedBackground(mEnableSelectedMiniDrawerItemBackground);
        } else if (drawerItem instanceof ProfileDrawerItem) {
            MiniProfileDrawerItem mpdi = new MiniProfileDrawerItem((ProfileDrawerItem) drawerItem);
            mpdi.withEnabled(mEnableProfileClick);
            return mpdi;
        }
        return null;
    }
}

How i set CustomMiniDrawer:

private void createMiniDrawer(Bundle savedInstanceState) {
        DrawerBuilder builder = new DrawerBuilder()
                .withActivity((Activity) context)
                .withDrawerLayout(drawer)
                .withToolbar(toolbar)
                .withActionBarDrawerToggleAnimated(true) //?
                .withActionBarDrawerToggle(true) //?
                .withAccountHeader(accountHeader) //set the AccountHeader we created earlier for the header
                .withOnDrawerItemClickListener(new Drawer.OnDrawerItemClickListener() {
                    @Override
                    public boolean onItemClick(View view, int position, IDrawerItem drawerItem) {
                        if (drawerItem instanceof Nameable) {
                            itemClicked(drawerItem);
                        }
                        miniResult2.onItemClick(drawerItem);
                        return true;
                    }
                })
                .withSavedInstance(savedInstanceState);

        addDrawerItemsInBuilder(builder);
        // build only the view of the Drawer (don't inflate it automatically in our layout which is done with .build())
        resultDrawer = builder.buildView();

        // create the MiniDrawer and deinfe the drawer and header to be used (it will automatically use the items from them)
        final int typeProfile1 = MiniDrawer.PROFILE;
        miniResult2 = new CustomMiniDrawer();
        miniResult2.withDrawer(resultDrawer)
                .withInnerShadow(false)
                .withAccountHeader(accountHeader) // блок аккаунта
                .withEnableProfileClick(true)
                .withOnMiniDrawerItemClickListener(new MiniDrawer.OnMiniDrawerItemClickListener() {
                    @Override
                    public boolean onItemClick(View view, int position, IDrawerItem drawerItem, int type) {
                        if (type == typeProfile1) {
                            openScreenProfile(null);
                            return true;
                        }
                        return false;
                    }
                }); // чтоб кликалось по фото профиля в мини версии

        //IMPORTANT Crossfader specific implementation starts here (everything above is MaterialDrawer):

        //get the widths in px for the first and second panel
        int firstWidth = (int) UIUtils.convertDpToPixel(260, context);
        int secondWidth = (int) UIUtils.convertDpToPixel(72, context);

        //create and build our crossfader (see the MiniDrawer is also builded in here, as the build method returns the view to be used in the crossfader)
        crossFader = new Crossfader()
                .withContent(((Activity) context).findViewById(R.id.app_frame_layout))
                .withFirst(resultDrawer.getSlider(), firstWidth)
                .withSecond(miniResult2.build(context), secondWidth)
                .withGmailStyleSwiping()
                .withSavedInstance(savedInstanceState).withPanelSlideListener(new SlidingPaneLayout.PanelSlideListener() {
                    @Override
                    public void onPanelSlide(View panel, float slideOffset) {}

                    @Override
                    public void onPanelOpened(View panel) {
                        if (!getIsTablet())
                            materialMenu.animateIconState(MaterialMenuDrawable.IconState.ARROW);
                    }

                    @Override
                    public void onPanelClosed(View panel) {
                        if (!getIsTablet())
                            materialMenu.animateIconState(MaterialMenuDrawable.IconState.BURGER);
                    }
                })
                .build();
        // фон мини дравера
        crossFader.getSecond().setBackgroundColor(context.getResources().getColor(R.color.color_white));

        //define the crossfader to be used with the miniDrawer. This is required to be able to automatically toggle open / close
        miniResult2.withCrossFader(new CrossfadeWrapper(crossFader));

        //define a shadow (this is only for normal LTR layouts if you have a RTL app you need to define the other one
        crossFader.getCrossFadeSlidingPaneLayout().setShadowResourceLeft(R.drawable.material_drawer_shadow_left);
    }

How i set selected item:

miniResult2.setSelection(5);

And last, how i create items:

private void addDrawerItemsInBuilder(DrawerBuilder builder) {

        itemMain = new PrimaryDrawerItem().withName(R.string.side_bar_main).withIcon(R.drawable.ic_drawable_catalog).withIdentifier(0).withSelectedIcon(R.drawable.ic_drawable_catalog_selected);
        itemCatalog = new PrimaryDrawerItem().withName(R.string.side_bar_catalog).withIcon(R.drawable.ic_drawable_catalog).withIdentifier(1).withSelectedIcon(R.drawable.ic_drawable_catalog_selected);

        if (isTablet && !isPortrait) {
            builder.addDrawerItems(
                    itemCatalog,
                    itemDiscount,
                   //...
            ); // add the items we want to use with our Drawer
        } else {
            builder.addDrawerItems(
                    itemMain,
                    itemCatalog,
                    //...
            );
        }
    }

dependencies i used

compile('com.mikepenz:materialdrawer:5.5.0@aar') {
        transitive = true
    }
    compile('com.mikepenz:aboutlibraries:5.8.0@aar') {
        transitive = true
    }
    compile 'com.mikepenz:google-material-typeface:3.0.1.2.original@aar'
    compile 'com.mikepenz:fontawesome-typeface:4.7.0.2@aar'
    compile('com.mikepenz:crossfader:1.5.0@aar') {
        exclude group: 'com.android.support:appcompat'
        exclude group: 'com.android.support:support'
    }

Links, that i used: (this is very good link, but I could not use them, because much has changed since that moment ) https://github.com/mikepenz/MaterialDrawer/issues/1090#issuecomment-195913322

https://github.com/mikepenz/MaterialDrawer/blob/develop/library/src/main/java/com/mikepenz/materialdrawer/model/MiniDrawerItem.java#L161

https://github.com/mikepenz/MaterialDrawer/commit/8deedf8470f19c74ed6b826fd5aadc4eaed506da#diff-cc191e6c2a11ce5e036f0475a0aa8e82R14

[zayn1991]

@mikepenz I can divide this question on few simple questions:

1) I can't set or show badges and badge counts at that items (neither standart items, not custom items), though badges and badge counts shows normally in MaterialDrawer (i have 2 drawers: MaterialDrawer and MiniDrawer works together). i update item so:

itemBasket.withBadge("" + count);
resultDrawer.updateItem(itemBasket); //that works
miniResultDrawer.updateItem(itemBasket.getIdentifier()); // but that don't works

2) I can't change text color (added textView as title in layout) dynamically, by selecting item (i have custom miniDrawer-items for CustomMiniDrawer). I don't know, where to do that - is the right decision (but i know, how to change text color)

[zayn1991]

I'd solved my problems!!!!!

I changed CustomMiniDrawer

import com.mikepenz.materialdrawer.MiniDrawer;
import com.mikepenz.materialdrawer.model.MiniProfileDrawerItem;
import com.mikepenz.materialdrawer.model.PrimaryDrawerItem;
import com.mikepenz.materialdrawer.model.ProfileDrawerItem;
import com.mikepenz.materialdrawer.model.SecondaryDrawerItem;
import com.mikepenz.materialdrawer.model.interfaces.IDrawerItem;

public class CustomMiniDrawer extends MiniDrawer {
    private boolean mEnableProfileClick = true;
    private boolean mEnableSelectedMiniDrawerItemBackground = false;

    @Override
    public int getMiniDrawerType(IDrawerItem drawerItem) {
        if (drawerItem instanceof MiniProfileDrawerItem) {
            return PROFILE;
        } else if (drawerItem instanceof CustomMiniDrawerItem) {
            return ITEM;
        }
        return -1;
    }

    private boolean mIncludeSecondaryDrawerItems = false;
    public CustomMiniDrawer withIncludeSecondaryDrawerItems(boolean includeSecondaryDrawerItems) {
        this.mIncludeSecondaryDrawerItems = includeSecondaryDrawerItems;
        return this;
    }

    @Override
    public IDrawerItem generateMiniDrawerItem(IDrawerItem drawerItem) {

        if (drawerItem instanceof SecondaryDrawerItem) {
            return mIncludeSecondaryDrawerItems ? new CustomMiniDrawerItem((SecondaryDrawerItem) drawerItem).withEnableSelectedBackground(mEnableSelectedMiniDrawerItemBackground) : null;
        } else if (drawerItem instanceof PrimaryDrawerItem) {
            return new CustomMiniDrawerItem((PrimaryDrawerItem) drawerItem).withEnableSelectedBackground(mEnableSelectedMiniDrawerItemBackground);
        } else if (drawerItem instanceof CustomPrimaryDrawerItem) {
            return new CustomMiniDrawerItem((CustomPrimaryDrawerItem) drawerItem).withEnableSelectedBackground(mEnableSelectedMiniDrawerItemBackground);
        }else if (drawerItem instanceof ProfileDrawerItem) {
            MiniProfileDrawerItem mpdi = new MiniProfileDrawerItem((ProfileDrawerItem) drawerItem);
            mpdi.withEnabled(mEnableProfileClick);
            return mpdi;
        }
        return null;
    }
}

Then i changed CustomMiniDrawerItem so:

public class CustomMiniDrawerItem extends BaseDrawerItem<CustomMiniDrawerItem, CustomMiniDrawerItem.ViewHolder> implements ColorfulBadgeable<CustomMiniDrawerItem> {

    private StringHolder mBadge;
    private BadgeStyle mBadgeStyle = new BadgeStyle();
    private boolean mEnableSelectedBackground = false;
    protected DimenHolder mCustomHeight;

    public CustomMiniDrawerItem() {}

    public CustomMiniDrawerItem(CustomPrimaryDrawerItem primaryDrawerItem) {
        this.mIdentifier = primaryDrawerItem.getIdentifier();
        this.mTag = primaryDrawerItem.getTag();

        this.mBadge = primaryDrawerItem.getBadge();
        this.mBadgeStyle = primaryDrawerItem.getBadgeStyle();

        this.mEnabled = primaryDrawerItem.isEnabled();
        this.mSelectable = primaryDrawerItem.isSelectable();
        this.mSelected = primaryDrawerItem.isSelected();

        this.icon = primaryDrawerItem.getIcon();
        this.selectedIcon = primaryDrawerItem.getSelectedIcon();

        this.iconTinted = primaryDrawerItem.isIconTinted();
        this.selectedColor = primaryDrawerItem.getSelectedColor();

        this.iconColor = primaryDrawerItem.getIconColor();
        this.selectedIconColor = primaryDrawerItem.getSelectedIconColor();
        this.disabledIconColor = primaryDrawerItem.getDisabledIconColor();
    }

    public CustomMiniDrawerItem(PrimaryDrawerItem primaryDrawerItem) {
        this.mIdentifier = primaryDrawerItem.getIdentifier();
        this.mTag = primaryDrawerItem.getTag();

        this.mBadge = primaryDrawerItem.getBadge();
        this.mBadgeStyle = primaryDrawerItem.getBadgeStyle();

        this.mEnabled = primaryDrawerItem.isEnabled();
        this.mSelectable = primaryDrawerItem.isSelectable();
        this.mSelected = primaryDrawerItem.isSelected();

        this.icon = primaryDrawerItem.getIcon();
        this.selectedIcon = primaryDrawerItem.getSelectedIcon();

        this.iconTinted = primaryDrawerItem.isIconTinted();
        this.selectedColor = primaryDrawerItem.getSelectedColor();

        this.iconColor = primaryDrawerItem.getIconColor();
        this.selectedIconColor = primaryDrawerItem.getSelectedIconColor();
        this.disabledIconColor = primaryDrawerItem.getDisabledIconColor();
    }

    public CustomMiniDrawerItem(SecondaryDrawerItem secondaryDrawerItem) {
        this.mIdentifier = secondaryDrawerItem.getIdentifier();
        this.mTag = secondaryDrawerItem.getTag();

        this.mBadge = secondaryDrawerItem.getBadge();
        this.mBadgeStyle = secondaryDrawerItem.getBadgeStyle();

        this.mEnabled = secondaryDrawerItem.isEnabled();
        this.mSelectable = secondaryDrawerItem.isSelectable();
        this.mSelected = secondaryDrawerItem.isSelected();

        this.icon = secondaryDrawerItem.getIcon();
        this.selectedIcon = secondaryDrawerItem.getSelectedIcon();

        this.iconTinted = secondaryDrawerItem.isIconTinted();
        this.selectedColor = secondaryDrawerItem.getSelectedColor();

        this.iconColor = secondaryDrawerItem.getIconColor();
        this.selectedIconColor = secondaryDrawerItem.getSelectedIconColor();
        this.disabledIconColor = secondaryDrawerItem.getDisabledIconColor();
    }

    @Override
    public ViewHolderFactory<ViewHolder> getFactory() {
        return new ItemFactory();
    }

    @Override
    public CustomMiniDrawerItem withBadge(StringHolder badge) {
        this.mBadge = badge;
        return this;
    }

    @Override
    public CustomMiniDrawerItem withBadge(String badge) {
        this.mBadge = new StringHolder(badge);
        return this;
    }

    @Override
    public CustomMiniDrawerItem withBadge(@StringRes int badgeRes) {
        this.mBadge = new StringHolder(badgeRes);
        return this;
    }

    @Override
    public CustomMiniDrawerItem withBadgeStyle(BadgeStyle badgeStyle) {
        this.mBadgeStyle = badgeStyle;
        return this;
    }

    public StringHolder getBadge() {
        return mBadge;
    }

    public CustomMiniDrawerItem withEnableSelectedBackground(boolean enableSelectedBackground) {
        this.mEnableSelectedBackground = enableSelectedBackground;
        return this;
    }

    public BadgeStyle getBadgeStyle() {
        return mBadgeStyle;
    }

    public static class ItemFactory implements ViewHolderFactory<CustomMiniDrawerItem.ViewHolder> {
        public CustomMiniDrawerItem.ViewHolder create(View v) {
            return new CustomMiniDrawerItem.ViewHolder(v);
        }
    }

    @Override
    public void bindView(CustomMiniDrawerItem.ViewHolder viewHolder) {
        Context ctx = viewHolder.itemView.getContext();

        //set a different height for this item
        if (mCustomHeight != null) {
            RecyclerView.LayoutParams lp = (RecyclerView.LayoutParams) viewHolder.itemView.getLayoutParams();
            lp.height = mCustomHeight.asPixel(ctx);
            viewHolder.itemView.setLayoutParams(lp);
        }
        viewHolder.itemView.setId(hashCode());
        viewHolder.itemView.setEnabled(isEnabled());
        viewHolder.itemView.setSelected(isSelected());
        viewHolder.itemView.setTag(this);
        int iconColor = getIconColor(ctx);
        int selectedIconColor = getSelectedIconColor(ctx);
        if (mEnableSelectedBackground) {
            int selectedColor = getSelectedColor(ctx);
            UIUtils.setBackground(viewHolder.view, UIUtils.getSelectableBackground(ctx, selectedColor, true));
        }
        boolean badgeVisible = StringHolder.applyToOrHide(mBadge, viewHolder.badge);
        if (badgeVisible) {
            mBadgeStyle.style(viewHolder.badge);
        }
        Drawable icon = ImageHolder.decideIcon(getIcon(), ctx, iconColor, isIconTinted(), 1);
        Drawable selectedIcon = ImageHolder.decideIcon(getSelectedIcon(), ctx, selectedIconColor, isIconTinted(), 1);
        ImageHolder.applyMultiIconTo(icon, iconColor, selectedIcon, selectedIconColor, isIconTinted(), viewHolder.icon);

        //for android API 17 --> Padding not applied via xml
        int verticalPadding = ctx.getResources().getDimensionPixelSize(com.mikepenz.materialdrawer.R.dimen.material_drawer_padding);
        int topBottomPadding = ctx.getResources().getDimensionPixelSize(com.mikepenz.materialdrawer.R.dimen.material_mini_drawer_item_padding);
        viewHolder.itemView.setPadding(verticalPadding, topBottomPadding, verticalPadding, topBottomPadding);

        switch ((int)getIdentifier()){

            case 0: {
                viewHolder.titleMiniDrawer.setText("" + Application.getAppContext().getResources().getString(R.string.side_bar_main));
                break;
            }
            case 1: {
                viewHolder.titleMiniDrawer.setText("" + Application.getAppContext().getResources().getString(R.string.side_bar_catalog));
                break;
            }
            case 2: {
                viewHolder.titleMiniDrawer.setText("" + Application.getAppContext().getResources().getString(R.string.side_bar_akcii));
                break;
            }
            case 3: {
                viewHolder.titleMiniDrawer.setText("" + Application.getAppContext().getResources().getString(R.string.side_bar_basket));
                break;
            }
            case 4: {
                viewHolder.titleMiniDrawer.setText("" + Application.getAppContext().getResources().getString(R.string.side_bar_shops));
                break;
            }
            case 5: {
                viewHolder.titleMiniDrawer.setText("" + Application.getAppContext().getResources().getString(R.string.side_bar_profile));
                break;
            }
        }

        if (isSelected()){
            viewHolder.titleMiniDrawer.setTextColor(Application.getAppContext().getResources().getColor(R.color.color_e3000b));
        } else {
            viewHolder.titleMiniDrawer.setTextColor(Application.getAppContext().getResources().getColor(R.color.color_black));
        }
        //call the onPostBindView method to trigger post bind view actions (like the listener to modify the item if required)
        onPostBindView(this, viewHolder.itemView);
    }

    @Override
    public int getType() {
        return com.mikepenz.materialdrawer.R.id.material_drawer_item_mini;
    }

    @Override
    @LayoutRes
    public int getLayoutRes() {
        return R.layout.material_drawer_item_mini2;
    }

    public static class ViewHolder extends RecyclerView.ViewHolder {
        private View view;
        private ImageView icon;
        private TextView badge;
        private TextView titleMiniDrawer;
        public ViewHolder(View view) {
            super(view);

            this.view = view;
            this.icon = (ImageView) view.findViewById(R.id.material_drawer_icon);
            this.badge = (TextView) view.findViewById(R.id.material_drawer_badge);
            this.titleMiniDrawer = (TextView) view.findViewById(R.id.material_drawer_title);
        }
    }
}

I created items so:

itemMain = new CustomPrimaryDrawerItem().withName(R.string.side_bar_main).withIcon(R.drawable.ic_drawable_catalog).withIdentifier(0).withSelectedIcon(R.drawable.ic_drawable_catalog_selected);

And changed MiniDrawer by CustomMiniDrawer

P.S. CustomPrimaryDrawerItem is copy of standart PrimaryDrawerItem. If smeone needs help by this codes, please mark me in comment)