inflate view Archives - My Android Solutions

In this tutorial I will show you how to make a simple Expandable List.

1. Create a new project and call your java class(the one that is generated by Eclipse or other IDE) “MyActivity”.

2. Go to res – layout -main.xml and put the following code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ExpandableListView android:id="@+id/expandable_list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:transcriptMode="alwaysScroll"
android:cacheColorHint="#00000000"
android:listSelector="@android:color/transparent"/>
</LinearLayout>

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

<ExpandableListView android:id="@+id/expandable_list"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:transcriptMode="alwaysScroll"

android:cacheColorHint="#00000000"

android:listSelector="@android:color/transparent"/>

</LinearLayout>

NOTE: The attribute “android:transcriptMode=”alwaysScroll”” will make your expandable list always to scroll to the end of the list when you want to expand or collapse a group. If you do not want this set it this way: “android:transcriptMode=”disabled“. Now when you expand a group the list will scroll to the group that is expanded.

3. Now create another 2 xml files in res – layout, one called list_item_parent.xml and the other one called list_item_child.xml.

The xml code for list_item_parent.xml file is:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:descendantFocusability="blocksDescendants"
android:id="@+id/list_item">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="@+id/list_item_text_view"
android:textSize="20sp"
android:padding="10dp"
android:layout_weight="1"
android:layout_marginLeft="35dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button"
android:focusable="false"
android:layout_gravity="right"
android:focusableInTouchMode="false"
android:id="@+id/button"/>
</LinearLayout>

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="horizontal"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:descendantFocusability="blocksDescendants"

android:id="@+id/list_item">

<TextView

android:layout_width="0dp"

android:layout_height="wrap_content"

android:id="@+id/list_item_text_view"

android:textSize="20sp"

android:padding="10dp"

android:layout_weight="1"

android:layout_marginLeft="35dp" />

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="button"

android:focusable="false"

android:layout_gravity="right"

android:focusableInTouchMode="false"

android:id="@+id/button"/>

</LinearLayout>

NOTE: If you put a button on the parent the group will not expand anymore, so in order to make the group expand when you have a button you must set its focus to FALSE. Also, if that doesn’t work, it should work with:

android:descendantFocusability="blocksDescendants"

1	android:descendantFocusability="blocksDescendants"

The xml code for list_item_child.xml file is:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/list_item_child"
android:gravity="center_vertical">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/list_item_text_child"
android:textSize="20sp"
android:padding="10dp"
android:layout_marginLeft="5dp"/>
</LinearLayout>

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

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:id="@+id/list_item_child"

android:gravity="center_vertical">

<TextView android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/list_item_text_child"

android:textSize="20sp"

android:padding="10dp"

android:layout_marginLeft="5dp"/>

</LinearLayout>

4. Now create a new java class and call it “Parent”. In this class we will store the data about the parent: the name and the children (an array list of children). After you create the class put the following code:

import java.util.ArrayList;
public class Parent {
private String mTitle;
private ArrayList<String> mArrayChildren;
public String getTitle() {
return mTitle;
}
public void setTitle(String title) {
mTitle = title;
}
public ArrayList<String> getArrayChildren() {
return mArrayChildren;
}
public void setArrayChildren(ArrayList<String> arrayChildren) {
mArrayChildren = arrayChildren;
}
}

import java.util.ArrayList;

public class Parent {

private String mTitle;

private ArrayList<String> mArrayChildren;

public String getTitle() {

return mTitle;

}

public void setTitle(String title) {

mTitle = title;

}

public ArrayList<String> getArrayChildren() {

return mArrayChildren;

}

public void setArrayChildren(ArrayList<String> arrayChildren) {

mArrayChildren = arrayChildren;

}

5. At this step you have to create the adapter for the expandable list. To do this, create a new java class called “MyCustomAdapter” and put the following code:

import android.content.Context;
import android.database.DataSetObserver;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.Button;
import android.widget.TextView;
import java.util.ArrayList;
public class MyCustomAdapter extends BaseExpandableListAdapter {
private LayoutInflater inflater;
private ArrayList<Parent> mParent;
public MyCustomAdapter(Context context, ArrayList<Parent> parent){
mParent = parent;
inflater = LayoutInflater.from(context);
}
@Override
//counts the number of group/parent items so the list knows how many times calls getGroupView() method
public int getGroupCount() {
return mParent.size();
}
@Override
//counts the number of children items so the list knows how many times calls getChildView() method
public int getChildrenCount(int i) {
return mParent.get(i).getArrayChildren().size();
}
@Override
//gets the title of each parent/group
public Object getGroup(int i) {
return mParent.get(i).getTitle();
}
@Override
//gets the name of each item
public Object getChild(int i, int i1) {
return mParent.get(i).getArrayChildren().get(i1);
}
@Override
public long getGroupId(int i) {
return i;
}
@Override
public long getChildId(int i, int i1) {
return i1;
}
@Override
public boolean hasStableIds() {
return true;
}
@Override
//in this method you must set the text to see the parent/group on the list
public View getGroupView(int groupPosition, boolean b, View view, ViewGroup viewGroup) {
ViewHolder holder = new ViewHolder();
holder.groupPosition = groupPosition;
if (view == null) {
view = inflater.inflate(R.layout.list_item_parent, viewGroup,false);
}
TextView textView = (TextView) view.findViewById(R.id.list_item_text_view);
textView.setText(getGroup(groupPosition).toString());
view.setTag(holder);
//return the entire view
return view;
}
@Override
//in this method you must set the text to see the children on the list
public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View view, ViewGroup viewGroup) {
ViewHolder holder = new ViewHolder();
holder.childPosition = childPosition;
holder.groupPosition = groupPosition;
if (view == null) {
view = inflater.inflate(R.layout.list_item_child, viewGroup,false);
}
TextView textView = (TextView) view.findViewById(R.id.list_item_text_child);
textView.setText(mParent.get(groupPosition).getArrayChildren().get(childPosition));
view.setTag(holder);
//return the entire view
return view;
}
@Override
public boolean isChildSelectable(int i, int i1) {
return true;
}
@Override
public void registerDataSetObserver(DataSetObserver observer) {
/* used to make the notifyDataSetChanged() method work */
super.registerDataSetObserver(observer);
}
// Intentionally put on comment, if you need on click deactivate it
/*  @Override
public void onClick(View view) {
ViewHolder holder = (ViewHolder)view.getTag();
if (view.getId() == holder.button.getId()){
// DO YOUR ACTION
}
}*/
protected class ViewHolder {
protected int childPosition;
protected int groupPosition;
protected Button button;
}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

import android.content.Context;

import android.database.DataSetObserver;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.BaseExpandableListAdapter;

import android.widget.Button;

import android.widget.TextView;

import java.util.ArrayList;

public class MyCustomAdapter extends BaseExpandableListAdapter {

private LayoutInflater inflater;

private ArrayList<Parent> mParent;

public MyCustomAdapter(Context context, ArrayList<Parent> parent){

mParent = parent;

inflater = LayoutInflater.from(context);

}

@Override

//counts the number of group/parent items so the list knows how many times calls getGroupView() method

public int getGroupCount() {

return mParent.size();

}

@Override

//counts the number of children items so the list knows how many times calls getChildView() method

public int getChildrenCount(int i) {

return mParent.get(i).getArrayChildren().size();

}

@Override

//gets the title of each parent/group

public Object getGroup(int i) {

return mParent.get(i).getTitle();

}

@Override

//gets the name of each item

public Object getChild(int i, int i1) {

return mParent.get(i).getArrayChildren().get(i1);

}

@Override

public long getGroupId(int i) {

return i;

}

@Override

public long getChildId(int i, int i1) {

return i1;

}

@Override

public boolean hasStableIds() {

return true;

}

@Override

//in this method you must set the text to see the parent/group on the list

public View getGroupView(int groupPosition, boolean b, View view, ViewGroup viewGroup) {

ViewHolder holder = new ViewHolder();

holder.groupPosition = groupPosition;

if (view == null) {

view = inflater.inflate(R.layout.list_item_parent, viewGroup,false);

}

TextView textView = (TextView) view.findViewById(R.id.list_item_text_view);

textView.setText(getGroup(groupPosition).toString());

view.setTag(holder);

//return the entire view

return view;

}

@Override

//in this method you must set the text to see the children on the list

public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View view, ViewGroup viewGroup) {

ViewHolder holder = new ViewHolder();

holder.childPosition = childPosition;

holder.groupPosition = groupPosition;

if (view == null) {

view = inflater.inflate(R.layout.list_item_child, viewGroup,false);

}

TextView textView = (TextView) view.findViewById(R.id.list_item_text_child);

textView.setText(mParent.get(groupPosition).getArrayChildren().get(childPosition));

view.setTag(holder);

//return the entire view

return view;

}

@Override

public boolean isChildSelectable(int i, int i1) {

return true;

}

@Override

public void registerDataSetObserver(DataSetObserver observer) {

/* used to make the notifyDataSetChanged() method work */

super.registerDataSetObserver(observer);

}

// Intentionally put on comment, if you need on click deactivate it

/* @Override

public void onClick(View view) {

ViewHolder holder = (ViewHolder)view.getTag();

if (view.getId() == holder.button.getId()){

// DO YOUR ACTION

}

}*/

protected class ViewHolder {

protected int childPosition;

protected int groupPosition;

protected Button button;

}

6. Now go to the MyActivity and put the following code:

import android.app.Activity;
import android.app.ExpandableListActivity;
import android.os.Bundle;
import android.widget.ExpandableListView;
import java.util.ArrayList;
public class MyActivity extends Activity {
private ExpandableListView mExpandableList;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
mExpandableList = (ExpandableListView)findViewById(R.id.expandable_list);
ArrayList<Parent> arrayParents = new ArrayList<Parent>();
ArrayList<String> arrayChildren = new ArrayList<String>();
//here we set the parents and the children
for (int i = 0; i < 10; i++){
//for each "i" create a new Parent object to set the title and the children
Parent parent = new Parent();
parent.setTitle("Parent " + i);
arrayChildren = new ArrayList<String>();
for (int j = 0; j < 10; j++) {
arrayChildren.add("Child " + j);
}
parent.setArrayChildren(arrayChildren);
//in this array we add the Parent object. We will use the arrayParents at the setAdapter
arrayParents.add(parent);
}
//sets the adapter that provides data to the list.
mExpandableList.setAdapter(new MyCustomAdapter(MyActivity.this,arrayParents));
}
}

import android.app.Activity;

import android.app.ExpandableListActivity;

import android.os.Bundle;

import android.widget.ExpandableListView;

import java.util.ArrayList;

public class MyActivity extends Activity {

private ExpandableListView mExpandableList;

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

mExpandableList = (ExpandableListView)findViewById(R.id.expandable_list);

ArrayList<Parent> arrayParents = new ArrayList<Parent>();

ArrayList<String> arrayChildren = new ArrayList<String>();

//here we set the parents and the children

for (int i = 0; i < 10; i++){

//for each "i" create a new Parent object to set the title and the children

Parent parent = new Parent();

parent.setTitle("Parent " + i);

arrayChildren = new ArrayList<String>();

for (int j = 0; j < 10; j++) {

arrayChildren.add("Child " + j);

}

parent.setArrayChildren(arrayChildren);

//in this array we add the Parent object. We will use the arrayParents at the setAdapter

arrayParents.add(parent);

}

//sets the adapter that provides data to the list.

mExpandableList.setAdapter(new MyCustomAdapter(MyActivity.this,arrayParents));

}

Now the result should look like this:

If you want to see the source code, please visit our GitHub repo here. There you can see a working project that might help you get started with ExpandableListView.

My Android Solutions

Android programming tutorials and snippets

Tag: inflate view

Android Add Views into a ViewGroup Dynamically

Android Expandable List Example