One of the Android layout widget – Gallery has lessen the pain of developer when one needs to use horizontally scrolling list specially in case of showing images in gallery view. But sometimes we need to customize this gallery widget as per requirement, for example navigating gallery using next-previous buttons which are placed at left and right side of gallery, highlighting selected image with border to make it more user friendly.

Here is code for Gallery Implementation which includes following features :-

  • Horizontal gallery view
  • Showing selected image from gallery in larger view
  • Next-Previous buttons for gallery navigation
  • Highlighting selected image in horizontal gallery view

Next-Previous buttons implementation :-

This can be easily done by maintaining current position of the selected item in gallery view. One needs to increment position when user clicks on right arrow and set gallery selection to that position and needs to decrement position when clicked on left arrow and then set gallery selection.

Highlighting selected item from gallery
implementation :-

One can write custom drawable which can be set to background of image view to apply border of gallery image view. Different drawable files can be created and applied to gallery view for its different states like onFocus, onPressed etc.

Code for GalleryDemoActivity.java

package com.gallerydemo;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.Gallery;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;

public class GalleryDemoActivity extends Activity {

    private ImageView selectedImageView;

    private ImageView leftArrowImageView;

    private ImageView rightArrowImageView;

    private Gallery gallery;

    private int selectedImagePosition = 0;

    private List<Drawable> drawables;

    private GalleryImageAdapter galImageAdapter;

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

        getDrawablesList();
        setupUI();
    }

    private void setupUI() {

        selectedImageView = (ImageView) findViewById(R.id.selected_imageview);
        leftArrowImageView = (ImageView) findViewById(R.id.left_arrow_imageview);
        rightArrowImageView = (ImageView) findViewById(R.id.right_arrow_imageview);
        gallery = (Gallery) findViewById(R.id.gallery);

        leftArrowImageView.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {

                if (selectedImagePosition > 0) {
                    --selectedImagePosition;

                }

                gallery.setSelection(selectedImagePosition, false);
            }
        });

        rightArrowImageView.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {

                if (selectedImagePosition < drawables.size() - 1) {
                    ++selectedImagePosition;

                }

                gallery.setSelection(selectedImagePosition, false);

            }
        });

        gallery.setOnItemSelectedListener(new OnItemSelectedListener() {

            @Override
            public void onItemSelected(AdapterView<?> parent, View view, int pos, long id) {

                selectedImagePosition = pos;

                if (selectedImagePosition > 0 && selectedImagePosition < drawables.size() - 1) {

                    leftArrowImageView.setImageDrawable(getResources().getDrawable(R.drawable.arrow_left_enabled));
                    rightArrowImageView.setImageDrawable(getResources().getDrawable(R.drawable.arrow_right_enabled));

                } else if (selectedImagePosition == 0) {

                    leftArrowImageView.setImageDrawable(getResources().getDrawable(R.drawable.arrow_left_disabled));

                } else if (selectedImagePosition == drawables.size() - 1) {

                    rightArrowImageView.setImageDrawable(getResources().getDrawable(R.drawable.arrow_right_disabled));
                }

                changeBorderForSelectedImage(selectedImagePosition);
                setSelectedImage(selectedImagePosition);
            }

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

            }

        });

        galImageAdapter = new GalleryImageAdapter(this, drawables);

        gallery.setAdapter(galImageAdapter);

        if (drawables.size() > 0) {

            gallery.setSelection(selectedImagePosition, false);

        }

        if (drawables.size() == 1) {

            rightArrowImageView.setImageDrawable(getResources().getDrawable(R.drawable.arrow_right_disabled));
        }

    }

    private void changeBorderForSelectedImage(int selectedItemPos) {

        int count = gallery.getChildCount();

        for (int i = 0; i < count; i++) {

            ImageView imageView = (ImageView) gallery.getChildAt(i);
            imageView.setBackgroundDrawable(getResources().getDrawable(R.drawable.image_border));
            imageView.setPadding(3, 3, 3, 3);

        }

        ImageView imageView = (ImageView) gallery.getSelectedView();
        imageView.setBackgroundDrawable(getResources().getDrawable(R.drawable.selected_image_border));
        imageView.setPadding(3, 3, 3, 3);
    }

    private void getDrawablesList() {

        drawables = new ArrayList<Drawable>();
        drawables.add(getResources().getDrawable(R.drawable.natureimage1));
        drawables.add(getResources().getDrawable(R.drawable.natureimage2));
        drawables.add(getResources().getDrawable(R.drawable.natureimage3));
        drawables.add(getResources().getDrawable(R.drawable.natureimage4));
        drawables.add(getResources().getDrawable(R.drawable.natureimage5));
        drawables.add(getResources().getDrawable(R.drawable.natureimage6));
        drawables.add(getResources().getDrawable(R.drawable.natureimage7));
        drawables.add(getResources().getDrawable(R.drawable.natureimage8));
        drawables.add(getResources().getDrawable(R.drawable.natureimage9));
        drawables.add(getResources().getDrawable(R.drawable.natureimage10));
        drawables.add(getResources().getDrawable(R.drawable.natureimage11));
        drawables.add(getResources().getDrawable(R.drawable.natureimage12));
        drawables.add(getResources().getDrawable(R.drawable.natureimage13));
        drawables.add(getResources().getDrawable(R.drawable.natureimage14));
        drawables.add(getResources().getDrawable(R.drawable.natureimage15));

    }

    private void setSelectedImage(int selectedImagePosition) {

        BitmapDrawable bd = (BitmapDrawable) drawables.get(selectedImagePosition);
        Bitmap b = Bitmap.createScaledBitmap(bd.getBitmap(), (int) (bd.getIntrinsicHeight() * 0.9), (int) (bd.getIntrinsicWidth() * 0.7), false);
        selectedImageView.setImageBitmap(b);
        selectedImageView.setScaleType(ScaleType.FIT_XY);

    }
}

Code for GalleryImageAdapter.java

package com.gallerydemo;

import java.util.List;

import android.app.Activity;
import android.graphics.drawable.Drawable;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;

public class GalleryImageAdapter extends BaseAdapter {

    private Activity context;

    private static ImageView imageView;

    private List<Drawable> plotsImages;

    private static ViewHolder holder;

    public GalleryImageAdapter(Activity context, List<Drawable> plotsImages) {

        this.context = context;
        this.plotsImages = plotsImages;

    }

    @Override
    public int getCount() {
        return plotsImages.size();
    }

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

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        if (convertView == null) {

            holder = new ViewHolder();

            imageView = new ImageView(this.context);

            imageView.setPadding(3, 3, 3, 3);

            convertView = imageView;

            holder.imageView = imageView;

            convertView.setTag(holder);

        } else {

            holder = (ViewHolder) convertView.getTag();
        }

        holder.imageView.setImageDrawable(plotsImages.get(position));

        holder.imageView.setScaleType(ImageView.ScaleType.FIT_XY);
        holder.imageView.setLayoutParams(new Gallery.LayoutParams(150, 90));

        return imageView;
    }

    private static class ViewHolder {
        ImageView imageView;
    }

}

Code for main.xml

<?xmlversion="1.0"encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/selected_imageview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_above="@+id/gallery_relative_layout"
        android:layout_marginLeft="30dip"
        android:layout_marginRight="30dip"
        android:layout_marginTop="30dip" />

    <RelativeLayout
        android:id="@+id/gallery_relative_layout"
        android:layout_width="fill_parent"
        android:layout_height="150dip"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/left_arrow_imageview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="15dip"
            android:src="@drawable/arrow_left_disabled" />

        <Gallery
            android:id="@+id/gallery"
            android:layout_width="0dip"
            android:layout_height="150dip"
            android:layout_marginLeft="20dip"
            android:layout_marginRight="20dip"
            android:layout_toLeftOf="@+id/right_arrow_imageview"
            android:layout_toRightOf="@+id/left_arrow_imageview"
            android:spacing="20dip" />

        <ImageView
            android:id="@+id/right_arrow_imageview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="15dip"
            android:src="@drawable/arrow_right_enabled" />
    </RelativeLayout>

</RelativeLayout>

Code for image_border.xml

<?xmlversion="1.0"encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <shape android:shape="rectangle" >
            <gradient
                android:angle="90"
                android:centerColor="#777777"
                android:endColor="#777777"
                android:startColor="#777777" />
        </shape>
    </item>
    <item
        android:bottom="3dp"
        android:left="3dp"
        android:right="3dp"
        android:top="3dp">
        <shape android:shape="rectangle" >
            <solid android:color="#777777" />
        </shape>
    </item>

</layer-list>

Code for selected_image_border.xml

<?xmlversion="1.0"encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <shape android:shape="rectangle" >
            <gradient
                android:angle="90"
                android:centerColor="#000"
                android:endColor="#000"
                android:startColor="#000" />
        </shape>
    </item>
    <item
        android:bottom="3dp"
        android:left="3dp"
        android:right="3dp"
        android:top="3dp">
        <shape android:shape="rectangle" >
            <solid android:color="#000" />
        </shape>
    </item>

</layer-list>

Output of this program will be as shown below

galleryDemo

You can download the complete source code for the project from here