Pratinjau Developer untuk Android 11 kini tersedia; uji dan sampaikan masukan Anda.

Mengupdate komponen UI dengan NavigationUI

Komponen Arsitektur Navigasi menyertakan class NavigationUI. Class ini berisi metode statis yang mengelola navigasi dengan panel aplikasi atas, panel navigasi, dan navigasi bawah.

Memproses peristiwa navigasi

Berinteraksi dengan NavController adalah metode utama untuk melakukan navigasi di antara tujuan. NavController bertanggung jawab untuk mengganti konten NavHost dengan tujuan baru. Pada banyak kasus, elemen UI, seperti panel aplikasi atas atau kontrol navigasi tetap lainnya seperti BottomNavigationBar, berada di luar NavHost dan perlu diupdate saat Anda melakukan navigasi di antara tujuan.

NavController menyediakan antarmuka OnDestinationChangedListener yang dipanggil saat tujuan saat ini dari atau argumennya berubah. Pemroses baru dapat didaftarkan melalui metode addOnDestinationChangedListener(). Perhatikan bahwa saat memanggil addOnDestinationChangedListener(), jika tersedia, tujuan saat ini akan segera dikirim ke pemroses Anda.

NavigationUI menggunakan OnDestinationChangedListener untuk membuat komponen UI umum ini mengenali navigasi. Namun, perhatikan bahwa Anda juga dapat hanya menggunakan OnDestinationChangedListener untuk membuat UI kustom atau logika bisnis apa saja mengenali peristiwa navigasi.

Misalnya, Anda mungkin memiliki elemen UI umum yang ingin ditampilkan di beberapa bagian aplikasi dan disembunyikan di bagian lain. Dengan menggunakan OnDestinationChangedListener sendiri, Anda dapat secara selektif menampilkan atau menyembunyikan elemen UI ini berdasarkan tujuan target, seperti dalam contoh berikut:

Kotlin

    navController.addOnDestinationChangedListener { _, destination, _ ->
       if(destination.id == R.id.full_screen_destination) {
           toolbar.visibility = View.GONE
           bottomNavigationView.visibility = View.GONE
       } else {
           toolbar.visibility = View.VISIBLE
           bottomNavigationView.visibility = View.VISIBLE
       }
    }
    

Java

    navController.addOnDestinationChangedListener(new NavController.OnDestinationChangedListener() {
       @Override
       public void onDestinationChanged(@NonNull NavController controller,
               @NonNull NavDestination destination, @Nullable Bundle arguments) {
           if(destination.getId() == R.id.full_screen_destination) {
               toolbar.setVisibility(View.GONE);
               bottomNavigationView.setVisibility(View.GONE);
           } else {
               toolbar.setVisibility(View.VISIBLE);
               bottomNavigationView.setVisibility(View.VISIBLE);
           }
       }
    });
    

Panel aplikasi atas

Panel aplikasi atas menyediakan tempat yang konsisten di seluruh bagian atas aplikasi Anda untuk menampilkan informasi dan tindakan dari layar yang sedang dibuka.

NavigationUI berisi metode yang mengupdate konten di panel aplikasi atas secara otomatis saat pengguna melakukan navigasi dalam aplikasi Anda. Misalnya, menggunakan label tujuan dari grafik navigasi untuk terus mengupdate judul panel aplikasi atas.

Saat menggunakan NavigationUI dengan panel aplikasi atas yang dibahas di bawah, label yang dilampirkan ke tujuan dapat diisi secara otomatis dari argumen yang diberikan ke tujuan dengan menggunakan format {argName} di label Anda.

NavigationUI memberikan dukungan untuk jenis panel aplikasi atas berikut:

AppBarConfiguration

NavigationUI menggunakan objek AppBarConfiguration untuk mengelola perilaku tombol Navigasi di sudut kiri atas bagian tampilan aplikasi Anda. Secara default, tombol Navigasi disembunyikan saat pengguna berada di tujuan level atas grafik navigasi dan muncul sebagai tombol Atas di tujuan lain.

Untuk menggunakan tujuan awal grafik navigasi sebagai satu-satunya tujuan level atas, Anda dapat membuat objek AppBarConfiguration dan meneruskan grafik navigasi yang sesuai, seperti yang ditunjukkan di bawah:

Kotlin

    val appBarConfiguration = AppBarConfiguration(navController.graph)
    

Java

    AppBarConfiguration appBarConfiguration =
            new AppBarConfiguration.Builder(navController.getGraph()).build();
    

Jika ingin menyesuaikan tujuan yang dianggap sebagai tujuan level atas, Anda dapat meneruskan kumpulan ID tujuan ke konstruktor, seperti yang ditunjukkan di bawah:

Kotlin

    val appBarConfiguration = AppBarConfiguration(setOf(R.id.main, R.id.android))
    

Java

    AppBarConfiguration appBarConfiguration =
            new AppBarConfiguration.Builder(R.id.main, R.id.android).build();
    

Membuat Toolbar

Untuk membuat Toolbar dengan NavigationUI, pertama-tama tentukan panel dalam aktivitas utama Anda, seperti yang ditunjukkan di bawah:

    <LinearLayout>
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar" />
        <fragment
            android:id="@+id/nav_host_fragment"
            ... />
        ...
    </LinearLayout>
    

Selanjutnya, panggil setupWithNavController() dari metode onCreate() aktivitas utama Anda, seperti yang ditunjukkan di bawah:

Kotlin

    override fun onCreate(savedInstanceState: Bundle?) {
        setContentView(R.layout.activity_main)

        ...

        val navController = findNavController(R.id.nav_host_fragment)
        val appBarConfiguration = AppBarConfiguration(navController.graph)
        findViewById<Toolbar>(R.id.toolbar)
            .setupWithNavController(navController, appBarConfiguration)
    }
    

Java

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

        ...

        NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
        AppBarConfiguration appBarConfiguration =
                new AppBarConfiguration.Builder(navController.getGraph()).build();
        Toolbar toolbar = findViewById(R.id.toolbar);
        NavigationUI.setupWithNavController(toolbar, navController);
    }
    

Menyertakan CollapsingToolbarLayout

Untuk menyertakan CollapsingToolbarLayout dengan Toolbar, terlebih dahulu tentukan Toolbar dan tata letak di sekitarnya dalam aktivitas utama Anda, seperti yang ditunjukkan di bawah:

    <LinearLayout>
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="@dimen/tall_toolbar_height">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:contentScrim="?attr/colorPrimary"
                app:expandedTitleGravity="top"
                app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin"/>
            </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>

        <fragment
            android:id="@+id/nav_host_fragment"
            ... />
        ...
    </LinearLayout>
    

Selanjutnya, panggil setupWithNavController() dari metode onCreate aktivitas utama Anda, seperti yang ditunjukkan di bawah:

Kotlin

    override fun onCreate(savedInstanceState: Bundle?) {
        setContentView(R.layout.activity_main)

        ...

        val layout = findViewById<CollapsingToolbarLayout>(R.id.collapsing_toolbar_layout)
        val toolbar = findViewById<Toolbar>(R.id.toolbar)
        val navController = findNavController(R.id.nav_host_fragment)
        val appBarConfiguration = AppBarConfiguration(navController.graph)
        layout.setupWithNavController(toolbar, navController, appBarConfiguration)
    }
    

Java

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

        ...

        CollapsingToolbarLayout layout = findViewById(R.id.collapsing_toolbar_layout);
        Toolbar toolbar = findViewById(R.id.toolbar);
        NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
        AppBarConfiguration appBarConfiguration =
                new AppBarConfiguration.Builder(navController.getGraph()).build();
        NavigationUI.setupWithNavController(layout, toolbar, navController, appBarConfiguration);
    }
    

Panel tindakan

Untuk menambahkan dukungan navigasi ke panel tindakan default, panggil setupActionBarWithNavController() dari metode onCreate() aktivitas utama Anda, seperti yang ditunjukkan di bawah. Perhatikan bahwa Anda perlu mendeklarasikan AppBarConfiguration di luar onCreate(), karena Anda juga perlu menggunakannya saat mengganti onSupportNavigateUp():

Kotlin

    private lateinit var appBarConfiguration: AppBarConfiguration

    ...

    override fun onCreate(savedInstanceState: Bundle?) {
        ...

        val navController = findNavController(R.id.nav_host_fragment)
        appBarConfiguration = AppBarConfiguration(navController.graph)
        setupActionBarWithNavController(navController, appBarConfiguration)
    }
    

Java

    AppBarConfiguration appBarConfiguration;

    ...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        ...

        NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
        appBarConfiguration = new AppBarConfiguration.Builder(navController.getGraph()).build();
        NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration);
    }
    

Setelah itu, ganti onSupportNavigateUp() untuk menangani navigasi Atas:

Kotlin

    override fun onSupportNavigateUp(): Boolean {
        val navController = findNavController(R.id.nav_host_fragment)
        return navController.navigateUp(appBarConfiguration) || super.onSupportNavigateUp()
    }
    

Java

    @Override
    public boolean onSupportNavigateUp() {
        NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
        return NavigationUI.navigateUp(navController, appBarConfiguration)
                || super.onSupportNavigateUp();
    }
    

Menyatukan tujuan ke item menu

NavigationUI juga menyediakan helper untuk menyatukan tujuan ke komponen UI berdasarkan menu. NavigationUI berisi metode helper, onNavDestinationSelected(), yang mengambil MenuItem bersama dengan NavController yang menghosting tujuan terkait. Jika id dari MenuItem cocok dengan id tujuan, NavController kemudian dapat menavigasi ke tujuan tersebut.

Sebagai contoh, cuplikan XML di bawah ini menentukan item menu dan tujuan dengan id umum, yaitu details_page_fragment:

    <?xml version="1.0" encoding="utf-8"?>
    <navigation xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:android="http://schemas.android.com/apk/res/android"
        ... >

        ...

        <fragment android:id="@+id/details_page_fragment"
             android:label="@string/details"
             android:name="com.example.android.myapp.DetailsFragment" />
    </navigation>
    
    <menu xmlns:android="http://schemas.android.com/apk/res/android">

        ...

        <item
            android:id="@id/details_page_fragment"
            android:icon="@drawable/ic_details"
            android:title="@string/details" />
    </menu>
    

Misalnya, jika menu ditambahkan melalui onCreateOptionsMenu() Aktivitas, Anda dapat mengaitkan item menu dengan tujuan dengan mengganti onOptionsItemSelected() Aktivitas untuk memanggil onNavDestinationSelected(), seperti yang ditunjukkan di bawah:

Kotlin

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        val navController = findNavController(R.id.nav_host_fragment)
        return item.onNavDestinationSelected(navController) || super.onOptionsItemSelected(item)
    }
    

Java

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
        return NavigationUI.onNavDestinationSelected(item, navController)
                || super.onOptionsItemSelected(item);
    }
    

Sekarang, saat pengguna mengklik item menu details_page_fragment, aplikasi akan otomatis menavigasi ke tujuan yang sesuai dengan id yang sama.

Menambahkan panel navigasi

Panel navigasi adalah panel UI yang menampilkan menu navigasi utama aplikasi Anda. Panel samping ini akan muncul saat pengguna menyentuh ikon panel samping di panel aplikasi atau saat pengguna menggeser jari dari tepi kiri layar.

Ikon panel samping ditampilkan di semua tujuan level atas yang menggunakan DrawerLayout. Tujuan level atas adalah tujuan level root aplikasi Anda. Tujuan ini tidak menampilkan tombol Atas di panel aplikasi.

Untuk menambahkan panel navigasi, terlebih dahulu deklarasikan DrawerLayout sebagai tampilan root. Di dalam DrawerLayout, tambahkan tata letak untuk konten UI utama dan tampilan lain yang berisi konten panel navigasi.

Misalnya, tata letak berikut menggunakan DrawerLayout dengan dua tampilan turunan: NavHostFragment untuk menyertakan konten utama dan NavigationView untuk konten panel navigasi.

<?xml version="1.0" encoding="utf-8"?>
    <!-- Use DrawerLayout as root container for activity -->
    <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

        <!-- Layout to contain contents of main body of screen (drawer will slide over this) -->
        <fragment
            android:name="androidx.navigation.fragment.NavHostFragment"
            android:id="@+id/nav_host_fragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:defaultNavHost="true"
            app:navGraph="@navigation/nav_graph" />

        <!-- Container for contents of drawer - use NavigationView to make configuration easier -->
        <android.support.design.widget.NavigationView
            android:id="@+id/nav_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:fitsSystemWindows="true" />

    </android.support.v4.widget.DrawerLayout>
    

Selanjutnya, hubungkan DrawerLayout ke grafik navigasi Anda dengan meneruskannya ke AppBarConfiguration, seperti yang ditunjukkan di bawah:

Kotlin

    val appBarConfiguration = AppBarConfiguration(navController.graph, drawerLayout)
    

Java

    AppBarConfiguration appBarConfiguration =
            new AppBarConfiguration.Builder(navController.getGraph())
                .setDrawerLayout(drawerLayout)
                .build();
    

Selanjutnya, dalam class aktivitas utama Anda, panggil setupWithNavController() dari metode onCreate() aktivitas utama, seperti yang ditunjukkan di bawah:

Kotlin

    override fun onCreate(savedInstanceState: Bundle?) {
        setContentView(R.layout.activity_main)

        ...

        val navController = findNavController(R.id.nav_host_fragment)
        findViewById<NavigationView>(R.id.nav_view)
            .setupWithNavController(navController)
    }
    

Java

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

        ...

        NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
        NavigationView navView = findViewById(R.id.nav_view);
        NavigationUI.setupWithNavController(navView, navController);
    }
    

Navigasi bawah

NavigationUI juga dapat menangani navigasi bawah. Saat pengguna memilih item menu, NavController akan memanggil onNavDestinationSelected() dan otomatis mengupdate item yang dipilih di menu navigasi bawah.

Untuk membuat menu navigasi bawah di aplikasi, terlebih dahulu tentukan panel di aktivitas utama Anda, seperti yang ditunjukkan di bawah:

    <LinearLayout>
        ...
        <fragment
            android:id="@+id/nav_host_fragment"
            ... />
        <android.support.design.widget.BottomNavigationView
            android:id="@+id/bottom_nav"
            app:menu="@menu/menu_bottom_nav" />
    </LinearLayout>
    

Selanjutnya, dalam class aktivitas utama Anda, panggil setupWithNavController() dari metode onCreate() aktivitas utama, seperti yang ditunjukkan di bawah:

Kotlin

    override fun onCreate(savedInstanceState: Bundle?) {
        setContentView(R.layout.activity_main)

        ...

        val navController = findNavController(R.id.nav_host_fragment)
        findViewById<BottomNavigationView>(R.id.bottom_nav)
            .setupWithNavController(navController)
    }
    

Java

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

        ...

        NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
        BottomNavigationView bottomNav = findViewById(R.id.bottom_nav);
        NavigationUI.setupWithNavController(bottomNav, navController);
    }
    

Untuk contoh komprehensif yang menyertakan navigasi bawah, lihat Contoh Navigasi Lanjutan Komponen Arsitektur Android di GitHub.

Referensi lainnya

Untuk mempelajari navigasi lebih lanjut, lihat referensi tambahan berikut.

Contoh

Codelab

Postingan blog

Video