How to add divider to items in AndroidResideMenu?

Question

I'm creating an android application in which am using AndroidResideMenu. I want to set a divider in between each item in side menu.I tried adding a layout for divider in the xml in library.But its not working.Please help...

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="horizontal"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:gravity="center_vertical"
              android:paddingTop="15dp">

    <ImageView
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:scaleType="centerCrop"
            android:id="@+id/iv_icon"/>

    <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="@android:color/white"
            android:textSize="13sp"
            android:layout_marginLeft="10dp"
            android:id="@+id/tv_title"/>


     <LinearLayout

              android:layout_width="match_parent"
              android:layout_height="2dp"
              android:background="#000000">

        </LinearLayout>
</LinearLayout>

This is the method for adding items to menu

private void setUpMenu() {

    // attach to current activity;
    resideMenu = new ResideMenu(this);
    resideMenu.setBackground(R.drawable.menu_background);
    resideMenu.attachToActivity(this);
    resideMenu.setMenuListener(menuListener);

    resideMenu.setScaleValue(0.6f);

    // create menu items;
    itemHome     = new ResideMenuItem(this, R.drawable.icon_home,     "Home");
    itemProfile  = new ResideMenuItem(this, R.drawable.icon_profile,  "Profile");
    itemCalendar = new ResideMenuItem(this, R.drawable.icon_calendar, "Calendar");
    itemSettings = new ResideMenuItem(this, R.drawable.icon_settings, "Settings");

    itemHome.setOnClickListener(this);
    itemProfile.setOnClickListener(this);
    itemCalendar.setOnClickListener(this);
    itemSettings.setOnClickListener(this);

    resideMenu.addMenuItem(itemHome, ResideMenu.DIRECTION_LEFT);
    resideMenu.addMenuItem(itemProfile, ResideMenu.DIRECTION_LEFT);
    resideMenu.addMenuItem(itemCalendar, ResideMenu.DIRECTION_RIGHT);
    resideMenu.addMenuItem(itemSettings, ResideMenu.DIRECTION_RIGHT);

    // You can disable a direction by setting ->
    // resideMenu.setSwipeDirectionDisable(ResideMenu.DIRECTION_RIGHT);

    findViewById(R.id.title_bar_left_menu).setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            resideMenu.openMenu(ResideMenu.DIRECTION_LEFT);
        }
    });
    findViewById(R.id.title_bar_right_menu).setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            resideMenu.openMenu(ResideMenu.DIRECTION_RIGHT);
        }
    });
}

Answer 1

With ResideMenu, every item is an instance of ResideMenuItem which is basically a simple LinearLayout.

The solution I would use, is the following:

// create menu items;
itemHome     = new ResideMenuItem(this, R.drawable.icon_home,     "Home");
itemProfile  = new ResideMenuItem(this, R.drawable.icon_profile,  "Profile");
itemCalendar = new ResideMenuItem(this, R.drawable.icon_calendar, "Calendar");
itemSettings = new ResideMenuItem(this, R.drawable.icon_settings, "Settings");

itemHome.setOnClickListener(this);
itemProfile.setOnClickListener(this);
itemCalendar.setOnClickListener(this);
itemSettings.setOnClickListener(this);

resideMenu.addMenuItem(itemHome, ResideMenu.DIRECTION_LEFT);
resideMenu.addMenuItem(itemProfile, ResideMenu.DIRECTION_LEFT);
resideMenu.addMenuItem(itemCalendar, ResideMenu.DIRECTION_RIGHT);
resideMenu.addMenuItem(itemSettings, ResideMenu.DIRECTION_RIGHT);

// Force top margin for these elements
setMargin(itemHome);
setMargin(itemProfile);
setMargin(itemCalendar);
setMargin(itemSettings);

Use the following method to apply margins:

private void setMargin(ResideMenuItem item)
{
    LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) item.getLayoutParams();
    params.setMargins(0, dpToPx(15), 0, 0);
    item.setLayoutParams(params);
}

Don't forget to implement dpToPx to convert 15dp into the corresponding pixel size.

---

To add a divider line, you could use something like that:

private void addSeparatorAfter(ResideMenuItem menuItem)
{
    LinearLayout parent = (LinearLayout) ((ViewGroup) menuItem.getParent()).getParent();

    View separator = new View(this);
    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, dpToPx(2dp));
    params.setMargins(dpToPx(5), dpToPx(5), dpToPx(5), dpToPx(5));
    separator.setLayoutParams(params);
    separator.setBackgroundColor(0xFFCCCCCC);

    parent.addView(separator);
}

and call it right after each addMenuItem method.

For example, in your case, it would be:

resideMenu.addMenuItem(itemHome, ResideMenu.DIRECTION_LEFT);
addSeparatorAfter(itemHome);
resideMenu.addMenuItem(itemProfile, ResideMenu.DIRECTION_LEFT);
addSeparatorAfter(itemProfile);
resideMenu.addMenuItem(itemCalendar, ResideMenu.DIRECTION_RIGHT);
addSeparatorAfter(itemCalendar);
resideMenu.addMenuItem(itemSettings, ResideMenu.DIRECTION_RIGHT);

Answer 2

Try this

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/icon"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:scaleType="centerCrop" />

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:textColor="@android:color/white"
        android:textSize="13sp" />
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="2dp"
    android:layout_marginTop="4dp"
    android:background="#000000" >
</LinearLayout>

</LinearLayout>