Android

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:
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.                 android:layout_width="match_parent"  
  3.                 android:layout_height="match_parent"  
  4.                 android:background="@android:color/white"  
  5.                 android:orientation="vertical" >  
  6.   <ImageView  
  7.           android:id="@+id/selected"  
  8.           android:layout_width="fill_parent"  
  9.           android:layout_height="fill_parent"  
  10.           android:layout_above="@+id/gallery_relative_layout"  
  11.           android:layout_marginLeft="30dip"  
  12.           android:layout_marginRight="30dip"  
  13.           android:layout_marginTop="30dip"  
  14.    
  15.             />  
  16.   <View  
  17.           android:layout_width="match_parent"  
  18.           android:layout_height="1dp"  
  19.           android:background="#000000"  
  20.           android:layout_marginTop="300dp"  
  21.           android:layout_above="@+id/gallery_relative_layout"  
  22.             />  
  23.    
  24.   <RelativeLayout  
  25.           android:id="@+id/gallery_relative_layout"  
  26.           android:layout_width="fill_parent"  
  27.           android:layout_height="200dip"  
  28.           android:layout_alignParentBottom="true"  
  29.           android:orientation="horizontal"  
  30.           android:paddingTop="20dp">  
  31.    
  32.     <HorizontalScrollView  
  33.           android:id="@+id/hor_scroll_view"  
  34.           android:layout_width="match_parent"  
  35.           android:layout_height="wrap_content"  
  36.                >  
  37.       <LinearLayout  
  38.           android:id="@+id/gallery"  
  39.           android:layout_width="wrap_content"  
  40.           android:layout_height="wrap_content"  
  41.           android:orientation="horizontal" >  
  42.         <ImageView  
  43.             android:id="@+id/image1"  
  44.             android:layout_width="wrap_content"  
  45.             android:layout_height="wrap_content"  
  46.             android:src="@drawable/im1"  
  47.             android:onClick="biggerView"/>  
  48.         <ImageView  
  49.             android:id="@+id/image2"  
  50.             android:layout_width="wrap_content"  
  51.             android:layout_height="wrap_content"  
  52.             android:src="@drawable/im2"  
  53.             android:onClick="biggerView"/>  
  54.         <ImageView  
  55.             android:id="@+id/image3"  
  56.             android:layout_width="wrap_content"  
  57.             android:layout_height="wrap_content"  
  58.             android:src="@drawable/im3"  
  59.             android:onClick="biggerView"/>  
  60.         <ImageView  
  61.             android:id="@+id/image4"  
  62.             android:layout_width="wrap_content"  
  63.             android:layout_height="wrap_content"  
  64.             android:src="@drawable/im4"  
  65.             android:onClick="biggerView"/>  
  66.         <ImageView  
  67.                 android:id="@+id/image5"  
  68.                 android:layout_width="wrap_content"  
  69.                 android:layout_height="wrap_content"  
  70.                 android:src="@drawable/im5"  
  71.                 android:onClick="biggerView"/>  
  72.         <ImageView  
  73.                 android:id="@+id/image6"  
  74.                 android:layout_width="wrap_content"  
  75.                 android:layout_height="wrap_content"  
  76.                 android:src="@drawable/im6"  
  77.                 android:onClick="biggerView"/>  
  78.         <ImageView  
  79.                 android:id="@+id/image7"  
  80.                 android:layout_width="wrap_content"  
  81.                 android:layout_height="wrap_content"  
  82.                 android:src="@drawable/im7"  
  83.                 android:onClick="biggerView"/>  
  84.       </LinearLayout>  
  85.     </HorizontalScrollView>  
  86.   </RelativeLayout>  
  87. </RelativeLayout> 
The View has been added to show a horizontal separator between the big image and ScrollView.
 
The layout looks like:
 
im1.jpg
 
Step 3
 
Open "MainActivity" and add the following code to it:
  1. package com.chhavi.gallerytest;  
  2.    
  3. import android.os.Bundle;  
  4. import android.app.Activity;  
  5. import android.util.Log;  
  6. import android.view.Menu;  
  7. import android.view.View;  
  8. import android.widget.ImageView;  
  9.    
  10. public class MainActivity extends Activity {  
  11.    
  12.     ImageView im;  
  13.     @Override  
  14.     protected void onCreate(Bundle savedInstanceState) {  
  15.         super.onCreate(savedInstanceState);  
  16.         setContentView(R.layout.activity_main);  
  17.     }  
  18.    
  19.    
  20.     public void biggerView(View v)  
  21.     {  
  22.        im=(ImageView)findViewById(R.id.selected);  
  23.    
  24.        switch (v.getId())  
  25.        {  
  26.            case R.id.image1: im.setImageResource(R.drawable.im1);  
  27.                              break;  
  28.            case R.id.image2: im.setImageResource(R.drawable.im2);  
  29.                              break;  
  30.            case R.id.image3: im.setImageResource(R.drawable.im3);  
  31.                              break;  
  32.            case R.id.image4: im.setImageResource(R.drawable.im4);  
  33.                              break;  
  34.            case R.id.image5: im.setImageResource(R.drawable.im5);  
  35.                              break;  
  36.            case R.id.image6: im.setImageResource(R.drawable.im6);  
  37.                              break;  
  38.            case R.id.image7: im.setImageResource(R.drawable.im7);  
  39.                              break;  
  40.        }  
  41.     }  
  42.    
  43.     @Override  
  44.     public boolean onCreateOptionsMenu(Menu menu) {  
  45.         // Inflate the menu; this adds items to the action bar if it is present.  
  46.         getMenuInflater().inflate(R.menu.main, menu);  
  47.         return true;  
  48.     }  
  49. } 
Output snapshots:
 
Initial view:
 
im2.jpg
 
You can scroll to view the images that are not visible.
 
im3.jpg
 
Clicking on the first image will give you:
 
im4.jpg
 
Clicking the next image:
 
im5.jpg
 
Clicking the next image:
 
im6.jpg
 
and so on...
 
Thank you..... Enjoy coding :)

Up Next
    Ebook Download
    View all
    Learn
    View all
    Membership not found