Kali ini kita akan membuat sambungan dari postingan sebelumnya Membuat Aplikasi Android : Browser Internet Layaknya Opera Mini Menggunakan Android Studio Part 2.
Dimana pada postingan tersebut aplikasi sudah memiliki tampilan home, menu atas, dan halaman web. Kita juga sudah menambahkan progres bar ketika halaman di muat.
Pada postingan kali ini kita akan membuat splash screen yang akan muncul ketika aplikasi dibuka. Dari postingan ini aplikasi yang kita buat hasilnya akan tampak seperti dibawah ini.
Splash Screen
Pertama-tama silahkan design logo yang akan anda tampilkan pada Splash Screen nantinya disini saya menggunakan Adobe Photoshop untuk membuat logo. Setelah selesai di Buat silahkan eksport menjadi sebuah file dengan extensi .png.Extensi .png dipilih karena kita butuh gambar yang backgroundnya transparan. Silahkan copi gambar tadi kedalam folder drawable project teman-teman. Bagi yang belum tahu caranya silahkan lihat instruksi gambar.
Sekarang lanjut untuk membuat sebuah activity baru dengan nama SplashScreen. Cara buatnya tinggal klik kanan pada folder java >> nama folder file java anda (disini nama folder saya "com.codingrakitan.browserku") >> New >> Activity >> Empty Activity. Lihat gambar untuk detailnya.
Beri nama activity baru ini dengan "SplashScreen" seperti gambar dibawah ini :
Nanti akan terdapat 2 file baru yaitu SplashScreen.java di folder java dan activity_splash_screen.xml di folder layout.
Silahkan isi kedua file tersebut dengan kode dibawah ini.
activity_splash_screen.xml
<?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:background="@color/bc_splash"
android:gravity="center"
tools:context=".SplashScreen">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/gm"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="50dp"
app:srcCompat="@drawable/logo" />
<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:text="Created By Codingrakitan.blogspot.com"
android:textColor="@android:color/white" />
</LinearLayout>
</RelativeLayout>
<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:background="@color/bc_splash"
android:gravity="center"
tools:context=".SplashScreen">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/gm"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="50dp"
app:srcCompat="@drawable/logo" />
<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:text="Created By Codingrakitan.blogspot.com"
android:textColor="@android:color/white" />
</LinearLayout>
</RelativeLayout>
Ingat dalam kasus ini kita menggunakan gambar logo yang telah saya buat pada photoshop silahkan anda kreasikan dengan logo anda, untuk merubah logo ada pada kode "app:srcCompat="@drawable/logo"" ubah sesuai nama logo anda.
Perlu diketahui usahakan logo yang dibuat jangan terlalu besar ukuran pixelnya, karena dalam kasus saya sempat terjadi error ketika di run pada emulator nox android v.4.4.2 dikarenakan ukuran logo yang terlalu besar.
SplashScreen.java
package com.codingrakitan.browserku;
import android.content.Intent;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Window;
public class SplashScreen extends AppCompatActivity {
private int waktu_delay=2000;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
getSupportActionBar().hide();
setContentView(R.layout.activity_splash_screen);
Handler handler =new Handler();
handler.postDelayed(new Runnable() {
@Override
public void run() {
startActivity(new Intent(getApplicationContext(), MainActivity.class));
finish();
}
}, waktu_delay);
}
}
import android.content.Intent;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Window;
public class SplashScreen extends AppCompatActivity {
private int waktu_delay=2000;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
getSupportActionBar().hide();
setContentView(R.layout.activity_splash_screen);
Handler handler =new Handler();
handler.postDelayed(new Runnable() {
@Override
public void run() {
startActivity(new Intent(getApplicationContext(), MainActivity.class));
finish();
}
}, waktu_delay);
}
}
Pada kode di atas anda bisa mengatur berapa lama waktu delay yang dibutuhkan untuk menampilkan SplashScreen sebelum akhirnya masuk ke MainActivity. Silahkan atur pada kode "private int waktu_delay=2000;", angka 2000 menandakan waktu 2 detik atau secon. Silahkan rubah sesuai keinginan anda
Agar dapat mengeksekusi SplashScreen.java pertama kali sebelum masuk ke MainActivity.java maka kita harus melakukan perubahan pada AndroidManifest.xml, Silahkan rubah menjadi seperti berikut
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.codingrakitan.browserku">
<uses-permission android:name="android.permission.INTERNET" />
<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>
<activity android:name=".SplashScreen">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.codingrakitan.browserku">
<uses-permission android:name="android.permission.INTERNET" />
<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>
<activity android:name=".SplashScreen">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
Jangan lupa untuk menambahkan warna baru pada color.xml sebab terdapat color baru yang kita panggil ke activity_splash_screen.xml nama dan kode warnanya adalah "
color.xml
Folder values >> color.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="bc_splash">#C0C0C0</color>
</resources>
<resources>
<color name="colorPrimary">#008577</color>
<color name="colorPrimaryDark">#00574B</color>
<color name="colorAccent">#D81B60</color>
<color name="bc_splash">#C0C0C0</color>
</resources>
Untuk kode lainnya seperti MainActivity.java dan activity_main.xml untuk kali ini tidak dirubah sebab kita hanya menambahkan splash screen menggunakan activity baru.
Silahkan run aplikasi yang telah dibuat dan lihat hasilnya.
Lanjutkan ke Membuat Aplikasi Android : Browser Internet Layaknya Opera Mini Menggunakan Android Studio Part 4 (segera).
Komentar
Posting Komentar