Viewpager Example in android

Viewpager  is  the best way to switching among view. It provide a way to swipe views from left to right and right to left. Viewpager provide strong way to swipe any views but here i have taken ImageView to swipe left and right.

Viewpager is strong widget as well as very simple. So here we go step wise solution  with explanation.

Add the support library while you are creating project because Viewpager does not support in lower android version 

Step 1) After creating a fresh project. change your main.xml to as follow so that it have one Viewpager widget in it.

<?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="vertical" >

    <android.support.v4.view.ViewPager
        android:id="@+id/myfivepanelpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

Step 2) Now our main concern is to bind data inside a Viewpager so that you can easily swipe. PagerAdapter bind the data to Viewpager and create view dynamically when needed. In PagerAdapter we remove the view as soon as its use is over so that we can avoid memory wastage . So create one new class and paste below code inside it.

package com.horizontalscrollviewwithpageindicator;

import android.app.Activity;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;

public class ViewPagerAdapter extends PagerAdapter {

 Activity activity;
 int imageArray[];

 public ViewPagerAdapter(Activity act, int[] imgArra) {
  imageArray = imgArra;
  activity = act;
 }

 public int getCount() {
  return imageArray.length;
 }

 public Object instantiateItem(View collection, int position) {
  ImageView view = new ImageView(activity);
  view.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,
    LayoutParams.FILL_PARENT));
  view.setScaleType(ScaleType.FIT_XY);
  view.setBackgroundResource(imageArray[position]);
  ((ViewPager) collection).addView(view, 0);
  return view;
 }

 @Override
 public void destroyItem(View arg0, int arg1, Object arg2) {
  ((ViewPager) arg0).removeView((View) arg2);
 }

 @Override
 public boolean isViewFromObject(View arg0, Object arg1) {
  return arg0 == ((View) arg1);
 }

 @Override
 public Parcelable saveState() {
  return null;
 }
}

Step 3) This is the final step and Viewpager complete. As in PagerAdapter , i have created one ImageView to display as child of Viewpager so we need one image array to show image. I have image in my drawable folder. I created one array like this

private int imageArra[] = { R.drawable.antartica1, R.drawable.antartica2,
   R.drawable.antartica3, R.drawable.antartica4,
   R.drawable.antartica5, R.drawable.antartica6,
   R.drawable.antartica7, R.drawable.antartica8 };

Now we just need to attach our PagerAdapter to android Viewpager . So we will change our main activity code to as following ---

package com.horizontalscrollviewwithpageindicator;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.view.Menu;

public class PageIndicatorActivity extends Activity {

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  ViewPagerAdapter adapter = new ViewPagerAdapter(this, imageArra);
  ViewPager myPager = (ViewPager) findViewById(R.id.myfivepanelpager);
  myPager.setAdapter(adapter);
  myPager.setCurrentItem(0);
 }

 private int imageArra[] = { R.drawable.antartica1, R.drawable.antartica2,
   R.drawable.antartica3, R.drawable.antartica4,
   R.drawable.antartica5, R.drawable.antartica6,
   R.drawable.antartica7, R.drawable.antartica8 };

 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
  getMenuInflater().inflate(R.menu.activity_main, menu);
  return true;
 }

}

See the video to get perfect idea about what's the outcome will be. And if you are not able to follow the above procedure than no need to worry. Just download the source code and play with it

                                                         
                                                       

Download Source Code

Android sliding drawer example

Consider a case of complex UI where you do not have space on your android application screen but you have to show some extra data on same screen?
There are two way in such a condition --

1) Switching view using LayoutInflater or fragments - but its very costly if as it will need space from visible portion

2) Using menu and action bar - unfortunately we can only show button there to perform action.

Then what should we so ? android provide Sliding drawer for such a requirement. It does not take main screen space. and it open when ever a user want to open. Most importantly , you can show any complex user interface inside a sliding drawer.

Creating sliding drawer is simple. It just need two component--

•  A button, will visible all the time to open and close sliding drawer. but we do not need to set listener for this.
• And Layout that will show when you open sliding drawer. I have taken a ListView inside sliding drawer

Sliding Drawer Closed

                             

Sliding Drawer Opened

Action On Sliding Drawer Element

                                               

Now you just need to download the sample application and start playing with it. 

Sliding Drawer Source Code

I have browse about sliding drawer and i found a very useful link to create sliding drawer from Left to right or Right to left See Going into depth of Custom Sliding drawer

How to create a simple android Gallery View

Android provide a way to show photo (either from sdcards or on-line) in a specified manner. You can navigate and see all photo. We do with help of android widget Gallery. Gallery is just like List View in which we bind the data using Base Adapter . If want some depth knowledge about how to bind data using adapter then see ListView with Image and Text Article.
Gallery is deprecated from Jelly bean. And they suggest to use  horizontally scrolling widgets include Horizontal Scroll-view and View Pager from the support library.Wait soon i will post about this also. But for now we can use Gallery.

Step1) First create a new project

Step2 change your main.xml to as follows

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

   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent" android:padding="5dp">

       <Gallery

android:id="@+id/Gallery01"

android:layout_width="fill_parent"

android:layout_height="90dp"></Gallery>

        <LinearLayout

android:id="@+id/ImageView01"

android:layout_width="fill_parent"

android:layout_height="fill_parent"></LinearLayout>

</LinearLayout>

Step3 change your main activity to as follows- 

package com.ahmad.samples.views;


import android.app.Activity;

import android.content.Context;

import android.content.res.TypedArray;

import android.os.Bundle;

import android.view.Gravity;

import android.view.View;

import android.view.ViewGroup;

import android.view.ViewGroup.LayoutParams;

import android.widget.AdapterView;

import android.widget.AdapterView.OnItemClickListener;

import android.widget.BaseAdapter;

import android.widget.Gallery;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.Toast;


public class GalleryViewAhmad extends Activity {

        //These image should be store in your drawble folder under res.

Integer[] pics = { R.drawable.antartica1, R.drawable.antartica2,

R.drawable.antartica3, R.drawable.antartica4,

R.drawable.antartica5, R.drawable.antartica6,

R.drawable.antartica7, R.drawable.antartica8,

R.drawable.antartica9, R.drawable.antartica10 ,

R.drawable.antartica3, R.drawable.antartica4,

R.drawable.antartica5, R.drawable.antartica6,

R.drawable.antartica7, R.drawable.antartica8,

R.drawable.antartica9, R.drawable.antartica10 };

LinearLayout imageView;


/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

try {

// InputStream in = (new URL("www.google.com").openStream());

} catch (Exception e) {

e.getMessage();

}

Gallery ga = (Gallery) findViewById(R.id.Gallery01);

ga.setAdapter(new ImageAdapter(this));


imageView = (LinearLayout) findViewById(R.id.ImageView01);

ga.setOnItemClickListener(new OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,

long arg3) {

Toast.makeText(

getBaseContext(),

"You have selected picture " + (arg2 + 1)

+ " of Antartica", Toast.LENGTH_SHORT).show();

try {

imageView.removeAllViews();

} catch (Exception e) {

e.getMessage();

}

TouchImageView touchImageView = new TouchImageView(

GalleryView.this);

touchImageView.setImageResource(pics[arg2]);

LayoutParams lp=new LayoutParams(LayoutParams.FILL_PARENT,     LayoutParams.FILL_PARENT);

imageView.setGravity(Gravity.CENTER_HORIZONTAL|Gravity.CENTER_VERTICAL);

touchImageView.setLayoutParams(lp);

imageView.addView(touchImageView);

}


});

}

This is Base-Adapter class to bind view with Gallery-View

public class ImageAdapter extends BaseAdapter {

private Context ctx;

int imageBackground;

public ImageAdapter(Context c) {

ctx = c;

TypedArray ta = obtainStyledAttributes(R.styleable.Gallery1);

imageBackground = ta.getResourceId(

R.styleable.Gallery1_android_galleryItemBackground, 1);

ta.recycle();

}

@Override

public int getCount() {

return pics.length;

}

@Override

public Object getItem(int arg0) {

return arg0;

}

@Override

public long getItemId(int arg0) {

return arg0;

}

@Override

public View getView(int arg0, View arg1, ViewGroup arg2) {

ImageView iv = new ImageView(ctx);

iv.setImageResource(pics[arg0]);

iv.setScaleType(ImageView.ScaleType.FIT_XY);

iv.setLayoutParams(new Gallery.LayoutParams(150, 120));

iv.setBackgroundResource(imageBackground);

return iv;

}

}

}

Now enjoy by running it.You can                download complete project