Tutorial Membuat Tampilan Mirip Seperti Aplikasi GRAB dengan Android Studio

Tutorial Membuat Tampilan Seperti Aplikasi GRAB dengan Android Studio
Membuat Tampilan Mirip Seperti Aplikasi GRAB
السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُه sobat 48😁. Kali ini saya akan membagikan sebuah artikel yang membahas tentang Tutorial Membuat Tampilan Mirip Seperti Aplikasi GRAB dengan Android Studio. Kenapa saya buatkan tutorial ini? Ya, karena banyak juga yang request ke saya untuk membuatnya. Dan yang paling menarik perhatian dari aplikasi GRAB adalah Greeting Image dan Greeting Text yang ada di menu utamanya.

Image dan Text tersebut dapat berubah seiringnnya waktu. Yaitu saat pagi, siang, sore dan malam. Oleh karena itu saya juga tertarik untuk mencobanya. Jika kalian ingin SOURCE CODE sample aplikasi ini, silahkan download di GITHUB saya DISINI. Tetapi jika kalian ingin tahu cara mengaplikasikannya, silahkan lanjut baca artikel ini sampai selesai. Untuk kalian yang ingin mencoba membuat aplikasi ini dengan tutorial versi video, berikut saya berikan Videonya:

Jangan lupa subscribe Channel Youtube saya juga ya Azhar Rivaldi, karena disana ada banyak tutorial-tutorial untuk membuat aplikasi lainnya. Oke langsung saja tanpa basa-basi lagi kita langsung ke langkah pertama :

1. Buat project baru di Android Studio dengan cara klik File ⇒ Project Baru. Ketika diminta untuk memilih Default Activity, pilih Empty Activity dan klik next. Untuk minSDK, disini saya set API 21 ya.

2. Karena saya menggunakan AndroidX, maka ubah library di build.gradle menjadi :


dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'androidx.appcompat:appcompat:1.0.2'
implementation 'com.google.android.material:material:1.0.0'
implementation 'androidx.cardview:cardview:1.0.0'
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'androidx.test:runner:1.2.0'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
}

3. Ubah MainActivity.java menjadi seperti ini :


package com.azhar.greeting;

import android.annotation.SuppressLint;
import android.graphics.Color;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;

import java.util.Calendar;

/**
* Created by Azhar Rivaldi on 07/09/2019.
*/

public class MainActivity extends AppCompatActivity {

ImageView greetImg;
TextView greetText;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

greetImg = findViewById(R.id.greeting_img);
greetText = findViewById(R.id.greeting_text);

greeting();

}

@SuppressLint("SetTextI18n")
private void greeting() {
Calendar calendar = Calendar.getInstance();
int timeOfDay = calendar.get(Calendar.HOUR_OF_DAY);

if (timeOfDay >= 0 && timeOfDay < 12){
greetText.setText("Selamat Pagi\nAzhar");
greetImg.setImageResource(R.drawable.img_default_half_morning);
} else if (timeOfDay >= 12 && timeOfDay < 15) {
greetText.setText("Selamat Siang\nAzhar");
greetImg.setImageResource(R.drawable.img_default_half_afternoon);
} else if (timeOfDay >= 15 && timeOfDay < 18) {
greetText.setText("Selamat Sore\nAzhar");
greetImg.setImageResource(R.drawable.img_default_half_without_sun);
} else if (timeOfDay >= 18 && timeOfDay < 24) {
greetText.setText("Selamat Malam\nAzhar");
greetText.setTextColor(Color.WHITE);
greetImg.setImageResource(R.drawable.img_default_half_night);
}
}
}



4. Ubah isi activity_main.xml menjadi seperti ini :


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:orientation="vertical">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="290dp"
android:layout_gravity="center">

<ImageView
android:id="@+id/greeting_img"
android:layout_width="match_parent"
android:layout_height="170dp"
android:scaleType="fitXY" />

<TextView
android:id="@+id/greeting_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="70dp"
android:gravity="center"
android:textColor="#006468"
android:textSize="18sp" />

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">

<androidx.cardview.widget.CardView
android:id="@+id/car4"
android:layout_width="match_parent"
android:layout_height="140dp"
android:layout_margin="11dp"
android:background="#fff"
app:cardCornerRadius="10dp"
app:cardElevation="5dp">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:gravity="center">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginTop="5dp"
android:text="Saldo OVO"
android:textColor="#000"
android:textSize="16sp"
android:textStyle="bold" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginRight="2dp"
android:layout_toLeftOf="@id/home_mPayBalance"
android:text="RP"
android:textColor="#676767"
android:textSize="10dp" />

<TextView
android:id="@+id/home_mPayBalance"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginTop="5dp"
android:layout_marginRight="35dp"
android:text="10.896.000"
android:textColor="#000"
android:textSize="16sp" />

<ImageView
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_alignParentRight="true"
android:layout_marginTop="7.5dp"
android:layout_marginRight="15dp"
android:background="@drawable/ic_saldo_bg"
android:src="@drawable/ic_saldo"
android:tint="#6f6e6e" />

<LinearLayout
android:id="@+id/garis"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="@id/home_mPayBalance"
android:layout_marginTop="10dp"
android:background="#f0efef"
android:orientation="horizontal" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/garis"
android:layout_marginTop="10dp"
android:orientation="horizontal">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_weight="0.50"
android:background="?attr/selectableItemBackground"
android:gravity="center">

<ImageView
android:id="@+id/bayar"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_centerHorizontal="true"
android:src="@drawable/ic_bayar" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/bayar"
android:gravity="center"
android:text="Bayar"
android:textColor="#000"
android:textSize="12dp" />

</RelativeLayout>

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_marginRight="25dp"
android:layout_weight="0.50"
android:background="?attr/selectableItemBackground"
android:gravity="center">

<ImageView
android:id="@+id/imdompet"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_centerHorizontal="true"
android:src="@drawable/ic_dompet" />

<TextView

android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/imdompet"
android:gravity="center"
android:text="Isi Ulang"
android:textColor="#000"
android:textSize="12dp" />

</RelativeLayout>

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_marginRight="25dp"
android:layout_weight="0.50"
android:background="?attr/selectableItemBackground"
android:gravity="center">

<ImageView
android:id="@+id/impoin"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_centerHorizontal="true"
android:src="@drawable/ic_reward" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/impoin"
android:gravity="center"
android:text="Rewards"
android:textColor="#000"
android:textSize="12dp" />

</RelativeLayout>

</LinearLayout>

</RelativeLayout>

</androidx.cardview.widget.CardView>

</RelativeLayout>

</RelativeLayout>

<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="8.0dip">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center_vertical">

<TextView
android:id="@+id/txte"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:gravity="center"
android:text="Siap melayani anda setulus hati"
android:textColor="#000"
android:textSize="15dp"
android:textStyle="bold" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/txte"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:gravity="center"
android:text="Nikmati layanan kami"
android:textColor="#000"
android:textSize="10dp" />

</RelativeLayout>


<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:orientation="horizontal"
android:weightSum="1">

<androidx.cardview.widget.CardView
android:id="@+id/home_mRide"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_margin="10dp"
android:layout_marginLeft="5dp"
android:layout_weight="0.33"
android:clickable="true"
app:cardCornerRadius="10dp"
app:cardElevation="5dp">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/selectableItemBackground">

<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_above="@+id/textView3"
android:layout_centerHorizontal="true"
android:layout_marginBottom="5dp"
android:padding="10dp"
android:scaleType="fitCenter"
android:src="@drawable/ic_mobil" />

<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="5dp"
android:maxLines="1"
android:text="Mobil"
android:textColor="#000"
android:textStyle="bold" />

</RelativeLayout>

</androidx.cardview.widget.CardView>

<androidx.cardview.widget.CardView
android:id="@+id/home_mSend"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_margin="10dp"
android:layout_marginLeft="5dp"
android:layout_weight="0.33"
android:clickable="true"
app:cardCornerRadius="10dp"
app:cardElevation="5dp">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/selectableItemBackground">

<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_above="@+id/textView2"
android:layout_centerHorizontal="true"
android:layout_marginBottom="5dp"
android:padding="10dp"
android:scaleType="fitCenter"
android:src="@drawable/ic_motor" />

<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="5dp"
android:maxLines="1"
android:text="Motor"
android:textColor="#000"
android:textStyle="bold" />

</RelativeLayout>

</androidx.cardview.widget.CardView>

<androidx.cardview.widget.CardView
android:id="@+id/home_mCar"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_margin="10dp"
android:layout_marginLeft="5dp"
android:layout_weight="0.33"
android:clickable="true"
app:cardCornerRadius="10dp"
app:cardElevation="5dp">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/selectableItemBackground">

<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_above="@+id/textView6"
android:layout_centerHorizontal="true"
android:layout_marginBottom="5dp"
android:padding="10dp"
android:scaleType="fitCenter"
android:src="@drawable/ic_makanan" />

<TextView
android:id="@+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="5dp"
android:maxLines="1"
android:text="Makanan"
android:textColor="#000"
android:textSize="12sp"
android:textStyle="bold" />

</RelativeLayout>

</androidx.cardview.widget.CardView>

</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:orientation="horizontal"
android:weightSum="1">

<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_margin="10dp"
android:layout_marginLeft="5dp"
android:layout_marginTop="10dp"
android:layout_weight="0.33"
android:clickable="true"
app:cardCornerRadius="10dp"
app:cardElevation="5dp">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/selectableItemBackground">

<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_above="@+id/textView12"
android:layout_centerHorizontal="true"
android:layout_marginBottom="5dp"
android:padding="10dp"
android:scaleType="fitCenter"
android:src="@drawable/ic_hemat" />

<TextView
android:id="@+id/textView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="5dp"
android:maxLines="1"
android:text="Paket Hemat"
android:textColor="#000"
android:textSize="12sp"
android:textStyle="bold" />

</RelativeLayout>

</androidx.cardview.widget.CardView>

<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_margin="10dp"
android:layout_weight="0.33"
android:background="?attr/selectableItemBackground"
android:clickable="true"
app:cardCornerRadius="10dp"
app:cardElevation="5dp">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/selectableItemBackground">

<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_above="@+id/textView18"
android:layout_centerHorizontal="true"
android:layout_marginBottom="5dp"
android:padding="10dp"
android:scaleType="fitCenter"
android:src="@drawable/ic_pengantaran" />

<TextView
android:id="@+id/textView18"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="5dp"
android:maxLines="1"
android:text="Pengantaran"
android:textColor="#000"
android:textSize="12sp"
android:textStyle="bold" />

</RelativeLayout>

</androidx.cardview.widget.CardView>

<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_margin="10dp"
android:layout_marginLeft="5dp"
android:layout_weight="0.33"
android:background="?attr/selectableItemBackground"
android:clickable="true"
app:cardCornerRadius="10dp"
app:cardElevation="5dp">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/selectableItemBackground">

<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_above="@+id/textView0"
android:layout_centerHorizontal="true"
android:layout_marginBottom="5dp"
android:padding="10dp"
android:scaleType="fitCenter"
android:src="@drawable/ic_pulsa" />

<TextView
android:id="@+id/textView0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="5dp"
android:maxLines="1"
android:text="Pulsa/Token"
android:textColor="#000"
android:textSize="12sp"
android:textStyle="bold" />

</RelativeLayout>

</androidx.cardview.widget.CardView>

</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:orientation="horizontal"
android:weightSum="1">

<androidx.cardview.widget.CardView
android:id="@+id/home_mFood"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_margin="10dp"
android:layout_marginLeft="5dp"
android:layout_marginTop="10dp"
android:layout_weight="0.33"
android:clickable="true"
app:cardCornerRadius="10dp"
app:cardElevation="5dp">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/selectableItemBackground">

<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_above="@+id/textView21"
android:layout_centerHorizontal="true"
android:layout_marginBottom="5dp"
android:padding="10dp"
android:scaleType="fitCenter"
android:src="@drawable/ic_tiket" />

<TextView
android:id="@+id/textView21"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="5dp"
android:maxLines="1"
android:text="Tickets"
android:textColor="#000"
android:textSize="12sp"
android:textStyle="bold" />

</RelativeLayout>

</androidx.cardview.widget.CardView>

<androidx.cardview.widget.CardView
android:id="@+id/home_mLaundry"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_margin="10dp"
android:layout_weight="0.33"
android:background="?attr/selectableItemBackground"
android:clickable="true"
app:cardCornerRadius="10dp"
app:cardElevation="5dp">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/selectableItemBackground">

<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_above="@+id/textView23"
android:layout_centerHorizontal="true"
android:layout_marginBottom="5dp"
android:padding="10dp"
android:scaleType="fitCenter"
android:src="@drawable/ic_hotel" />

<TextView
android:id="@+id/textView23"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="5dp"
android:maxLines="1"
android:text="Hotel"
android:textColor="#000"
android:textSize="12sp"
android:textStyle="bold" />

</RelativeLayout>

</androidx.cardview.widget.CardView>

<androidx.cardview.widget.CardView
android:id="@+id/home_mBox"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_margin="10dp"
android:layout_marginLeft="5dp"
android:layout_weight="0.33"
android:background="?attr/selectableItemBackground"
android:clickable="true"
app:cardCornerRadius="10dp"
app:cardElevation="5dp">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/selectableItemBackground">

<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_above="@+id/textView15"
android:layout_centerHorizontal="true"
android:layout_marginBottom="5dp"
android:padding="10dp"
android:scaleType="fitCenter"
android:src="@drawable/ic_shop" />

<TextView
android:id="@+id/textView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="5dp"
android:maxLines="1"
android:text="Belanjaan"
android:textColor="#000"
android:textSize="12sp"
android:textStyle="bold" />

</RelativeLayout>

</androidx.cardview.widget.CardView>

</LinearLayout>

</LinearLayout>

</ScrollView>

</LinearLayout>

5. Selesai dan kalian Run. Jika kalian mengikuti langkah-langkah diatas dengan baik, pasti aplikasi yang kalian buat akan berjalan sebagaimana mestinya. Namun jika mengalami Error, silahkan berikan komentar dan kita diskusikan bersama. Berikut hasilnya :
Tutorial Membuat Tampilan Mirip Seperti Aplikasi GRAB dengan Android Studio
Membuat Tampilan Mirip Seperti Aplikasi GRAB
Tutorial Membuat Tampilan Mirip Seperti Aplikasi GRAB dengan Android Studio
Membuat Tampilan Mirip Seperti Aplikasi GRAB
Inti dari pembuatan tutorial ini adalah source dibawah ini, karena source ini adalah proses untuk merubah Image dan Text sesuai waktu yang ditentukan (pagi, siang, sore dan malam).
private void greeting() {
        Calendar calendar = Calendar.getInstance();
        int timeOfDay = calendar.get(Calendar.HOUR_OF_DAY);

        if (timeOfDay >= 0 && timeOfDay < 12){
            greetText.setText("Selamat Pagi\nAzhar");
            greetImg.setImageResource(R.drawable.img_default_half_morning);
        } else if (timeOfDay >= 12 && timeOfDay < 15) {
            greetText.setText("Selamat Siang\nAzhar");
            greetImg.setImageResource(R.drawable.img_default_half_afternoon);
        } else if (timeOfDay >= 15 && timeOfDay < 18) {
            greetText.setText("Selamat Sore\nAzhar");
            greetImg.setImageResource(R.drawable.img_default_half_without_sun);
        } else if (timeOfDay >= 18 && timeOfDay < 24) {
            greetText.setText("Selamat Malam\nAzhar");
            greetText.setTextColor(Color.WHITE);
            greetImg.setImageResource(R.drawable.img_default_half_night);
        }
    }
Demikian informasi yang saya bagikan untuk kalian. Jangan lupa bagikan artikel ini ke teman-teman kalian agar ikut membaca Tutorial Membuat Tampilan Mirip Seperti Aplikasi GRAB dengan Android Studio ini. Subscribe juga blog Rivaldi 48 ini agar kalian mendapatkan notifikasi saat Admin update artikel terbaru. Semoga kalian lebih nyaman dan mudah dalam mengakses Blog Rivaldi 48 dimanapun kalian berada. Terima Kasih. Follow Instagram Admin @azhardvls_

Posting Komentar

Lebih baru Lebih lama