Membuat Menu Navigasi Android dengan Fragment & Activity Lifecycle

03/03/2021

Bagi Mobile Developer implementasi UI/UX menjadi tahap yang paling rutin saat mengembangkan aplikasi mobile. Terlepas dari kompleksitas atau kerumitan dari design UI/UX itu sendiri, Mobile Developer perlu untuk memahami bagaimana cara mengimplementasi UI dengan benar dan memastikan flow aplikasi dapat bekerja sesuai dengan design UX-nya. Pola MVC, MVP, atau MVVM cukup proper digunakan saat melakukan development mobile-apps.

Dasar pengembangan aplikasi Android tidak terlepas dari Activity lifecycle. Untuk mengimplementasi activity lifecycle, developer perlu memahami bagaimana memanfaatkan Activity Class di dalam project supaya tahu kapan harus menjalankan fungsi-fungsi aplikasi, kapan harus menghentikannya atau menundanya. Ringkasnya, activity llifecycle merupakan siklus alur kerja aplikasi yang sesuai dengan implementasi penggunaannya. Nah, penggunaan pattern MVC/MVP dan adopsi activity lifecycle menjaga sustainability konsistensi pengembangan aplikasi agar tetap clean (setidaknya).

Design komponen UI yang cukup sering dijumpai dan mesti diimplementasi Android Developer ialah komponen navigation menu. Biasanya komponen ini sering dijumpai di bagian bawah (bottom), atas (top), ataupun di samping (side) pada aplikasi. Developer cukup dimudahkan dengan adanya komponen atau class Fragmentyang disediakan oleh Android sendiri. Karena dengan mengimplementasi fragment, developer dapat memastikan fungsi navigasi pada menu berjalan dengan baik.

Fragment class sendiri masih bagian dari Activity Class. Jadi, ketika mengadopsi fragment pada sebuah class, maka sebenarnya class tersebut mengikuti activity flow yang terdaftar.

Adapun flow standar ketika mengimplementasi menu navigation dengan fragment adalah sebagai berikut.

Buat activity class beserta *view layout-*nya.

MainActivity.java, class ini merupakan class utama yang dieksekusi saat pertama kali aplikasi berjalan.

public class MainActivity extends AppCompatActivity {
    private static final String TAG = "MainActivity";

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getSupportActionBar().hide();
        setContentView(R.layout.main);
        Log.e(TAG, "start onCreate");
    }

    @Override
    protected void onResume() {
        super.onResume();
        Log.e(TAG, "start onResume");
    }

    @Override
    protected void onStop() {
        super.onStop();
        Log.e(TAG, "start onStop");
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        Log.e(TAG, "start onDestroy");
    }
}

Pada view layout, tambahkan komponen FrameLayout dan BottomNavigationView

main.xml, layout view untuk class MainActivity yang berisi komponen FrameLayout dan BottomNavigationView.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <FrameLayout
        android:id="@+id/fragment_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerVertical="true"/>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/white"
        app:itemIconTint="@color/black"
        app:itemTextColor="@color/black"
        app:labelVisibilityMode="labeled"
        android:elevation="8dp"
        app:menu="@menu/menu_bottom" />
</RelativeLayout>

Buat Fragment Class untuk setiap item menu dengan cara klik kanan pada folder package > New > Fragment > Fragment (Blank).

Pada lifecycle onCreate pada class Activity, tambahkan event handler yang menangani trigger saat user memilih menu item.

MainActivity.java

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    getSupportActionBar().hide();
    setContentView(R.layout.main);
    Log.e(TAG, "start onCreate");

    BottomNavigationView bottomNavigation = findViewById(R.id.bottom_navigation);
    bottomNavigation.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()){
                case R.id.first_fragment:
                    openFragment(new FirstFragment());
                    return true;

                case R.id.second_fragment:
                    openFragment(new SecondFragment());
                    return true;

                case R.id.third_fragment:
                    openFragment(new OCRFragment());
                    return true;
            }
            return false;
        }
    });
}

Pada activity class, buat satu function khusus untuk melakukan fungsi-fungsi fragment seperti transaction, replace, dan commit.

protected void openFragment(Fragment fragment){
    FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
    fragmentTransaction.replace(R.id.fragment_view, fragment);
    fragmentTransaction.addToBackStack(null);
    fragmentTransaction.commit();
}

Terakhir invoke function openFragment di onCreate lifecycle.

openFragment(new FirstFragment());

Pada tahap nomor 4 di atas, method setOnNavigationItemSelectedListener menangani event dari pilihan user. Ketika user memilih item pada menu, maka View BottomNavigationView memanggil method setOnNavigationItemSelectedListener dan memanggil class Fragment.

Apakah bisa memanggil Activity Class dari Fragment?

Bisa. Caranya hanya dengan membuat instance intent baru dan menjalankan intent-nya. Seperti contoh, pada kondisi third_fragment dipilih, maka ThirdFragmentActivity dipanggil (asumsi ThirdFragmentActivity sudah dibuat).

case R.id.third_fragment:
  Intent intent = new Intent(MainActivity.this, ThirdFragmentActivity.class);
  startActivity(intent);
  return true;