Tutorial Membuat Image Slideshow Menggunakan ViewFlipper Di Android

Pada tutorial Programming Android kali ini kita masih akan membuat aplikasi yang berhubungan dengan image atau gambar. Jika sebelumnya pada tutorial Membuat GridView Layout Gallery Di Android kita hanya menampilkan gambar atau image ke grid layout. Maka kali ini aplikasi yang akan kita buat adalah Image Slideshow yang nantinya aplikasi ini bisa membuat Image atau Gambar bergerak slide kekiri secara otomatis. Untuk lebih jelasnya kita akan langsung praktek dengan membuat aplikasinya.

Langkah pertama yang wajib dilakukan adalah persiapkan foto atau gambar yang ingin di tampilkan dalam aplikasi ViewFlipper.

Buat project android seperti berikut:
Application Name                 : ViewFlipper
Project Name                        : ViewFlipper
Package Name                      : firman.salatigadev.viewflipper
Minimum Required SDK    : Andoid 2.2
Target SDK                           : Android 4.2
Yang lain biarkan default.
Pilih foto atau gambar yang sudah disiapkan, dan masukan di folder nama_aplikasi/res/drawable-hdpi.
Update file string.xml yang ada pada root direktori res/values/strings.xml seperti berikut:

string.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">ViewFlipper</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</string>
    
    <string name="str_img1">Image1</string>
    <string name="str_img2">Image2</string>
    <string name="str_img3">Image3</string>
    <string name="str_img4">Image4</string>
    <string name="str_img5">Image5</string>

    <string name="str_btn_start">Mulai SlideShow</string>
    <string name="str_btn_stop">Berhenti</string>
</resources>

Buat folder anim dan tambahkan pada direktori nama_aplikasi/res. Folder ini untuk menyimpan file .xml yang berfungsi untuk memberikan efek animasi ketika gambar bergerak.

Buat file baru slide_in_right.xml pada direktori res/anim dan isi code berikut:

slide_in_right.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
   android:interpolator="@android:anim/decelerate_interpolator">
   <translate
       android:fromXDelta="100%p"
       android:toXDelta="0"
       android:duration="500"/>
</set>

Buat lagi file slide_out_left.xml pada direktori yang sama dan isi code berikut:

slide_out_left.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
   android:interpolator="@android:anim/decelerate_interpolator" >
   <translate
       android:fromXDelta="0"
       android:toXDelta="-100%p"
       android:duration="500"/>
</set>

Update file layout pada res/layout/view_flipper.xml menjadi seperti berikut:

view_flipper.xml
<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" >
    
    <Button 
        android:id="@+id/btn"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/str_btn_start" />
    
    <ViewFlipper
        android:id="@+id/flipper1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:flipInterval="3000"
        android:inAnimation="@anim/slide_in_right"
        android:outAnimation="@anim/slide_out_left"
        android:layout_centerInParent="true" >

        <ImageView
            android:src="@drawable/img2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:contentDescription="@string/str_img2"
            android:layout_gravity="center_horizontal" />

        <ImageView
            android:src="@drawable/img3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:contentDescription="@string/str_img3"
            android:layout_gravity="center_horizontal" />

        <ImageView
            android:src="@drawable/img4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/str_img4"
            android:layout_gravity="center_horizontal" />

        <ImageView
            android:src="@drawable/img5"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:contentDescription="@string/str_img5"
            android:layout_gravity="center_horizontal" />
    </ViewFlipper>    
</RelativeLayout>

Langkah terakhir pada file class ViewFlipperActivity.java di direktori src/firman/salatigadev/viewflipper/ViewFlipperActivity.java isi dengan code seperti berikut:

ViewFlipperActivity.java
package firman.salatigadev.viewflipper;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ViewFlipper;

public class ViewFlipperActivity extends Activity {

    int mFlipping = 0 ; // Initially flipping is off
    Button mButton ; // Reference to button available in the layout to start and stop the flipper

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

        /** Click event handler for button */
        OnClickListener listener = new OnClickListener() {

            @Override
            public void onClick(View v) {
                ViewFlipper flipper = (ViewFlipper) findViewById(R.id.flipper1);

                if(mFlipping==0){
                    /** Start Flipping */
                    flipper.startFlipping();
                    mFlipping=1;
                    mButton.setText(R.string.str_btn_stop);
                }
                else{
                    /** Stop Flipping */
                    flipper.stopFlipping();
                    mFlipping=0;
                    mButton.setText(R.string.str_btn_start);
                }
            }
        };
        /** Getting a reference to the button available in the resource */
        mButton = (Button) findViewById(R.id.btn);

        /** Setting click event listner for the button */
        mButton.setOnClickListener(listener);

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
}

Selesai, running aplikasi.

DOWNLOAD SOURCE CODE

You may also like...

3 Responses

  1. nurhadie says:

    mas gimana kalo mau buat slideshownya tanpa ada tombol button “mulai slideshow”. jadi slideshownya itu langsung otomatis jalan ketika aplikasi di running.

  2. muslim says:

    saya error di sni pak (R.menu.main, menu) menu nya merah kenapa ya

Leave a Reply

Your email address will not be published. Required fields are marked *