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"
  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. />
  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">
  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;
  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;
  10. public class MainActivity extends Activity {
  12. ImageView im;
  13. @Override
  14. protected void onCreate(Bundle savedInstanceState) {
  15. super.onCreate(savedInstanceState);
  16. setContentView(R.layout.activity_main);
  17. }
  20. public void biggerView(View v)
  21. {
  22. im=(ImageView)findViewById(R.id.selected);
  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. }
  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 :)