Tutorial Android Membuat Gallery Gambar Buah

Jumpa lagi dengan Agus Haryanto dalam seri tutorial android. Pada tutorial yang lalu, kita telah membahas tentang bagaimana cara memainkan file suara. Dan disana kita diberi tantangan untuk mengembangkan aplikasi tersebut dengan menambahkan gambar / picture.

Sebetulnya dalam http://developer.android.com dan http://mobiforge.com sudah ada tutorial, tetapi bagi yang baru mendalami dunia programming mungkin akan ada yang mengalami kesulitan untuk memahami tutorialnya. Untuk itu saya akan berusaha membuat tutorial menampilkan gambar diandroid yang mudah dipahami dan menarik.

Gambar dalam aplikasi memegang peranan penting. coba and bayangkan kalau windows anda isinya hanya button dan teks tanpa gambar, tentunya akan tidak menarik. Bagaimana juga apabila di HP anda menu-menunya hanya  teks ?. Gambar juga membantu pengguna memahmi fungsi dari aplikasi.

Penasaran ingin tahu menampilkan gambar diandroid ? Mari kita buat bersama-sama

Galery Buah-buahan yang tentu saja isinya adalah gambar buah-buahan. Untuk itu kita harus siapkan gambar buah-buahan yang akan kita gunakan.

Sekarang mari kita buat aplikasinya, seperti biasa buka senjata kita yaitu eclipse. Lalu ikuti langkah-langkah dibawha ini:

1. Buat Project dengan Nama GalleryBuah

2. setelah project tercreate maka secara otomatis android membentuk 3 file yaitu :

  • main.xml
  • string.xml
  • ShowGallery.java

3. Edit main.xml lalu isikan kode berikut

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Gambar Buah-buahan" />

    <Gallery
        android:id="@+id/gallery1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />
    <ImageView
        android:id="@+id/image1"
        android:layout_width="320px"
        android:layout_height="250px"
        android:scaleType="fitXY" />

</LinearLayout>

Disini terlihat 2 tag baru yaitu <Gallery> untuk menampilkan Galleri dan <ImageView> untuk menampilkan gambar.

5. pada directory values, buat file attrs.xml yang berfungsi sebagi referensi style gallery

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="Gallery1">
        <attr name="android:galleryItemBackground" />
    </declare-styleable>
</resources>

5. pada directory res buat directory drawable lalu letakkan file-fle gambar buah-buahan pada directory tersebut

Disini sudah terlihat  ada 8 file gambar buah diluar file icon.png

6. Sekarang mari kita edit otak dari aplikasi kita yaitu ShowGallery.java

package com.agus.gallery;

import android.app.Activity;
import android.content.Context;
import android.content.res.TypedArray;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;
import android.widget.Toast;
import android.widget.AdapterView.OnItemClickListener;

public class ShowGallery extends Activity
{
    //---Daftar Gambar yang ingin Ditampilkan---
    Integer[] list_image = {
            R.drawable.apple,
            R.drawable.banana,
            R.drawable.cherry,
            R.drawable.mango,
            R.drawable.orange,
            R.drawable.pear,
            R.drawable.watermelon
    };
    String[] fruit_name = {"Indonesia: Apel \nInggris: Apple","Indonesia:Pisang \nInggris:Banana","Indonesia: Ceri \nInggris: Cherry","Indonesia: Mangga \nInggris: Mango","Indonesia: Mangga \nInggris: Orange","Indonesia: Pir \nInggris: Pear","Indonesia: Semangka \nInggris: Water Melon"};

    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        Gallery gallery = (Gallery) findViewById(R.id.gallery1);

        gallery.setAdapter(new ImageAdapter(this));
        gallery.setOnItemClickListener(new OnItemClickListener()
        {
            public void onItemClick(AdapterView parent,
            View v, int position, long id)
            {
                Toast.makeText(getBaseContext(),
                       fruit_name[position],
                        Toast.LENGTH_SHORT).show();

            }
        });
    }

    public class ImageAdapter extends BaseAdapter
    {
        private Context context;
        private int itemBackground;

        public ImageAdapter(Context c)
        {
            context = c;
            //---setting the style---
            TypedArray a = obtainStyledAttributes(R.styleable.Gallery1);
            itemBackground = a.getResourceId(R.styleable.Gallery1_android_galleryItemBackground, 0);
            a.recycle();
        }

        //---returns the number of images---
        public int getCount() {
            return list_image.length;
        }

        //---returns the ID of an item---
        public Object getItem(int position) {
            return position;
        }

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

        //---returns an ImageView view---
        public View getView(int position, View convertView, ViewGroup parent) {
            ImageView imageView = new ImageView(context);
            imageView.setImageResource(list_image[position]);
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);
            imageView.setLayoutParams(new Gallery.LayoutParams(150, 150));
            imageView.setBackgroundResource(itemBackground);
            return imageView;
        }
    }
}

Perhatikan pada code diatas  terdapat inner class dengan nama ImageAdapter disinilah yang berfungsi

menampilkan gambar.
7. Edit AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.agus.gallery"
      android:versionCode="1"
      android:versionName="1.0">
    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".ShowGallery"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>
    <uses-sdk android:minSdkVersion="7" />

</manifest>

8. Seluruh code sudah selesai dikerjakan selanjutnya kita jalankan projectnya. Hasilnya tampilan pertamanya

9. Sentuh gambar buah pisang

Muncul Pesan Nama Buah Pisang dalam bahasa Inggris dan Indonesia.

Wow ternyata kita mampu membuat Gallery buah yang bisa digunakan untuk edukasi pengenalan bahasa inggris untuk anak-anak.

Dan dengan ini anak-anak akan lebih cepat mengerti, Wah lebih bagus lagi lengkapilah dengan suara.

Tutorial Suara sudah, tutorial gambar sudah, Harusnya sudah bisa membuat aplikasi ditantangan Tutorial Android Play Sound di Android

Jika baru mulai belajar android dianjurkan untuk membaca tutorial

Aplikasi Android Sederhana - Menghitung Luas Persegi Panjang

Semoga Bermanfaat

Agus Haryanto

sumber:

http://mobiforge.com

http: //developer.android.com

55 comments to Tutorial Android Membuat Gallery Gambar Buah

  • Dieni

    Makasih infonya ya mas…

  • agungp

    kalo mau masukin gambar bergerak gimana??

  • mas klo saya mau buat merubah gambar misalnya pisang jadi Hidrogen apa yang harus dirubah..

    mohon totorial nya dunk..
    soalnya saya mw buat aplikasi nama nama unsur kimia..

    thx be4. .

  • Agus Haryanto

    yah tinggal disiapkan gambar hidrogennya lalu letakkan didrectory drawable.
    lalu sesusaikan perubahan dijavanya

  • akhirnya yang kutunggu-tunggu bab menampilkan gambar diposting juga makasiih ya mas? tetap semangat dalam membagi ilmunya dengan kita yang baru-baru

  • ocky08

    mas ad tutorial pembuatan Game gk?? bwt android!!
    pngen bgt nih bikin game bwatan sendiri apalagi game android kn!!

    thx be4

  • herpeb

    mas ada tutorial mengenai cara menampilkan video ga ?
    terima kasih…

  • bie

    mas ada tutorial pembuatan converter satuan jarak misalnya dari km ke m dan berat misalnya dari kg ke gr,tp dibikin menu list gitu.klo tau tolong bantuannya ya,soalnya lagi da tugas nih..
    terima kasih..

  • rizki

    permisi pak..
    saya mau nanya nih kalo misalnya imagenya di taro di bawah bisa nggak make absolute layout??
    trus pak pas kalo misalnya imagenya kita pilih,trus t image jadi agak besar gitu bisa nggak yaa???
    soalnya saya mau buat di atasnya keterangan gtu pak make textview,,baru di bawahnya pake image kya gambar buah2an gtu…hehe
    terima kasih pak agus

  • ican

    mas tanya nih, itu gambarnya cuma bs .png doang ? apa bisa smua format gambar ? kl bisa gmn crna mas ? thx b4

  • mas mau tanya kalau mau menambah menu pilihan/opsi gimana ya salam http://www.ruangilmu17.wordpress.com

  • andika

    kebetulan saya pemula di bidang android, ini tutorial yang bagus, terus berkarya pak

  • toms

    mas mau tanya kalau salahnya disini kenapa ya ??

    TypedArray a = obtainStyledAttributes(R.styleable.Gallery1);
    itemBackground = a.getResourceId(R.styleable.Gallery1_android_galleryItemBackground, 0);
    a.recycle();

  • Agus Haryanto

    @toms, apakah semua codenya dah selesai ditulis ?

  • toms

    udah mas…tp error nya seperti itu ???

  • rufus

    mas kalau mau ditambahin pake menu gimana bisa ga? saya susah2 buatnya msih ada yg errorr di R.styleable.gallery1

  • toms

    ia, om klo button gimana ? nanti Button nya manggil ShowGallery.java

  • dhita

    pak, mau nanya dong, kalo mau browse gambar gitu gimana ya ? jadi saya buat aplikasi diari gitu, saya mau menambahkan input gambar gitu, filenya ntar di browse ke sd card gitu..ntar bisa di save..kira2 kodingnya gimana ya pak?? mohon dibantuuu >_<'' untuk penulisan saya ni.

  • mas heru ini udah master yah ..!! bagus2 aplikasinya dan pemaparan tutornya jg jelas hee..makasih ..!! oh..ya email mas heru ternyata ada yah di samping..hee.

  • newDroids

    mas,, kalau gambarnya itu gak dari drawable,, tp dari internet gmana mas?

  • ada g contoh buat google map

  • Mas ko saya ada eror d file PNG’..kenapa y?

  • Hanan

    OK mas… keren saya udah coba,

    mas jika saya cklik gambar buahnya bisa pindah ke Activity lain bagaimana mas??

    tlg bantuannya….

  • ren

    mas mau tanya kalo mau merubah syle dari gallery-nya sendiri itu gimana y?
    maksudnya memodifikasi file attr.xml ?
    value2 apa saja yang bisa digunakan…

  • rajiansyah

    terima kasih banyak ilmunya mas..

    saya mau tanya nie misalnya pada saat kita memilih gambar ntu ada suara2/ bunyi2 /// audio gtoe gmn caranya

  • Agus Haryanto

    @rajiansyah, harusnya tinggal pasang event onclicklistenner pada gambarnya nah pada saat diklik panggil method untuk memainkan suara.

  • arif

    mas bro mau tanyak….
    kalau tab menu didalamnya ada gallery buah….gmn caranya mas bro ????
    mohon bantuannya….

  • pak, kok saya coba styleable nya error ya..
    [URL=http://imageshack.us/photo/my-images/100/unledfu.png/][IMG]http://img100.imageshack.us/img100/4572/unledfu.png[/IMG][/URL]
    padahal attrs.xmlnya sudah saya buat..

  • faqih

    pak kalau ngambil gambarnya lewat mysql gimana? saya udah gabungin dengan materi bapak yang koneksi dengan mysql dan servernya php tapi saya gagal terus.. ohya pak pas arraynya saya TOast itu kok hasilnya bukan nama gambarnya tapi kayae diconvert jadi angka2 gitu.. kenapa yah pak?

  • adi

    mas, tutornya keren bgt, aku dah ikutin dari membuat luas persegi panjang sampe sini nih..
    tapi ada pertanyaan yang mengganjal di hati nih mas..

    Kapan sih R.java di regenerate? (saat kita lagi ngapain maksudnya aku.. ngesavekah? compilekah?)
    Terus, nilai hexa konstan yang tertulis di dalam class tersebut nunjukin apa? (sebenernya ga perlu diubah sih.. cuma mau tau aja saya ^^v)

    terima kasih mas sebelumnya..
    keep code hard, play harder!!! hoho..

  • om agus.. mnta tutorial bikn aplikasi rental mobil dong pake android bwat tugas nieee…
    di tunggu postinganY ommm…

  • fauziah

    mas,,cara print android pke printer share gmn??
    tlog kasi tw source codenya ya…
    makasi sblmnya

  • wibi

    mas agus, kalo kita mau menambahkan suara berarti kita harus menambahkan file javanya yaa

  • tutorial yang bagus banget buat pemula kayak saya mas… ijin bookmark ya mas… salam kenal

  • rizki

    mas agus jika ingin memasukkan gambar yang dapat di jadikan button bagaiana ya??misalnya saya memeasukkan peta indonesia,dan apabila pulau sumatra di klik maka yg akan tampil keseluruhan adalah peta sumatra, yang nantinya di pulau sumatra tersebut terdapat beberapa titik yang mewakili tiap provinsi, dan apabila titik tersebut di klik maka akan muncul informasi berupa identitas provinsi tersebut.apakah kodingan nya akan sama seperti menampilkan gambar seperti tutorial membuat galery buah??

  • windy

    mas.. kalo mau ngerandom imagenya gimana ya?? tapi bukan di galeri, taronya di imageview.

  • Irawan

    Mas….,,, kalo ingin menambhakan suara yang memiliki bunyi “apel” pada saat di klik gambar apel gimana ya mas sintaxnya…???
    Misal, kita klik gambar apel disitu akan terdengar suara “apel”, pisang maka akan terdengar suara “banana”.
    Untuk file sudah di convert tinggal sintaxnya mas saya yang belum tahu.
    makasih ya mas..!!!

  • wisnu

    kalo ditambahin suara bisa kga mas?
    Mohon bantuannya mas.

  • Idang

    mas, kok di saya ada warning nya ya dibagian yg ini mas :
    [SPOILER=warning][img]http://cdn-u.kaskus.us/72/wmiii1si.jpg[/img][/SPOILER]

  • reza

    mas itu kan yang mas buat posisi awalnya ditengah, kalo saya mau buat posisi awal dikiri gmn ya mas ? terimakasih

  • elisa

    di showgallery.java :
    byk yg error..

    Integer[] list_image = {
    R.drawable.strawberry,
    R.drawable.manggo,
    R.drawable.avocado
    };

    pak kok ini kenapa error ya? ada yg slh ya?

    public void onItemClick(AdapterView parent,

    bagian ini jg slh ya..

    //—setting the style—
    TypedArray a = obtainStyledAttributes(R.styleable.gallery1);
    itemBackground = a.getResourceId(R.styleable.gallery1_android_galleryitembackground, 0);
    a.recycle();
    }

    bagian ini jg error…

    di gallerybuah manifest..
    ini knp slh ya pak?

    di main.xml jg ada yg slh :

    padahal udah sama…. tolong dijwb pak

  • Hana

    Om agus… nanya… list galeri nya udah agak aku ubah.. cuman mau aku tambahin koding zoom nya.. jadi gambarnya pas di klik bukan cuma geser kanan kiri melainkan bisa di gedein …. itu gimana ya..?
    soalnya masi ga jadi

  • mau nanya nih gan,
    kalo misalnya ada button next dan prev nya gimana yah?

  • Fachrul amali

    Om saya mau tanya , ko ada bacaan kaya gini ya .. apa ada yang salah di showgallery nya? file foto nya ga kebaca atau gimana ya mohon bantuanya urgent nih makasih hehe

    nih yg eror nya : public class MainActivity extends Activity {

    //—Daftar Gambar yang ingin Ditampilkan—
    Integer[] list_image = {
    R.drawable.abimanyu2,

    };
    String[] nama_wayang = {“Abimanyu2 \nKeterangan: Mahabarata”};

    nah pas di save muncul bacaan seperti ini :
    [2012-12-28 11:10:09 – GaleryWayang] res\drawable\Abimanyu2.png: Invalid file name: must contain only [a-z0-9_.]

  • Agus Haryanto

    @Fachrul amali, kesalahan ada pada nama file Abimanyu2.png kerena namafile yang dibolehkan hanya [a-z0-9_.]
    coba ganti jadi abimanyu.png

  • alam

    mas gimana untuk menggabungkan galeri view dengan tutorial ini, jadi klau gambar di klik, selain toast yang muncul juga di iringi dengan suara….

  • asim

    mas gimana luw mw membuat tampilan menunya??

  • ryan

    Mas….,,, kalo ingin menambhakan suara yang memiliki bunyi “apel” pada saat di klik gambar apel gimana ya mas sintaxnya…???
    Misal, kita klik gambar apel disitu akan terdengar suara “apel”, pisang maka akan terdengar suara “banana”.
    Untuk file sudah di convert tinggal sintaxnya mas saya yang belum tahu.
    makasih ya mas..!!!

  • gmn y mas buat aplikasi english children dengan menamnpilkan gambar dan suara..
    ?
    misal kuda=horse ada suara engglis-a dan indonesia-a
    mohon bntuan-a y mas

  • kukuh

    tanks mas, berhasil tutorialnya

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>