BAB III

ANDROID STUDIO II

3.1. Langkah Kerja

1. Buka Android Studio

2. Buat empty project baru dengan nama “Modul2_Kel02”.

 Gambar 3.8 Membuat Empty Project Baru
3. Ubah isi file build.gradle (Module: app) pada bagian dependencies dan
android dengan source code berikut.
dependencies {

implementation 'androidx.appcompat:appcompat:1.3.1'
implementation
'com.google.android.material:material:1.4.0'
implementation
'androidx.constraintlayout:constraintlayout:2.1.1'
testImplementation 'junit:junit:4.13.2'
androidTestImplementation
'androidx.test.ext:junit:1.1.3'
androidTestImplementation
'androidx.test.espresso:espresso-core:3.4.0'
implementation 'de.hdodenhof:circleimageview:3.1.0'

implementation 'com.github.bumptech.glide:glide:4.12.0'
implementation 'com.google.code.gson:gson:2.8.8'
implementation 'com.squareup.retrofit2:retrofit:2.9.0'
implementation 'com.squareup.retrofit2:converter-
gson:2.9.0'
implementation 'com.squareup.okhttp3:okhttp:4.9.0'
}
4. Klik sync nowdan tunggu hingga proses build gradle selesai
5. Melakukan konfigurasi terhadap desain tambilan dengan cara mengubah
file colors.xml dengan source code berikut.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="purple_200">#FFBB86FC</color>
<color name="purple_500">#FF6200EE</color>
<color name="purple_700">#FF3700B3</color>
<color name="teal_200">#FF03DAC5</color>
<color name="teal_700">#FF018786</color>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
<color name="colorPrimary">#36B5FE</color>
<color name="colorAccent">#03DAC5</color>
<color name="colorBackground">#F8F8F8</color>
<color name="colorPrimaryDark">#1A8ED7</color>
<color name="font_default">#606060</color>
<color name="font_landing">#7D7D7D</color>
</resources>

6. Melakukan konfigurasi strings.xml dengan mengubah file strings.xml

dengan source code berikut.
<resources>
<string name="app_name">Modul 2 MDP 2021</string>
<string name="mulai">Mulai</string>
<string name="berikutnya">Berikutnya</string>
</resources>
7. Melakukan konfigurasi terhadap styles.xml dimana berfungsi untuk
mempresentasikan style tampilan aplikasi android studio. Konfigurasi ini
dilakukan dengan cara menuliskan source code sebagai berikut :
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="ButtonStyle">
<item
name="android:layout_width">match_parent</item>
<item name="android:textAllCaps">false</item>
<item
name="android:fontFamily">@font/roboto_bold</item>
<item
name="android:background">@drawable/bg_btn_blue</item>
<item
name="android:textColor">@android:color/white</item>

</style>
</resources>
 8. Melakukan konfigurasi pada themes.xml yang bisa dibuka melalui values
→ themes dengan cara menuliskan source code sebagai berikut.
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.modul2_kel33"
parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/purple_500</item>
<item
name="colorPrimaryVariant">@color/purple_700</item>
<item name="colorOnPrimary">@color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/teal_200</item>
<item
name="colorSecondaryVariant">@color/teal_700</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor"
tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
<style name="Theme.Modul2MDP2020"
parent="Theme.MaterialComponents.Light.NoActionBar">
<item
name="colorPrimary">@color/colorPrimaryDark</item>
<item
name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>

9. Melakukan penambahan font, gambar, dan logo dengan melakukan copy

folder drawable yang sudah diberikan dan paste ke dalam folder res →
drawable.

Gambar 3.12 Semua File Pendukung yang Akan Digunkan

10. Buat folder bernama “layout” pada folder res, lalu buat file bernama
“activity_main.xml”, kemudian lakukan konfigurasi dengan memasukan
source code sebagai berikut :
<?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="@color/colorBackground"
tools:context=".MainActivity">

<LinearLayout
android:id="@+id/linear_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingVertical="16dp">

<TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/roboto_bold"
android:text="Get Data dari Rest API"
android:textColor="@color/colorPrimaryDark"
android:textSize="20sp"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toStartOf="@+id/linear_mdp"
app:layout_constraintHorizontal_bias="0.564"

app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias="0.444" />

<LinearLayout
android:id="@+id/linear_mdp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:gravity="center"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">

<ImageView
android:layout_width="26dp"
android:layout_height="26dp"
android:background="@drawable/ic_logo"

app:layout_constraintBottom_toBottomOf="@+id/textView2"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toEndOf="@+id/textView2"

app:layout_constraintTop_toTopOf="@+id/textView2" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:fontFamily="@font/roboto"
android:text="Modul 2\nMDP 2021"

android:textColor="@color/colorPrimaryDark"
android:textSize="12sp" />

</LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

</LinearLayout>

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

app:layout_constraintTop_toBottomOf="@+id/linear_title">

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="72dp">

<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rv_list_user"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
 tools:listitem="@layout/item_rv_list_user" />

</androidx.constraintlayout.widget.ConstraintLayout>

</ScrollView>

</androidx.constraintlayout.widget.ConstraintLayout>
11. Tambahkan font roboto regular dan roboto bold pada project.

Gambar 3.15 Menambahkan Font Roboto Regular pada Project

Gambar 3.16 Menambahkan Font Roboto Bold pada Project

12. Buat Java Class baru dengan nama MainActivity.java dengan memasukan
source code sebagai berikut :

package com.example.modul2_kel33;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.os.Bundle;
import android.widget.Toast;

import com.example.modul2_kel33.ApiClient;
import com.example.modul2_kel33.DataItem;
import com.example.modul2_kel33.ListUserResponse;
import com.example.modul2_kel33.RecycleAdapter;
import com.example.modul2_kel33.R;
import com.example.modul2_kel33.ApiClient;

import java.util.List;
import retrofit2.Call;
import retrofit2.Callback;
import retrofit2.Response;

public class MainActivity extends AppCompatActivity {

RecyclerView rvListUser;

private List<DataItem> listItem;

private RecycleAdapter adapter;

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

rvListUser = findViewById(R.id.rv_list_user);

ApiClient.getService().getList().enqueue(new
Callback<ListUserResponse>() {
@Override
public void onResponse(Call<ListUserResponse>
call, Response<ListUserResponse> response) {
if (response.isSuccessful()) {
listItem = response.body().getData();

adapter = new RecycleAdapter(listItem,

MainActivity.this);
rvListUser.setLayoutManager(new
LinearLayoutManager(getApplicationContext()));
rvListUser.setAdapter(adapter);
}
 }

@Override
public void onFailure(Call<ListUserResponse>
call, Throwable t) {

Toast.makeText(getApplicationContext(),
(CharSequence) t, Toast.LENGTH_LONG).show();
}
});
}
}

13. Buat 6 Java Class baru dengan nama “DataItem”, “ListUserResponse”,

“RecycleAdapter”, “ApiClient”, “DetailActivity”, dan “ApiInterface”.

Gambar 3.18 Membuat Java Class Baru

Gambar 3.19 Membuat Java Class Baru

Gambar 3.20 Membuat Java Class Baru

 Gambar 3.21 Membuat Java Class Baru

Gambar 3.22 Membuat Java Class Baru

Gambar 3.23 Membuat Java Class Baru

14. Melakukan konfigurasi pada class ApiClient mengubah file ApiClient.java
dengan source code berikut.
package com.example.modul2_kel33;

import okhttp3.OkHttpClient;
import retrofit2.Retrofit;
import retrofit2.converter.gson.GsonConverterFactory;

public class ApiClient {

// TODO menginisiasi MainInterface

private static ApiInterface service;

public static ApiInterface getService() {

if (service == null) {
// Membuat base URL
String BASE_URL = "https://reqres.in/";

OkHttpClient.Builder httpClient = new

OkHttpClient.Builder();
Retrofit.Builder builder = new
Retrofit.Builder()
 .baseUrl(BASE_URL)
.addConverterFactory(GsonConverterFactor
y.create());

Retrofit retrofit =
builder.client(httpClient.build()).build();

service = retrofit.create(ApiInterface.class);
}
return service;
}
}

15. Melakukan konfigurasi pada class DataItem dengan memasukan source

code berikut.
package com.example.modul2_kel33;

import com.google.gson.annotations.SerializedName;

public class DataItem{

@SerializedName("last_name")
private String lastName;

@SerializedName("id")
private int id;

@SerializedName("avatar")
private String avatar;

@SerializedName("first_name")
private String firstName;

@SerializedName("email")
private String email;

public void setLastName(String lastName){

this.lastName = lastName;
}

public String getLastName(){

return lastName;
}

public void setId(int id){

this.id = id;
}

public int getId(){

return id;
}

public void setAvatar(String avatar){

this.avatar = avatar;
 }

public String getAvatar(){

return avatar;
}

public void setFirstName(String firstName){

this.firstName = firstName;
}

public String getFirstName(){

return firstName;
}

public void setEmail(String email){

this.email = email;
}

public String getEmail(){

return email;
}

@Override
public String toString(){
return
"DataItem{" +
"last_name = '" + lastName + '\'' +
",id = '" + id + '\'' +
",avatar = '" + avatar + '\'' +
",first_name = '" + firstName + '\''
+
",email = '" + email + '\'' +
"}";
}
}

16. Melakukan konfigurasi pada class ListUserResponse dengan memasukan

source code berikut.
package com.example.modul2_kel33;

import java.util.List;
import com.google.gson.annotations.SerializedName;

public class ListUserResponse{

@SerializedName("per_page")
private int perPage;

@SerializedName("total")
private int total;

@SerializedName("data")
private List<DataItem> data;
 @SerializedName("page")
private int page;

@SerializedName("total_pages")
private int totalPages;

public void setPerPage(int perPage){

this.perPage = perPage;
}

public int getPerPage(){

return perPage;
}

public void setTotal(int total){

this.total = total;
}

public int getTotal(){

return total;
}

public void setData(List<DataItem> data){

this.data = data;
}

public List<DataItem> getData(){

return data;
}

public void setPage(int page){

this.page = page;
}

public int getPage(){

return page;
}

public void setTotalPages(int totalPages){

this.totalPages = totalPages;
}

public int getTotalPages(){

return totalPages;
}

@Override
public String toString(){
return
"ListUserResponse{" +
"per_page = '" + perPage + '\'' +
",total = '" + total + '\'' +
",data = '" + data + '\'' +
",page = '" + page + '\'' +
",total_pages = '" + totalPages +
'\'' +
 "}";
}
}

17. Melakukan konfigurasi pada class RecycleAdapter dengan memasukan

source code berikut.
package com.example.modul2_kel33;

import android.annotation.SuppressLint;
import android.content.Context;
import android.content.Intent;
import android.os.Parcelable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import com.bumptech.glide.Glide;
import com.example.modul2_kel33.DetailActivity;
import com.example.modul2_kel33.R;

import java.util.List;

public class RecycleAdapter extends

RecyclerView.Adapter<RecycleAdapter.ViewHolder> {
private List<DataItem> dataUser;
private Context mContext;

public RecycleAdapter(List<DataItem> dataUser, Context

mContext) {
this.dataUser = dataUser;
this.mContext = mContext;
}

@NonNull
@Override
public ViewHolder onCreateViewHolder(@NonNull ViewGroup
viewGroup, int i) {
View v =
LayoutInflater.from(viewGroup.getContext()).inflate(R.layout
.item_rv_list_user, viewGroup, false);
return new ViewHolder(v);
}

@Override
public void onBindViewHolder(@NonNull ViewHolder
viewHolder, @SuppressLint("RecyclerView") int i) {
 viewHolder.tvFirstName.setText(dataUser.get(i).getFirstName(
));

viewHolder.tvLastName.setText(dataUser.get(i).getLastName())
;
viewHolder.tvEmail.setText(String.format("Email :
%s", dataUser.get(i).getEmail()));

Glide.with(mContext).load(dataUser.get(i).getAvatar()).into(
viewHolder.imgPhotoUser);
viewHolder.itemView.setOnClickListener(new
View.OnClickListener() {
@Override
public void onClick(View view) {
Intent intent = new Intent(mContext,
DetailActivity.class);
intent.putExtra("name",
dataUser.get(i).getFirstName());
mContext.startActivity(intent);
}
});
}

@Override
public int getItemCount() {
return dataUser.size();
}

public class ViewHolder extends RecyclerView.ViewHolder

{
private ImageView imgPhotoUser;
private TextView tvFirstName, tvLastName, tvEmail;

public ViewHolder(@NonNull View itemView) {

super(itemView);
imgPhotoUser =
itemView.findViewById(R.id.img_photo_user);
tvFirstName =
itemView.findViewById(R.id.tv_item_first_name);
tvLastName =
itemView.findViewById(R.id.tv_item_last_name);
tvEmail =
itemView.findViewById(R.id.tv_item_email);
}
}
}

18. Melakukan konfigurasi pada class DetailActivity dengan memasukan

source code berikut.
package com.example.modul2_kel33;

import androidx.appcompat.app.AppCompatActivity;
 import android.os.Bundle;
import android.widget.TextView;

import com.example.modul2_kel33.R;

public class DetailActivity extends AppCompatActivity {

private TextView tvNama;

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

tvNama = findViewById(R.id.tv_first_name);

if (getIntent().hasExtra("name")) {

String nama =
getIntent().getStringExtra("name");
tvNama.setText(nama);
}
}
}

19. Melakukan konfigurasi pada class ApiInterface dengan memasukan

source code berikut.
package com.example.modul2_kel33;

import com.example.modul2_kel33.ListUserResponse;

import retrofit2.Call;
import retrofit2.http.GET;

public interface ApiInterface {

@GET("api/users?page=2")
Call<ListUserResponse> getList();

20. Buat 2 layout resource file bernama “activity_detail” dan

“item_rv_list_user” pada folder layout.
 Gambar 3.24 Membuat Layout Resource File Baru

Gambar 3.25 Membuat Layout Resource File Baru

21. Melakukan konfigurasi pada activity_detail.xml dengan memasukan
source code berikut.
<?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"
tools:context="DetailActivity">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:text="Tugas : Tampilkan Data dari User yang
di klik pada halaman sebelumnya kesini dan buat layout
semenarik mungkin"
android:textAlignment="center"
 android:textSize="16sp"
android:textStyle="bold"

app:layout_constraintBottom_toTopOf="@+id/tv_first_name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.89" />

<TextView
android:id="@+id/tv_first_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ID"
android:textAlignment="center"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout> >

22. Melakukan konfigurasi pada item_rv_list_user.xml dengan memasukan

source code berikut.
<?xml version="1.0" encoding="utf-8"?>

<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-
auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="8dp"
android:layout_marginTop="4dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="4dp"
card_view:cardCornerRadius="4dp">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp">

<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/img_photo_user"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginBottom="4dp"
 android:scaleType="centerCrop"
tools:src="@color/colorAccent" />

<TextView
android:id="@+id/tv_item_first_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_toEndOf="@id/img_photo_user"
android:textSize="16sp"
android:textStyle="bold"
tools:text="First Name" />

<TextView
android:id="@+id/tv_item_last_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="8dp"
android:layout_toEndOf="@id/img_photo_user"
android:layout_below="@id/tv_item_first_name"
android:textSize="12sp"
tools:text="Last Name" />

<TextView
android:id="@+id/tv_item_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/tv_item_last_name"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_toEndOf="@id/img_photo_user"
android:ellipsize="end"
android:maxLines="5"
tools:text="Email" />

</RelativeLayout>
</androidx.cardview.widget.CardView>

23. Melakukan konfigurasi pada AndroidManifest.xml dengan memasukan

source code berikut.
<?xml version="1.0" encoding="utf-8"?>
<manifest
xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.modul2_kel33">

<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/Theme.Modul2_kel33">
<activity android:name="DetailActivity"></activity>
<activity android:name=".MainActivity">
<intent-filter>
<action
android:name="android.intent.action.MAIN" />

<category
android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<meta-data
android:name="preloaded_fonts"
android:resource="@array/preloaded_fonts" />
</application>

</manifest>

24. Buat 4 Java Class dengan nama “SplashScreenActivity”,

“LandingPageActivity”, “OnboardingAdapter”, dan “OnboardingItem”.

Gambar 3.26 Membuat Java Class Baru

Gambar 3.27 Membuat Java Class Baru

Gambar 3.28 Membuat Java Class Baru

 Gambar 3.29 Membuat Java Class Baru
25. Melakukan konfigurasi pada SplashScreenActivity.java dengan
memasukan source code berikut.

package com.example.modul2_kel33;

import androidx.annotation.RequiresApi;
import androidx.appcompat.app.AppCompatActivity;

import android.app.Activity;
import android.content.Intent;
import android.content.SharedPreferences;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.os.Bundle;
import android.os.Handler;
import android.view.Window;
import android.view.WindowManager;

import com.example.modul2_kel33.R;

public class SplashScreenActivity extends AppCompatActivity

{

private int waktu_loading = 2000;

@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public static void setStatusBarGradiant(Activity
activity) {
if (Build.VERSION.SDK_INT >=
Build.VERSION_CODES.LOLLIPOP) {
Window window = activity.getWindow();
Drawable background =
activity.getResources().getDrawable(R.drawable.bg_header_hom
e);

window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM
_BAR_BACKGROUNDS);

window.setStatusBarColor(activity.getResources().getColor(an
droid.R.color.transparent));

window.setNavigationBarColor(activity.getResources().getColo
r(android.R.color.transparent));
 window.setBackgroundDrawable(background);
}
}

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (Build.VERSION.SDK_INT >=
Build.VERSION_CODES.LOLLIPOP) {
setStatusBarGradiant(this);
}
setContentView(R.layout.activity_splash_screen);

final SharedPreferences preferences =

getSharedPreferences("PREFERENCE", MODE_PRIVATE);
String FirstTime =
preferences.getString("FirstTimeInstall", "");

if (FirstTime.equals("No")) {
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
Intent intro = new
Intent(SplashScreenActivity.this, MainActivity.class);
startActivity(intro);
finish();
overridePendingTransition(0, 0);

getIntent().addFlags(Intent.FLAG_ACTIVITY_NO_ANIMATION);
}
}, waktu_loading);
} else {
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
SharedPreferences.Editor editor =
preferences.edit();
editor.putString("FirstTimeInstall",
"No");
editor.apply();
Intent login = new
Intent(SplashScreenActivity.this,
LandingPageActivity.class);
startActivity(login);
finish();
overridePendingTransition(0, 0);

getIntent().addFlags(Intent.FLAG_ACTIVITY_NO_ANIMATION);
}
}, waktu_loading);

}
}
}
26. Melakukan konfigurasi pada LandingPageActivity.java dengan
memasukan source code berikut.
package com.example.modul2_kel33;

import androidx.annotation.RequiresApi;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.content.ContextCompat;
import androidx.viewpager2.widget.ViewPager2;

import android.app.Activity;
import android.content.Intent;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;

import com.example.modul2_kel33.OnboardingAdapter;
import com.example.modul2_kel33.OnboardingItem;
import com.example.modul2_kel33.R;
import com.google.android.material.button.MaterialButton;

import java.util.ArrayList;
import java.util.List;

public class LandingPageActivity extends AppCompatActivity {

@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public static void setStatusBarGradiant(Activity
activity) {
if (Build.VERSION.SDK_INT >=
Build.VERSION_CODES.LOLLIPOP) {
Window window = activity.getWindow();
Drawable background =
activity.getResources().getDrawable(R.drawable.bg_header_hom
e);

window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM
_BAR_BACKGROUNDS);

window.setStatusBarColor(activity.getResources().getColor(an
droid.R.color.transparent));

window.setNavigationBarColor(activity.getResources().getColo
r(android.R.color.transparent));
window.setBackgroundDrawable(background);
}
}
 private OnboardingAdapter onboardingAdapter;
private LinearLayout layoutOnboardingIndicators;
private MaterialButton buttonOnboardingAction;
private Button tv_lewati;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (Build.VERSION.SDK_INT >=
Build.VERSION_CODES.LOLLIPOP) {
setStatusBarGradiant(this);
}
setContentView(R.layout.activity_landing_page);

layoutOnboardingIndicators =
findViewById(R.id.layoutOnboardingIndicators);
buttonOnboardingAction =
findViewById(R.id.buttonOnboardingAction);

buttonOnboardingAction.setBackground(ContextCompat.getDrawab
le(getApplicationContext(),R.drawable.bg_btn_blue));
tv_lewati = findViewById(R.id.tv_lewati);

setupOnboardingItems();
final ViewPager2 onboardingViewPager =
findViewById(R.id.onboardingViewPager);
onboardingViewPager.setAdapter(onboardingAdapter);

setupOnboardingIndicators();
setCurrentOnboardingIndicator(0);

onboardingViewPager.registerOnPageChangeCallback(new
ViewPager2.OnPageChangeCallback() {
@Override
public void onPageSelected(int position) {
super.onPageSelected(position);
setCurrentOnboardingIndicator(position);
}
});

tv_lewati.setOnClickListener(new
View.OnClickListener() {
@Override
public void onClick(View v) {
if (onboardingViewPager.getCurrentItem() + 1
< onboardingAdapter.getItemCount()) {

onboardingViewPager.setCurrentItem(onboardingViewPager.getCu
rrentItem() + 2);
} else {
}
}
});
buttonOnboardingAction.setOnClickListener(new
View.OnClickListener() {
 @Override
public void onClick(View v) {
if (onboardingViewPager.getCurrentItem() + 1
< onboardingAdapter.getItemCount()) {

onboardingViewPager.setCurrentItem(onboardingViewPager.getCu
rrentItem() + 1);
} else {
startActivity(new
Intent(getApplicationContext(), MainActivity.class));
finish();
}
}
});
}

private void setupOnboardingItems() {

List<OnboardingItem> onboardingItems = new

ArrayList<>();

OnboardingItem landingpage1 = new OnboardingItem();

landingpage1.setDescription("Selamat Datang di
Praktikum MDP 2021 Modul 2");
landingpage1.setImage(R.drawable.ic_logo);

OnboardingItem landingpage2 = new OnboardingItem();

landingpage2.setDescription("Kita akan mempelajari
pengembangan aplikasi pada platform Android");
landingpage2.setImage(R.drawable.ic_logo);

OnboardingItem landingpage3 = new OnboardingItem();

landingpage3.setDescription("Materi yang dipelajari
mulai dari Styling Android hingga Get Data dari REST API
Menggunakan Retrofit");
landingpage3.setImage(R.drawable.ic_logo);

onboardingItems.add(landingpage1);
onboardingItems.add(landingpage2);
onboardingItems.add(landingpage3);

onboardingAdapter = new
OnboardingAdapter(onboardingItems);

private void setupOnboardingIndicators() {

ImageView[] indicators = new
ImageView[onboardingAdapter.getItemCount()];
LinearLayout.LayoutParams layoutParams = new
LinearLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT
);
layoutParams.setMargins(8,0,8,0);
for (int i = 0; i < indicators.length; i++) {
 indicators[i] = new
ImageView(getApplicationContext());

indicators[i].setImageDrawable(ContextCompat.getDrawable(get
ApplicationContext(),R.drawable.onboarding_indicator_inactiv
e));
indicators[i].setLayoutParams(layoutParams);

layoutOnboardingIndicators.addView(indicators[i]);
}

private void setCurrentOnboardingIndicator(int index) {

int childCount =
layoutOnboardingIndicators.getChildCount();
for (int i = 0; i < childCount; i++) {
ImageView imageView = (ImageView)
layoutOnboardingIndicators.getChildAt(i);
if (i == index) {

imageView.setImageDrawable(ContextCompat.getDrawable(getAppl
icationContext(),R.drawable.onboarding_indicator_active));
} else {

imageView.setImageDrawable(ContextCompat.getDrawable(getAppl
icationContext(),R.drawable.onboarding_indicator_inactive));
}
}
if ( index == onboardingAdapter.getItemCount() - 1)
{
buttonOnboardingAction.setText(R.string.mulai);
} else {

buttonOnboardingAction.setText(R.string.berikutnya);
}
if ( index == onboardingAdapter.getItemCount() - 3)
{
tv_lewati.setText("Lewati");
tv_lewati.setBackground(null);
} else {
tv_lewati.setText("");
tv_lewati.setBackground(null);
}
}
}

27. Melakukan konfigurasi pada OnboardingAdapter.java dengan memasukan

source code berikut..
package com.example.modul2_kel33;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import com.example.modul2_kel33.OnboardingItem;
import com.example.modul2_kel33.R;

import java.util.List;

public class OnboardingAdapter extends

RecyclerView.Adapter<OnboardingAdapter.OnboardingViewHolder>
{

private List<OnboardingItem> onboardingItems;

public OnboardingAdapter(List<OnboardingItem>
onboardingItems) {
this.onboardingItems = onboardingItems;
}

@NonNull
@Override
public OnboardingViewHolder onCreateViewHolder(@NonNull
ViewGroup parent, int viewType) {
return new OnboardingViewHolder(

LayoutInflater.from(parent.getContext()).inflate(
R.layout.item_container_onboarding,
parent, false
)
);
}

@Override
public void onBindViewHolder(@NonNull
OnboardingViewHolder holder, int position) {

holder.setOnboardingData(onboardingItems.get(position));
}

@Override
public int getItemCount() {
return onboardingItems.size();
}

class OnboardingViewHolder extends

RecyclerView.ViewHolder {

private TextView textDescription;

private ImageView imageOnboarding;

OnboardingViewHolder(@NonNull View itemView) {

super(itemView);
 textDescription =
itemView.findViewById(R.id.textDescription);
imageOnboarding =
itemView.findViewById(R.id.imageOnboarding);
}
void setOnboardingData(OnboardingItem
onboardingItem) {

textDescription.setText(onboardingItem.getDescription());

imageOnboarding.setImageResource(onboardingItem.getImage());
}
}

28. Melakukan konfigurasi pada OnboardingItem.java dengan memasukan

source code berikut.
package com.example.modul2_kel33;

public class OnboardingItem {

private int image;

private String description, title;

public String getTitle() {

return title;
}

public void setTitle(String title) {

this.title = title;
}

public int getImage() {

return image;
}

public void setImage(int image) {

this.image = image;
}

public String getDescription() {

return description;
}

public void setDescription(String description) {

this.description = description;
}
}

29. Buat 3 layout resource file dengan nama “activity_landing_page”,

“activity_splash_screen”, dan “item_container_onboarding”.
Gambar 3.29 Membuat Layout Resource File Baru

Gambar 3.30 Membuat Layout Resource File Baru

Gambar 3.31 Membuat Layout Resource File Baru

30. Melakukan konfigurasi pada activity_splash_screen.xml dengan
memasukan source code berikut.
<?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="@color/colorBackground"
tools:context="SplashScreenActivity"
tools:ignore="MissingDefaultResource">

<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/ic_logo"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<ProgressBar
android:id="@+id/progressBar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="@+id/textView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imageView"
/>

<TextView
android:id="@+id/textView2"
style="@style/TextSplash"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/roboto_bold"
android:text="Praktikum MDP 2021"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.925" />

</androidx.constraintlayout.widget.ConstraintLayout>
31. Melakukan konfigurasi pada activity_landing_page.xml dengan
memasukan source code berikut.
ardingIndicators"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/LandingPage"
android:orientation="horizontal"
android:gravity="center"
app:layout_constraintVertical_bias="0.825"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<com.google.android.material.button.MaterialButton
android:id="@+id/buttonOnboardingAction"
style="@style/ButtonStyle"
android:textSize="16sp"
android:layout_height="50dp"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:layout_marginTop="24dp"
android:background="@drawable/bg_btn_blue"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toBottomOf="@+id/layoutOnboardingIn
dicators" />

</androidx.constraintlayout.widget.ConstraintLayout>

32. Melakukan konfigurasi pada item_container_onboarding.xml dengan

memasukan source code berikut.
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
style="@style/LandingPage"
android:layout_marginTop="56dp"
android:layout_marginBottom="150dp">

<ImageView
android:id="@+id/imageBack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<TextView
android:id="@+id/textLewati"
 android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/roboto_bold"
android:textColor="@color/font_landing"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="24dp"
android:gravity="center"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toBottomOf="@+id/imageBack">

<ImageView
android:id="@+id/imageOnboarding"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<TextView
android:id="@+id/textDescription"
style="@style/TextLanding"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp" />

</LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

33. Tambahkan source code berikut pada file styles.xml.

<style name="LandingPage">
<item name="android:layout_marginStart">40dp</item>
<item name="android:layout_marginEnd">40dp</item>
</style>

<style name="TextSplash">
<item
name="android:textColor">@color/font_default</item>
<item name="android:fontFamily">@font/roboto</item>
</style>

<style name="TextLanding">
<item
name="android:textColor">@color/font_landing</item>
<item name="android:textSize">16sp</item>
<item name="android:textAlignment">center</item>
 <item name="android:fontFamily">@font/roboto</item>
</style>
</resources>

34. Ubah file AndroidManifest.xml dengan source code berikut.

<?xml version="1.0" encoding="utf-8"?>
<manifest
xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.modul2_kel33">
<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/Theme.modul2_kel33">
<activity android:name="DetailActivity"></activity>
<activity android:name="SplashScreenActivity"
android:exported="true">
<intent-filter>
<action
android:name="android.intent.action.MAIN" />

<category
android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name="LandingPageActivity" />
<activity
android:name="MainActivity"
android:screenOrientation="portrait" />

<meta-data
android:name="preloaded_fonts"
android:resource="@array/preloaded_fonts" />
</application>

</manifest>

35. Jalankan aplikasi yang sudah dibuat menggunakan AVD.