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 :)