drawer-navigation-android-with-actionbar

Android navigation drawer

Android navigation drawer

DrawerLayout is a layout that hide most of the time and user swipes finger from the left edge of the screen and it’s come out and push in. In this tutorial we are going to learn DrawerLayout with ActionBar in android. We use same data collection as use as listview tutorial.

This tutorial may not run in Android Emulator use real device.

Source Code:-

 

DrawerActivity.java


 

package com.androidfromhome.drawernavigation;

import java.util.ArrayList;
import com.androidfromhome.drawernavigation.page.ShowDetails;
import android.annotation.SuppressLint;
import android.annotation.TargetApi;
import android.app.Activity;
import android.app.FragmentManager;
import android.content.res.Configuration;
import android.os.Build;
import android.os.Bundle;
import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.widget.DrawerLayout;
import android.view.Gravity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ListView;

@TargetApi(Build.VERSION_CODES.ICE_CREAM_SANDWICH)
@SuppressLint("NewApi")
public class DrawerActivity extends Activity implements OnItemClickListener {

    private DrawerLayout dr_layout;
    private ListView lv_menu;
    private com.androidfromhome.drawernavigation.AndroidListAdapter list_adapter;
    private ActionBarDrawerToggle actionDrawerToggle;
    
    @SuppressLint("NewApi")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_drawer);
        
        
        ListCollection.listCollectionArr=new ArrayList<ListCollection>();
        ListCollection.listCollectionArr.add(new ListCollection("Butterfly", "Butterflies are " +
                "part of the class of Insects in the order Lepidoptera", R.drawable.butterfly));
        ListCollection.listCollectionArr.add(new ListCollection("Green Scenery", "Green Scenery " +
                "is good for health", R.drawable.green_scenery));
        ListCollection.listCollectionArr.add(new ListCollection("Leaf", "A leaf is an organ " +
                "of a vascular plant and is the principal lateral appendage of the stem.", R.drawable.leaf));
        ListCollection.listCollectionArr.add(new ListCollection("One Rose", "A rose is a woody perennial " +
                "of the genus Rosa, within the family Rosaceae", R.drawable.one_rose));
        ListCollection.listCollectionArr.add(new ListCollection("Open Sky", "The sky (or celestial dome) is everything that lies above the surface of " +
                "the Earth, including the atmosphere and outer space.", R.drawable.sky));
        
        

        getActionBar().setHomeButtonEnabled(true);
        getActionBar().setIcon(R.drawable.menu);
        
        dr_layout = (DrawerLayout) findViewById(R.id.dr_layout);
        lv_menu = (ListView) findViewById(R.id.lv_menu);
        
        list_adapter=new AndroidListAdapter(DrawerActivity.this,R.layout.list_item, ListCollection.listCollectionArr);
        actionDrawerToggle = new ActionBarDrawerToggle(DrawerActivity.this,dr_layout,R.drawable.ic_launcher,R.string.hello_world,R.string.hello_world
        ) {
            public void onDrawerClosed(View view) {
                getActionBar().setTitle("Close");
                invalidateOptionsMenu();
            }

            public void onDrawerOpened(View drawerView) {
                getActionBar().setTitle("Open");
                invalidateOptionsMenu();
            }
        };
        
        dr_layout.setDrawerListener(actionDrawerToggle);

        lv_menu.setAdapter(list_adapter);
        lv_menu.setOnItemClickListener(this);
        
        ListCollection list_obj=ListCollection.listCollectionArr.get(0);        
        
        showDetails(list_obj);
        
        
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
    
        return true;
    }

    
    
    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        actionDrawerToggle.syncState();
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        actionDrawerToggle.onConfigurationChanged(newConfig);
    }
    
    

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        
        if (actionDrawerToggle.onOptionsItemSelected(item)) {
            return true;
        }
        switch (item.getItemId()) {
        
        default:
            return super.onOptionsItemSelected(item);
        }
    }

    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position,
            long id) {
        // TODO Auto-generated method stub
        ListCollection list_obj=(ListCollection) parent.getItemAtPosition(position);        
        
        showDetails(list_obj);
        
        
    }
    
    
    public void showDetails(ListCollection list_obj){
        
        Bundle bundle=new Bundle();
        bundle.putString("title", list_obj.title);
        bundle.putString("message", list_obj.message);
        bundle.putInt("image", list_obj.image);
        
        ShowDetails sd=    new ShowDetails();
        sd.setArguments(bundle);
        
         FragmentManager fragmentManager = getFragmentManager();
         fragmentManager.beginTransaction()
                 .replace(R.id.fl_holder, sd).commit();

         setTitle("");
         dr_layout.closeDrawer(Gravity.START);
    }
    
}

 

 


 

 

AndroidListAdapter.java


 

package com.androidfromhome.drawernavigation;

import java.util.ArrayList;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class AndroidListAdapter extends ArrayAdapter<ListCollection>{
    
    private final Context context;
    private final ArrayList<ListCollection> values;
    private ViewHolder viewHolder;
    private final int resourceId;

    public AndroidListAdapter(Context context, int resourceId,ArrayList<ListCollection> values) {
        super(context, resourceId, values);
        // TODO Auto-generated constructor stub
        
        this.context = context;
        this.values = values;
        this.resourceId = resourceId;
    }
    
    
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        
        if (convertView == null) {
            LayoutInflater inflater = (LayoutInflater) context
                    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = inflater.inflate(resourceId, parent, false);
            
                
            viewHolder = new ViewHolder();
            viewHolder.tv_msg = (TextView) convertView.findViewById(R.id.tv_msg);
            viewHolder.tv_title = (TextView) convertView.findViewById(R.id.tv_title);
            viewHolder.iv_image = (ImageView) convertView.findViewById(R.id.iv_image);
            
            
                convertView.setTag(viewHolder);
            
            
        }else
        {
            viewHolder = (ViewHolder) convertView.getTag();
        }
        ListCollection list_obj=values.get(position);
        viewHolder.tv_msg.setText(list_obj.message);
        viewHolder.tv_title.setText(list_obj.title);
        viewHolder.iv_image.setImageResource(list_obj.image);
            
        return convertView;
    }
      
    
    public class ViewHolder {

         TextView tv_msg;
         ImageView iv_image;
         TextView tv_title;

    }

}

 


 

 

ListCollection.java


 

package com.androidfromhome.drawernavigation;

import java.util.ArrayList;

public class ListCollection {

    public static ArrayList<ListCollection> listCollectionArr=null;

    public String title="";
    public String message="";
    public int image=0;
    
    public ListCollection(String title,String message,int image){
        this.title=title;
        this.message=message;
        this.image=image;
        
    }
    
}

 


 

 

ShowDetails.java


 

package com.androidfromhome.drawernavigation.page;

import com.androidfromhome.drawernavigation.R;
import android.annotation.SuppressLint;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

@SuppressLint("NewApi")
public class ShowDetails extends Fragment {
    
    
   private TextView tv_details;
private ImageView iv_details;
private TextView tv_title;

@Override
   public View onCreateView(LayoutInflater inflater, ViewGroup container,
           Bundle savedInstanceState) {
 
       View rootView = inflater.inflate(R.layout.show_details, container, false);
        
       
       String title=getArguments().getString("title");
       String message=getArguments().getString("message");
       int image=getArguments().getInt("image");

       tv_title= (TextView)rootView.findViewById(R.id.tv_title);
       tv_details= (TextView)rootView.findViewById(R.id.tv_details);
       iv_details= (ImageView)rootView.findViewById(R.id.iv_details);
       
       tv_title.setText(title);
       tv_details.setText(message);
       iv_details.setImageResource(image);
       
       return rootView;
   }
}

 


 

 

Now xml layout source code

 

activity_drawer.xml


 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/LinearLayout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#A758AB"
        android:gravity="center"
        android:orientation="vertical"
        android:padding="15dp" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="2dp"
            android:text="Android From Home"
            android:textColor="#ffffff"
            android:textSize="22dp"
            android:textStyle="bold" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:gravity="center"
        android:orientation="vertical" >
        
        <android.support.v4.widget.DrawerLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/dr_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

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

 
    <ListView
        android:id="@+id/lv_menu"
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice" >
</ListView>
</android.support.v4.widget.DrawerLayout>

    </LinearLayout>

</LinearLayout>

 


 

 

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="wrap_content"
    android:layout_gravity="center"
    android:background="#ffffff"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:gravity="center"
        android:padding="6dp" >

        <FrameLayout
            android:layout_width="62dp"
            android:layout_height="62dp"
            android:layout_margin="2dp" >

            <ImageView
                android:id="@+id/iv_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:padding="3dp" />

        </FrameLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/tv_title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="2dp"
                android:text="TextView"
                android:textColor="#000000"
                android:textSize="16dp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/tv_msg"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:maxLength="40"
                android:padding="2dp"
                android:text="Some Text Goes here.."
                android:textColor="#343434"
                android:textSize="12dp"
                android:textStyle="bold" />

        </LinearLayout>

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:src="@drawable/arrow_list" />

    </LinearLayout>

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="#dfdfdf" />

</LinearLayout>

 


 

 

show_details.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="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="#000000" />

    <ImageView
        android:id="@+id/iv_details"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/tv_details"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="#000000" />

    </LinearLayout>

</LinearLayout>

 


 

 

 

Download Full Source Code

 

Related Post:-

Android Autostart App

Font Style For Android

Sqlite database example in android

ListView With section header in android example

Leave a Reply

Your email address will not be published. Required fields are marked *

Get Widget