Android: 2 or More Expandablelistview Inside Navigation Drawer

Android: 2 or more ExpandableListView inside Navigation Drawer

Sample Image

Finally i have got it!
This is the code I created to get an ExpandableListView with section titles.
Now it's I can easily create three xml custom layouts for titles, groups and childrens.

It work for me, but I accept any code improvements to optimize memory usage, speed and so on.

// ---------------------------------------------------------------------------------------------
// NAVIGATION DRAWER SIDE FRAGMENT
// ---------------------------------------------------------------------------------------------

private ExpandableListView mDrawerListView;
private List<Elemento> mainActions = new ArrayList<>();
private HashMap<Integer, List<String>> childActions = new HashMap<>();

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {

View v = inflater.inflate(R.layout.frg_navigation_drawer, container, false);

assert v != null;

mDrawerListView = (ExpandableListView) v.findViewById(R.id.elvHome);
mDrawerListView.setGroupIndicator(null);

// add first title
mainActions.add(new TitoloGruppo("Good guys")); // 0
mainActions.add(new Azione("Admiral Ackbar", "Dagobah System")); // 1
mainActions.add(new Azione("Han Solo", "Millenium Falcon")); // 2
mainActions.add(new Azione("Yoda", "Dagobah System")); // 3
// add second title
mainActions.add(new TitoloGruppo("Bad guys")); // 4
mainActions.add(new Azione("Emperor", "Death star 2")); // 5
mainActions.add(new Azione("Jabba", "Tatooine")); // 6
mainActions.add(new Azione("Grand Moff Tarkin", "Death star 1")); // 7

// Adding child quotes to Ackbar
List<String> mainSubFive = new ArrayList<>();
mainSubFive.add("It's a trap!");

// Adding child quotes to Yoda
List<String> mainSubThree = new ArrayList<>();
mainSubThree.add("Do or do not; there is no try.");
mainSubThree.add("There is … another … Sky … walker.…");
mainSubThree.add("When 900 years old you reach, look as good you will not ehh.");

childActions.put(0, new ArrayList<String>());
childActions.put(1, mainSubFive);
childActions.put(2, new ArrayList<String>());
childActions.put(3, mainSubThree);
childActions.put(4, new ArrayList<String>());
childActions.put(5, new ArrayList<String>());
childActions.put(6, new ArrayList<String>());

mDrawerListView.setAdapter(new ExpandableAdapter(getActivity(), mainActions, childActions));
mDrawerListView.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() {
@Override
public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long id) {
List<String> list = childActions.get(groupPosition);
if(list.size() > 0)
return false;
else
Toast.makeText(getActivity(), ""+ ((Azione) mainActions.get(groupPosition)).getSubtitle(), Toast.LENGTH_LONG).show();
return false;
}
});

mDrawerListView.setOnChildClickListener(new ExpandableListView.OnChildClickListener() {
@Override
public boolean onChildClick(ExpandableListView parent, View v, int groupPosition, int childPosition, long id) {
List<String> list = childActions.get(groupPosition);

Toast.makeText(getActivity(), "" + list.get(childPosition).toString(), Toast.LENGTH_LONG).show();
return false;
}
});
return v;
}

// ---------------------------------------------------------------------------------------------
// INTERNAL CLASS
// ---------------------------------------------------------------------------------------------

protected class ExpandableAdapter extends BaseExpandableListAdapter {

private Context context;
private List<Elemento> mainElements;
private HashMap<Integer, List<String>> childElements;
private LayoutInflater vi;

public ExpandableAdapter(Context context, List<Elemento> mainElements, HashMap<Integer, List<String>> childElements) {
this.context = context;
this.mainElements = mainElements;
this.childElements = childElements;
vi = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}

@Override
public int getGroupCount() {
return this.mainElements.size();
}

@Override
public int getChildrenCount(int groupPosition) {
if(this.childElements.get(groupPosition) == null)
return 0;
return this.childElements.get(groupPosition).size();
}

@Override
public Object getGroup(int groupPosition) {
return this.mainElements.get(groupPosition);
}

@Override
public Object getChild(int groupPosition, int childPosition) {
return this.childElements.get(groupPosition).get(childPosition);
}

@Override
public long getGroupId(int groupPosition) {
return groupPosition;
}

@Override
public long getChildId(int groupPosition, int childPosition) {
return childPosition;
}

@Override
public boolean hasStableIds() {
return false;
}

@Override
public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
View v = convertView;

final Elemento i = mainElements.get(groupPosition);
if (i != null) {
if(i.isGroupSection()){
final TitoloGruppo si = (TitoloGruppo)i;
v = vi.inflate(android.R.layout.simple_list_item_1, null);
v.setOnClickListener(null);
v.setOnLongClickListener(null);
v.setLongClickable(false);
final TextView sectionView = (TextView) v.findViewById(android.R.id.text1);
sectionView.setTextColor(Color.parseColor("#FFC800"));
sectionView.setText(si.getTitle());
}else if(i.isAction()){
Azione ei = (Azione)i;
v = vi.inflate(android.R.layout.simple_list_item_2, null);
final TextView title = (TextView)v.findViewById(android.R.id.text1);
final TextView subtitle = (TextView)v.findViewById(android.R.id.text2);

if (title != null)
title.setText(ei.title);
if(subtitle != null)
subtitle.setText("count: " + getChildrenCount(groupPosition));
}
}
return v;
}

@Override
public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {

final String childText = (String) getChild(groupPosition, childPosition);

if (convertView == null) {
LayoutInflater infalInflater = (LayoutInflater) this.context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = infalInflater.inflate(android.R.layout.simple_list_item_1, null);
}

TextView txtListChild = (TextView) convertView.findViewById(android.R.id.text1);
txtListChild.setText(childText);
return convertView;
}

@Override
public boolean isChildSelectable(int groupPosition, int childPosition) {
return true;
}
}

public class TitoloGruppo implements Elemento {

private final String titolo;

public TitoloGruppo(String titolo) {
this.titolo = titolo;
}

public String getTitle(){
return titolo;
}

@Override
public boolean isGroupSection() {
return true;
}

@Override
public boolean isAction() {
return false;
}
}

protected interface Elemento {
public boolean isGroupSection();
public boolean isAction();
}

protected class Azione implements Elemento {
public final String title;
public final String subtitle;

public Azione(String title, String subtitle) {
this.title = title;
this.subtitle = subtitle;
}

public String getTitle() {
return this.title;
}

public String getSubtitle() {
return this.subtitle;
}

@Override
public boolean isGroupSection() {
return false;
}

@Override
public boolean isAction() {
return true;
}
}

Ps. thank you all

Default Navigation Drawer View to ExpandableListView

This is the code for expandable list adapter:

public class ExpandListAdapter extends BaseExpandableListAdapter {
private Context _context;
private List<String> _listDataHeader; // header titles
// child data in format of header title, child title
private HashMap<String, List<String>> _listDataChild;

public ExpandListAdapter(Context context, List<String> listDataHeader,
HashMap<String, List<String>> listChildData) {
this._context = context;
this._listDataHeader = listDataHeader;
this._listDataChild = listChildData;
}

@Override
public Object getChild(int groupPosition, int childPosititon) {
return this._listDataChild.get(this._listDataHeader.get(groupPosition))
.get(childPosititon);
}

@Override
public long getChildId(int groupPosition, int childPosition) {
return childPosition;
}

@Override
public View getChildView(int groupPosition, final int childPosition,
boolean isLastChild, View convertView, ViewGroup parent) {

final String childText = (String) getChild(groupPosition, childPosition);

if (convertView == null) {
LayoutInflater infalInflater = (LayoutInflater) this._context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = infalInflater.inflate(R.layout.list_item, null);
}

TextView txtListChild = (TextView) convertView
.findViewById(R.id.lblListItem);

txtListChild.setText(childText);
return convertView;
}

@Override
public int getChildrenCount(int groupPosition) {
return this._listDataChild.get(this._listDataHeader.get(groupPosition))
.size();
}

@Override
public Object getGroup(int groupPosition) {
return this._listDataHeader.get(groupPosition);
}

@Override
public int getGroupCount() {
return this._listDataHeader.size();
}

@Override
public long getGroupId(int groupPosition) {
return groupPosition;
}

@Override
public View getGroupView(int groupPosition, boolean isExpanded,
View convertView, ViewGroup parent) {
String headerTitle = (String) getGroup(groupPosition);
if (convertView == null) {
LayoutInflater infalInflater = (LayoutInflater) this._context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = infalInflater.inflate(R.layout.list_group, null);
}

TextView lblListHeader = (TextView) convertView
.findViewById(R.id.lblListHeader);
lblListHeader.setTypeface(null, Typeface.BOLD);
lblListHeader.setText(headerTitle);

return convertView;
}

@Override
public boolean hasStableIds() {
return false;
}

@Override
public boolean isChildSelectable(int groupPosition, int childPosition) {
return true;
}}

In your activity:

     private void enableExpandableList() {
listDataHeader = new ArrayList<String>();
listDataChild = new HashMap<String, List<String>>();
expListView = (ExpandableListView) findViewById(R.id.left_drawer);

prepareListData(listDataHeader, listDataChild);
listAdapter = new ExpandListAdapter(this, listDataHeader, listDataChild);
// setting list adapter
expListView.setAdapter(listAdapter);

expListView.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() {

@Override
public boolean onGroupClick(ExpandableListView parent, View v,
int groupPosition, long id) {
// Toast.makeText(getApplicationContext(),
// "Group Clicked " + listDataHeader.get(groupPosition),
// Toast.LENGTH_SHORT).show();
return false;
}
});
// Listview Group expanded listener
expListView.setOnGroupExpandListener(new ExpandableListView.OnGroupExpandListener() {

@Override
public void onGroupExpand(int groupPosition) {
Toast.makeText(getApplicationContext(),
listDataHeader.get(groupPosition) + " Expanded",
Toast.LENGTH_SHORT).show();
}
});

// Listview Group collasped listener
expListView.setOnGroupCollapseListener(new ExpandableListView.OnGroupCollapseListener() {

@Override
public void onGroupCollapse(int groupPosition) {
Toast.makeText(getApplicationContext(),
listDataHeader.get(groupPosition) + " Collapsed",
Toast.LENGTH_SHORT).show();

}
});

// Listview on child click listener
expListView.setOnChildClickListener(new ExpandableListView.OnChildClickListener() {

@Override
public boolean onChildClick(ExpandableListView parent, View v,
int groupPosition, int childPosition, long id) {
// TODO Auto-generated method stub
// Temporary code:

// till here
Toast.makeText(
getApplicationContext(),
listDataHeader.get(groupPosition)
+ " : "
+ listDataChild.get(
listDataHeader.get(groupPosition)).get(
childPosition), Toast.LENGTH_SHORT)
.show();
return false;
}
});}

Method to create List with data:

   private void prepareListData(List<String> listDataHeader, Map<String,
List<String>> listDataChild) {

// Adding child data
listDataHeader.add("Product1");
listDataHeader.add("product2");
listDataHeader.add("Product3");

// Adding child data
List<String> top = new ArrayList<String>();
top.add("x1");
top.add("x2");
top.add("x3");
top.add("x4");
top.add("x5");

List<String> mid = new ArrayList<String>();
mid.add("y1");
mid.add("y2");
mid.add("y3");

List<String> bottom = new ArrayList<String>();
bottom.add("z1");
bottom.add("z2");
bottom.add("z3");

listDataChild.put(listDataHeader.get(0), top); // Header, Child data
listDataChild.put(listDataHeader.get(1), mid);
listDataChild.put(listDataHeader.get(2), bottom);
}

this code in layout xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">

<include
android:id="@+id/act_bar"
layout="@layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />

<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header_main">
<!--app:menu="@menu/activity_main_drawer"-->

<ExpandableListView
android:id="@+id/left_drawer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/nav_header_height"
android:background="@color/Background"
android:dividerHeight="0dp" />

</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

xml for ExplistHeader list_group.xml

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="10dp"
android:padding="30dp"
android:background="@color/Background">

<TextView
android:id="@+id/lblListHeader"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="?
android:attr/expandableListPreferredItemPaddingLeft"
android:textSize="17dp"
android:textColor="@color/colorTextPrimary" />
</LinearLayout>

xml for Explistchild list_item.xml

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="55dip"
android:background="@color/Background"
android:orientation="vertical" >

<TextView
android:id="@+id/lblListItem"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="17dip"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:paddingLeft="?
android:attr/expandableListPreferredChildPaddingLeft" />
</LinearLayout>

how to create an expandable listView inside navigation drawer?

You can create an ExpandableListView and use it as your NavigationView. An example of xml result:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
tools:context=".MainActivity">

<include
layout="@layout/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

<!-- This DrawerLayout has two children at the root -->
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<!-- This LinearLayout represents the contents of the screen -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<!-- The main content view where fragments are loaded -->
<FrameLayout
android:id="@+id/flContent"
android:layout_width="match_parent"
android:layout_height="match_parent" />

</LinearLayout>
<!-- The navigation drawer that comes from the left -->
<!-- Note that `android:layout_gravity` needs to be set to 'start' -->

<ExpandableListView
android:id="@+id/lvExp"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_gravity="start"/>

</android.support.v4.widget.DrawerLayout>

You can find an example of using an ExpandableListView here

How to integrate expandable list view inside navigation drawer?

You can do it by adding ExpandableListView in NavigationDrawer like below:

You can create it using custom ListView.

See the code below activity_navigation_view.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />

<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true">

<ExpandableListView
android:id="@+id/navigationmenu"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginTop="192dp"
android:background="@android:color/white">
</ExpandableListView>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

And Simply create adapter for it and use it like a normal ExpandableListView.

implement expandablelistview in navigation drawer activity made by android studio

You have to do that the same way as you would add headings in any ListView using Adapter to return heading rows as well as detail rows.

Try from these link may help for you
Try first then following alternatives.

  1. Navigation Drawer : add headers in listview
  2. ExpandableListView in navigation drawer
  3. expandable listview inside navigation drawer
  4. How To Make Material Design Navigation Drawer With Header View

Android Navigation Drawer ExpandableListView

If you want to achieve above behavior to your NavigationDrawer you can follow below steps:

1) You have to add Expandable listview to your NavigationView.

2) Create Header View

3) Create Child View.

4) Extend BaseExpandableListAdapter

5) Set Adapter in MainActivity

There are few solutions available. You can follow this tutorial or this. For basic knowledge about creating Navigation drawer, you can go here. I got helped by these tutorials and they are very easy to apply.

Hope this helps.

how to add expandable listview inside material design navigation drawer in android?

ExpandablelistViewActivity.java:

/**********Expandable Listview Inside Navigation Drawer************/

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import android.app.Activity;
import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import android.view.View;
import android.widget.ExpandableListView;
import android.widget.ExpandableListView.OnChildClickListener;
import android.widget.ExpandableListView.OnGroupClickListener;
import android.widget.ExpandableListView.OnGroupCollapseListener;
import android.widget.ExpandableListView.OnGroupExpandListener;
import android.widget.FrameLayout;
import android.widget.Toast;

public class ExpandablelistViewActivity extends Activity {

private DrawerLayout mDrawerLayout;
FrameLayout actContent;
ExpandableListAdapter listAdapter;
ExpandableListView expListView;
List<String> listDataHeader;
HashMap<String, List<String>> listDataChild;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_expandablelist_view);

/************* ExpandableListView **********/

expListView = (ExpandableListView) findViewById(R.id.lvExp);
mDrawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout);
prepareListData();
listAdapter = new ExpandableListAdapter(
ExpandablelistViewActivity.this, listDataHeader, listDataChild);

expListView.setAdapter(listAdapter);
//expandAll();
// Listview Group click listener
expListView.setOnGroupClickListener(new OnGroupClickListener() {

@Override
public boolean onGroupClick(ExpandableListView parent, View v,
int groupPosition, long id) {
// mDrawerLayout.closeDrawers();
// Toast.makeText(getApplicationContext(),
// "Group Clicked " + listDataHeader.get(groupPosition),
// Toast.LENGTH_SHORT).show();
return false;
}
});

// Listview Group expanded listener
expListView.setOnGroupExpandListener(new OnGroupExpandListener() {

@Override
public void onGroupExpand(int groupPosition) {
// mDrawerLayout.closeDrawers();
/*Toast.makeText(getApplicationContext(),
listDataHeader.get(groupPosition) + " Expanded",
Toast.LENGTH_SHORT).show();*/
}
});

// Listview Group collasped listener
expListView.setOnGroupCollapseListener(new OnGroupCollapseListener() {

@Override
public void onGroupCollapse(int groupPosition) {
mDrawerLayout.closeDrawers();
Toast.makeText(getApplicationContext(),
listDataHeader.get(groupPosition) + " Collapsed",
Toast.LENGTH_SHORT).show();

}
});

// Listview on child click listener
expListView.setOnChildClickListener(new OnChildClickListener() {

@Override
public boolean onChildClick(ExpandableListView parent, View v,
int groupPosition, int childPosition, long id) {
mDrawerLayout.closeDrawers();
// TODO Auto-generated method stub
Toast.makeText(
getApplicationContext(),
listDataHeader.get(groupPosition)
+ " : "
+ listDataChild.get(
listDataHeader.get(groupPosition)).get(
childPosition), Toast.LENGTH_SHORT)
.show();
return false;
}
});
}

// method to expand all groups
private void expandAll() {
int count = listAdapter.getGroupCount();
for (int i = 0; i < count; i++) {
expListView.expandGroup(i);
}
}

/*
* Preparing the list data
*/
private void prepareListData() {
listDataHeader = new ArrayList<String>();
listDataChild = new HashMap<String, List<String>>();

// Adding child data
listDataHeader.add("Top 250");
listDataHeader.add("Now Showing");
listDataHeader.add("Coming Soon..");

// Adding child data
List<String> top250 = new ArrayList<String>();
top250.add("The Shawshank Redemption");
top250.add("The Godfather");
top250.add("The Godfather: Part II");
top250.add("Pulp Fiction");
top250.add("The Good, the Bad and the Ugly");
top250.add("The Dark Knight");
top250.add("12 Angry Men");

List<String> nowShowing = new ArrayList<String>();
nowShowing.add("The Conjuring");
nowShowing.add("Despicable Me 2");
nowShowing.add("Turbo");
nowShowing.add("Grown Ups 2");
nowShowing.add("Red 2");
nowShowing.add("The Wolverine");

List<String> comingSoon = new ArrayList<String>();
comingSoon.add("2 Guns");
comingSoon.add("The Smurfs 2");
comingSoon.add("The Spectacular Now");
comingSoon.add("The Canyons");
comingSoon.add("Europa Report");

listDataChild.put(listDataHeader.get(0), top250); // Header, Child data
listDataChild.put(listDataHeader.get(1), nowShowing);
listDataChild.put(listDataHeader.get(2), comingSoon);
}
}

ExpandablelistViewActivity Layout ::

/*********************ExpandablelistViewActivity Layout *****************************************/

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/tropical"
tools:context="com.example.localization.ExpandablelistViewActivity" >

<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<!-- Listview to display slider menu -->

<ExpandableListView
android:id="@+id/lvExp"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="@color/list_divider"
android:dividerHeight="1dp" />

</android.support.v4.widget.DrawerLayout>

</LinearLayout>

ExpandableListAdapter.java:

/****************************ExpandableListAdapter*******************************************/

import java.util.HashMap;
import java.util.List;
import android.content.Context;
import android.graphics.Typeface;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.TextView;


Related Topics



Leave a reply



Submit