Cara Membuat Splash Screen untuk Aplikasi Konverter Suhu Dengan Android Studio

Minggu, 22 September 2019

Apa itu splash screen ? 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 Dody Cipto Santoso_161021450556
Phone and tablet : API 19 ( disesuaikan)
Activity : empty activity
Activity name : mainactivity

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

2. Atur layout

Selanjutnya atur layout splash screennya pada activity_main.xml. untuk logonya bisa kalian cari sesuka kalian mau seperti apa hehe .

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:id="@+id/logo"
        android:layout_width="285dp"
        android:layout_height="275dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:src="@drawable/sp" />

</RelativeLayout>

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_login

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

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

pilih new
activity –> empty activity
beri nama login (activity_login)

Tambahkan kode-kode dibawah ini pada activity_login.xml :

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="#7A80A7"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btnLogin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="180dp"
        android:layout_marginTop="60dp"
        android:text="login"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/password" />

    <EditText
        android:id="@+id/password"
        android:layout_width="311dp"
        android:layout_height="54dp"
        android:layout_marginStart="124dp"
        android:layout_marginTop="52dp"
        android:ems="10"
        android:inputType="textPassword"
        android:text="Password"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="@+id/imageView2"
        app:layout_constraintTop_toBottomOf="@+id/editText"
        app:layout_constraintVertical_bias="0.0" />

    <EditText
        android:id="@+id/editText"
        android:layout_width="306dp"
        android:layout_height="56dp"
        android:layout_marginTop="148dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Username"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="90dp"
        android:layout_height="75dp"
        android:layout_marginTop="148dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintEnd_toStartOf="@+id/editText"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/us" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="90dp"
        android:layout_height="75dp"
        android:layout_marginTop="248dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.021"
        app:srcCompat="@drawable/pa" />


</androidx.constraintlayout.widget.ConstraintLayout>

6. MainActivity.java

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

package com.example.splashscreendodyciptosantoso_161021450556;

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 login=new Intent(MainActivity.this, login.class);
                startActivity(login);
                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.

7. AndroidManifests.xml

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

8. login.java

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

package com.example.splashscreendodyciptosantoso_161021450556;


import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

import com.example.splashscreendodyciptosantoso_161021450556.R;

public class login extends AppCompatActivity {
    EditText username, password;
    Button btnLogin;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);
        username = (EditText) findViewById(R.id.editText);
        password = (EditText) findViewById(R.id.password);
        btnLogin = (Button)findViewById(R.id.btnLogin);

        btnLogin.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                String usernameKey = username.getText().toString();
                String passwordKey = password.getText().toString();

                if (usernameKey.equals("admin") && passwordKey.equals("123")){
                    //jika login berhasil
                    Toast.makeText(getApplicationContext(), "LOGIN SUKSES",
                            Toast.LENGTH_SHORT).show();
                    Intent intent = new Intent(login.this, home.class);
                    startActivity(intent);
                }else {
                    //jika login gagal
                    AlertDialog.Builder builder = new AlertDialog.Builder(login.this);
                    builder.setMessage("Username atau Password Anda salah!")
                            .setNegativeButton("Retry", null).create().show();
                }
            }

        });
    }
}

disini masih terdapat eror karena kita belum membuat menu utamanya , langkah selanjutnya kita membuat menu utama , jika berhasil login maka akan di arahkan ke activity yang lain

9. Buat activity_home

Splash screen yang dibuat pada tutorial ini hanya akan tampil selama 4 detik setelah itu akan langsung menuju menu 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)

Tambahkan kode-kode dibawah ini pada activity_home.xml :

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="#99110118"
    tools:context=".home">

    <EditText
        android:id="@+id/editText"
        android:layout_width="248dp"
        android:layout_height="50dp"
        android:layout_marginTop="180dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:text=""
        app:layout_constraintTop_toTopOf="parent"
        tools:layout_editor_absoluteX="155dp" />

    <Button
        android:id="@+id/button"
        android:layout_width="412dp"
        android:layout_height="57dp"
        android:layout_marginTop="352dp"
        android:text="Convert"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <RadioGroup
        android:id="@+id/radiogroup"
        android:layout_width="127dp"
        android:layout_height="98dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="240dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <RadioButton
            android:id="@+id/radioButton"
            android:layout_width="match_parent"
            android:layout_height="35dp"
            android:text="To Kelvin" />

        <RadioButton
            android:id="@+id/radioButton2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="To Fahrenheit" />

        <RadioButton
            android:id="@+id/radioButton1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="To Reamur" />
    </RadioGroup>

    <Button
        android:id="@+id/logout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="28dp"
        android:layout_marginEnd="8dp"
        android:text="logout"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="426dp"
        android:layout_height="59dp"
        android:layout_marginTop="16dp"
        android:background="#D53F506B"
        android:text="Konverter Suhu Sederhana"
        android:textAlignment="center"
        android:textColor="#00ccff"
        android:textSize="50px"
        android:typeface="sans"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="120dp"
        android:layout_height="45dp"
        android:layout_marginEnd="16dp"
        android:text="Celcius"
        app:layout_constraintEnd_toStartOf="@+id/editText"
        tools:layout_editor_absoluteY="180dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

10. home.java

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

package com.example.splashscreendodyciptosantoso_161021450556;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.RadioButton;
import android.widget.RadioGroup;



public class home extends AppCompatActivity {
    Button logout;
    EditText text;
    RadioButton RBKelvin;
    RadioButton RBFahrenheit;
    RadioButton RBReamur;
    RadioGroup RGnya;
    Button Buttonnya;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);
        logout = (Button)findViewById(R.id.logout);

        text = (EditText) findViewById(R.id.editText);
        RBKelvin = (RadioButton) findViewById((R.id.radioButton));
        RBFahrenheit = (RadioButton) findViewById(R.id.radioButton2);
        RBReamur = (RadioButton) findViewById((R.id.radioButton1));
        RGnya = (RadioGroup) findViewById(R.id.radiogroup);
        Buttonnya = (Button) findViewById(R.id.button);

        logout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent i=new Intent(home.this,MainActivity.class);
                startActivity(i);
            }
        });

        Buttonnya.setOnClickListener(new View.OnClickListener(){

            @Override
            public void onClick(View arg0){
                //TODO Auto-generated method stub
                if(RBKelvin.isChecked()) {
                    float inputValue = Float.parseFloat(text.getText().toString());
                    float hasilCelsius = (inputValue + 273);
                    text.setText("" + hasilCelsius);

                }

                if(RBFahrenheit.isChecked()){
                    float inputValue = Float.parseFloat(text.getText().toString());
                    float hasilFahrenheit = ((inputValue*9)/5)+32;
                    text.setText(""+hasilFahrenheit);
                }

                if(RBReamur.isChecked()){
                    float inputValue = Float.parseFloat(text.getText().toString());
                    float hasilReamur = ((inputValue*4)/5);
                    text.setText(""+hasilReamur);
                }

            }

        });

    }
}

11. Running Aplikasi

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

Subscribe to Posts | Subscribe to Comments

Navigation

Tempat Berbagi Informasi Seputar Teknologi

Popular Post

Popular Posts