Sliding Drawer in Android

A sliding drawer is the same as a custom ListView or a simple ListView. The only difference is that a Sliding Drawer remains hidden in the start. It only appears when we slide it out. After clicking on an item, it hides again. Today I will show a demo of a sliding drawer.

Now we move to the code part of this article.

In this project I used two activities. Our first activity is activity_main activity_main.xml. The XML code of this activity is:

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

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <ListView android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"
        android:background="#fff"/>
</android.support.v4.widget.DrawerLayout>

The graphical layout of activity_main.xml is:



In this activity we use a FrameLayout and a ListView. FrameLayout is used to occupy space on the screen. It is designed to block out an area on the screen. The main thing that a frame layout does is to hold a single child view. In our program when a user clicks on an item of a ListView we show the name of that item in the frame layout. In the ListView we will show a TextView present in the menu_detail_fragment activity.

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

In the preceding line of code we define a drawer type layout for activity. DrawerLayout is not present in the Layout Option of an activity.


We must externally write code for DrawerLayout. In this activity we create a DrawerLayout and provide an id (drawer_Layout) to this DrawerLayout.

The second Activity is menu_detail_fragment.xml. The following is the XML code of this activity:

<?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:gravity="center"
    android:background="#5ba4e5"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="40px"
        android:textColor="#ffffff"
        android:layout_gravity="center"
        android:id="@+id/detail"/>

</LinearLayout>

Graphical Layout



In this activity we use a simple TextView. In this textview we will insert some data and then bind a textview with a ListView of the activity_main activity.

Now I will explain the source code of this project.

MainActivity.java file: This Java file contains the code for the activity_main activity. The source code of this activity is:

public class MainActivity extends Activity {
    String[] menu;
    DrawerLayout dLayout;
    ListView dList;
    ArrayAdapter < String > adapter;

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


        menu = new String[] {
            "Home", "Android", "Windows", "Linux", "Raspberry Pi", "WordPress", "Videos", "Contact Us"
        };
        dLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

        dList = (ListView) findViewById(R.id.left_drawer);
        adapter = new ArrayAdapter < String > (this, android.R.layout.simple_list_item_1, menu);
        dList.setAdapter(adapter);
        dList.setSelector(android.R.color.holo_blue_dark);

        dList.setOnItemClickListener(new OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView <? > arg0, View v, int position, long id) {

                dLayout.closeDrawers();
                Bundle args = new Bundle();
                args.putString("Menu", menu[position]);

                Fragment detail = new DetailFragment();
                detail.setArguments(args);
                FragmentManager fragmentManager = getFragmentManager();
                fragmentManager.beginTransaction().replace(R.id.content_frame, detail).commit();

            }

        });
    }
}

Now I will explain the preceding code in a number of sections for a better understanding:

Code Section 1

String[] menu;
DrawerLayout dLayout;
ListView dList;
ArrayAdapter<String> adapter;

In the preceding code we create an array of string type (menu). In this array we rovide a name of an item for the ListView. We create an object of DrawerLayout type(dLayout). In this object we get the reference of our DrawerLayout. We also create an object of ListView type(dList). In this object we hold the reference of the ListView in the menu_detail_fragment activity. The last object is ArrayAdapter type(adapter). ArrayAdapter is used for binding the data with the ListView.

Code Section 2

menu = new String[]{"Home","Android","Windows","Linux","Raspberry Pi","WordPress","Videos","Contact Us"};
dLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

dList = (ListView) findViewById(R.id.left_drawer);
adapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,menu);
dList.setAdapter(adapter);
dList.setSelector(android.R.color.holo_blue_dark);

In the preceding code first of all we insert data into a menu(string type array). Then we get the reference of drawer_layout(DrawerLayout) in the dLayout variable. We also get the reference of the left_drawer ListView in the dList variable. Then we insert the value of the menu(string array) in the adapter variable(ArrayAdapter). Finally we bind this ArrayAdapter object with the ListView using the setAdapter method.

Code Section 3

dList.setOnItemClickListener(new OnItemClickListener() {

    @Override
    public void onItemClick(AdapterView <? > arg0, View v, int position, long id) {

        dLayout.closeDrawers();
        Bundle args = new Bundle();
        args.putString("Menu", menu[position]);

        Fragment detail = new DetailFragment();
        detail.setArguments(args);
        FragmentManager fragmentManager = getFragmentManager();
        fragmentManager.beginTransaction().replace(R.id.content_frame, detail).commit();

    }

});

In the preceding code we set an OnItemClick event for the ListView. When someone clicks on an item of the ListView then this event will fire. First of all on the item click event we close the Drawer using the closeDrawers method. We create an object of the Bundle class. The Bundle class is mainly used for passing the data to another activity. We pass the value of the ListView item using the Bundle object. We create an object of Fragment type. We assign the object of the DetailFragment class into this fragment object. Then we create an object of the FragmentManager class. Using this FragmentManager object we replace the contents of content_frame(FrameLayout) with the data of the item of the ListView.

Code of the DetailFragment.java file: This Java file contains the code for the menu_detail_fragment activity.

public class DetailFragment extends Fragment {
    TextView text;
    @Override
    public View onCreateView(LayoutInflater inflater,ViewGroup container, Bundle args) {
        View view = inflater.inflate(R.layout.menu_detail_fragment, container, false);
        String menu = getArguments().getString("Menu");
        text= (TextView) view.findViewById(R.id.detail);
        text.setText(menu);
        return view;
    }
}

In the preceding code we use an inflate method of the LayoutInflater class. The LayoutInflater class dynamically adds or removes items for a Layout. The Inflate method reads an XML file and converts the contents of the XML file into a View type object. Using the getString method we retrieve the data passed from the MainActivity class. We assign this value to the TextView and finally return the View.

Now our project is ready. When we run this project it will look as in the following.



Now go to the left side and slide out the screen. When we slide out the drawer, then the screen will look as in the following:



Now click on an item of the ListView. When we click on an item of the ListView it displays the data of the ListView item into the frame Layout as in the following: