Showing posts with label Android code sample: DrawerLayout. Show all posts
Showing posts with label Android code sample: DrawerLayout. Show all posts

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
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://arteluzevida.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://arteluzevida.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 filesDownload the files.

DrawerLayout with ListView

Follow the exercise "Android DrawerLayout and DrawerListener", we are going to add a ListView inside DrawerLayout, and implement OnItemClickListener.

DrawerLayout with ListView
DrawerLayout with ListView

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_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://arteluzevida.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_dark"
android:orientation="vertical"
android:padding="5dp" >

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Drawer" />

<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher" />

<ListView
android:id="@+id/drawerlist"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#e0e0e0" />

<Button
android:id="@+id/closedrawer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Close Drawer" />
</LinearLayout>

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

Main code:
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.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnTouchListener;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ListView;
import android.widget.TextView;

public class MainActivity extends Activity {

DrawerLayout drawerLayout;
View drawerView;
TextView textPrompt, textPrompt2;
ListView drawerList;
TextView textSelection;

private String[] dayOfWeek = {
"Sunday", "Monday", "Tuesday", "Wednesday",
"Thursday", "Friday", "Saturday"};
ArrayAdapter<String> arrayAdapter;

@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);
}});

Button buttonCloseDrawer = (Button)findViewById(R.id.closedrawer);
buttonCloseDrawer.setOnClickListener(new OnClickListener(){

@Override
public void onClick(View arg0) {
drawerLayout.closeDrawers();
}});

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://arteluzevida.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);
drawerList = (ListView)findViewById(R.id.drawerlist);
arrayAdapter = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1,
dayOfWeek);
drawerList.setAdapter(arrayAdapter);

drawerList.setOnItemClickListener(new OnItemClickListener(){

@Override
public void onItemClick(AdapterView<?> parent,
View view, int position, long id) {
String sel = (String)parent.getItemAtPosition(position);
textSelection.setText(sel);
}});
}

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 filesDownload the files.

Related: DrawerLayout with ListFragment

Android DrawerLayout and DrawerListener

This exercise show how to use android.support.v4.widget.DrawerLayout and implement DrawerListener. DrawerLayout is a top-level container that allows for interactive "drawer" views to be pulled out from the edge of the window.

android.support.v4.widget.DrawerLayout and DrawerListener
android.support.v4.widget.DrawerLayout and DrawerListener

Layout, to define <android.support.v4.widget.DrawerLayout> as top-level container.
<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: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"
android:background="@android:color/background_light"
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://arteluzevida.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" />
</LinearLayout>

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

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Drawer" />

<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher" />

<Button
android:id="@+id/closedrawer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Close Drawer" />
</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.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnTouchListener;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends Activity {

DrawerLayout drawerLayout;
View drawerView;
TextView textPrompt, textPrompt2;

@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);
}});

Button buttonCloseDrawer = (Button)findViewById(R.id.closedrawer);
buttonCloseDrawer.setOnClickListener(new OnClickListener(){

@Override
public void onClick(View arg0) {
drawerLayout.closeDrawers();
}});

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://arteluzevida.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;
}
});
}

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 filesDownload the files.

Next:
DrawerLayout with ListView