Android Mobile Application Development: Creating a custom Sliding GalleryView with Paging in android

This is a simple example showing A sliding Gallery in android. This example shows a sliding gallery with a paging Control and a changing page text which also indicate the page change.
Create a new project named “SlidingGallery” and copy this code into “SlidingGalleryDemo.java“.
My Activity name is “SlidingGalleryDemo.java” here

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

package com.coderzheaven.pack;

import android.app.Activity;

import android.content.Context;

import android.os.Bundle;

import android.util.DisplayMetrics;

import android.view.Gravity;

import android.view.View;

import android.view.ViewGroup;

import android.widget.AdapterView;

import android.widget.BaseAdapter;

import android.widget.Gallery;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.TextView;

import android.widget.AdapterView.OnItemClickListener;

public class SlidingGalleryDemo extends Activity {

    Gallery ga;

    int width, height;

    LinearLayout linear;

    LinearLayout layout;

    Integer[] pics = {

            R.drawable.android_1,

            R.drawable.android_2,

            R.drawable.android_3,

            R.drawable.android_4,

            R.drawable.android_5   

    };

    ImageView paging;

    @Override

    public void onCreate(Bundle savedInstanceState) {

         super.onCreate(savedInstanceState);

         setContentView(R.layout.threemenu);

         layout = (LinearLayout) findViewById(R.id.imageLayout1);

         DisplayMetrics displaymetrics = new DisplayMetrics();

         getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);

         width = displaymetrics.heightPixels;

         height = displaymetrics.widthPixels;

         for(int i=0; i<pics.length; i++)

         {

            paging = new ImageView(this);

            paging.setId(i);

            paging.setBackgroundResource(R.drawable.unsel);

            layout.addView(paging);

         }

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

         ga.setAdapter(new ImageAdapter(this));

         ga.setOnItemClickListener(new OnItemClickListener() {

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

                {                   

                    System.out.println("SELECTED : " + arg2);

                }               

            });

    }

    public class ImageAdapter extends BaseAdapter {

        private Context ctx;

        int imageBackground;

        int pre=-1;

        public ImageAdapter(Context c) {

            ctx = c;

        }

        public int getCount() {

            return pics.length;

        }

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

             ImageView iv;

             LinearLayout layoutnew = new LinearLayout(getApplicationContext());            

             layoutnew.setOrientation(LinearLayout.VERTICAL);

             if (convertView == null) 

             {

                iv = new ImageView(ctx);

                iv.setImageResource(pics[arg0]);

                iv.setScaleType(ImageView.ScaleType.FIT_XY);

                int temp =(int) (height/1.7f);

                int temp_y = (int) ((3*temp)/2.0f);

                iv.setLayoutParams(new Gallery.LayoutParams(temp,temp_y));

                iv.setBackgroundResource(imageBackground);

             }

             else

             {

                iv = (ImageView) convertView;

             }

             TextView tv = new TextView(ctx);

             tv.setText("Page " + (arg0+1));

             tv.setTextColor(0xFFFFFFFF);

             tv.setPadding(0, 15, 0, 0);

             tv.setTextSize(18);

             tv.setGravity(Gravity.CENTER); 

             layoutnew.addView(iv);

             layoutnew.addView(tv);

            return layoutnew;

        }

        @Override

        public Object getItem(int position) {

            return null;

        }

        @Override

        public long getItemId(int position) {

            if(pre !=-1)

            {

                ImageView img = (ImageView) findViewById(pre);

                img.setBackgroundResource(R.drawable.unsel);

            }

            ImageView img1 = (ImageView) findViewById(position);

            img1.setBackgroundResource(R.drawable.sel);

            this.pre = position;

            return position;

        }

    }

}

Now create a new class and name it “GalleryCustom.java” which extends “Gallery” and copy this code into it.

package com.coderzheaven.pack;

import android.content.Context;

import android.util.AttributeSet;

import android.view.MotionEvent;

import android.widget.Gallery;

public class GalleryCustom extends Gallery {

    public GalleryCustom(Context ctx, AttributeSet attrSet) 

    {

        super(ctx,attrSet);

    }

    @SuppressWarnings("unused")

    private boolean isScrollingLeft(MotionEvent e1, MotionEvent e2)

    { 

           return e2.getX() > e1.getX(); 

    }

    @Override

    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY){

      return true;  

    }

}

Now we will create the layout for the page. Copy this code to the main.xml.

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

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

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:keepScreenOn="true" 

    android:background="@drawable/Hotpink">

    <LinearLayout

        android:layout_width="fill_parent"

        android:id="@+id/imageLayout1"

        android:layout_marginBottom="5dip"

        android:layout_alignParentBottom="true"

        android:gravity="center_horizontal|center_vertical"

        android:orientation="horizontal"

        android:layout_height="wrap_content">  

     </LinearLayout>

    <LinearLayout

        android:layout_width="fill_parent"

        android:id="@+id/imageLayout"

        android:gravity="center"

        android:layout_alignParentTop="true"

        android:layout_above="@+id/imageLayout"

        android:layout_height="fill_parent" >

        <com.coderzheaven.pack.GalleryCustom

            android:id="@+id/thisgallery"

            android:spacing="60dip"

            android:layout_width="fill_parent"

            android:layout_height="wrap_content" />

    </LinearLayout>

</RelativeLayout>