Cara Mudah Membuat Intro Slider Keren di Android Studio

Halo para android developer, bagaimana kabar kalian hari ini? Saya harap kalian dalam keadaan yang baik-baik saja. Pada kesempatan kali ini, saya akan membagikan tutorial cara membuat intro slider keren di android studio.

Menampilkan intro slider atau layar pembuka pada aplikasi android kalian adalah cara terbaik untuk menampilkan fitur-fitur utama aplikasi ke pengguna pada saat pertama kali. Biasanya intro ditampilkan setelah splashscreen dan hanya muncul satu kali setelah aplikasi digunakan.

Dalam tutorial ini kalian akan belajar cara membuat intro slider keren di android studio menggunakan viewpager.

- Advertisement -

Tutorial Cara Membuat Intro Slider Di Android Studio

Buatlah project android studio baru dengan informasi sebagai berikut:

Application Name:Intro App
Package Name:com.androidrion.introapp
Languge:Java
Minimum SDK:API 15: Android 4.0.3 (IceCreamSandwich)

Daftar file xml layout yang digunakan dalam projek ini:

  1. activity_intro.xml
  2. activity_main.xml
  3. item_intro.xml

Daftar file java yang digunakan dalam projek ini:

  1. Intro.java
  2. MainActivity.java

Daftar file xml drawable yang digunakan dalam projek ini:

  1. btn_round.xml
  2. dot.xml

Dibawah ini adalah langkah-langkah dalam pembuatan aplikasi Intro App.

Styles File

Buka file styles.xml dalam folder values. Ubah theme default menjadi NoActionBar. Berikut ini adalah kode lengkap untuk file styles.xml

app/res/values/styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

Colors File

Dalam tutorial ini saya menggunakan warna kustom. Jadi, kalian harus menambahkannya pada file colors.xml dalam folder values. Berikut ini adalah kode lengkap untuk file colors.xml

app/res/values/colors.xml


<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>

    <color name="colorWhite">#FFFFFF</color>
    <color name="colorBlackDoff">#1B1B1B</color>
    <color name="colorGold">#ffd700</color>
    <color name="colorDarkGold">#D1B000</color>
</resources>

Drawable File

Untuk membuat intro slider keren, maka kita memerlukan gambar atau ikon yang harus di tampilkan. Berikut ini adalah ikon yang saya gunakan dalam project ini.

Ikuti tutorial dibawah ini untuk menambahkan ikon tersebut kedalam project androis studio kalian.

CARA MENAMBAHKAN IKON DALAM PROJECT ANDROID STUDIO

XMl Drawable File

Buatlah dua file xml dalam folder drawable dengan cara klik kanan pada folder tersebut. Lalu pilih New>Drawable resource file. Simpan file tersebut dengan nama btn_round dan dot. Dibawah ini adalah kode lengkap untuk file tersebut.

app/res/drawable/btn_round.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">

        <layer-list>
            <item>
                <shape android:shape="rectangle">
                    <corners android:radius="20dp" />
                    <solid android:color="@color/colorDarkGold" />
                    <size android:width="110dp" android:height="40dp" />
                </shape>
            </item>
        </layer-list>

    </item>
    <item android:state_focused="true">

        <layer-list>
            <item>
                <shape android:shape="rectangle">
                    <corners android:radius="20dp" />
                    <solid android:color="@color/colorDarkGold" />
                    <size android:width="110dp" android:height="40dp" />
                </shape>
            </item>
        </layer-list>

    </item>

    <item>

        <layer-list>
            <item>
                <shape android:shape="rectangle">
                    <corners android:radius="20dp" />
                    <solid android:color="@color/colorGold" />
                    <size android:width="110dp" android:height="40dp" />
                </shape>
            </item>
        </layer-list>

    </item>
</selector>

app/res/drawable/dot.xml

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

</shape>

Create New Activity

Buatlah activity baru dengan cara klik kanan pada folder layout, lalu pilih New>Activity>Empty Activity. Simpan activity baru tersebut dengan Activity Name: Intro dan Layout Name: activity_intro. Maka kalian akan mendapatkan file activity_intro.xml dalam folder layout dan file Intro dalam folder java.

XML Layout File

Buka file activity_intro.xml dalam folder layout. Dibawah ini adalah kode lengkap untuk file activity_intro.xml

app/res/layout/activity_intro.xml

<?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"
    android:background="@color/colorBlackDoff"
    tools:context=".Intro">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:gravity="center"
        android:orientation="vertical">

        <Button
            android:id="@+id/btn_got_it"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/btn_round"
            android:text="OK"
            android:textStyle="bold" />

        <LinearLayout
            android:id="@+id/layoutDots"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:gravity="center"
            android:orientation="horizontal" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:fitsSystemWindows="true"
        android:orientation="horizontal">

        <View
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_weight="1" />

        <Button
            android:id="@+id/btn_skip"
            style="@style/Base.Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="SKIP"
            android:textColor="@android:color/white" />

    </LinearLayout>
</RelativeLayout>

Buat file xml layout baru dengan cara klik kanan pada folder layout, lalu pilih New>Layout resource file. Simpan file tersebut dengan nama item_intro. Berikut ini adalah kode lengkap untuk file item_intro.xml

app/res/layout/item_intro.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/lyt_parent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorBlackDoff"
    android:padding="35dp">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center_horizontal"
        android:orientation="vertical"
        android:paddingBottom="?attr/actionBarSize">

        <ImageView
            android:id="@+id/image"
            android:layout_width="250dp"
            android:layout_height="250dp"
            android:padding="35dp"
            android:src="@drawable/ic_android"
            android:tint="@color/colorGold" />

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Intro One"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium"
            android:textColor="@android:color/white"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/description"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="Tambahkan teks disini agar terlihat lebih keren"
            android:textAlignment="center"
            android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
            android:textColor="@android:color/white" />

    </LinearLayout>
</RelativeLayout>

Java Activity File

Buka file Intro dalam folder java pada project android studio kalian. Dibawah ini adalah kode lengkap untuk file Intro.java

app/java/com.androidrion.introapp/Intro.java

package com.androidrion.introapp;

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.PagerAdapter;
import androidx.viewpager.widget.ViewPager;

import android.content.Context;
import android.content.Intent;
import android.graphics.PorterDuff;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class Intro extends AppCompatActivity {

    private static final int MAX_STEP = 4;

    private Button btn_got_it;
    private String[] title_array = {
            "Intro One", "Intro Two",
            "Intro Three", "Intro Four"
    };
    private String[] description_array = {
            "Tambahkan teks disini agar terlihat lebih keren", "Tambahkan teks disini agar terlihat lebih keren",
            "Tambahkan teks disini agar terlihat lebih keren", "Tambahkan teks disini agar terlihat lebih keren"
    };
    private int[] about_images_array = {
            R.drawable.ic_android, R.drawable.ic_notifications,
            R.drawable.ic_help, R.drawable.ic_favorite
    };
    private int[] color_array = {
            R.color.colorBlackDoff, R.color.colorBlackDoff,
            R.color.colorBlackDoff, R.color.colorBlackDoff
    };

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

    private void initComponent() {
        ViewPager viewPager = findViewById(R.id.view_pager);
        btn_got_it = findViewById(R.id.btn_got_it);

        bottomProgressDots(0);

        MyViewPagerAdapter myViewPagerAdapter = new MyViewPagerAdapter();
        viewPager.setAdapter(myViewPagerAdapter);
        viewPager.addOnPageChangeListener(viewPagerPageChangeListener);

        btn_got_it.setVisibility(View.GONE);
        btn_got_it.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(Intro.this, MainActivity.class);
                startActivity(intent);
            }
        });

        findViewById(R.id.btn_skip).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(Intro.this, MainActivity.class);
                startActivity(intent);
            }
        });
    }

    private void bottomProgressDots(int index) {
        LinearLayout dotsLayout = findViewById(R.id.layoutDots);
        ImageView[] dots = new ImageView[MAX_STEP];

        dotsLayout.removeAllViews();
        for (int i = 0; i < dots.length; i++) {
            dots[i] = new ImageView(this);
            int width_height = 15;
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(new ViewGroup.LayoutParams(width_height, width_height));
            params.setMargins(10, 10, 10, 10);
            dots[i].setLayoutParams(params);
            dots[i].setImageResource(R.drawable.dot);
            dots[i].setColorFilter(getResources().getColor(R.color.colorWhite), PorterDuff.Mode.SRC_IN);
            dotsLayout.addView(dots[i]);
        }

        dots[index].setImageResource(R.drawable.dot);
        dots[index].setColorFilter(getResources().getColor(R.color.colorGold), PorterDuff.Mode.SRC_IN);
    }


    ViewPager.OnPageChangeListener viewPagerPageChangeListener = new ViewPager.OnPageChangeListener() {

        @Override
        public void onPageSelected(final int position) {
            bottomProgressDots(position);
            if (position == title_array.length - 1) {
                btn_got_it.setVisibility(View.VISIBLE);
            } else {
                btn_got_it.setVisibility(View.GONE);
            }
        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {

        }

        @Override
        public void onPageScrollStateChanged(int arg0) {

        }
    };


    public class MyViewPagerAdapter extends PagerAdapter {

        MyViewPagerAdapter() {
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            LayoutInflater layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);

            View view = layoutInflater.inflate(R.layout.item_intro, container, false);
            ((TextView) view.findViewById(R.id.title)).setText(title_array[position]);
            ((TextView) view.findViewById(R.id.description)).setText(description_array[position]);
            ((ImageView) view.findViewById(R.id.image)).setImageResource(about_images_array[position]);
            view.findViewById(R.id.lyt_parent).setBackgroundColor(getResources().getColor(color_array[position]));
            container.addView(view);

            return view;
        }

        @Override
        public int getCount() {
            return title_array.length;
        }

        @Override
        public boolean isViewFromObject(View view, Object obj) {
            return view == obj;
        }


        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            View view = (View) object;
            container.removeView(view);
        }
    }
}

Android Manifest File

Buka file AndroidManifest.xml dalam folder manifests. Ubah activity Intro menjadi launcher. Berikut ini adalah kode lengkap untuk file AndroidManifest.xml

app/manifests/AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.androidrion.introapp">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity"/>
        <activity android:name=".Intro">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Run ‘app’

Sekarang jalankan project android studio kalian, maka aplikasi akan terlihat seperti pada gambar di bawah ini.

AKHIR KATA

Itulah tadi tutorial singkat dan mudah cara membuat intro slider keren di android studio. Mungkin untuk mendesain agak sedikit banyak widget yang digunakan namun sebenarnya tutorial di atas sangatlah mudah di kerjakan.

Jika kalian mengalami kendala saat melakukan tutorial di atas, silahkan komentar di bawah artikel ini. Jangan lupa untuk like dan subscribe Channel YouTube Android Rion. Semoga artikel ini membantu kalian. Terima Kasih.

Download Projek

Untuk download project pada tutorial ini, silahkan klik tombol dibawah ini.

- Advertisement -

Get real time updates directly on you device, subscribe now.

You might also like

- Advertisement -

Leave A Reply

Your email address will not be published.