Styling Duo drawer navigation menu in android

Question

I am doing an android project where I am using Duo Navigation Drawer. I am unable to change the menu style. I want to change the font type and remove bullets from the list please see the below image

Below is my Main Activity

public class MainActivity extends AppCompatActivity implements DuoMenuView.OnMenuClickListener{

    private MenuAdapter mMenuAdapter;
    private ViewHolder mViewHolder;
    boolean clickAgainToExit = false;
    Typeface custom_font;

    private ArrayList<String> mTitles = new ArrayList();
    private ArrayList<Integer> mTitlesIcon = new ArrayList();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        this.custom_font = AppUtils.getTypefaceblack(this);
        SetupDrawer();
    }

     private void SetupDrawer() {

        this.mTitles = new ArrayList(Arrays.asList(getResources().getStringArray(R.array.menuOptions)));

        this.mTitlesIcon = new ArrayList();
         this.mTitlesIcon.add(R.drawable.home);
        this.mTitlesIcon.add(R.drawable.add_bussiness);
        this.mTitlesIcon.add(R.drawable.news);
        this.mTitlesIcon.add(R.drawable.setting);
        this.mTitlesIcon.add(R.drawable.share_icon);

         // Initialize the views
        mViewHolder = new ViewHolder();

        // Handle toolbar actions
        handleToolbar();

        // Handle menu actions
        handleMenu();

        // Handle drawer actions
        handleDrawer();

        // Show main fragment in container
        goToFragment(new MainFragment(), false);
        this.mMenuAdapter.setViewSelected(0, true);
        setTitle(mTitles.get(0));

         View headerView = mViewHolder.mDuoMenuView.getHeaderView();

         TextView textView = (TextView) headerView.findViewById(R.id.user_name);
         textView.setTypeface(this.custom_font);
         TextView textView2 = (TextView) headerView.findViewById(R.id.app_name);
         textView2.setTypeface(this.custom_font);
         TextView textView3 = (TextView) headerView.findViewById(R.id.tvlocation);
         textView3.setSelected(true);
    }

    private void handleToolbar() {
        setSupportActionBar(mViewHolder.mToolbar);
    }

    private void handleDrawer() {
        DuoDrawerToggle duoDrawerToggle = new DuoDrawerToggle(this,
                mViewHolder.mDuoDrawerLayout,
                mViewHolder.mToolbar,
                R.string.navigation_drawer_open,
                R.string.navigation_drawer_close);

        mViewHolder.mDuoDrawerLayout.setDrawerListener(duoDrawerToggle);
        duoDrawerToggle.syncState();

    }

    private void handleMenu() {
        this.mMenuAdapter = new MenuAdapter(this.mTitles,this.mTitlesIcon);

        mViewHolder.mDuoMenuView.setOnMenuClickListener(this);
        mViewHolder.mDuoMenuView.setAdapter(mMenuAdapter);
    }

    @Override
    public void onFooterClicked() {
        Toast.makeText(this, "onFooterClicked", Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onHeaderClicked() {
        Toast.makeText(this, "onHeaderClicked", Toast.LENGTH_SHORT).show();
    }

    private void goToFragment(Fragment fragment, boolean addToBackStack) {
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();

        if (addToBackStack) {
            transaction.addToBackStack(null);
        }

        transaction.add(R.id.container, fragment).commit();
    }

    @Override
    public void onOptionClicked(int position, Object objectClicked) {
        // Set the toolbar title
        setTitle(mTitles.get(position));

        // Set the right options selected
        mMenuAdapter.setViewSelected(position, true);

        // Navigate to the right fragment
        switch (position) {
//            default:
//                goToFragment(new MainFragment(), false);
//                break;

            case 0:
                Toast.makeText(getApplicationContext(),"Home",Toast.LENGTH_LONG).show();
                break;
            case 1:
                Toast.makeText(getApplicationContext(),"Personal",Toast.LENGTH_LONG).show();
                break;
            case 2:
                Toast.makeText(getApplicationContext(),"News",Toast.LENGTH_LONG).show();
                break;
            case 3:
                Toast.makeText(getApplicationContext(),"Settings",Toast.LENGTH_LONG).show();
                break;
            case 4:
                Toast.makeText(getApplicationContext(),"About",Toast.LENGTH_LONG).show();
                break;
        }

        // Close the drawer
        mViewHolder.mDuoDrawerLayout.closeDrawer();
    }

    private class ViewHolder {
        private DuoDrawerLayout mDuoDrawerLayout;
        private DuoMenuView mDuoMenuView;
        private Toolbar mToolbar;

        ViewHolder() {
            mDuoDrawerLayout = findViewById(R.id.drawer);
            mDuoMenuView = (DuoMenuView) mDuoDrawerLayout.getMenuView();
            mToolbar = findViewById(R.id.toolbar);
        }
    }
}

and below is my menuAdapter

class MenuAdapter extends BaseAdapter {

    private ArrayList<View> mOptionViews = new ArrayList();
    private ArrayList<String> mOptions = new ArrayList();
    private ArrayList<Integer> mTitlesIcon = new ArrayList();

    @Override
    public long getItemId(int i) {
        return i;
    }

    public MenuAdapter(ArrayList<String> menuoptions, ArrayList<Integer> menuicons) {
        this.mOptions = menuoptions;
        this.mTitlesIcon = menuicons;
    }

    @Override
    public int getCount() {
        return this.mOptions.size();
    }

    @Override
    public Object getItem(int position) {
        return this.mOptions.get(position);
    }

    void setViewSelected(int position, boolean selected) {

        for (int i = 0; i < this.mOptionViews.size(); i++) {
            if (i == position) {
                ((DuoOptionView) this.mOptionViews.get(i)).setSelected(selected);
            } else {
                ((DuoOptionView) this.mOptionViews.get(i)).setSelected(!selected);
            }
        }
    }


    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        String str = (String) this.mOptions.get(i);

        i =((Integer) this.mTitlesIcon.get(i)).intValue();

        if(view == null){
            view = new DuoOptionView(viewGroup.getContext());
        }else{
            view = (DuoOptionView) view;
        }

        ((DuoOptionView) view).bind(str,i);
        this.mOptionViews.add(view);
        return view;
    }
}

How to change recertify this. please suggest me.

I took this from link

Answer 1

To remove the bullets just add optionView.setSelectorEnabled(false); in the MenuAdapter in the getView method.

@Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        String str = (String) this.mOptions.get(i);

        i =((Integer) this.mTitlesIcon.get(i)).intValue();

        if(view == null){
            view = new DuoOptionView(viewGroup.getContext());
        }else{
            view = (DuoOptionView) view;
        }
        optionView.setSelectorEnabled(false);

        ((DuoOptionView) view).bind(str,i);
        this.mOptionViews.add(view);
        return view;
    }

Answer 2

Step 1. In MainActivity.java change method handleMenu()

private void handleMenu() {
        mMenuAdapter = new MenuAdapter(mTitles, mTitlesIcon, this); //pass context
        mViewHolder.mDuoMenuView.setOnMenuClickListener(this);
        mViewHolder.mDuoMenuView.setAdapter(mMenuAdapter);
         }

Step 2. In MenuAdapter.java

  private Context mContext;

 public MenuAdapter(ArrayList<String> menuoptions, ArrayList<Integer>
 menuicons, Context context) {
         this.mOptions = menuoptions;
         this.mTitlesIcon = menuicons;
        this.mContext = context;
     }

Step 3. In MenuAdapter.java

@Override
    public View getView(int position, View convertView, ViewGroup parent) {
        final String option = mOptions.get(position);
        //Log.d("TAG", position+";");
     
        final DuoOptionView optionView;
        if (convertView == null) {
            optionView = new DuoOptionView(parent.getContext());
            optionView.getChildAt(0);
        } else {
            optionView = (DuoOptionView) convertView;
        }
        optionView.bind(option, context.getResources().getDrawable(mTitlesIcon.get(position)));
        // Adding the views to an array list to handle view selection
        mOptionViews.add(optionView);
        return optionView;
    }

enter image description here

Answer 3

Solution 1. In your MenuAdapter Change

@Override
public View getView(int i, View view, ViewGroup viewGroup) {
    String str = (String) this.mOptions.get(i);

    i =((Integer) this.mTitlesIcon.get(i)).intValue();

    if(view == null){
        view = new DuoOptionView(viewGroup.getContext());
    }else{
        view = (DuoOptionView) view;
    }

    ((DuoOptionView) view).bind(str,i);
    this.mOptionViews.add(view);
    return view;
}

with

@Override
public View getView(int i, View view, ViewGroup viewGroup) {
    String str = (String) this.mOptions.get(i);

    i =((Integer) this.mTitlesIcon.get(i)).intValue();

    if(view == null){
        view = new DuoOptionView(viewGroup.getContext());
    }else{
        view = (DuoOptionView) view;
    }

    ((DuoOptionView) view).bind(str); // change is here
    this.mOptionViews.add(view);
    return view;
}

Solution 2. or you can set drawable like this

 // Using the DuoOptionView's default selectors
 optionView.bind(option, ContextCompat.getDrawable(context,
 android.R.drawable.ic_dialog_alert), null);

solution 3. or if you have source code if the library the set visibility to gone for mOptionViewHolder.mImageViewSelector.setVisibility(GONE);

see attached image i have same way

Answer 4

To change icon on drawer items, you can use something similar to below:

optionView.bind(option, getDrawable(R.drawable.ic_icon), null);

Note: Above will set same icon to all drawer items. You need to use TypedArray with list of icons...

Answer 5

Sorry for the late reply, but I think this code will help you to get every item in navigation menu view to change text color or typeface.

In getView method you should make change to child view as you want:

(((TextView)((RelativeLayout)((RelativeLayout)optionView.getChildAt(0)).getChildAt(1)).getChildAt(1))).setTextColor(Color.BLACK);

full code of method like :

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    final String option = mOptions.get(position);
    // Using the DuoOptionView to easily recreate the demo
    final DuoOptionView optionView;
    if (convertView == null) {
        optionView = new DuoOptionView(parent.getContext());
        optionView.getChildAt(0);
    } else {
        optionView = (DuoOptionView) convertView;


    }
    (((TextView)((RelativeLayout)((RelativeLayout)optionView.getChildAt(0)).getChildAt(1)).getChildAt(1))).setTextColor(Color.BLACK);
    // Using the DuoOptionView's default selectors
    optionView.bind(option, null, null);
    // Adding the views to an array list to handle view selection
    mOptionViews.add(optionView);

    return optionView;
}