In this tutorial, we will learn how quickly we can build a simple image gallery app in Android using an Adapter. We’ll be making an image gallery app, which is fairly common in Android app development. The images will be loaded in full-size mode when you tap them.
In Android, Gallery is a view that can display items in a center-blocked, horizontal scrolling list, allowing the user to select a view, which is then displayed in the center of the Horizontal list. Using the Adapter, you can add an ‘n’ number of items. The adapter links the UI component and the data source (It can be an array of items ). In the example, the items specified in the adapter will be displayed in the gallery.
Contents
Output of Image Gallery App:
Image Gallery XML Code:
<Gallery android:id="@+id/ImageGallery" android:layout_width="match_parent" android:layout_height="wrap_content"/ >
Note: Gallery widget –
In API level 16, the Gallery class was deprecated. This widget is no longer available. HorizontalScrollView and ViewPager from the support library are two more horizontally scrolling widgets.
What is Adapter?
An Adapter object connects an AdapterView to the data set for that view. The Adapter allows you to access the data items. The Adapter is also responsible for generating a View for each item in the data set.
Using the Adapter, you can add an ‘n’ number of items. The adapter links the UI component and the data source (It can be an array of items )
BaseAdapter is a common base class for the general implementation of an Adapter that can be used in ListView, GridView, and other similar views. A custom Adapter for displaying custom list items can be created by extending the Base Adapter.
Methods of Adapter:
| Methods | Description |
|---|---|
| fun getCount() | This method returns the total number of items in a list that will be displayed. It counts the value returned by the array list size() method or the length of an array. |
| fun getItemId(position: Int) | All you need is different IDs for the viewHolders you can simply write override fun getItemId(position: Int): Long = position position is unique for each element. |
| fun getView(position: Int, convertView: View?, parent: ViewGroup) | Each item in the list you pass to your adapter is called by getView(). Obtain a view that shows the data at the specified position in the data set. |
Some Important Attribute of Gallery:
| XML Attribute | Description |
|---|---|
| android:spacing | This method is used to specify the spacing between Gallery items. To adjust ratios for containers, and touch targets, spacing methods such as baseline grids, keylines, padding, and incremental spacing are used. |
| android:animationDuration | When the layout changes, this method is used to specify how long a transition animation should run (in milliseconds). |
| android:unselectedAlpha | This method is used to set the alpha on non-selected items. |
Common Attribute of Gallery:
| XML Attribute | Description |
|---|---|
| android:id | The id attribute is used to uniquely identify a Gallery. |
| android:layout_width | It is used to indicate the element’s size, For each element, it must be specified. The view uses LayoutParams to tell their parents how to arrange them. The specified width and height are used to create a new set of layout parameters. width. int: the width, which can be wrap_content, fill_parent (replaced by match_parent in API Level 8), or a fixed size in pixels. Specifies the view’s basic Width. |
| android:layout_height | It is used to indicate the element’s size, For each element, it must be specified. The view uses LayoutParams to tell their parents how to arrange them. The specified width and height are used to create a new set of layout parameters. Specifies the view’s basic height. |
| android: padding | This attribute is used to specify the padding from the Gallery’s left, right, top, or bottom side. padding-right: This attribute is used to set the padding from the Gallery’s right side. padding-left: This attribute is used to specify the padding from the Gallery’s left side. padding-Top: This attribute is used to specify the padding from the Gallery’s top side. padding-Bottom: This attribute is used to specify the padding from the Gallery’s bottom side. Padding: This attribute is used to set the padding from all of a Gallery’s sides. |
| android:animationDuration | The animation-duration property specifies the duration of the animation cycle. The time is specified in milliseconds and is initially set to ‘0s,’ implying that the animation happens instantly. We can also programmatically set the animation duration by using setAnimationDuration(). When the layout changes, this method is used to specify how long a transition animation should run (in milliseconds). |
| android: spacing | This method is used to specify the spacing between Gallery items. To adjust ratios for containers, and touch targets, spacing methods such as baseline grids, keylines, padding, and incremental spacing are used. |
| android:unselectedAlpha | This method is used to set the alpha on non-selected items. |
| android:background | It must be a floating-point number, such as ‘5.5’ .We can also programmatically change the alpha of items by using setUnselectedAlpha () |
Image Gallery Example:
This example shows how to select an image from an image gallery in an Android app.
Step 1: In Android Studio, go to File->New Project and fill out all of the required details to create a new project.
Step 2: activity_main.xml file contain Gallery and ImagView placed inside a Constraint layout as shown below.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#abcdef"
tools:context=".MainActivity">
<ImageView
android:id="@+id/imageView"
android:layout_width="0dp"
android:layout_height="300dp"
android:scaleType="fitXY"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Gallery
android:id="@+id/GalleryImage"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:animationDuration="1000"
android:padding="10dp"
android:spacing="20dp"
android:unselectedAlpha=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Step 3: Let us now move on to the MainActivity.kt file. In this step, we added the code to initialize ImageView and Gallery. First, we create an array of images Id’s and then tell the adapter to fill in the data in the gallery. We also execute the setOnItemClickListener event, which causes the selectable item to be displayed in the ImageView whenever a user clicks on any Gallery item.
package com.sagar.imagegallery
import android.os.Bundle
import android.widget.AdapterView.OnItemClickListener
import android.widget.Gallery
import android.widget.ImageView
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity() {
var Gallery: Gallery? = null
var images = intArrayOf(
R.drawable.imagethird,
R.drawable.iamgesecond,
R.drawable.imagefirst,
R.drawable.imagefourth,
R.drawable.imagesix,
R.drawable.imagefifth,
R.drawable.imageseven,
R.drawable.imageeight,
R.drawable.imagenine,
R.drawable.imagetwe,
R.drawable.imageten,
R.drawable.imageeleven,
R.drawable.imageseventtt,
R.drawable.imagenineteen,
R.drawable.imageeighteen
)
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
Gallery = findViewById<Gallery>(R.id.GalleryImage)
val imageView = findViewById<ImageView>(R.id.imageView)
val GalleryAdapter = GalleryAdapter(applicationContext, images)
Gallery!!.adapter = GalleryAdapter
Gallery!!.onItemClickListener =
OnItemClickListener { parent, view, position, id ->
imageView!!.setImageResource(images[position])
}
}
}
Step 4: Create a new class GalleryAdapter.kt and add the code given below. In this step, we will create a GalleryAdapter by extending BaseAdapter and implementing the override methods.
package com.sagar.imagegallery
import android.content.Context
import android.view.View
import android.view.ViewGroup
import android.widget.BaseAdapter
import android.widget.Gallery
import android.widget.ImageView
class GalleryAdapter(private val context: Context, private val images: IntArray) :
BaseAdapter() {
override fun getCount(): Int {
return images.size
}
override fun getItem(position: Int): Any {
return position
}
override fun getItemId(position: Int): Long {
return position.toLong()
}
override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
val imageView = ImageView(context)
imageView.setImageResource(images[position])
imageView.layoutParams = Gallery.LayoutParams(400, 400)
return imageView
}
}
- We hope that this guide will assist you in quickly creating a Image Gallery App in android . We concentrated on making a simple image gallery application for this tutorial. However, we haven’t looked into image gestures like zoom and pan. If you have any problems, please post them in the comments section, we will gladly assist you.
RecyclerView GridView Android Example in Kotlin
Bottom Navigation Bar in Android with Example | Kotlin
Search View in Android Example | Android development
The official documentation of Gallery.
