Laporan Praktik 4 - M Syahrul F

 

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER BANI SALEH LAPORAN PRAKTIKUM KOMPUTER Nama NIM Jurusan Dosen

M Syahrul Fadillah 43A87006160121 Teknik Informatika Muhamad Nur, S.Kom, M.Kom Judul: Project 4-Membuat Tab Layout

Ruang Mata Kuliah Praktikum Hari / Tanggal

Lab Pemrograman Mobile 4 19 Oktober 209

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

 

 

  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 fragments; private List private int[] titles; icons R.drawable.tab_complete};

=

{R.drawable.tab_active,

R.drawable.tab_pending,

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() { forTabLayout.Tab (int i = 0; i < tabLayout.getTabCount(); i++){ 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 fragments; private List titles; public TabPagerAdapter(@NonNull FragmentManager fm) { super(fm); } public TabPagerAdapter(@NonNull FragmentManager fm, int behavior) { super(fm, behavior); } public TabPagerAdapter(@NonNull List titles) { super(fm); this.fragments = fragments; this.titles = titles; }

FragmentManager

fm,

List

@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; } }

script pada fragment tab active sebagai berikut   Tambahkan





fragments,

 

 

  Tambahkan scriptpada fragment tab pending sebagai berikut





  Tambahkan scriptpada fragment tab complete sebagai berikut





 

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.