 |
| Membuat Tampilan Mirip Seperti Aplikasi GRAB |
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 :
 |
| Membuat Tampilan Mirip Seperti Aplikasi GRAB |
 |
| Membuat Tampilan Mirip Seperti Aplikasi GRAB |
private void greeting() {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_
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);
}
}
