Belajar Android (Part 2)

Pada artikel sebelumnya kita sudah membahas teknik dasar dalam membuat aplikasi Android. Nah, pada artikel kali ini Saya akan coba melanjutkan teknik berikutnya yang sering digunakan oleh android developer dalam membangun aplikasi.

Fragment

Fragment merupakan salah satu komponen pendukung yang banyak digunakan oleh seorang android developer pada saat membangun aplikasi android. Komponen tersebut juga banyak diperlukan ketika kita akan membangun aplikasi di atas tablet.

Berikut ini adalah langkah-langkah mudah dalam membuat fragment. Kita akan coba meneruskan code yang telah kita buat pada artikel sebelumnya. Pada artikel kali ini Saya coba memisahkan metode pembelajaran menggunakan git-flow. Tujuannya adalah supaya kita bisa melihat perbandingan antara code sebelumnya, sehingga kita bisa tahu sudah sampai tahap mana kita belajar untuk membuat aplikasi android :)

Langkah pertama, yaitu Saya akan membuat 2 buah layout yang nantinya akan dibentuk oleh fragment. Layout ini kita namakan dengan fragment_home dan fragment_detail

Seperti biasa, jangan lupa untuk menambahkan class implementasi dari kedua fragment tersebut ya :)

Jika pada komponen activity kita diwajibkan untuk mendaftarkan komponen tersebut pada AndroidManifest, maka untuk fragment hal ini tidak perlu dilakukan. Karena pada intinya, fragment merupakan bagian dari activity yang sejatinya tidak dapat berdiri sendiri tanpa bantuan class activity.

Lalu, bagaimana caranya supaya fragment yang kita buat dapat ditampilkan di dalam activity? Caranya cukup mudah, pada artikel kali ini Saya akan memberikan contoh untuk menampilkan fragment tersebut dengan membuat tampilan menu navigasi pada aplikasi kita dengan bantuan DrawerLayout dan NavigationView

Pada artikel sebelumnya kita telah membuat tampilan activity bukan ? dan pada artikel kali ini kita akan melengkapi tampilan tersebut dengan menambahkan komponen view yang telah Saya sebutkan…

Ada bagian penting dari activity_main tersebut yang akan kita gunakan nantinya untuk melakukan proses inflate terhadap fragment tersebut, yaitu menggunakan FrameLayout sebagai media perantara antar fragment.

Saya coba jelaskan fungsi dari tiap-tiap method yang kita tulis pada code tersebut…

• Inisialisasi variable yang dibutuhkan oleh navigation menu yang akan digunakan untuk variable reference pada NavigationItemListener

MenuItem mMenuItem;
DrawerLayout mDrawerLayout;

private ActionBarDrawerToggle mActionBarDrawerToggle;

• Implementasikan listener yang dibutuhkan oleh NavigationView

mDrawerLayout = (DrawerLayout) findViewById(R.id.dl_main);
final NavigationView navigationView = (NavigationView) findViewById(R.id.nv_main);
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull final MenuItem menuItem) {
                mMenuItem = menuItem;
                menuItem.setChecked(true);
                mDrawerLayout.closeDrawers();

                return true;
            }
        });

• Selanjutnya adalah menambahkan listener navigasi tersebut agar dapat dikenali oleh ActionBarDrawerToggle

mActionBarDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close) {
    @Override
    public void onDrawerOpened(final View drawerView) {
        super.onDrawerOpened(drawerView);
    }

    @Override
    public void onDrawerClosed(final View drawerView) {
        super.onDrawerClosed(drawerView);

        if (null != mMenuItem) {
            switchNavigationMenu(mMenuItem.getItemId());
        }
    }

    @Override
    public void onDrawerSlide(final View drawerView, final float slideOffset) {
        super.onDrawerSlide(drawerView, slideOffset);

        if (null != drawerView && drawerView == navigationView) {
            super.onDrawerSlide(drawerView, 0);
        } else {
            super.onDrawerSlide(drawerView, slideOffset);
        }
    }
};

mDrawerLayout.addDrawerListener(mActionBarDrawerToggle);

• Kita dapat melakukan perpindahan menu dan fragment tersebut ketika object memasuki callback onDrawerClosed. Tujuannya adalah untuk menghasilkan animasi transisi yang cukup smooth ketika fragment yang kita panggil akan di-replace oleh fragment lainnya. Berikut contoh implementasinya;

public void switchNavigationMenu(final int itemId) {
    switch (itemId) {
        case R.id.menu_home: {
            showHomeFragment();
            break;
        }
        case R.id.menu_detail: {
            showDetailFragment();
            break;
        }
    }
}

private void showHomeFragment() {
    final String tag = HomeFragment.class.getSimpleName();

    if (getSupportFragmentManager().findFragmentByTag(tag) == null) {
        final Fragment fragment = new HomeFragment();
        final FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
        fragmentTransaction.replace(R.id.fl_main, fragment, tag);
        fragmentTransaction.commit();
    }
}

private void showDetailFragment() {
    final String tag = DetailFragment.class.getSimpleName();

    if (getSupportFragmentManager().findFragmentByTag(tag) == null) {
        final Fragment fragment = new DetailFragment();
        final FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
        fragmentTransaction.replace(R.id.fl_main, fragment, tag);
        fragmentTransaction.commit();
    }
}

• Agar aplikasi kita dapat langsung menampilkan view HomeFragment, maka kita dapat melakukan metode overriding terhadap fungsi onPostCreate yang terdapat pada class Activity dengan cara seperti berikut;

@Override
protected void onPostCreate(@Nullable final Bundle savedInstanceState) {
    super.onPostCreate(savedInstanceState);
    mActionBarDrawerToggle.syncState();
    showHomeFragment();
}

• Nah, supaya hasilnya lebih baik lagi dari segi UX. Kita dapat melakukan metode overriding terhadap fungsi onBackPressed yang terdapat pada class Activity dengan cara seperti berikut;

@Override
public void onBackPressed() {
    if (mDrawerLayout.isDrawerVisible(GravityCompat.START)) {
        mDrawerLayout.closeDrawers();
    } else {
        finish();
    }
}

Jika sudah selesai, coba jalankan aplikasinya kembali ya :) … anyway lagi-lagi cukup mudah bukan ? Untuk source code selengkapnya dapat kalian lihat di sini ya:

budioktaviyan/belajar-android

Step selanjutnya kita akan coba membahas komponen yang cukup penting dalam menampilkan hasil populasi data kepada bentuk list, yaitu Adapter…