Pertemuan 6, Membuat horizontal scroll view di android dengan menggunakan eclipse, 30 Desember 2014

Pada tutorial kali ini saya akan mencoba untuk membuat sebuah aplikasi Android yang akan menampilkan galery gambar. Langsung kita praktekin ok.

Langkah pertama buat sebuah project Android baru dengan nama galerygambar, pada build target pilih android 2.2, lalu pada properties tulis application name menjadi Galery Gambar, package name menjadi com.firdan, Create Activity menjadi myMain dan Min SDK version menjadi 8 seperti gambar dibawah ini.

Sebelumnya kita masukan dulu gambar2 yang akan digunakan dalam aplikasi ini ke dalam folder galerygambar – res – drawable-hdpi, gambarnya bisa anda gunakan seperti yang tersedia di bawah ini.

Selanjutnya kita edit file main.xml nya agar memiliki 1 buah imageview untuk menampilkan gambar utama, 2 buah textview untuk menampilkan informasi dan juga nama mengenai gambar tersebut dan 5 buah imageview lainnya yang ditampilkan secara horizontal scrollview untuk menampilkan daftar gambar yang tersedia. Pada TextView bagian informasi, saya menambhakan sebuah scrollview, jadi apabila informasi yang ditampilkan gambar tersebut banyak, maka para penggunanya dapat me-scroll informasi tersebut secara vertical.

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:id = "@+id/nama"

android:layout_width = "fill_parent"

android:layout_height= "wrap_content"

android:text = "Bayam"

android:textStyle = "bold"

android:gravity = "center"

/>

<ImageView

android:id = "@+id/gambarutama"

android:src = "@drawable/bayam"

android:layout_width = "250dp"

android:layout_height= "150dp"

android:layout_gravity = "center"

/>

<TextView

android:layout_width = "fill_parent"

android:layout_height= "50dp"

/>

<ScrollView

android:layout_width = "wrap_content"

android:layout_height = "150dp"

>

<LinearLayout

android:layout_width = "fill_parent"

android:layout_height= "150dp"

android:orientation = "vertical"

>

<TextView

android:id = "@+id/informasi"

android:layout_width = "fill_parent"

android:layout_height= "wrap_content"

/>

LinearLayout>

ScrollView>

<TextView

android:layout_width = "fill_parent"

android:layout_height= "50dp"

/>

<HorizontalScrollView

android:layout_width = "wrap_content"

android:layout_height= "100dp"

>

<LinearLayout

android:layout_width = "wrap_content"

android:layout_height= "wrap_content"

android:orientation = "horizontal"

>

<ImageView

android:id = "@+id/daftargambar1"

android:src = "@drawable/bayam"

android:layout_width = "75dp"

android:layout_height= "75dp"

/>

<ImageView

android:id = "@+id/daftargambar2"

android:src = "@drawable/susu"

android:layout_width = "75dp"

android:layout_height= "75dp"

/>

<ImageView

android:id = "@+id/daftargambar3"

android:src = "@drawable/roti"

android:layout_width = "75dp"

android:layout_height= "75dp"

/>

<ImageView

android:id = "@+id/daftargambar4"

android:src = "@drawable/buah"

android:layout_width = "75dp"

android:layout_height= "75dp"

/>

<ImageView

android:id = "@+id/daftargambar5"

android:src = "@drawable/telur"

android:layout_width = "75dp"

android:layout_height= "75dp"

/>

LinearLayout>

HorizontalScrollView>

LinearLayout>

Jika main.xml telah kita ubah seperti coding diatas, maka selanjutnya kita oprek file myMain.java yang terdapat pada folder src – com.firdan – myMain.java seperti dibawah ini.

package com.firdan;

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.ImageView;

import android.widget.TextView;

public class myMain extends Activity implements OnClickListener{

ImageView Display;

TextView informasi, nama;

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

Display = (ImageView) findViewById (R.id.gambarutama);

ImageView gambar1 = (ImageView) findViewById (R.id.daftargambar1);

ImageView gambar2 = (ImageView) findViewById (R.id.daftargambar2);

ImageView gambar3 = (ImageView) findViewById (R.id.daftargambar3);

ImageView gambar4 = (ImageView) findViewById (R.id.daftargambar4);

ImageView gambar5 = (ImageView) findViewById (R.id.daftargambar5);

informasi = (TextView) findViewById (R.id.informasi);

nama = (TextView) findViewById (R.id.nama);

gambar1.setOnClickListener(this);

gambar2.setOnClickListener(this);

gambar3.setOnClickListener(this);

gambar4.setOnClickListener(this);

gambar5.setOnClickListener(this);

}

@Override

public void onClick(View v) {

// TODO Auto-generated method stub

String nama1 = "Bayam";

String nama2 = "Susu";

String nama3 = "Roti";

String nama4 = "Buah-Buahan";

String nama5 = "Telur";

String info1 = "Bayam bagus untuk tubuh anda, anda bisa menjadi seperti popeye jika makan bayan :).";

String info2 = "Minum susu biar tinggi dan tulang anda menjadi kuat";

String info3 = "Roti merupakan makanan yang dapat menggantikan nasi, makan roti biar keliatan kaya orang bule dikit :P";

String info4 = "Buah-buahan sangat bagus untuk mendapatkan vitamin yang dibutuhkan bagi tubuh";

String info5 = "Telur merupakan sumber protein yang bagus untuk tubuh";

switch (v.getId()){

case R.id.daftargambar1:

nama.setText(String.valueOf(nama1));

Display.setImageResource(R.drawable.bayam);

informasi.setText(String.valueOf(info1));

break;

case R.id.daftargambar2:

nama.setText(String.valueOf(nama2));

Display.setImageResource(R.drawable.susu);

informasi.setText(String.valueOf(info2));

break;

case R.id.daftargambar3:

nama.setText(String.valueOf(nama3));

Display.setImageResource(R.drawable.roti);

informasi.setText(String.valueOf(info3));

break;

case R.id.daftargambar4:

nama.setText(String.valueOf(nama4));

Display.setImageResource(R.drawable.buah);

informasi.setText(String.valueOf(info4));

break;

case R.id.daftargambar5:

nama.setText(String.valueOf(nama5));

Display.setImageResource(R.drawable.telur);

informasi.setText(String.valueOf(info5));

break;

}

}

}

Setelah coba kita jalankan program tersebut pada emulator android, maka tampilannya akan seperti gambar di bawah ini :

Mudah bukan membuat sebuah galery gambar :). Semoga tutorial ini berguna bagi yang menggunakannya dan jangan lupa. Keep a rockin in the free world!!!!