Example of ListFragment inside DrawerLayout

This exercise implement android.app.ListFragment inside DrawerLayout. The ListFragment part refer to my another old post. If you are looking for ListView inside DrawLayout, read last post.

ListFragment inside DrawerLayout

In order to use android.app.ListFragment in your app, AndroidManifest.xml have to be modified to define android:minSdkVersion="11".

Create /res/layout/listfragment1.xml to define the layout of our ListFragment.

<?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="match_parent"
    android:orientation="vertical"
    android:paddingLeft="8dp"
    android:paddingRight="8dp" >

    <ListView
        android:id="@id/android:list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:drawSelectorOnTop="false" />

    <TextView
        android:id="@id/android:empty"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="No data" />

</LinearLayout>

Create MyListFragment1.java extends ListFragment.

package com.example.androiddrawerlayout;

import android.app.ListFragment;
import android.os.Bundle;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ListAdapter;
import android.widget.ListView;
import android.widget.Toast;

public class MyListFragment1 extends ListFragment {

 String[] month = { "January", "February", "March", "April", "May", "June",
   "July", "August", "September", "October", "November", "December" };

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  ListAdapter myListAdapter = new ArrayAdapter<String>(getActivity(),
    android.R.layout.simple_list_item_1, month);
  setListAdapter(myListAdapter);
 }

 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
   Bundle savedInstanceState) {
  return inflater.inflate(R.layout.listfragment1, container, false);
 }

 @Override
 public void onListItemClick(ListView l, View v, int position, long id) {
  // TODO Auto-generated method stub
  Toast.makeText(getActivity(),
    getListView().getItemAtPosition(position).toString(),
    Toast.LENGTH_LONG).show();
 }
}

Modify /res/layout/activity_main.xml to include <fragment> of "com.example.androiddrawerlayout.MyListFragment1" inside drawer.

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/background_light"
        android:orientation="vertical"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        tools:context=".MainActivity" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Main layout" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:autoLink="web"
            android:text="http://android-er.blogspot.com/"
            android:textStyle="bold" />

        <Button
            android:id="@+id/opendrawer"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Open Drawer" />

        <TextView
            android:id="@+id/prompt"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="right" />

        <TextView
            android:id="@+id/prompt2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="right" />

        <TextView
            android:id="@+id/selection"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="right" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@android:color/background_light"
        android:orientation="vertical"
        android:padding="5dp" >

        <fragment
            android:id="@+id/fragment1"
            android:name="com.example.androiddrawerlayout.MyListFragment1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1" />
    </LinearLayout>

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

MainActivity.java

package com.example.androiddrawerlayout;

import android.os.Bundle;
import android.app.Activity;
import android.support.v4.widget.DrawerLayout;
import android.support.v4.widget.DrawerLayout.DrawerListener;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends Activity {
 
 DrawerLayout drawerLayout;
 View drawerView;
 TextView textPrompt, textPrompt2;
 TextView textSelection;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  
  textPrompt = (TextView)findViewById(R.id.prompt);
  textPrompt2 = (TextView)findViewById(R.id.prompt2);
  
  drawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout);
  drawerView = (View)findViewById(R.id.drawer);
  
  Button buttonOpenDrawer = (Button)findViewById(R.id.opendrawer);
  buttonOpenDrawer.setOnClickListener(new OnClickListener(){

   @Override
   public void onClick(View arg0) {
    drawerLayout.openDrawer(drawerView);
   }});
  
  drawerLayout.setDrawerListener(myDrawerListener);
  
  /*
   * In my trial experiment:
   * Without dummy OnTouchListener for the drawView to 
   * consume the onTouch event, touching/clicking on 
   * un-handled view on drawView will pass to the view
   * under it!
   * - Touching on the Android icon will
   * trigger the TextView("http://android-er.blogspot.com/")
   * to open the web.
   */
  /*
  drawerView.setOnTouchListener(new OnTouchListener() {
   
   @Override
   public boolean onTouch(View v, MotionEvent event) {
    // TODO Auto-generated method stub
    return true;
   }
  });
  */
  
  textSelection = (TextView)findViewById(R.id.selection);
 }
 
 DrawerListener myDrawerListener = new DrawerListener(){

  @Override
  public void onDrawerClosed(View drawerView) {
   textPrompt.setText("onDrawerClosed");
  }

  @Override
  public void onDrawerOpened(View drawerView) {
   textPrompt.setText("onDrawerOpened");
  }

  @Override
  public void onDrawerSlide(View drawerView, float slideOffset) {
   textPrompt.setText("onDrawerSlide: " + String.format("%.2f", slideOffset));
  }

  @Override
  public void onDrawerStateChanged(int newState) {
   String state;
   switch(newState){
   case DrawerLayout.STATE_IDLE:
    state = "STATE_IDLE";
    break;
   case DrawerLayout.STATE_DRAGGING:
    state = "STATE_DRAGGING";
    break;
   case DrawerLayout.STATE_SETTLING:
    state = "STATE_SETTLING";
    break;
   default:
    state = "unknown!";
   }
    
   textPrompt2.setText(state);
  }};

}

Download the files.

ListFragment with multiple choice

It is a example to implement ListFragment with multiple choice.

Base on my old exercise of "ListFragment".

Modify MyListFragment1.java, create ListAdapter with android.R.layout.simple_list_item_multiple_choice. Also modify onListItemClick() to display the clicked item and selected items.

package com.exercise.AndroidListFragment;

import android.app.ListFragment;
import android.os.Bundle;
import android.util.SparseBooleanArray;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ListAdapter;
import android.widget.ListView;
import android.widget.Toast;

public class MyListFragment1 extends ListFragment {

 String[] month ={
   "January", 
   "February", 
   "March", 
   "April",
   "May", 
   "June", 
   "July", 
   "August",
   "September", 
   "October", 
   "November", 
   "December"
 };

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);

  ListAdapter myListAdapter = new ArrayAdapter<String>(
    getActivity(),
    android.R.layout.simple_list_item_multiple_choice,
    month);
  
  setListAdapter(myListAdapter);
 }

 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
   Bundle savedInstanceState) {
  return inflater.inflate(R.layout.listfragment1, container, false);
  
 }

 @Override
 public void onListItemClick(ListView l, View v, int position, long id) {
  
  String prompt = 
    "clicked item: " + getListView().getItemAtPosition(position).toString() + "\n\n";
  
  prompt += "selected items: \n";
  int count = getListView().getCount();
  SparseBooleanArray sparseBooleanArray = getListView().getCheckedItemPositions();
  for (int i = 0; i < count; i++){
   if (sparseBooleanArray.get(i)) {
    prompt += getListView().getItemAtPosition(i).toString() + "\n";
   } 
  }
  
  Toast.makeText(
    getActivity(), 
    prompt, 
    Toast.LENGTH_LONG).show();
 }

}

Modify listfragment1.xml to add android:choiceMode="multipleChoice" in <ListView>.

<?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="match_parent"
    android:orientation="vertical"
    android:paddingLeft="8dp"
    android:paddingRight="8dp" >

    <ListView
        android:id="@id/android:list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:choiceMode="multipleChoice"
        android:drawSelectorOnTop="false" />

    <TextView
        android:id="@id/android:empty"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="No data" />

</LinearLayout>

Download the files.

Implement custom ArrayAdapter to display icon on ListFragment

It's extended version of the exercise "ListFragment", to implement custom ArrayAdapter to display icon on ListFragment.

Create /res/layout/row.xml to define the layout of each row, add a ImageView to display icon.

<?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="horizontal">
    <ImageView
        android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <TextView
        android:id="@+id/month"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>

Modify MyListFragment1.java to implement custom ListFragment, MyListFragment1. Override the getView() method to prepare and custom the view of each row. And setListAdapter with it.

package com.exercise.AndroidListFragment;

import android.app.ListFragment;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

public class MyListFragment1 extends ListFragment {
 
 public class MyListAdapter extends ArrayAdapter<String> {
  
  Context myContext;

  public MyListAdapter(Context context, int textViewResourceId,
    String[] objects) {
   super(context, textViewResourceId, objects);
   myContext = context;
  }

  @Override
  public View getView(int position, View convertView, ViewGroup parent) {
   //return super.getView(position, convertView, parent);
   
   LayoutInflater inflater = 
     (LayoutInflater)myContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
   View row=inflater.inflate(R.layout.row, parent, false);
   TextView label=(TextView)row.findViewById(R.id.month);
   label.setText(month[position]);
   ImageView icon=(ImageView)row.findViewById(R.id.icon);
   
   //Customize your icon here
   icon.setImageResource(R.drawable.ic_launcher);
   
   return row;
  }

 }

 String[] month ={
   "January", 
   "February", 
   "March", 
   "April",
   "May", 
   "June", 
   "July", 
   "August",
   "September", 
   "October", 
   "November", 
   "December"
 };

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  
  /*
  ListAdapter myListAdapter = new ArrayAdapter<String>(
    getActivity(),
    android.R.layout.simple_list_item_1,
    month);
  setListAdapter(myListAdapter);
  */
  MyListAdapter myListAdapter = 
    new MyListAdapter(getActivity(), R.layout.row, month);
  setListAdapter(myListAdapter);
 }

 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
   Bundle savedInstanceState) {
  return inflater.inflate(R.layout.listfragment1, container, false);
 }

 @Override
 public void onListItemClick(ListView l, View v, int position, long id) {
  Toast.makeText(
    getActivity(), 
    getListView().getItemAtPosition(position).toString(), 
    Toast.LENGTH_LONG).show();
 }

}

Download the files.

ListFragment

ListFragment (for API Level 11, Android 3.0, or higher) hosts a ListView object that can be bound to different data sources, typically either an array or a Cursor holding query results. Binding, screen layout, and row layout are discussed in the following sections.



Create a new /res/layout/listfragment1.xml file, it's the layout of out ListFragment.
(If the list is empty, the TextView empty will be shown.)

<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:orientation="vertical"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:paddingLeft="8dp"
         android:paddingRight="8dp">

     <ListView android:id="@id/android:list"
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               android:layout_weight="1"
               android:drawSelectorOnTop="false"/>

     <TextView android:id="@id/android:empty"
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               android:text="No data"/>
 </LinearLayout>

Create a new MyListFragment1.java class, extends com.exercise.AndroidListFragment. Override onCreate(), onCreateView() and onListItemClick() methods.

package com.exercise.AndroidListFragment;

import android.app.ListFragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ListAdapter;
import android.widget.ListView;
import android.widget.Toast;

public class MyListFragment1 extends ListFragment {
 
 String[] month ={
   "January", 
   "February", 
   "March", 
   "April",
   "May", 
   "June", 
   "July", 
   "August",
   "September", 
   "October", 
   "November", 
   "December"
 };
 
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  ListAdapter myListAdapter = new ArrayAdapter<String>(
    getActivity(),
    android.R.layout.simple_list_item_1,
    month);
  setListAdapter(myListAdapter);
 }

 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
   Bundle savedInstanceState) {
  return inflater.inflate(R.layout.listfragment1, container, false);
 }

 @Override
 public void onListItemClick(ListView l, View v, int position, long id) {
  // TODO Auto-generated method stub
  Toast.makeText(
    getActivity(), 
    getListView().getItemAtPosition(position).toString(), 
    Toast.LENGTH_LONG).show();
 }
}

Add another dummy Fragment.

Create a new /res/layout/fragment2.xml, the layout of the second Fragment.

<?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="match_parent"
    android:orientation="vertical" >
    
    <TextView
        android:id="@+id/fragment2text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Hello! It's Fragment2" />
</LinearLayout>

Fragment2.java, extends android.app.Fragment. Override onCreateView() method.

package com.exercise.AndroidListFragment;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Fragment2 extends Fragment {

 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
   Bundle savedInstanceState) {
  // TODO Auto-generated method stub
  return inflater.inflate(R.layout.fragment2, container, false);
 }

}

Modify main.xml to include both Fragments

<?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="fill_parent"
    android:orientation="horizontal" >

  <fragment
      android:name="com.exercise.AndroidListFragment.MyListFragment1"
      android:id="@+id/fragment1"
      android:layout_weight="1"
      android:layout_width="0px"
      android:layout_height="match_parent" />
  <fragment
      android:name="com.exercise.AndroidListFragment.Fragment2"
      android:id="@+id/fragment2"
      android:layout_weight="2"
      android:layout_width="0px"
      android:layout_height="match_parent" />

</LinearLayout>

Download the files.

Next:
- Implement custom ArrayAdapter to display icon on ListFragment
- ListFragment with multiple choice