Tutorial Membuat Layar Intro atau Perkenalan Aplikasi di Android Studio

Kucing Tekno - Membuat aplikasi Android perlu juga mementingkan aspek penggunanya, agar tidak bingung menggunakan aplikasi yang kita buat maka tutorial sekilas atau setidaknya intro di awal aplikasi menjadi salah satu solusinya.

Intro yang dimaksud adalah misalnya kita membuka suatu aplikasi, sebelum ke layar utama mungkin kita pernah menemukan slide intro di Android yang berisi info singkat. Tampilan tersebut biasanya terdiri dari beberapa layar intro yang di swipe ke kanan-kiri yang di bawahnya terdapat tombol Next dan Skip.

Pada tutorial kali ini kita akan mencoba membuat Layar Perkenalan Aplikasi di Android Studio atau bisa juga disebut Introduction Slider Welcome Screen . 

Berikut Hasil Akhir Contoh Layar Perkenalan Aplikasi di Android Studio

intro 1

 -

intro2

 -

intro 3

 -

halaman home

Ada tiga layar perkenalanan / intro sebelum masuk ke halaman utama, selain itu dibawahnya ada link Next untuk ke layar selanjutnya atau Skip untuk melewati layar intro.

Struktur Directori Aplikasi  Intro 

Gambar tersebit merupakan directori yang akan kita buat agar tidak bingung mengikuti tutorial yang ada sekaligus sebagai acuan file apa saja yang perlu dibuat.

Persiapan Gambar Pendukung

Siapkan dulu gambar pendukung untuk tampilan tiga slide nantinya, disini saya menggunakan 4 gambar berformat png lalu taruh di folder drawable atau mipmap.

Membuat Project Baru

Buatlah project baru dengan template terserah saja dan beri nama sesuai keinginan kamu, untuk pilihan versi Android dibuat default saja sesuai target.

Setelah project baru sudah selesai dibuat masuk ke res - value - colors.xml tambahkan kode warna untuk slide screen sesuikan dengan code seperti berikut
-
-

Buka res - layout - string.xml lalu sesuaikan dengan code berikut
-
-


Masih di folder layout , buka file style.xml lalu ubah seperti berikut
-

-

Buat file baru dengan nama dimens.xml lalu isi dengan code seperti berikut
-
-

Membuat layout Slide Intro

Buatlah 3 file xml baru di folder - res - layout masing-masing beri nama slide_screen1.xml , slide_screen2.xml dan slide_screen3.xml dimana ketiganya mempunyai background yang berbeda-beda.

Berikut tampilan dalam mode design

slide_screen1.xml
-
-


slide_screen2.xml
-
- 

  Berikut tampilan dalam mode design

slide_screen3.xml
-
- Berikut tampilan dalam mode design

Membuat View Manager

Buat view manager untuk mengelola tampilan slide , disini akan dideskripsikan tampilan ini hanya tampil saat pertama membuka aplikasi saja jika sudah pernah dibuka maka user akan langsung masuk ke halaman utama.

Buat file java baru tanpa layout dengan nama TampilManager.java lalu sesuaikan dengan kode berikut
- -

Edit Halaman Utama

Halaman utama yang dimaksud adalah halaman dimana setelah layar itro akan tampil, jika kita sudah membuat project maka akan dihasilkan secaa default file MainActivity.java dan activity_main.xml. Ubah keduanya sesuai keinginan kita bisa hanya dengan tulisan hello word, tapi disini layout yang saya gunakan hanya sederhana saja.

MainActivity.java -
-
Berikut tampilan dalam mode design

 Membuat Halaman Welcome / Intro

Halaman ini adalah halaman untuk menggabungkan 3 layout intro ke TampilManager.java dan setelah itu akan memuat halaman utama MainActivity.java

Buat activity baru namakan dengan Welcome.java dan activity_welcome.xml

Welcome.java
-
-

Sedangkan untuk layout activity_welcome.xml berikut kode lengkapnya
activity_welcome.xml
-
-

Edit File Manifest

Buka file AndroidManifest.xml kemudian edit jadikan welcome.java sebagai launcher artinya akan tampil terlebih dahulu saat membuka aplikasi.

AndroidManifest.xml
-

-

Running Aplikasi

Setelah semua selesai tinggal Run App di emulator atau di smartphone , jika kamu ingin mencoba running tanpa emulator dan tanpa kabel usb bisa baca Cara Running Aplikasi Android Studio Lewat Wifi dengan Plugin Android Wifi ADB

Jika benar maka akan tampil halaman intro lalu swipe ke kanan dan kiri selanjutnya di intro halaman ke 3 tap Got it maka akan masuk ke halaman utama. Untuk mencoba intro lagi hapus data dan cache di bagian pengaturan aplikasi.

Sekian Tutorial Membuat Layar Intro atau Perkenalan Aplikasi di Android Studio, silakan komentar jika ada kesalahan atau ada pertanyaaan.