Kannan - Android Development: October 2013

This is the post that demonstrate the gallery with paging dots.

The gallery contains the small white and grey dots at bottom of the screen. The small dots will be updated when user moves the gallery images. The small dots represent the position of the image in the gallery.

Below is the code for the layout. This contain an extended gallery and a linear layout for placing the small dots.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent" >

<RelativeLayout android:id="@+id/gallery_paging"
android:layout_width="fill_parent"
android:layout_height="800dp">

<com.common.vmi.ExtendedGallery android:id="@+id/mygallery01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:spacing="0px"
android:fadingEdge="none"/>

<LinearLayout android:id="@+id/image_count"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:background="#00000000"
android:layout_alignParentBottom="true" >
</LinearLayout>

</RelativeLayout>

</RelativeLayout>

Note : Use can change the height of the relative layout android:id="@+id/gallery_paging" depends on your screen size. I am using the height as 800 as my gallery.

I am using a linear layout android:id="@+id/image_count" for placing and updating the small white and gray dots.

Below is the code for ExtendedGallery

package com.common.vmi;

import android.content.Context;
import android.util.AttributeSet;
import android.view.KeyEvent;
import android.view.MotionEvent;
import android.widget.Gallery;

public class ExtendedGallery extends Gallery{

private boolean stuck = false;

public ExtendedGallery(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}

public ExtendedGallery(Context context, AttributeSet attrs) {
super(context, attrs);
}

public ExtendedGallery(Context context) {
super(context);
}

@Override
public boolean onTouchEvent(MotionEvent event) {
return stuck || super.onTouchEvent(event);
}

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
switch (keyCode) {
case KeyEvent.KEYCODE_DPAD_LEFT:
case KeyEvent.KEYCODE_DPAD_RIGHT:
return stuck || super.onKeyDown(keyCode, event);
}
return super.onKeyDown(keyCode, event);
}

public void setScrollingEnabled(boolean enabled) {
stuck = !enabled;
}

@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY){
return super.onFling(e1, e2, 0, velocityY);
}
}

Below is the code for MainActivity

package com.example.galarypagingdots;

import android.app.Activity;
import android.graphics.Typeface;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.common.vmi.ExtendedGallery;

public class MainActivity extends Activity
{
LinearLayout count_layout;
TextView page_text[];
int count = 0;

@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

ExtendedGallery mGallery = (ExtendedGallery) findViewById(R.id.mygallery01);
mGallery.setAdapter(new AddImageAdapter(this));
mGallery.setScrollingEnabled(true);

count_layout = (LinearLayout) findViewById(R.id.image_count);
count = mGallery.getAdapter().getCount();
System.out.println("Gallery Image Count======>>>" + count);

page_text = new TextView[count];
for (int i = 0; i < count; i++)
{
page_text[i] = new TextView(this);
page_text[i].setText(".");
page_text[i].setTextSize(45);
page_text[i].setTypeface(null, Typeface.BOLD);
page_text[i].setTextColor(android.graphics.Color.GRAY);
count_layout.addView(page_text[i]);
}
mGallery.setOnItemSelectedListener(new OnItemSelectedListener() {

@Override
public void onItemSelected(AdapterView<?> parent, View view,
int pos, long id) {
// TODO Auto-generated method stub
System.out.println("Item Selected Position=======>>>" + pos);
for (int i = 0; i < count; i++) {
page_text[i]
.setTextColor(android.graphics.Color.GRAY);
}
page_text[pos]
.setTextColor(android.graphics.Color.WHITE);
}

@Override
public void onNothingSelected(AdapterView<?> arg0) {

}
});
}

@Override
public boolean onCreateOptionsMenu(Menu menu)
{
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

}

Below is the code for AddImageAdapter.

package com.example.galarypagingdots;

import android.content.Context;

import android.content.res.TypedArray;

import android.view.View;

import android.view.ViewGroup;

import android.widget.BaseAdapter;

import android.widget.ImageView;

public class AddImageAdapter extends BaseAdapter

{

Context mycontext = null;

int galitembg = 0;

public int[] IMAGE_IDS = { R.drawable.flower_01, R.drawable.flower_02,

R.drawable.flower_03, R.drawable.flower_04,

R.drawable.flower_05, R.drawable.flower_06,

R.drawable.flower_07, R.drawable.flower_08,

R.drawable.flower_09, R.drawable.flower_10};

public AddImageAdapter(Context c)

{

mycontext = c;

TypedArray typArray = mycontext.obtainStyledAttributes(R.styleable.GalleryTheme);

galitembg = typArray.getResourceId(R.styleable.GalleryTheme_android_galleryItemBackground, 0);

typArray.recycle();

}

@Override

public int getCount()

{

return IMAGE_IDS.length;

}

@Override

public Object getItem(int position)

{

return position;

}

@Override

public long getItemId(int position)

{

return position;

}

@Override

public View getView(int position, View convertView, ViewGroup parent)

{

ImageView imageview = new ImageView(mycontext);

imageview.setImageResource(IMAGE_IDS[position]);

imageview.setScaleType(ImageView.ScaleType.FIT_XY);

return imageview;

}

Create a drawable folder in res directory. Add your favorite images in the drawable folder. I am added some 10 images in the drawable folder and added that images in the AddImageAdapter class as like below.

public int[] IMAGE_IDS = { R.drawable.flower_01, R.drawable.flower_02,

R.drawable.flower_03, R.drawable.flower_04,

R.drawable.flower_05, R.drawable.flower_06,

R.drawable.flower_07, R.drawable.flower_08,

R.drawable.flower_09, R.drawable.flower_10};

Add attrs.xml file in the res/values directory. Below is the code for attrs.xml file.

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

<declare-styleable name="GalleryTheme">

</declare-styleable>

</resources>

Below is the AndroidManifest.xml file for Gallery with paging dots application.

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

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

package="com.example.galarypagingdots"

android:versionCode="1"

android:versionName="1.0" >

<uses-sdk

android:minSdkVersion="8"

android:targetSdkVersion="18" />

<application

android:allowBackup="true"

android:icon="@drawable/ic_launcher"

android:label="@string/app_name"

android:theme="@style/AppTheme" >

<activity

android:name="com.example.galarypagingdots.MainActivity"

android:label="@string/app_name" >

<intent-filter>

</intent-filter>

</activity>

</application>

</manifest>

I am using the android jelly bean version for running this application. But it will run from api version 8 also.

Run the application in android device or emulator and the result will be like the below sample images.

Small dots at first position.

Small dot at third position.

Small dot at sixth position.

Small dot at tenth position.

Kannan - Android Development

Saturday 12 October 2013

Gallery with Paging Dots Only