Cara Mudah Membuat Stepper Layout di Android

Cara Mudah Membuat Stepper Layout di Android

Apa itu “Stepper Layout Android?”. Bila Anda cari di google image maka, yang keluar adalah seperti berikut.

WarungKomputer.com-Jadi, Stepper Layout ini hampir sama atau bahkan mirip seperti Timeline Layoutyang pernah saya bahas cara membuat timeline layout di android . Tapi, pada umumnya kalau timeline layout dipakai untuk orientation vertical sementara, stepper layout sering dipakai secara orientation horizontal. Berikut adalah beberapa contoh dari beberapa apps yang menggunakan stepper layout.

Jadi, pada kedua contoh apps diatas bisa Anda lihat bahwa modelnya itu sama yaitu, sama-sama orientation horizontal namun, dengan sedikit customize drawable dan widget yang dipakai pada stepper layout. Jadi, kesimpulannya adalah bahwa stepper layout merupakan layout yang menampilkan sebuah proses atau langkah (step) pada sebuah aplikasi android.

Cara Mudah Membuat Stepper Layout di Android

Contoh Sederhana

Berikut adalah contoh sederhana dari stepper layout yang akan kita buat pada tutorial ini.

Jadi, pada stepper layout di atas sebenarnya hanya terdiri dari 2 widget yaitu, View dan Button. View dengan custom drawable sebanyak 13 dan Button hanya berjumlah 2 saja. Berikut adalah wireframe dari layout-nya.

Pada wireframe diatas bisa Anda lihat bahwa View saya beri tanda dengan warna berikut.

• Orange merupakan View dengan custom drawable yang berbentuk bulat dengan status proses aktif sebanyak 3.
• Ungu merupakan View dengan custom drawable yang berbentuk bulat dengan status proses nonaktif sebanyak 3.
• Biru merupakan View yang berbentuk garis horizontal dengan status proses aktif sebanyak 2.
• Merah merupakan View yang berbentuk garis horizontal dengan status proses nonaktif sebanyak 2.
• Hijau merupakan View yang berbentuk rectangle yang memiliki background white sebanyak 3 yang berfungsi sebagai pemberi margin pada View yang berbentuk bulat.

Sedangkan, untuk warna hitam itu merupakan Button biasa.

Mulai Pembuatan Contoh Projek Sederhana

Ada beberapa hal yang perlu Anda persiapkan pada tutorial ini yaitu sebagai berikut.

• Android Studio dengan versi terbaru yang bisa Anda unduh di website canary android studio
• Koneksi internet.

Pembuatan Projek

Silakan buka aplikasi Android Studio dan buat projek baru dengan nama warung komputer – Example Stepper Layout dan pada bagian Activity pilih Empty Activity.

Custom Drawable

Silakan Anda buat 2 buah file di direktori res-drawable dengan nama background_circle_on.xml dan background_circle_off.xml. Pada file background_circle_on.xml, silakan Anda isi dengan kode program berikut.

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <item>
        <shape
            android:shape="oval"
            >
            <solid
                android:color="@color/colorPrimary"
                />
        </shape>
    </item>
</selector>

Selanjutnya, pada file background_circle_off.xml isi dengan kode program berikut.

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <item>
        <shape
            android:shape="oval"
            >
            <solid
                android:color="@android:color/darker_gray"
                />
        </shape>
    </item>
</selector>

Fungsi kedua file diatas adalah untuk dijadikan sebagai background dari Viewyang akan dibuat menjadi bulat.

activity_main.xml

Pada file layout, silakan Anda isi dengan kode program berikut.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:background="@android:color/white"
    tools:context="com.ysn.warungkomputer_examplestepperlayout.MainActivity"
    >

    <!--step 1 start-->
    <View
        android:layout_width="36dp"
        android:layout_height="36dp"
        android:id="@+id/view_circle_on_1"
        android:background="@drawable/background_circle_on"
        android:layout_centerVertical="true"
        android:layout_marginRight="@dimen/activity_horizontal_margin"
        android:layout_marginEnd="@dimen/activity_horizontal_margin"
        />

    <View
        android:layout_width="36dp"
        android:layout_height="36dp"
        android:id="@+id/view_circle_off_1"
        android:background="@drawable/background_circle_off"
        android:layout_centerVertical="true"
        android:layout_marginRight="@dimen/activity_horizontal_margin"
        android:layout_marginEnd="@dimen/activity_horizontal_margin"
        />

    <View
        android:layout_width="wrap_content"
        android:layout_height="2dp"
        android:id="@+id/view_horizontal_on_1"
        android:background="@color/colorPrimary"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/view_circle_on_1"
        android:layout_toEndOf="@+id/view_circle_on_1"
        android:layout_toLeftOf="@+id/view_circle_on_2"
        android:layout_toStartOf="@+id/view_circle_on_2"
        />

    <View
        android:layout_width="wrap_content"
        android:layout_height="2dp"
        android:id="@+id/view_horizontal_off_1"
        android:background="@android:color/darker_gray"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/view_circle_off_1"
        android:layout_toEndOf="@+id/view_circle_off_1"
        android:layout_toLeftOf="@+id/view_circle_off_2"
        android:layout_toStartOf="@+id/view_circle_off_2"
        />
    <!--step 1 end-->

    <!--step 2 start-->
    <View
        android:layout_width="36dp"
        android:layout_height="36dp"
        android:id="@+id/view_circle_on_2"
        android:background="@drawable/background_circle_on"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        />

    <View
        android:layout_width="36dp"
        android:layout_height="36dp"
        android:id="@+id/view_circle_off_2"
        android:background="@drawable/background_circle_off"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        />

    <View
        android:layout_width="wrap_content"
        android:layout_height="2dp"
        android:id="@+id/view_horizontal_on_2"
        android:background="@color/colorPrimary"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/view_circle_on_2"
        android:layout_toEndOf="@+id/view_circle_on_2"
        android:layout_toLeftOf="@+id/view_circle_on_3"
        android:layout_toStartOf="@+id/view_circle_on_3"
        />

    <View
        android:layout_width="wrap_content"
        android:layout_height="2dp"
        android:id="@+id/view_horizontal_off_2"
        android:background="@android:color/darker_gray"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/view_circle_off_2"
        android:layout_toEndOf="@+id/view_circle_off_2"
        android:layout_toLeftOf="@+id/view_circle_off_3"
        android:layout_toStartOf="@+id/view_circle_off_3"
        />

    <View
        android:layout_width="@dimen/activity_horizontal_margin"
        android:layout_height="36dp"
        android:background="@android:color/white"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@+id/view_circle_off_2"
        android:layout_toStartOf="@+id/view_circle_off_2"
        />

    <View
        android:layout_width="@dimen/activity_horizontal_margin"
        android:layout_height="36dp"
        android:background="@android:color/white"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/view_circle_off_2"
        android:layout_toEndOf="@+id/view_circle_off_2"
        />
    <!--step 2 end-->

    <!--step 3 start-->
    <View
        android:layout_width="36dp"
        android:layout_height="36dp"
        android:id="@+id/view_circle_on_3"
        android:background="@drawable/background_circle_on"
        android:layout_centerVertical="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        />

    <View
        android:layout_width="36dp"
        android:layout_height="36dp"
        android:id="@+id/view_circle_off_3"
        android:background="@drawable/background_circle_off"
        android:layout_centerVertical="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        />

    <View
        android:layout_width="@dimen/activity_horizontal_margin"
        android:layout_height="36dp"
        android:background="@android:color/white"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@+id/view_circle_on_3"
        android:layout_toStartOf="@+id/view_circle_on_3"
        />
    <!--step 3 end-->

    <!--action-->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button_next"
        android:text="Next"
        android:layout_below="@+id/view_circle_off_1"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button_previous"
        android:text="Previous"
        android:layout_below="@+id/view_circle_off_1"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        />

</RelativeLayout>

Pada layout diatas kita menggunakan RelativeLayout sebagai container dan bisa Anda lihat bahwa kita hanya menggunakan 2 jenis widget yaitu, View dan Button.

ActivityMain.java

Pada file java, silakan isi dengan kode program berikut.

package com.ysn.warungkomputer_examplestepperlayout;

import android.animation.Animator;
import android.animation.ObjectAnimator;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private View viewCircle1On, viewCircle1Off;
    private View viewHorizontal1On, viewHorizontal1Off;
    private View viewCircle2On, viewCircle2Off;
    private View viewHorizontal2On, viewHorizontal2Off;
    private View viewCircle3On, viewCircle3Off;
    private Button buttonNext, buttonPrevious;
    private int position = 0;
    private int widthView = 0;

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

    private void loadComponent() {
        viewCircle1On = (View) findViewById(R.id.view_circle_on_1);
        viewCircle1Off = (View) findViewById(R.id.view_circle_off_1);
        viewHorizontal1On = (View) findViewById(R.id.view_horizontal_on_1);
        viewHorizontal1Off = (View) findViewById(R.id.view_horizontal_off_1);
        viewCircle2On = (View) findViewById(R.id.view_circle_on_2);
        viewCircle2Off = (View) findViewById(R.id.view_circle_off_2);
        viewHorizontal2On = (View) findViewById(R.id.view_horizontal_on_2);
        viewHorizontal2Off = (View) findViewById(R.id.view_horizontal_off_2);
        viewCircle3On = (View) findViewById(R.id.view_circle_on_3);
        viewCircle3Off = (View) findViewById(R.id.view_circle_off_3);
        buttonNext = (Button) findViewById(R.id.button_next);
        buttonPrevious = (Button) findViewById(R.id.button_previous);

        viewHorizontal1Off.post(new Runnable() {
            @Override
            public void run() {
                widthView = viewHorizontal1Off.getWidth();
            }
        });

        buttonNext.setOnClickListener(this);
        buttonPrevious.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        if (view == buttonNext) {
            position++;
            if (position == 1) {
                ObjectAnimator objectAnimatorCircle1 = ObjectAnimator.ofFloat(viewCircle1Off, "alpha", 1, 0);
                objectAnimatorCircle1.setDuration(500);
                objectAnimatorCircle1.start();
            } else if (position == 2) {
                ObjectAnimator objectAnimatorHorizontal1 = ObjectAnimator.ofFloat(viewHorizontal1Off, "translationX", 0, widthView);
                objectAnimatorHorizontal1.setDuration(500);
                objectAnimatorHorizontal1.addListener(new Animator.AnimatorListener() {
                    @Override
                    public void onAnimationStart(Animator animator) {

                    }

                    @Override
                    public void onAnimationEnd(Animator animator) {
                        ObjectAnimator objectAnimatorCircle2 = ObjectAnimator.ofFloat(viewCircle2Off, "alpha", 1, 0);
                        objectAnimatorCircle2.setDuration(500);
                        objectAnimatorCircle2.start();
                    }

                    @Override
                    public void onAnimationCancel(Animator animator) {

                    }

                    @Override
                    public void onAnimationRepeat(Animator animator) {

                    }
                });
                objectAnimatorHorizontal1.start();
            } else if (position == 3) {
                ObjectAnimator objectAnimatorHorizontal2 = ObjectAnimator.ofFloat(viewHorizontal2Off, "translationX", 0, widthView);
                objectAnimatorHorizontal2.setDuration(500);
                objectAnimatorHorizontal2.addListener(new Animator.AnimatorListener() {
                    @Override
                    public void onAnimationStart(Animator animator) {

                    }

                    @Override
                    public void onAnimationEnd(Animator animator) {
                        ObjectAnimator objectAnimatorCircle3 = ObjectAnimator.ofFloat(viewCircle3Off, "alpha", 1, 0);
                        objectAnimatorCircle3.setDuration(500);
                        objectAnimatorCircle3.start();
                    }

                    @Override
                    public void onAnimationCancel(Animator animator) {

                    }

                    @Override
                    public void onAnimationRepeat(Animator animator) {

                    }
                });
                objectAnimatorHorizontal2.start();
            } else {
                position = 3;
            }
        } else if (view == buttonPrevious) {
            position--;
            if (position == 0) {
                ObjectAnimator objectAnimatorCircle1 = ObjectAnimator.ofFloat(viewCircle1Off, "alpha", 0, 1);
                objectAnimatorCircle1.setDuration(500);
                objectAnimatorCircle1.start();
            } else if (position == 1) {
                ObjectAnimator objectAnimatorCircle2 = ObjectAnimator.ofFloat(viewCircle2Off, "alpha", 0, 1);
                objectAnimatorCircle2.setDuration(500);
                objectAnimatorCircle2.addListener(new Animator.AnimatorListener() {
                    @Override
                    public void onAnimationStart(Animator animator) {

                    }

                    @Override
                    public void onAnimationEnd(Animator animator) {
                        ObjectAnimator objectAnimatorHorizontal1 = ObjectAnimator.ofFloat(viewHorizontal1Off, "translationX", widthView, 0);
                        objectAnimatorHorizontal1.setDuration(500);
                        objectAnimatorHorizontal1.start();
                    }

                    @Override
                    public void onAnimationCancel(Animator animator) {

                    }

                    @Override
                    public void onAnimationRepeat(Animator animator) {

                    }
                });
                objectAnimatorCircle2.start();
            } else if (position == 2) {
                final ObjectAnimator objectAnimatorCircle3 = ObjectAnimator.ofFloat(viewCircle3Off, "alpha", 0, 1);
                objectAnimatorCircle3.setDuration(500);
                objectAnimatorCircle3.addListener(new Animator.AnimatorListener() {
                    @Override
                    public void onAnimationStart(Animator animator) {

                    }

                    @Override
                    public void onAnimationEnd(Animator animator) {
                        ObjectAnimator objectAnimatorHorizontal2 = ObjectAnimator.ofFloat(viewHorizontal2Off, "translationX", widthView, 0);
                        objectAnimatorHorizontal2.setDuration(500);
                        objectAnimatorHorizontal2.start();
                    }

                    @Override
                    public void onAnimationCancel(Animator animator) {

                    }

                    @Override
                    public void onAnimationRepeat(Animator animator) {

                    }
                });
                objectAnimatorCircle3.start();
            } else {
                position = 0;
            }
        }
    }
}

Pada java, kita hanya memberikan sedikit logic sederhana untuk perpindahan stepper layout-nya dan ObjectAnimator untuk membuat proses perpindahan antar Stepper-nya menjadi lebih nyaman dilihat dengan efek alpha dan translationX. Dan sekarang silakan Anda compile maka, hasilnya akan sama seperti pada gambar sebelumnya. Dan jika Anda bisa mengembangkannya lagi maka, kurang lebih seperti inilah tampilannya.

Akhir kata:
Semoga artikel Cara Mudah Membuat Stepper Layout di Android bisa bermanfaat untuk kalian

SUMBER:
codepolitan.com