Styling Duo drawer navigation menu in android

3d navigation drawer android github
duo-navigation-drawer android github
mini drawer android github

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

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;
}

Styling Duo drawer navigation menu in android, I 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  Duo Navigation Drawer . This Android library provides an easy way to create an alternative navigation drawer for android. Instead of a drawer that slides over the main content of the Activity, this lets the content slide away and reveal a menu below it. By default it applies a scaling effect on the content and menu. AndroidX

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...

Styling Duo drawer navigation menu in android, I 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  Instead of a drawer that slides over the main content of the Activity, this lets the content slide away and reveal a menu below it. This Android library provides an easy way to create an alternative navigation drawer for android. Instead of a drawer that slides over the main content of the Activity, this lets the content slide away and reveal a menu below it. Duo Navigation Drawer

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

Android Material Component: Navigation Drawer Styling (Part III), In Part II, you've looked in to how to add color states for navigation menu items and adding shapes as background for the menu items. In this post of the series,  Duo Navigation Drawer . This Android library provides an easy way to create an alternative navigation drawer for android. Instead of a drawer that slides over the main content of the Activity, this lets the content slide away and reveal a menu below it. By default it applies a scaling effect on the content and menu. Demo

Android Material Component: Navigation Drawer Styling (Part II), Upon running the app, you should now see the new style of the drawer. Styling: Menu Background Item. If you've noticed, we currently show a solid purple color for  Row selected in the navigation drawer. When it comes to styling the main rows in the drawer we have to deal with 3 elements (background, icon and text) and 3 different states (default, selected and pressed) for each element on each row.

psdcompany/duo-navigation-drawer: A flexible, easy to use , By default it applies a scaling effect on the content and menu. AndroidX. If you're still using legacy Android Support libraries you can use v2.0.8. AndroidX is  Adding Navigation Drawer. 12. Under res ⇒ menu directory, create a menu xml file named activity_main_drawer.xml. This menu renders the Navigation Drawer list items. Here we set the icons and labels. You can also notice here <group> is used to combine multiple items under single levels. An <item> also can be used group multiple child items

How to implement Navigation Drawer in android || full tutorial with , Open Source Menu UI Components Libraries for Android by Github App Developers. The style of the menu depends on the idea of the app and the navigational aspects of the Duo Navigation Drawer by PSD-Company. In this video, I will teach you how you can create a beautiful and cool Navigation drawer library using Android Studio. The library which I used is Custom Navigation Drawer by Shrikanth Ravi.

Comments
  • Asesha have you got any solution to your problem???
  • @Wini yes i could able to change the icons.
  • Asesha then can you put up your whole solution here ?