Cara Membuat Tampilan Galeri di Android Menggunakan Widget Gallery

Tutorial Cara membuat Tampilan Galeri di Android Menggunakan Widget Gallery

Hai semuanya, bagaimana kabar kalian hari ini? Saya harap kalian semua dalam keadaan yang baik-baik saja. Pada kesempatan kali ini, saya akan membagikan tutorial kepada kalian tentang cara membuat tampilan galeri di aplikasi android menggunakan widget gallery yang telah disediakan oleh Android Studio.

Gallery View digunakan untuk menampilkan list beberapa gambar ke dalam aplikasi android pada satu layar dengan tampilan horizontal yang dapat di scroll sehingga setiap kali user mengklik gambar apa pun, secara otomatis akan mendapatkan ukuran besar dalam tampilan gambar yang diberikan.

Jadi, dalam tutorial ini kalian akan belajar langkah demi langkah untuk membuat tampilan galeri menggunakan widget gallery pada aplikasi android secara mudah dan lengkap.

- Advertisement -

Tutorial Cara Membuat Tampilan Galeri Menggunakan Widget Gallery Pada Android Studio

Buatlah projek android studio baru dengan informasi sebagai berikut:

Application Name:Gallery App
Package Name:com.androidrion.galleryapp
Language:Java
Minimum SDK:API 15: Android 4.0.3 (IceCreamSandwich)

Daftar file xml yang digunakan dalam projek ini:

  • activity_main.xml

Daftar file java yang digunakan dalam projek ini:

  • MainActivity.java

Dibawh ini adalah langkah-langkah dalam pembuatan aplikasi Gallery App.

Drawable File

Sudah sangat jelas bahwa kita memerlukan file drawable untuk ditampilkan pada aplikasi. Dalam tutorial ini, saya menggunakan poster film. Kalian bisa menggunakan gambar lain atau kalian bisa mengikuti seperti yang saya lakukan. Download poster gambar dibawah ini dan simpan dengan nama poster1 hingga poster7

Setelah kalian simpan pada komputer kalian, sekarang pindahkan gambar tersebut ke dalam folder drawable pada projek android studio kalian. Maka projek android studio kalian akan terlihat seperti pada gambar dibawah ini.

XML Layout File

Buka file activity_main.xml dalam folder layout pada aplikasi android studio kalian. Agar terlihat rapi, ganti layout default menjadi RelativeLayout. Lalu tambahkan widget Gallery dan ImageSwitcher di dalamnya. Berikut ini adalah kode lengkap untuk file activity_main.xml

app/res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageSwitcher
        android:id="@+id/imageSwitcher"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_above="@id/gallery"
        android:layout_margin="16dp" />

    <Gallery
        android:id="@+id/gallery"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="16dp" />

</RelativeLayout

Java Activity File

Pada projek android studio kalian, buka file MainActivity dalam folder java. Tambahkan kode dibawah ini untuk membuat widget Gallery yang telah kita buat pada file layout bisa menampilkan gambar yang telah kita unduh sebelumnya. Berikut ini adalah kode lengkap untuk file MainActivity.java

app/java/com.androidrion.galleryapp/MainActivity.java

package com.androidrion.galleryapp;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AnimationUtils;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.ViewSwitcher;

public class MainActivity extends AppCompatActivity implements ViewSwitcher.ViewFactory {

    Gallery gallery;
    ImageSwitcher imageSwitcher;
    Context context;
    int imageItem;
    Integer[] poster = {
            R.drawable.poster1, R.drawable.poster2, R.drawable.poster3, R.drawable.poster4,
            R.drawable.poster5, R.drawable.poster6, R.drawable.poster7
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        context = MainActivity.this;

        gallery = findViewById(R.id.gallery);

        imageSwitcher = findViewById(R.id.imageSwitcher);

        imageSwitcher.setFactory(MainActivity.this);
        imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(MainActivity.this, android.R.anim.fade_in));
        imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(MainActivity.this, android.R.anim.fade_out));
        imageSwitcher.setAlpha(Float.parseFloat("50.0"));

        gallery.setAdapter(new ImageAdapter(this));

        gallery.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                imageItem = position;
                imageSwitcher.setImageResource(poster[position]);
            }
        });
    }

    private class ImageAdapter extends BaseAdapter {
        Context context;

        ImageAdapter(Context context) {
            this.context = context;
        }

        public int getCount() {
            return poster.length;
        }

        public Object getItem(int position) {
            return poster[position];
        }

        public long getItemId(int position) {
            return position;
        }

        public View getView(int position, View convertView, ViewGroup parent) {
            ImageView imageView = new ImageView(this.context);
            imageView.setImageResource(poster[position]);
            imageView.setLayoutParams(new Gallery.LayoutParams(200, 150));

            return imageView;
        }
    }

    public View makeView() {
        ImageView imageView = new ImageView(context);
        imageView.setImageResource(poster[imageItem]);
        return imageView;
    }

}

Run ‘app’

Sekarang jalankan projek android studio kalian. Pada tampilan awal aplikasi, kalian bisa melihat poster gambar yang berukuran besar di tengah aplikasi dan poster yang berukuran kecil di bawah aplikasi. Jika kalian mengklik poster lain yang ukuran kecil maka, poster ukuran besar akan berganti sesuai dengan poster yang berukuran kecil. Jika kode diatas tidak terjadi masalah, maka aplikasi akan terlihat seperti pada gambar dibawah ini.

Tutorial Video

AKHIR KATA

Itulah tadi tutorial cara menggunakan widget gallery di android studio. Tutorial diatas lumayan mudah untuk dikerjakan karena kita hanya memerlukan satu file java untuk membuat tampilan galeri di aplikasi android.

Jika kalian mengalami kendala saat melakukan tutorial di atas, silahkan komentar di bawah artikel ini. Jangan lupa untuk like dan subscribe Channel YouTube Android Rion. Semoga artikel ini membantu kalian. Terima Kasih.

- Advertisement -

Get real time updates directly on you device, subscribe now.

You might also like

- Advertisement -

Leave A Reply

Your email address will not be published.