Gallery with paging dots

This is the sample application for android Gallery and the GridView. Gallery also contains the small white and grey dot at the bottom. The Small and white dots are the Gallery image indicators(ie., Total Number of images available in the Gallery).

If the user moves the image in the gallery, the small white and grey dots are also updated, depends upon the user moves.

Below is the code for the layout.

<?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" >
                  
     <RelativeLayout android:id="@+id/gallery_paging"
        android:layout_width="fill_parent"
        android:layout_height="180dp">
   
        <com.common.vmi.ExtendedGallery android:id="@+id/mygallery01"
            android:layout_width="fill_parent"
            android:layout_height="180dp"
            android:spacing="0px"
            android:fadingEdge="none"/>
       
        <LinearLayout android:id="@+id/image_count"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            androidrientation="horizontal"
            android:gravity="center"
            androidbackground="#00000000"
            android:layout_alignParentBottom="true" >   
        </LinearLayout>
   
    </RelativeLayout>
   
    <GridView     android:id="@+id/iconic_grid" android:layout_width="fill_parent"  
                android:layout_height="185dip" android:padding="10dp" android:columnWidth="10dp"
                android:verticalSpacing="10dp" android:horizontalSpacing="30dp"
                android:numColumns="3"  android:stretchMode="columnWidth"
                android:tag="temp"   android:layout_below="@+id/gallery_paging"
                android:listSelector="@drawable/corner_orange" android:layout_weight="1.0"
                android:layout_alignParentBottom="true" android:layout_marginBottom="30dip"/>  
       
    <RelativeLayout android:id="@+id/power_text_layout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/dash_text"
        android:gravity="center">
       
        <TextView android:id="@+id/power_text"
            android:layout_width="125dp"
            android:layout_height="30dip"
            android:gravity="center_vertical|right"
            android:textColor="@color/white">
        </TextView>
       
        <TextView android:id="@+id/power_ever_text"
            android:layout_width="125dp"
            android:layout_height="30dip"
            android:layout_toRightOf="@+id/power_text"
            android:gravity="center_vertical"
            android:textStyle="bold"
            android:textColor="@color/white">
        </TextView>
       
    </RelativeLayout>
   
   
    <RelativeLayout android:id="@+id/info_layout"
        android:layout_width="50dp"
        android:layout_height="35dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true">
       
        <ImageButton android:id="@+id/info_icon"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_marginBottom="2dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:background="@android:drawable/ic_dialog_info"
            android:layout_marginRight="10dp">
        </ImageButton>
       
    </RelativeLayout>
               
</RelativeLayout>

In the above gallery, im using extended gallery for controling the scrool of the Gallery. By using this extended gallery class user can scrool one image at the time.

In the above XML, I used linear layout  android:id="@+id/image_count" is used for loading the small white and gray dot programatically.

Below is the code for Extended Gallery.

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 loading the Gallery image and the Grid items.

package com.fsp.vmialumni;

import android.app.Activity;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Typeface;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.AdapterView.OnItemSelectedListener;

import com.common.vmi.ExtendedGallery;

public class Gallery_Grid extends Activity {
    GridView icon_grid;
    TextView power_text, power_imagine;
    ImageButton infobtn;
    RelativeLayout info_layout;
    LinearLayout count_layout;
    int count = 0;
    static TextView page_text[];

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

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.dashboard_main);

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

        infobtn = (ImageButton) findViewById(R.id.info_icon);
        info_layout = (RelativeLayout) findViewById(R.id.info_layout);
        power_text = (TextView) findViewById(R.id.power_text);
        power_imagine = (TextView) findViewById(R.id.power_ever_text);

        power_text.setText("Always");
        power_imagine.setText(" " + "Imagine");

        icon_grid.setAdapter(new GridMenuAdapter(Gallery_Grid.this));

        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++) {
                    Gallery_Grid.page_text[i]
                            .setTextColor(android.graphics.Color.GRAY);
                }
                Gallery_Grid.page_text[pos]
                        .setTextColor(android.graphics.Color.WHITE);
            }

            @Override
            public void onNothingSelected(AdapterView<?> arg0) {
                // TODO Auto-generated method stub

            }
        });
    }


//This is tha adapter class for loading the images into the Gallery.

    public class AddImageAdapter extends BaseAdapter {
        Context mycontext = null;
        int galitembg = 0;

        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() {
            // TODO Auto-generated method stub
            return Gallery_Grid.IMAGE_IDS.length;
        }

        @Override
        public Object getItem(int position) {
            // TODO Auto-generated method stub
            return position;
        }

        @Override
        public long getItemId(int position) {
            // TODO Auto-generated method stub
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            // TODO Auto-generated method stub
            ImageView imageview = new ImageView(mycontext);
            imageview.setImageResource(Gallery_Grid.IMAGE_IDS[position]);
            imageview.setScaleType(ImageView.ScaleType.FIT_XY);
            return imageview;
        }
    }



//These are the Images Going to load to the gallery from the res/drawable folder.

    public static int[] IMAGE_IDS = { R.drawable.aconite, R.drawable.alliums,
            R.drawable.babys_breath, R.drawable.gillyflower,
            R.drawable.grid_background, R.drawable.butterfly,
            R.drawable.cactus, R.drawable.camomile,
            R.drawable.helxinesoleiralii, R.drawable.dimetrodon,
            R.drawable.argali_sheep, R.drawable.background_image1,
            R.drawable.background_image2, R.drawable.plectranthusaustralis };

}

Below is the Layout for GridView  Items.


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:orientation="vertical" android:layout_width="wrap_content"
                android:layout_height="wrap_content" android:gravity="center_horizontal">
   
    <ImageView     android:id="@+id/grid_item_icon"
                android:layout_width="100dip" android:layout_height="56dip" />

    <TextView    android:layout_width="wrap_content" android:layout_height="wrap_content" 
                android:id="@+id/grid_item_label" android:paddingTop="2sp"
                android:textColor="@color/white" android:textSize="13sp"
                android:gravity="center_horizontal"    android:singleLine="true"
                android:ellipsize="marquee" android:textStyle="bold" android:typeface="serif"/>
</LinearLayout>

The GridView Contains the Image and a Textview.

Below is the code for GridView Adapter class.

package com.fsp.vmialumni;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class GridMenuAdapter extends BaseAdapter {
    Context mycontext = null;

    public static int[] IMAGE_IDS = { R.drawable.tennis, R.drawable.racecar,
            R.drawable.jewwls, R.drawable.gold_medel, R.drawable.football,
            R.drawable.ic_dictionary

    };

    public static String[] item_name = { "Item 01", "Item 02", "Item 03",
            "Item 04", "Item 05", "Item 06" };

    public GridMenuAdapter(Context c) {
        mycontext = c;
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return IMAGE_IDS.length;
    }

    @Override
    public Object getItem(int position) {
        // TODO Auto-generated method stub
        return position;
    }

    @Override
    public long getItemId(int position) {
        // TODO Auto-generated method stub
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub
        View itemview = convertView;
        if (convertView == null) {
            LayoutInflater sl = LayoutInflater.from(mycontext);
            itemview = sl.inflate(R.layout.dashboard_item, null);

            TextView stv = (TextView) itemview
                    .findViewById(R.id.grid_item_label);
            stv.setText(item_name[position]);

            ImageView simg = (ImageView) itemview
                    .findViewById(R.id.grid_item_icon);
            simg.setImageResource(IMAGE_IDS[position]);
        }

        return itemview;
    }

}

Below is the some of the Screen Shot of the OutPut.

Small dot at Fourth Position

Small Dot at First Position

Small dot at EightPosition

Small dot at Thirteen Position