Membuat TextSwitcher dan ImageSwitcher di Android Studio

Text Switcher & Image Switcher Android Studio

Text Switcher dan Image Switcher adalah teks dan gambar berganti secara otomatis ataupun manual. Manual disini artinya, teks atau gambar tersebut akan berganti ketika sebuah komponen untuk melakukannya di klik. Yang akan ditutorialkan disini adalah yang manual. Switcher ini biasanya digunakan sebagai guiding (penuntun)  untuk si pengguna aplikasi mengenai cara penggunaan aplikasi.

Pada pembahasan ini, akan dicontohkan masing-masing 5 gambar dan 5 teks kalimat untuk bergantian secara sistematis. Yang mana, gambar pertama berkaitan dengan teks pertama, gambar kedua dengan teks kedua, begitu selanjutnya sampai gambar kelima. Artinya, masing-masing teks dan gambar akan saling menjelaskan teks dan gambar yang berkaitan.  Berarti, gambar pertama dengan teks pertama akan muncul secara bersamaan, begitu juga yang lainnya. Semoga Anda tidak bingung! Karena saya pun terkadang bingung dengan apa yang saya katakan.

Seperti biasa, com.gwnbs.proyekpertama akan menjadi lampiasan dari tutorial ini. Disini yang di pakai hanya activity_main.xml dan MainActivity.java sebagai tempat implementasi kodingan. Baiklah, persiapkan proyek Anda. Jika belum pernah membuat proyek di Android Studio, bisa klik disini.

Membuat ImageSwitcher

Terlebih dahulu persiapkan 5 buah gambar. Anda dapat membuatnya melalui Vector atau Image Asset di Android Studio, atau menguploadnya dari komputer Anda. Pada contoh ini, saya membuat 5 icon dengan ukuran 150 x 150 melalui Vector Asset Android Studio. Silahkan membuka tautan Vector dan Image Asset diatas untuk tutorial pembuatannya atau mengupload dari komputer jika Anda belum pernah melakukannya.

Pada contoh ini, gambar-gambarnya diberi nama ic_bank, ic_duit, ic_kawan, ic_bagikan, dan ic_home. Baiklah, buka activity_main.xml; Lalu untuk membuat ImageSwitcher, panggil dengan tag <ImageSwitcher, lalu tentukan atribut-atribut tata letak, id, margin dan lain sebagainya. Berikut ImageSwitcher pada com.gwnbs.proyekpertama :

<ImageSwitcher
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/imageSwitch"
    android:layout_below="@id/text1"
    android:layout_marginBottom="10dp"
    android:layout_marginTop="40dp"
    android:layout_centerHorizontal="true"/>

Setelah itu, buka MainActivity.java; pertama-tama buat variabel untuk class ImageSwitcher tepat dibawah public class MainActivity extends AppCompatActivity. Pada contoh ini, variabelnya dibuat gantian, sehingga lengkapnya menjadi :

private ImageSwitcher gantian;

Kemudian dibawah variable diatas, buat Integer dengan int [], buat variablel untuk integer tersebut, disini variabelnya dibuat Images (Anda bebas menentukan nama variable selama tidak bertabrakan dengan class yang ada di library Android), lalu memasukkan sumber dari gambar-gambarnya. Gambar-gambarnya tadi diletakkan di folder drawable. Sehingga lengkapnya akan menjadi :

int [] Images = {R.drawable.ic_bank, R.drawable.ic_duit, R.drawable.ic_kawan, R.drawable.ic_bagikan, R.drawable.ic_home, };

Menjelang akhir-akhir dari tutorial ini nanti akan diperlihatkan seluruh kode lengkap activity_main.xml dan MainActivity.java dari com.gwnbs.proyekpertama. Kemudian di dalam metode onCreate, tepat dibawah setContentView, dapatkan id dari komponen ImageSwitcher untuk class ImageSwitcher  yang dibuat di activity_main.xml diatas dengan cara findViewById. Id nya pada contoh ini dibuat imageSwitch, sehingga lengkapnya akan menjadi :

gantian = findViewById(R.id.imageSwitch);

Selanjutnya membuat factor baru tepat dibawah findViewById diatas dengan: 

gantian.setFactory (new ImageSwitcher.ViewFactory())

Jika Anda, mengetiknya manual, maka akan muncul sebuah sugesti dari yang Anda tulis, langsung saja klik Enter pada sugesti yang muncul, setelahnya akan terbuat secara otomatis metode baru dibawahnya, yaitu : public View makeView(). Namun jika Anda salin tempel instant kode diatas, maka akan digaris bawahi warna merah, arahkan mouse pada yang digaris bawahi warna merah, lalu akan muncul sugesti implement methods, lalu klik saja implement methods tersebut.

Selanjutnya, di dalam metode baru yang sudah muncul tersebut, buat terlebih dahulu variabel untuk class ImageView. Di contoh ini variable nya dibuat gambar. Lalu meminta ImageView baru dengan new ImageView, menyetel skala untuk ImageView tersebut, dan menyetel parameter layout nya. Berikut kode keseluruhan pada metode onCreate :

gantian = findViewById(R.id.imageSwitch);
gantian.setFactory(new ViewSwitcher.ViewFactory() {
    @Override
     public View makeView() {
     ImageView gambar = new ImageView(getApplicationContext());
     gambar.setScaleType(ImageView.ScaleType.FIT_CENTER);
     gambar.setLayoutParams(new ImageSwitcher.LayoutParams(
             ActionBar.LayoutParams.WRAP_CONTENT,
             ActionBar.LayoutParams.WRAP_CONTENT));
             return gambar;
      }
    });

Membuat TextSwitcher

Untuk membuat TextSwitcher, langkah-langkah dan aturan nya sama dengan membuat ImageSwitcher. Perbedaan nya hanya pada komponen dan class nya. Untuk membuat Text Switcher adalah dengan tag <TextSwitcher. Berikut atribut-atribut lengkapnya pada Text Switcher activity_main.xml dari com.gwnbs.proyekpertama :

<TextSwitcher
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/detailImage"
    android:layout_below="@id/imageSwitch"
    android:textSize="20sp"
    android:layout_centerHorizontal="true"/>

Kemudian buka kembali MainActivity.java, buat variable untuk class TextSwitcher dibawah variable class ImageSwitcher diatas. Di contoh ini variablenya adalah detail.  Selanjutnya membuat 5 teks kalimat dengan menggunakan String [] untuk dikaitkan ke 5 gambar diatas. Kemudian beri variable untuk String tersebut, disini variablenya dibuat Detail. Karena ini teks, jadi tidak mensyaratkan sumber seperti gambar. Teks bisa langsung dibuat ditempat. Letakkan semuanya dibawah Integer gambar diatas tadi :

String [] Detail = {"Pergi ke Bank", "Ambil semua uang Anda",
"Datangi teman-teman Anda", "Bagikan semua uang yang Anda ambil", "Lalu pulang ke rumah."};

Selanjutnya buat Integer baru lagi untuk posisi awal ImageSwitcher dan TextSwitcher. Disini variable Integer nya dinamakan posisi, dengan nilai -1. Dengan nilai -1, saat aplikasi di jalankan, maka TextSwitcher dan ImageSwitcher belum akan muncul sebelum komponen untuk membukanya di klik. Letakan Integer posisi dibawah String [] Detail :

private int posisi = -1;

Lalu pada metode onCreate, dapatkan id dari komponen TextSwitcher yang ada pada Layout activity_main.xml, buat factor baru lagi. Sama dengan langkah pada ImageSwitcher, bedanya adalah ImageSwitcher adalah ImageView sedangkan TextSwitcher adalah TextView.

Sehingga, pada metode public View makeView() dari TextSwitcher tidak menggunakan skala dan parameter layout. Pada metode makeView(), untuk TextView nya disini disetel hanya ukuran teks dan gravitynya. Semua kodingan untuk TextSwitcher diletakkan dibawah kodingan ImageSwitcher. Berikut lengkapnya :

detail = findViewById(R.id.detailImage);
detail.setFactory(new ViewSwitcher.ViewFactory() {
    @Override
    public View makeView() {
    TextView teks = new TextView(getApplicationContext());
    teks.setTextSize(20);
    teks.setGravity(Gravity.CENTER_HORIZONTAL);
    return teks;
  }
});

Menambahkan 2 Komponen TextView

Langkah berikutnya di activity_main.xml adalah masukkan layout child baru yaitu LinearLayout dibawah komponen TextSwitcher, kemudian buat 2 komponen TextView di dalam LinearLayout. Beri teks "SEBELUMNYA" pada TextView pertama, dan "SELANJUTNYA" untuk TextView kedua. 2 Komponen TextView ini adalah sebagai tombol event untuk Image Switcher dan Text Switcher diatas.

<LinearLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:id="@+id/ll1"
 android:gravity="center"
 android:layout_below="@id/detailImage"
 android:layout_marginTop="70dp"
 android:orientation="horizontal">
    <TextView
     android:id="@+id/textBefore"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:textSize="25sp"
     android:textStyle="bold"
     android:textColor="@color/colorPrimary"
     android:text="SEBELUMNYA"
     android:layout_marginRight="20dp"
     android:layout_marginEnd="20dp" />
    <TextView
     android:id="@+id/textNext"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:textSize="25sp"
     android:textStyle="bold"
     android:textColor="@color/colorPrimary"
     android:text="SELANJUTNYA"/>
</LinearLayout>

Setelah itu, buka lagi MainActivity.java. Lalu kita akan membuat event listener untuk kedua komponen TextView tersebut. Komponen pertama untuk kembali ke gambar dan teks sebelumnya, dan komponen kedua untuk melihat gambar dan teks selanjutnya. Buat kodingan didalam metode onCreate, dibawah kodingan TextSwitcher :

TextView gambarSebelumnya = findViewById(R.id.textBefore);
gambarSebelumnya.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        if (posisi>0) {
        posisi = posisi-1;
        gantian.setBackgroundResource(Images[posisi]);
        detail.setText(Detail[posisi]); }}});

TextView gambarSelanjutnya = findViewById(R.id.textNext);
gambarSelanjutnya.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        if (posisi<Images.length-1) {
        posisi = posisi+1;
        gantian.setBackgroundResource(Images[posisi]);
        detail.setText(Detail[posisi]);}}});


Kode keseluruhan pada activity_main.xml dari com.gwnbs.proyekpertama :

<?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">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/text1"
        android:text="Klik Selanjutnya untuk melihat gambar berikutnya
        \ndan Sebelumnya untuk melihat kembali gambar sebelumnya"
        android:textSize="20sp"
        android:gravity="center"
        android:layout_marginTop="20dp"/>

    <ImageSwitcher
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageSwitch"
        android:layout_below="@id/text1"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="40dp"
        android:layout_centerHorizontal="true"/>

    <TextSwitcher
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/detailImage"
        android:layout_below="@id/imageSwitch"
        android:textSize="20sp"
        android:layout_centerHorizontal="true"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/ll1"
        android:gravity="center"
        android:layout_below="@id/detailImage"
        android:layout_marginTop="70dp"
        android:orientation="horizontal">
        <TextView
            android:id="@+id/textBefore"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="25sp"
            android:textStyle="bold"
            android:textColor="@color/colorPrimary"
            android:text="SEBELUMNYA"
            android:layout_marginRight="20dp"
            android:layout_marginEnd="20dp" />
        <TextView
            android:id="@+id/textNext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="25sp"
            android:textStyle="bold"
            android:textColor="@color/colorPrimary"
            android:text="SELANJUTNYA"/>
    </LinearLayout>

</RelativeLayout>

Kode keseluruhan pada MainActivity.java dari com.gwnbs.proyekpertama :

package com.gwnbs.proyekpertama;

import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.TextSwitcher;
import android.widget.TextView;
import android.widget.ViewSwitcher;

import androidx.appcompat.app.ActionBar;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private ImageSwitcher gantian;
    private TextSwitcher detail;

    int [] Images = {R.drawable.ic_bank, R.drawable.ic_duit,
            R.drawable.ic_kawan, R.drawable.ic_bagikan, R.drawable.ic_home, };

    String [] Detail = {"Pergi ke Bank", "Ambil semua uang Anda",
            "Datangi teman-teman Anda", "Bagikan semua uang yang Anda ambil",
            "Lalu pulang ke rumah."};
    private int posisi = -1;

    @Override

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

        gantian = findViewById(R.id.imageSwitch);
        gantian.setFactory(new ViewSwitcher.ViewFactory() {
            @Override

            public View makeView() {
                ImageView gambar = new ImageView(getApplicationContext());
                gambar.setScaleType(ImageView.ScaleType.FIT_CENTER);
                gambar.setLayoutParams(new ImageSwitcher.LayoutParams(
                        ActionBar.LayoutParams.WRAP_CONTENT,
                        ActionBar.LayoutParams.WRAP_CONTENT));
                return gambar;
            }
        });

        detail = findViewById(R.id.detailImage);
        detail.setFactory(new ViewSwitcher.ViewFactory() {
            @Override

            public View makeView() {
                TextView teks = new TextView(getApplicationContext());
                teks.setTextSize(20);
                teks.setGravity(Gravity.CENTER_HORIZONTAL);
                return teks;
            }
        });

        TextView gambarSebelumnya = findViewById(R.id.textBefore);
        gambarSebelumnya.setOnClickListener(new View.OnClickListener() {
            @Override

            public void onClick(View v) {
                if (posisi>0) {
                    posisi = posisi-1;
                    gantian.setBackgroundResource(Images[posisi]);
                    detail.setText(Detail[posisi]);
                }
            }
        });

        TextView gambarSelanjutnya = findViewById(R.id.textNext);
        gambarSelanjutnya.setOnClickListener(new View.OnClickListener() {
            @Override

            public void onClick(View v) {
                if (posisi<Images.length-1) {
                    posisi = posisi+1;
                    gantian.setBackgroundResource(Images[posisi]);
                    detail.setText(Detail[posisi]);
                }
            }
        });

    }
}

Menjalankan Aplikasi

Tahapan yang terakhir ini adalah tahapan yang paling menyenangkan bagi kita yang belum lama terjun di dunia Android. Namun, juga menjadi tahapan yang paling menjengkelkan saat running gagal karena ada kesalahan. Berikut video singkatnya dari com.gwnbs.proyekpertama setelah di running debug di Android Smartphone. Jika ada pertanyaan silahkan post di komentar :