Android Gallery with Dots On Scroll

In this tutorial I will show you how to create an Android Gallery and how to create dots or little circles when you scroll the images. So let’s start:

1. First you have to create a new project.
2. After the project is created go to res -> drawable and put your images in the drawable folder. If you don’t have a drawable folder you must create it by pressing right click – new directory and name it “drawable”.

NOTE: You have to run the project on the device if the images are too large. And you should resize your images!


3. Now you have to create another class called “ImageAdapter”. This class will extend the BaseAdapter class and you will have to implement all the methods that the IDE suggests you. After that you will have to create a constructor for the class and an Array of integers where you will store your images ids.

The code will look like this:

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


public class ImageAdapter extends BaseAdapter {
    private Context mContext;

    //array of integers for images IDs
    private Integer[] mImageIds = {
            R.drawable.avatar_423,
            R.drawable.da,
            R.drawable.penguins

    };

    //constructor
    public ImageAdapter (Context c){
        mContext = c;
    }

    @Override
    public int getCount() {
        return mImageIds.length;
    }

    @Override
    public Object getItem(int i) {
        return i;
    }

    @Override
    public long getItemId(int i) {
        return i;
    }

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        ImageView imageView = new ImageView(mContext);

        imageView.setImageResource(mImageIds[i]);
        imageView.setLayoutParams(new Gallery.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.FILL_PARENT));
        return imageView;
    }
}

4. Now you will have to make some changes in the XML layout. Go to reslayout – main.xml and open the main.xml. Here delete all you have and put the following code :

<?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">
    <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Hello World, MyActivity"/>

    <!-- This is the Gallery -->
    <Gallery xmlns:android="http://schemas.android.com/apk/res/android"
             android:id="@+id/gallery"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"/>

    <!-- This LinearLayout if for the dots -->
    <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">
    </LinearLayout>

</LinearLayout>

5. Now go to your activity class (mine is called MyActivity) and put the following code:

import android.app.Activity;
import android.graphics.Color;
import android.graphics.Typeface;
import android.os.Bundle;
import android.view.View;
import android.widget.*;

public class MyActivity extends Activity
{
    static TextView mDotsText[];
    private int mDotsCount;
    private LinearLayout mDotsLayout;


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

        //here we create the gallery and set our adapter created before
        Gallery gallery = (Gallery)findViewById(R.id.gallery);
        gallery.setAdapter(new ImageAdapter(this));


        mDotsLayout = (LinearLayout)findViewById(R.id.image_count);
        //here we count the number of images we have to know how many dots we need
        mDotsCount = gallery.getAdapter().getCount();

        //here we create the dots
        //as you can see the dots are nothing but "."  of large size
        mDotsText = new TextView[mDotsCount];

        //here we set the dots
        for (int i = 0; i < mDotsCount; i++) {
            mDotsText[i] = new TextView(this);
            mDotsText[i].setText(".");
            mDotsText[i].setTextSize(45);
            mDotsText[i].setTypeface(null, Typeface.BOLD);
            mDotsText[i].setTextColor(android.graphics.Color.GRAY);
            mDotsLayout.addView(mDotsText[i]);
        }


        //when we scroll the images we have to set the dot that corresponds to the image to White and the others
        //will be Gray
        gallery.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView adapterView, View view, int pos, long l) {

                for (int i = 0; i < mDotsCount; i++) {
                    MyActivity.mDotsText[i]
                            .setTextColor(Color.GRAY);
                }

                MyActivity.mDotsText[pos]
                        .setTextColor(Color.WHITE);
            }

            @Override
            public void onNothingSelected(AdapterView adapterView) {

            }
        });
    }
}

Now let’s see the result of our project 🙂


 

References:http://tjkannan.blogspot.com/2011/09/gallery-with-paging-dots.html
http://developer.android.com/resources/tutorials/views/hello-gallery.html

keyboard_arrow_up