Android studio membuat loader kayak facebook

Apa itu splash sreen ? lalu bagaimana cara membuat splash screen pada android studio ? Splash screen merupakan tampilan yang muncul saat pertama kali kita membuka sebuah aplikasi.

Splash screen biasanya menampilkan logo, nama, dan lainnya yang berhubungan dengan aplikasi. Beberapa aplikasi yang menggunakan splash screen antara lain : facebook, youtube, gojek dan lain sebagainya.

Baiklah tanpa panjang lebar inilah tutorial cara membuat splash screen pada android studio.

1. Buat project baru 

Buka android studio kemudian klik creat new project. Kemudian isi :

• Application name : splasscreen
• Phone and tablet : API 19 ( disesuaikan)
• Activity : empty activity
• Activity name : mainactivity

Tunggu sampai workspace android studio terbuka dengan baik dan siap digunakan.

Rekomendasi :

• Cara membuat login android dengan sqlite database
• Apa itu firebase ? Inilah ulasan lengkapnya 
• Pemrograman mobile : Panduan untuk pemula 

2. Atur layout

Selanjutnya atur layout splash screennya pada activity_main.xml. Untuk logonya sendiri pada tutorial cara membuat splash screen pada android studio ini menggunakan logo dari aplikasi gojek. Bisa di download disini.

Jika sudah didownload masukan logo atau gambar yang ingin digunakan pada drawable dengan cara :

• klik kanan pada drawable 
• show in explorer
• copykan gambar ke folder drawable 

Lalu ketikan  kode-kode dibawah ini pada activity_main.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:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:gravity="center"
tools:context=".MainActivity">

<ImageView
android:layout_width="160dp"
android:layout_height="60dp"
android:id="@+id/logo"
android:src="@drawable/logogojek"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />

</RelativeLayout>

Pada kode-kode di atas kita bisa melihat layout yang digunakan adalah relative layout dengan ditambahkan satu widget imageview untuk menampilkan gambar.

Rekomendasi :

• Cara menggunakan linear layout pada android studio 
• 15 Menit Belajar Menggunakan 5 Jenis Layout di Android Studio
• Membuat Aplikasi dengan SQLite dan Android Studio 
• Apa itu Sistem Operasi Mobile ? Inilah Ulasan Lengkapnya !

3. Atur style

Pada styles.xml yang berada pada folder res kita akan menghilangkan app bar (action bar) dan mengganti warna primarynya dengan warna putih. Silahkan masukan kode-kode dibawah ini.

<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">#FFFFFF</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

4. Buat Activity_home

Splash screen yang dibuat pada tutorial ini hanya akan tampil selama 4 detik setelah itu akan langsung ditampilkan menu utama dari aplikasi android yang sudah diberi splash screen.

Maka silahkan buat activity baru dengan nama activity home dengan cara klik kanan pada nama package lalu :

• pilih new
• activity –> empty activity
• beri nama home (activity_home)

Rekomendasi : Buku android studio terbaru 2018

Tambahkan kode-kode dibawah ini pada activity_home.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:id="@+id/activity_home"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="30dp"

    tools:context=".home">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="halo ini adalah tutorial splash screen "
        android:textSize="30sp"/>

</RelativeLayout>

5. MainActivity.java

Buka MainActivity.java lalu tambahkan kode-kode java berikut.

package badoystudio.com.splashscreengojek;

import android.content.Intent;
import android.os.Handler;
import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    private int waktu_loading=4000;

    //4000=4 detik

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);


        setContentView(R.layout.activity_main);
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {

                //setelah loading maka akan langsung berpindah ke home activity
                Intent home=new Intent(MainActivity.this, home.class);
                startActivity(home);
                finish();

            }
        },waktu_loading);
    }
}

Perhatikan kode di atas waktu_loading=4000 yaitu splash screen nantinya hanya akan muncul selama 4 detik saja kemudian langsung pindah ke activity yang lain.

6. AndroidManifests.xml

Terakhir tambahkan script dibawah ini pada AndroidManifest.xml yang ada pada manifest

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

    <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">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>

Ditutorial cara membuat splash screen pada android studio ini penulis masih menjadikan mainactivity untuk splash screennya. Sehingga tidak ada yang diubah pada android manifestnya (defaultnya seperti kode-kode di atas).

Baca Juga : 

• Pemrograman Mobile : Panduan untuk Pemula
• Apa itu Firebase ? Inilah Ulasan Lengkapnya
• Pilih Eclipse atau Android Studio ? Temukan Jawabannya disini ! 
• 15 Menit Belajar dan Mengaplikasikan Macam-macam Layout pada Android Studio 
• Apa itu Aplikasi Native, Hybrid, dan Web ? Inilah Ulasan Lengkapnya !

7. Running Aplikasi

Running aplikasi bisa menggunakan android virtual device, emulator genymotion, atau langsung ke smartphone yang kamu miliki. Maka akan tampil seperti dibawah ini

Penulis menggunakan oppo a3s untuk merunning aplikasi pada tutorial ini.

Itulah cara membuat splash screen pada android studio. Saya rasa cukup mudah bukan. Silahkan praktekan dan modifikasi sesuai kebutuhan aplikasi android yang sedang kamu buat. Semoga bermanfaat.

Related posts: