Image Gallery in Android Studio

Introduction

 

In this article, you will learn how to make a simple gallery in Android. The main purpose will be to display all available images as a scrollable list and show the selected image in a larger view. 

 

Step 1

 

Add 7 seven images in drawable. Copy the images you want to use, to clipboard and past them in drawable. Name of jpg images used by me are: im1, im2, im3, im4, im5, im6, im7.

 

Step 2

 

Open "activity_main" and add the following code to it:

<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"
          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"

            />
  <View
          android:layout_width="match_parent"
          android:layout_height="1dp"
          android:background="#000000"
          android:layout_marginTop="300dp"
          android:layout_above="@+id/gallery_relative_layout"
            />

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

    <HorizontalScrollView
          android:id="@+id/hor_scroll_view"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
               >
      <LinearLayout
          android:id="@+id/gallery"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:orientation="horizontal" >
        <ImageView
            android:id="@+id/image1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/im1"
            android:onClick="biggerView"/>
        <ImageView
            android:id="@+id/image2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/im2"
            android:onClick="biggerView"/>
        <ImageView
            android:id="@+id/image3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/im3"
            android:onClick="biggerView"/>
        <ImageView
            android:id="@+id/image4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/im4"
            android:onClick="biggerView"/>
        <ImageView
                android:id="@+id/image5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/im5"
                android:onClick="biggerView"/>
        <ImageView
                android:id="@+id/image6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/im6"
                android:onClick="biggerView"/>
        <ImageView
                android:id="@+id/image7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/im7"
                android:onClick="biggerView"/>
      </LinearLayout>
    </HorizontalScrollView>
  </RelativeLayout>
</RelativeLayout>

The View has been added to show a horizontal separator between the big image and ScrollView.

 

The layout looks like:

 

 

Step 3

 

Open "MainActivity" and add the following code to it:

package com.chhavi.gallerytest;

import android.os.Bundle;
import android.app.Activity;
import android.util.Log;
import android.view.Menu;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends Activity {

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


    public void biggerView(View v)
    {
       im=(ImageView)findViewById(R.id.selected);

       switch (v.getId())
       {
           case R.id.image1: im.setImageResource(R.drawable.im1);
                             break;
           case R.id.image2: im.setImageResource(R.drawable.im2);
                             break;
           case R.id.image3: im.setImageResource(R.drawable.im3);
                             break;
           case R.id.image4: im.setImageResource(R.drawable.im4);
                             break;
           case R.id.image5: im.setImageResource(R.drawable.im5);
                             break;
           case R.id.image6: im.setImageResource(R.drawable.im6);
                             break;
           case R.id.image7: im.setImageResource(R.drawable.im7);
                             break;
       }
    }

    @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;
    }
}

Output snapshots:

 

Initial view:

 

 

You can scroll to view the images that are not visible.

 

 

Clicking on the first image will give you:

 

 

Clicking the next image:

 

 

Clicking the next image:

 

 

and so on...

 

Thank you..... Enjoy coding :)