How to create custom navigation drawer which opens

Question

I have created simple navigation drawer but when i came across navigation drawer like in image i am stuck . I have no idea how to achieve this kind of functionality.

Here in this image "City" is item of navigation drawer and when i click on city it opens list just adjacent to it.

Answer 1

In your sliding menu, I think you need to use expandable listview.
This is reference for you.
Hope for help.

Answer 2

Here are COMPLETE CODES , because i do not know details it may not really meet your requirements:

first i like to show demo:

string.xml:

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

    <string name="app_name">NavigationDrawer</string>
    <string name="hello_world">Hello world!</string>
    <string name="action_settings">Settings</string>

    <string-array name="left">
        <item name="1">1</item>
        <item name="2">2</item>
        <item name="3">3</item>
    </string-array>


    <string-array name="right1">
        <item name="1*1">1*1</item>
        <item name="1*2">1*2</item>
        <item name="1*3">1*3</item>
        <item name="1*4">1*4</item>
        <item name="1*5">1*5</item>
        <item name="1*6">1*6</item>
        <item name="1*7">1*7</item>
        <item name="1*8">1*8</item>
        <item name="1*9">1*9</item>
    </string-array>


    <string-array name="right2">
        <item name="2*1">2*1</item>
        <item name="2*2">2*2</item>
        <item name="2*3">2*3</item>
        <item name="2*4">2*4</item>
        <item name="2*5">2*5</item>
        <item name="2*6">2*6</item>
        <item name="2*7">2*7</item>
        <item name="2*8">2*8</item>
        <item name="2*9">2*9</item>
    </string-array>


    <string-array name="right3">
        <item name="3*1">3*1</item>
        <item name="3*2">3*2</item>
        <item name="3*3">3*3</item>
        <item name="3*4">3*4</item>
        <item name="3*5">3*5</item>
        <item name="3*6">3*6</item>
        <item name="3*7">3*7</item>
        <item name="3*8">3*8</item>
        <item name="3*9">3*9</item>
    </string-array>

</resources>

and MainActivity.java

package com.example.navigationdrawer;

import java.util.Arrays;
import java.util.List;

import android.content.Context;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import android.support.v4.widget.DrawerLayout.DrawerListener;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class MainActivity extends ActionBarActivity {

    private DrawerLayout drawer;
    private ListView leftList;
    private ListView rightList;
    private String[] leftListStrings;
    private String[] rightListStrings;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        drawer = (DrawerLayout) findViewById(R.id.drawer);
        leftList = (ListView) findViewById(R.id.left_list);
        rightList = (ListView) findViewById(R.id.right_list);
        rightList.setVisibility(View.GONE);

        leftListStrings = getResources().getStringArray(R.array.left);

        leftList.setAdapter(new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,leftListStrings));

        leftList.setOnItemClickListener(new OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
                    long arg3) {


                arg1.setBackgroundColor(Color.RED);

                if(arg2 == 0){

                    rightListStrings = getResources().getStringArray(R.array.right1);

                    List<String> stringList = Arrays.asList(rightListStrings);

                    rightList.setAdapter(new MayAdapter(MainActivity.this, android.R.layout.simple_list_item_1, stringList));
                    rightList.setVisibility(View.VISIBLE);
                }
                if(arg2 == 1){

                    rightListStrings = getResources().getStringArray(R.array.right2);
                    List<String> stringList = Arrays.asList(rightListStrings);

                    rightList.setAdapter(new MayAdapter(MainActivity.this, android.R.layout.simple_list_item_1, stringList));
                    rightList.setVisibility(View.VISIBLE);
                }
                if(arg2 == 2){

                    rightListStrings = getResources().getStringArray(R.array.right3);
                    List<String> stringList = Arrays.asList(rightListStrings);

                    rightList.setAdapter(new MayAdapter(MainActivity.this, android.R.layout.simple_list_item_1, stringList));
                    rightList.setVisibility(View.VISIBLE);

                }
            }

        });

        drawer.setDrawerListener(new DrawerListener() {

            @Override
            public void onDrawerStateChanged(int arg0) {
                // TODO Auto-generated method stub

            }

            @Override
            public void onDrawerSlide(View arg0, float arg1) {
                // TODO Auto-generated method stub

            }

            @Override
            public void onDrawerOpened(View arg0) {
                // TODO Auto-generated method stub

            }

            @Override
            public void onDrawerClosed(View arg0) {
                // TODO Auto-generated method stub
                rightList.setVisibility(View.INVISIBLE);
            }
        });


    }

 class MayAdapter extends ArrayAdapter<String>{

    List<String> myList = null;
    public MayAdapter(Context context, int resource,List<String> objects) {
        super(context, resource,  objects);
        myList = objects;
    }
    public List<String> getMyList() {
        return myList;
    }
    public void setMyList(List<String> myList) {
        this.myList = myList;
    }    
 }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }



}

and layout:

<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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.navigationdrawer.MainActivity"
    tools:ignore="MergeRootFrame" >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TextView
            android:layout_width="240dip"
            android:layout_height="match_parent"
            android:text="Hello" />
    </FrameLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:orientation="horizontal" >

        <ListView
            android:id="@+id/left_list"
            android:layout_width="120dip"
            android:layout_height="match_parent"
            android:background="#00FF00"
            android:divider="#FFFFFF"
            android:dividerHeight="2dp" >
        </ListView>

        <ListView
            android:id="@+id/right_list"
            android:layout_width="120dip"
            android:layout_height="match_parent"
            android:background="#FF0000"
            android:divider="#FFFFFF"
            android:dividerHeight="2dp" >
        </ListView>
    </LinearLayout>

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