Membuat Splash Screen dengan Mudah di Android Studio

Tutorial kali ini kita akan membuat splash screen menggunakan android studio dengan mudah. 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, dan blackberry mesenger.

Langsung saja ikuti langkah-langkah berikut untuk membuat splash screen. 

Buat project baru di  android studio 

Buat project baru pada android studio, berikan nama splashscreen dengan activity empty.

 

MainActivity.java

Pada Mainactivity.java ketikan kode-kode dibawah ini

package badoystudio.com.splashscreen;

import android.content.Intent;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

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. Bila pada intent home.class merah / error biarkan saja itu disebabkan karena kita belum membuat activity home.

Tambahkan gambar pendukung (logo atau background) pada drawable untuk ditampilkan di splashscreen :

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

 

Activity_Main.xml

Pada activity_main.xml ketikan kode-kode xml dibawah ini :

<?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="@drawable/red"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="badoystudio.com.splashscreen.MainActivity">

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

    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:progressTint="@color/colorPrimary"
        android:id="@+id/progressBar"
        android:layout_below="@+id/logo"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="31dp" />

</RelativeLayout>

 

pada <relativelayout terdapat  android:background=”@drawable/red” (gambar yang dijadikan background) dan <ImageView android:src=”@drawable/logo” (logo).

Activity_home

Buat sebuah activity baru seperti gambar dibawah dengan cara klik kanan pada nama package lalu :

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

 

Activity_home.xml

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:paddingBottom="@dimen/activity_vertical_margin"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 tools:context="badoystudio.com.splashscreen.home">

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

</RelativeLayout>

 

Styles.xml

buka styles.xml pada values, kemudian tambahkan 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">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="second" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->

        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>


</resources>

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.splashscreen">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        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"
            android:label="@string/home"
            android:theme="@style/second"></activity>
    </application>

</manifest>

 

Running Aplikasi

Running aplikasi maka akan tampil seperti dibawah ini

Membuat Splash Screen dengan Mudah di Android Studio
tampilan splash screen
Membuat Splash Screen dengan Mudah di Android Studio
activity home akan tampil setelah splash screen

Walaupun banyak aplikasi yang tidak menggunakan splash screen dengan berbagai alasan. Namun tidak ada salahnya kita mencoba membuatnya untuk belajar saja.

Selamat mencoba, semoga bermanfaat. Jangan lupa untuk dishare 😀

Tulisan Menarik Lainnya :

Custom Font pada Android Studio Dengan Mudah Kali ini kita akan belajar custom font pada android studio dengan mudah. Android SDK telah menyediakan beberapa font yaitu sans, serif, dan lainny...
Membuat UI Dashboard Menu Menarik pada Android Stu... Pada aplikasi android biasanya terdapat dasboard/ home menu. Isi dari dashboard biasanya berupa icon-icon ataupun nama-nama yang berfungsi untuk mengh...
Membuat Intro Slider Keren Menggunakan Android Stu... Tutorial telah diperbaharui dengan menambahkan dimens.xml  Tutorial kali ini kita akan membuat intro slider menggunakan android studio. Intro S...

Suka belajar dan mengajar teknologi komputer khususnya mobile development android