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.
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>
OK Its done. Now run the project and see the result.
Please comment and share this post if you like it.
Link to this post!
