SEKOLAH TINGGI MANAJEMEN INFORMATIKA

DAN KOMPUTER BANI SALEH

LAPORAN PRAKTIKUM KOMPUTER
Nama M Syahrul Fadillah Ruang Lab
NIM 43A87006160121 Mata Kuliah Pemrograman Mobile
Jurusan Teknik Informatika Praktikum 4
Dosen Muhamad Nur, S.Kom, Hari / Tanggal 19 Oktober 209
M.Kom
Judul: Project 4-Membuat Tab Layout

1. Tujuan Praktikum

Mahasiswa mampu memahami dan mengerti serta melakukan pengujian pembuatan

Tab Layout menggunakan swap/slide dan menggabungkan dengan Bottom Navigation.

2. Dasar Teori

Salah satu komponen view pada android, yang di sediakan pada para developer untuk
membuat design yang dapat beranimasi, maksudnya design di sini adalah suatu atau
kumpulan object baik berupa komponen view lainnya seperti layout, input, listview,
textview, image dan lain-lain.

3. Langkah Praktikum

 Melanjutkan Praktikum 3, kita hilangkan terlebih dahulu action bar pada aplikasi
yg sudah jadi sebelumnya, dengan cara masuk ke foder sebagai berikut kemudian
pada “AppTheme” tekan Ctrl lalu klik, maka akan diarahkan ke lokasi temanya
 Pada ubah “dark action bar” menjadi “no action bar”

 Tambahkan layout untuk mensupport tab layout yg akan dibuat yaitu dengan cara
sbb
 Karena kita akan membuat tab layout pada fragment task, maka kita ubah
fragment task sebagai berikut

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".fragment.TaskFragment">

<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_layout"
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"
app:layout_constraintBottom_toTopOf="@+id/view_pager"
android:background="@color/colorPrimary"
app:tabTextColor="@android:color/white"
app:tabIndicatorHeight="3dp"
app:tabIndicatorColor="@android:color/holo_orange_light"
app:tabIconTint="@android:color/white">
 </com.google.android.material.tabs.TabLayout>

<androidx.viewpager.widget.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="@+id/tab_layout"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintRight_toRightOf="parent">

</androidx.viewpager.widget.ViewPager>

</androidx.constraintlayout.widget.ConstraintLayout>

 Siapkan vector untuk tab layout, pada kesempatan ini saya membuat 3 tab layout
yaitu active, pending, dan complete

 Buat package untuk tab fragment yang akan dibuat tab layout nya, lalu buat 3
fragment blank untuk active, pending, dan complete

 Pada fragment, edit TaskFragment sebagai berikut

package com.example.bottomnavigation.fragment;

import android.os.Bundle;

import androidx.core.content.ContextCompat;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.example.bottomnavigation.R;
import com.example.bottomnavigation.tabfragments.TabActiveFragment;
import com.example.bottomnavigation.tabfragments.TabCompleteFragment;
import com.example.bottomnavigation.tabfragments.TabPagerAdapter;
import com.example.bottomnavigation.tabfragments.TabPendingFragment;
import com.google.android.material.tabs.TabLayout;

import java.lang.reflect.Array;
import java.util.Arrays;
import java.util.List;

/**
* A simple {@link Fragment} subclass.
*/
public class TaskFragment extends Fragment {

private TabLayout tabLayout;

private ViewPager viewPager;
private List<Fragment> fragments;
private List<String> titles;
private int[] icons = {R.drawable.tab_active, R.drawable.tab_pending,
R.drawable.tab_complete};

public TaskFragment() {
fragments = Arrays.asList(
new TabActiveFragment(),
new TabPendingFragment(),
new TabCompleteFragment());
titles = Arrays.asList("Active", "Pending", "Complete");
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view = inflater.inflate(R.layout.fragment_task, container, false);
tabLayout = view.findViewById(R.id.tab_layout);
viewPager = view.findViewById(R.id.view_pager);
TabPagerAdapter adapter = new TabPagerAdapter(getChildFragmentManager(), fragments,
titles);
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);
// tabLayout.getTabAt(0).setIcon(R.drawable.tab_active);
// tabLayout.getTabAt(1).setIcon(R.drawable.tab_pending);
// tabLayout.getTabAt(2).setIcon(R.drawable.tab_complete);

setupTabLayout();

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
View view = tab.getCustomView();
 ImageView icon = view.findViewById(R.id.tab_icon);
icon.setImageTintList(ContextCompat.getColorStateList(getContext(),
android.R.color.holo_orange_light));
TextView title = view.findViewById(R.id.tab_title);
title.setTextColor(getResources().getColor(android.R.color.holo_orange_light));
}

@Override
public void onTabUnselected(TabLayout.Tab tab) {
View view = tab.getCustomView();
ImageView icon = view.findViewById(R.id.tab_icon);
icon.setImageTintList(ContextCompat.getColorStateList(getContext(),
android.R.color.white));
TextView title = view.findViewById(R.id.tab_title);
title.setTextColor(getResources().getColor(android.R.color.white));
}

@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});

return view;
}

private void setupTabLayout() {

for (int i = 0; i < tabLayout.getTabCount(); i++){
TabLayout.Tab tab = tabLayout.getTabAt(i);
tab.setCustomView(R.layout.tab_item);
View view = tab.getCustomView();
ImageView icon = view.findViewById(R.id.tab_icon);
icon.setImageResource(icons[i]);
TextView title = view.findViewById(R.id.tab_title);
title.setText(titles.get(i));
}
}
}

 Buat class baru pada tabfragment untuk adapter view pager

 Pada TabPagerAdapter edit sebagai berikut

package com.example.bottomnavigation.tabfragments;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
 import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;

import java.util.List;

public class TabPagerAdapter extends FragmentPagerAdapter {

private List<Fragment> fragments;
private List<String> titles;
public TabPagerAdapter(@NonNull FragmentManager fm) {
super(fm);
}

public TabPagerAdapter(@NonNull FragmentManager fm, int behavior) {

super(fm, behavior);
}

public TabPagerAdapter(@NonNull FragmentManager fm, List<Fragment> fragments,

List<String> titles) {
super(fm);
this.fragments = fragments;
this.titles = titles;
}

@NonNull
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}

@Override
public int getCount() {
return fragments.size();
}

@Nullable
@Override
public CharSequence getPageTitle(int position) {
return null;
}
}

 Tambahkan script pada fragment tab active sebagai berikut

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".tabfragments.TabActiveFragment"
android:background="#FF5722">

<!-- TODO: Update blank fragment layout -->

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_blank_fragment"
android:textSize="20sp"
android:layout_gravity="center"
/>
 </FrameLayout>

 Tambahkan scriptpada fragment tab pending sebagai berikut

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".tabfragments.TabPendingFragment"
android:background="#03A9F4">

<!-- TODO: Update blank fragment layout -->

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_blank_fragment"
android:layout_gravity="center"
android:textSize="20sp"/>

</FrameLayout>

 Tambahkan scriptpada fragment tab complete sebagai berikut

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".tabfragments.TabCompleteFragment"
android:background="#FFEB3B">

<!-- TODO: Update blank fragment layout -->

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_blank_fragment"
android:layout_gravity="center"
android:textSize="20sp"/>

</FrameLayout>
4. Hasil Praktikum
 Hasil menggunakan AVD
“Fragment Tab Active”

“Fragment Tab Pending”

 “Fragment Tab Complete”

5. Kesimpulan
Membuat Tab Layout menggunakan pager view akan sangat banyak dibutuhkan untuk
aplikasi yang semakin berkembang pada UI dan UX karena memberikan kesan yang
lebih canggih dan lebih praktis.