In Android, Gallery is a view that can show items in a center-locked, horizontal scrolling list, and hence the user can able to select a view, and then the user-selected view will be shown in the center of the Horizontal list. āNā number of items can be added by using the Adapter. The adapter is a bridging component between the UI component and the data source. The items given in the adapter will be shown in the gallery in the example. We are going toĀ implement this project using both Java and Kotlin Programming Language for Android.
Important Point: Gallery class was deprecated in API level 16. Instead Ā other horizontally scrolling widgets are HorizontalScrollView and ViewPager from the support library are available.
Way to Define a Gallery Tag
XML
<!-- By using android:spacing we can give spacing between imagesĀ Ā Ā Ā Ā android:animationDuration="3000" > for animation running --><GalleryĀ Ā android:id="@+id/languagesGallery"Ā Ā android:layout_width="match_parent"Ā Ā android:layout_height="wrap_content"Ā Ā android:layout_marginTop="100dp"Ā Ā android:unselectedAlpha="50"Ā Ā android:spacing="5dp"Ā Ā android:animationDuration="2000"Ā Ā android:padding="10dp" /> |
Ā Important Methods of GalleryView in Android
|
Methods |
Description |
|---|---|
| setAnimationDuration(int) |
To set the duration for how long a transition animation should runĀ (in milliseconds) whenever there is a change in layout.Ā This can be set in xml also via android:animationDuration=ā3000ā³ |
| setSpacing(int) |
To set the spacing between items in a Gallery. This can be set in xmlĀ also via android:spacing=ā5dpā |
| setUnselectedAlpha(float) |
To set the alpha on the items that are not selected. This can be set in xml also via android:unselectedAlpha=ā0.25ā³ |
Let us see the Implementation of Important Methods:Ā
Java
// get the reference of Gallery firstGallery simpleGallery = findViewById(R.id.languagesGallery);Ā Ā // set 3000 milliseconds for animation duration between each items of Gallery// xml equivalent -> android:animationDuration="2000"Ā simpleGallery.setAnimationDuration(2000);Ā Ā // set space between the items of Gallery// xml equivalent -> android:spacing="15dp"simpleGallery.setSpacing(15);Ā Ā // set 0.25 value for the alpha of unselected items of Gallery// xml equivalent -> android:unselectedAlpha="0.25"simpleGallery.setUnselectedAlpha(0.25f); |
Kotlin
// get the reference of Gallery firstval simpleGallery = findViewById<Gallery>(R.id.languagesGallery)Ā Ā // set 3000 milliseconds for animation duration between each items of Gallery// xml equivalent -> android:animationDuration="2000"simpleGallery.setAnimationDuration(2000)Ā Ā // set space between the items of Gallery// xml equivalent -> android:spacing="15dp"simpleGallery.setSpacing(15)Ā Ā // set 0.25 value for the alpha of unselected items of Gallery// xml equivalent -> android:unselectedAlpha="0.25"simpleGallery.setUnselectedAlpha(0.25f) |
Attributes of GalleryView
|
Attributes |
Description |
|---|---|
| id | To uniquely identify a Gallery |
| padding | To set the padding from the left, right, and the top or bottom side of a Gallery. |
| paddingRight | To set the padding from the right side of a Gallery. |
| paddingLeft | To set the padding from the left side of a Gallery. |
| paddingTop | To set the padding from the top side of a Gallery. |
| paddingBottom | To set the padding from the bottom side of a Gallery. |
| padding | To set the padding from all the sides of a Gallery. |
| background |
To set the background of a Gallery. For background, either we can set colors (using colors.xml) or images that are kept under the drawable folder Via java/kotlin code also, we can set the background color in the below way simpleGallery.setBackgroundColor(Color.GFGGreencolor); // set the desired color |
| animationDuration |
To set the duration for how long a transition animation should run (in milliseconds) Via java/kotlin, simpleGallery.setAnimationDuration(<No of milliseconds>);Ā |
| spacing |
To set the spacing between items in a Gallery. Via java/kotlin, simpleGallery.setSpacing(10);Ā // We can set the spacing between items as per our requirement |
| unselectedAlpha |
To set the alpha on the items that are not selected. Via java/kotlin, simpleGallery.setUnselectedAlpha(0.25f) |
Example
A sample GIF is given below to get an idea about what we are going to do in this article.Ā We are going toĀ implement this project using both Java and Kotlin Programming Language for Android.
Step by Step Implementation
Step 1: Create a New Project in Android Studio
To create a new project in Android Studio please refer toĀ How to Create/Start a New Project in Android Studio. The code for that has been given in both Java and Kotlin Programming Language for Android.
Step 2: Working with the XML Files
Next, go to the activity_main.xml file, which represents the UI of the project. Below is the code for theĀ activity_main.xml file. Comments are added inside the code to understand the code in more detail.
XML
<?xml version="1.0" encoding="utf-8"?><LinearLayoutĀ Ā Ā Ā android:layout_width="match_parent"Ā Ā Ā Ā android:layout_height="match_parent"Ā Ā Ā Ā android:background="#fff"Ā Ā Ā Ā android:orientation="vertical"Ā Ā Ā Ā tools:context=".MainActivity">Ā Ā Ā Ā Ā Ā <!-- create a ImageView and Gallery -->Ā Ā Ā Ā <ImageViewĀ Ā Ā Ā Ā Ā Ā Ā android:id="@+id/imageView"Ā Ā Ā Ā Ā Ā Ā Ā android:layout_width="fill_parent"Ā Ā Ā Ā Ā Ā Ā Ā android:layout_height="200dp"Ā Ā Ā Ā Ā Ā Ā Ā android:scaleType="fitXY" />Ā Ā Ā Ā Ā Ā <!-- By using android:spacing we can give spacing between imagesĀ Ā Ā Ā Ā Ā Ā Ā Ā android:animationDuration="3000" -> for animation running -->Ā Ā Ā Ā <GalleryĀ Ā Ā Ā Ā Ā Ā Ā android:id="@+id/languagesGallery"Ā Ā Ā Ā Ā Ā Ā Ā android:layout_width="match_parent"Ā Ā Ā Ā Ā Ā Ā Ā android:layout_height="wrap_content"Ā Ā Ā Ā Ā Ā Ā Ā android:layout_marginTop="100dp"Ā Ā Ā Ā Ā Ā Ā Ā android:animationDuration="2000"Ā Ā Ā Ā Ā Ā Ā Ā android:padding="10dp"Ā Ā Ā Ā Ā Ā Ā Ā android:spacing="5dp"Ā Ā Ā Ā Ā Ā Ā Ā android:unselectedAlpha="50" /></LinearLayout> |
Step 3: Working with the MainActivity File
Go to the MainActivity File and refer to the following code. Below is the code for the MainActivity File. Comments are added inside the code to understand the code in more detail.
Java
import android.os.Bundle;import android.widget.Gallery;import android.widget.ImageView;import androidx.appcompat.app.AppCompatActivity;Ā Ā public class MainActivity extends AppCompatActivity {Ā Ā Ā Ā Ā Ā Gallery simpleGallery;Ā Ā Ā Ā Ā Ā // CustomizedGalleryAdapter is a java/kotlinĀ Ā Ā Ā Ā // class which extends BaseAdapterĀ Ā Ā Ā // and implement the override methods.Ā Ā Ā Ā CustomizedGalleryAdapter customGalleryAdapter;Ā Ā Ā Ā ImageView selectedImageView;Ā Ā Ā Ā Ā Ā // To show the selected language, we need thisĀ Ā Ā Ā // array of images, here taken 10 different kind ofĀ Ā Ā Ā Ā // most popular programming languagesĀ Ā Ā Ā int[] images = {Ā Ā Ā Ā Ā Ā Ā Ā R.drawable.python,Ā Ā Ā Ā Ā Ā Ā Ā R.drawable.javascript,Ā Ā Ā Ā Ā Ā Ā Ā R.drawable.java,Ā Ā Ā Ā Ā Ā Ā Ā R.drawable.python,Ā Ā Ā Ā Ā Ā Ā Ā R.drawable.r,Ā Ā Ā Ā Ā Ā Ā Ā R.drawable.python,Ā Ā Ā Ā Ā Ā Ā Ā R.drawable.javascript,Ā Ā Ā Ā Ā Ā Ā Ā R.drawable.python,Ā Ā Ā Ā Ā Ā Ā Ā R.drawable.r,Ā Ā Ā Ā Ā Ā Ā Ā R.drawable.javascriptĀ Ā Ā Ā };Ā Ā Ā Ā Ā Ā @OverrideĀ Ā Ā Ā protected void onCreate(Bundle savedInstanceState) {Ā Ā Ā Ā Ā Ā Ā Ā super.onCreate(savedInstanceState);Ā Ā Ā Ā Ā Ā Ā Ā setContentView(R.layout.activity_main);Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā // Our layout is activity_mainĀ Ā Ā Ā Ā Ā Ā Ā // get the reference of Gallery. As we are showingĀ Ā Ā Ā Ā Ā Ā Ā Ā // languages it is named as languagesGalleryĀ Ā Ā Ā Ā Ā Ā Ā // meaningful names will be good for easier understandingĀ Ā Ā Ā Ā Ā Ā Ā simpleGallery = (Gallery) findViewById(R.id.languagesGallery);Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā // get the reference of ImageViewĀ Ā Ā Ā Ā Ā Ā Ā selectedImageView = (ImageView) findViewById(R.id.imageView);Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā // initialize the adapterĀ Ā Ā Ā Ā Ā Ā Ā customGalleryAdapter = new CustomizedGalleryAdapter(getApplicationContext(), images);Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā // set the adapter for galleryĀ Ā Ā Ā Ā Ā Ā Ā simpleGallery.setAdapter(customGalleryAdapter);Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā // Let us do item click of gallery and image can be identified by its positionĀ Ā Ā Ā Ā Ā Ā Ā simpleGallery.setOnItemClickListener((parent, view, position, id) -> {Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā // Whichever image is clicked, that is set in theĀ selectedImageViewĀ Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā // position will indicate the location of imageĀ Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā selectedImageView.setImageResource(images[position]);Ā Ā Ā Ā Ā Ā Ā Ā });Ā Ā Ā Ā }} |
Kotlin
import android.os.Bundleimport android.view.Viewimport android.widget.Galleryimport android.widget.ImageViewimport androidx.appcompat.app.AppCompatActivityĀ Ā class MainActivity : AppCompatActivity() {Ā Ā Ā Ā Ā Ā private lateinit var simpleGallery: GalleryĀ Ā Ā Ā Ā Ā // CustomizedGalleryAdapter is a java class which extends BaseAdapterĀ Ā Ā Ā // and implement the override methods.Ā Ā Ā Ā private lateinit var customGalleryAdapter: CustomizedGalleryAdapterĀ Ā Ā Ā private lateinit var selectedImageView: ImageViewĀ Ā Ā Ā Ā Ā // To show the selected language, we need thisĀ Ā Ā Ā // array of images, here taken 10 different kind ofĀ Ā Ā Ā Ā // most popular programming languagesĀ Ā Ā Ā private var images = intArrayOf(Ā Ā Ā Ā Ā Ā Ā Ā R.drawable.python,Ā Ā Ā Ā Ā Ā Ā Ā R.drawable.javascript,Ā Ā Ā Ā Ā Ā Ā Ā R.drawable.java,Ā Ā Ā Ā Ā Ā Ā Ā R.drawable.python,Ā Ā Ā Ā Ā Ā Ā Ā R.drawable.r,Ā Ā Ā Ā Ā Ā Ā Ā R.drawable.python,Ā Ā Ā Ā Ā Ā Ā Ā R.drawable.javascript,Ā Ā Ā Ā Ā Ā Ā Ā R.drawable.python,Ā Ā Ā Ā Ā Ā Ā Ā R.drawable.r,Ā Ā Ā Ā Ā Ā Ā Ā R.drawable.javascriptĀ Ā Ā Ā )Ā Ā Ā Ā Ā Ā override fun onCreate(savedInstanceState: Bundle?) {Ā Ā Ā Ā Ā Ā Ā Ā super.onCreate(savedInstanceState)Ā Ā Ā Ā Ā Ā Ā Ā setContentView(R.layout.activity_main)Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā // Our layout is activity_mainĀ Ā Ā Ā Ā Ā Ā Ā // get the reference of Gallery. As we are showingĀ Ā Ā Ā Ā Ā Ā Ā Ā // languages it is named as languagesGalleryĀ Ā Ā Ā Ā Ā Ā Ā // meaningful names will be good for easier understandingĀ Ā Ā Ā Ā Ā Ā Ā simpleGallery = findViewById<View>(R.id.languagesGallery) as GalleryĀ Ā Ā Ā Ā Ā Ā Ā Ā Ā // get the reference of ImageViewĀ Ā Ā Ā Ā Ā Ā Ā selectedImageView = findViewById<View>(R.id.imageView) as ImageViewĀ Ā Ā Ā Ā Ā Ā Ā Ā Ā // initialize the adapterĀ Ā Ā Ā Ā Ā Ā Ā customGalleryAdapter = CustomizedGalleryAdapter(applicationContext, images)Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā // set the adapter for galleryĀ Ā Ā Ā Ā Ā Ā Ā simpleGallery.adapter = customGalleryAdapterĀ Ā Ā Ā Ā Ā Ā Ā Ā Ā // Let us do item click of gallery and image can be identified by its positionĀ Ā Ā Ā Ā Ā Ā Ā simpleGallery.setOnItemClickListener { parent, view, position, id ->Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā // Whichever image is clicked, that is set in theĀ selectedImageViewĀ Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā // position will indicate the location of imageĀ Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā selectedImageView.setImageResource(images[position])Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā }Ā Ā Ā Ā }} |
Step 4: Create a New Class CustomizedGalleryAdapter
This can be in the same location as MainActivity for easier reference. In this step, we create a CustomizedGalleryAdapter and it is extended from BaseAdapter and implements the overridden methods. Inside the code, an ImageView is created at run time in the getView method and finally set the image in the ImageView.
Java
import android.content.Context;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.Gallery;import android.widget.ImageView;Ā Ā public class CustomizedGalleryAdapter extends BaseAdapter {Ā Ā Ā Ā Ā Ā private final Context context;Ā Ā Ā Ā private final int[] images;Ā Ā Ā Ā Ā Ā public CustomizedGalleryAdapter(Context c, int[] images) {Ā Ā Ā Ā Ā Ā Ā Ā context = c;Ā Ā Ā Ā Ā Ā Ā Ā this.images = images;Ā Ā Ā Ā }Ā Ā Ā Ā Ā Ā // returns the number of images, in our example it is 10Ā Ā Ā Ā public int getCount() {Ā Ā Ā Ā Ā Ā Ā Ā return images.length;Ā Ā Ā Ā }Ā Ā Ā Ā Ā Ā // returns the ItemĀ of an item, i.e. for our example we can get the imageĀ Ā Ā Ā public Object getItem(int position) {Ā Ā Ā Ā Ā Ā Ā Ā return position;Ā Ā Ā Ā }Ā Ā Ā Ā Ā Ā // returns the ID of an itemĀ Ā Ā Ā public long getItemId(int position) {Ā Ā Ā Ā Ā Ā Ā Ā return position;Ā Ā Ā Ā }Ā Ā Ā Ā Ā Ā // returns an ImageView viewĀ Ā Ā Ā public View getView(int position, View convertView, ViewGroup parent) {Ā Ā Ā Ā Ā Ā Ā Ā // position argument will indicate the location of imageĀ Ā Ā Ā Ā Ā Ā Ā // create a ImageView programmaticallyĀ Ā Ā Ā Ā Ā Ā Ā ImageView imageView = new ImageView(context);Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā // set image in ImageViewĀ Ā Ā Ā Ā Ā Ā Ā imageView.setImageResource(images[position]);Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā // set ImageView paramĀ Ā Ā Ā Ā Ā Ā Ā imageView.setLayoutParams(new Gallery.LayoutParams(200, 200));Ā Ā Ā Ā Ā Ā Ā Ā return imageView;Ā Ā Ā Ā }} |
Kotlin
import android.content.Contextimport android.view.Viewimport android.view.ViewGroupimport android.widget.BaseAdapterimport android.widget.Galleryimport android.widget.ImageViewĀ Ā class CustomizedGalleryAdapter(private val context: Context, private val images: IntArray) : BaseAdapter() {Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā // returns the number of images, in our example it is 10Ā Ā Ā Ā override fun getCount(): Int {Ā Ā Ā Ā Ā Ā Ā Ā return images.sizeĀ Ā Ā Ā }Ā Ā Ā Ā Ā Ā // returns the ItemĀ of an item, i.e. for our example we can get the imageĀ Ā Ā Ā override fun getItem(position: Int): Any {Ā Ā Ā Ā Ā Ā Ā Ā return positionĀ Ā Ā Ā }Ā Ā Ā Ā Ā Ā // returns the ID of an itemĀ Ā Ā Ā override fun getItemId(position: Int): Long {Ā Ā Ā Ā Ā Ā Ā Ā return position.toLong()Ā Ā Ā Ā }Ā Ā Ā Ā Ā Ā // returns an ImageView viewĀ Ā Ā Ā override fun getView(position: Int, convertView: View, parent: ViewGroup): View {Ā Ā Ā Ā Ā Ā Ā Ā // position argument will indicate the location of imageĀ Ā Ā Ā Ā Ā Ā Ā // create a ImageView programmaticallyĀ Ā Ā Ā Ā Ā Ā Ā val imageView = ImageView(context)Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā // set image in ImageViewĀ Ā Ā Ā Ā Ā Ā Ā imageView.setImageResource(images[position])Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā // set ImageView paramĀ Ā Ā Ā Ā Ā Ā Ā imageView.layoutParams = Gallery.LayoutParams(200, 200)Ā Ā Ā Ā Ā Ā Ā Ā return imageViewĀ Ā Ā Ā }} |
Output:
On running the android code in android studio, we can able to get the output as shown in the attached video. This is a useful feature that is used across many android apps. We need to consider the important points mentioned earlier. i.e. horizontally scrolling widgets are HorizontalScrollView and ViewPager from the support library are available and hence for the latest devices prefer them.
