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:
Makasih infonya ya mas…
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. .
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
mas ad tutorial pembuatan Game gk?? bwt android!!
pngen bgt nih bikin game bwatan sendiri apalagi game android kn!!
thx be4
mas ada tutorial mengenai cara menampilkan video ga ?
terima kasih…
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..
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
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
kebetulan saya pemula di bidang android, ini tutorial yang bagus, terus berkarya pak
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();
@toms, apakah semua codenya dah selesai ditulis ?
udah mas…tp error nya seperti itu ???
mas kalau mau ditambahin pake menu gimana bisa ga? saya susah2 buatnya msih ada yg errorr di R.styleable.gallery1
ia, om klo button gimana ? nanti Button nya manggil ShowGallery.java
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.
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?
OK mas… keren saya udah coba,
mas jika saya cklik gambar buahnya bisa pindah ke Activity lain bagaimana mas??
tlg bantuannya….
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…
terima kasih banyak ilmunya mas..
saya mau tanya nie misalnya pada saat kita memilih gambar ntu ada suara2/ bunyi2 /// audio gtoe gmn caranya
@rajiansyah, harusnya tinggal pasang event onclicklistenner pada gambarnya nah pada saat diklik panggil method untuk memainkan suara.
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..
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?
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…
mas,,cara print android pke printer share gmn??
tlog kasi tw source codenya ya…
makasi sblmnya
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
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??
mas.. kalo mau ngerandom imagenya gimana ya?? tapi bukan di galeri, taronya di imageview.
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..!!!
kalo ditambahin suara bisa kga mas?
Mohon bantuannya mas.
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]
mas itu kan yang mas buat posisi awalnya ditengah, kalo saya mau buat posisi awal dikiri gmn ya mas ? terimakasih
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
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?
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_.]
@Fachrul amali, kesalahan ada pada nama file Abimanyu2.png kerena namafile yang dibolehkan hanya [a-z0-9_.]
coba ganti jadi abimanyu.png
mas gimana untuk menggabungkan galeri view dengan tutorial ini, jadi klau gambar di klik, selain toast yang muncul juga di iringi dengan suara….
mas gimana luw mw membuat tampilan menunya??
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
tanks mas, berhasil tutorialnya