Tingkatkan User Experience dengan Activity Embeding dan Responsif Navigation

Hola Folks! Pada artikel kali ini saya akan sharing terkait dengan implementasi Activity Embedding yang memungkinkan sebuah aplikasi memiliki tampilan multi-window. Selain itu untuk meningkatkan pengalaman pengguna yang lebih baik, responsive navigation menu juga akan dibahas. Sebagai android developer tentu kita sudah terbiasa dengan device fragmentasi issue, yang sudah menjadi makanan sehari — hari.

Bagaimana tidak ? Saat ini terdapat berbagai macam Android Phone Brand yang ada dipasaran dengan berbagai macam tipe dan varian device. Sehingga banyak sekali tantangan yang kita hadapi, tetapi

1. Hal pertama yang akan dihadapi mungkin adalah ribuan perangkat berbeda yang tersedia dengan ukuran layar, resolusi, konfigurasi perangkat keras, dan perangkat lunak uniknya masing-masing.
2. Kustomisasi UI yang berbeda karena setiap produsen sering menyesuaikan UI Android pada perangkatnya, sehingga cukup menantang untuk membuat pengalaman pengguna yang konsisten di semua perangkat.
3. Selain itu dari sisi pengoptimalan kinerja dan pengujian juga memberikan tantangan tersendiri.

Sehingga tak heran, jika saat kita mengembangkan sebuah aplikasi, dan melakukan device testing pada satu perangkat, setelah dilakukan pengujian berfungsi dengan baik, namun di perangkat lain akan muncul bug.

Hal ini cukup menjadi sebuah tantangan untuk android developer dalam mengembangkan sebuah aplikasi. Karena saat ini android device memiliki jenis dan tipe yang beraneka macam. Terutama dalam kategori tipe layar unik dan large screen.

Saat kita dihadapkan sebuah fakta bahwa kita sebagai android developer harus menangani setiap screen size dan posture dari berbagai tipe layar, terkadang membuat kita memilih untuk mengunci orientasi aplikasi kita pada 1 posture dan menghandle apps agar terikat pada parent setiap sisi layar dan menambahkan scroll widget agak tidak terjadi overlaping konten pada bagian bawah layar. Namun hal ini membuat pengalaman pengguna tidak maksimal, seperti :

1. Layout yang tidak adaptive dengan perubahan screen konfigurasi
2. Content space yang tidak teroptimize dengan baik
3. Posisi button menu yang sulit dijangkau oleh pengguna

Layout pada Berbagai Screen Size dan Device Orientation

Sehingga sebagai android developer minimal kita tahu bagaimana cara menangani screen device issue ini, sehingga ketika kita memiliki kebutuhan saat mengembangkan aplikasi dan terdapat requirement terkait hal ini kita siap.

Pada dasarnya terdapat 3 kategori ukuran layar :

1. Compact Size
2. Medium Size
3. Expanded Size

Dalam kondisi normal kita biasa mengembangkan aplikasi yang berjalan pada compact size device. Sehingga pada device medium maupun expanded size layout akan dirender berdasarkan ratio pada compact device, sehingga tidak heran jika apps terkadang akan terlihat tidak teroptimize dengan baik serta terlihat agak strechy.

Window size classes

Sehingga kita harusnya menyiapkan layout yang khusus ketika aplikasi di render pada device medium maupun expanded size. Dalam hal ini kita bisa menggunakan canonical layout yang memang diperuntukkan untuk device berukuran besar. Terdapat beberapa opsi yang dapat digunakan untuk menyusun layout pada large screen device, sebagai berikut.

1. List Detail
2. Feed
3. Supporting Panel

Saat ini terdapat 2 opsi UI toolkit dalam mengembangkan UI pada android:

1. View System, pendekatan imperatif
2. Jetpack Compose, pendekatan deklaratif

Sehingga kita bisa menggunakan canonical layout sesuai dengan UI Toolkit yang kita gunakan. Sebagai panduan perhatikan diagram dibawah ini.

Canonical layout decision tree of large-screen devices

Sedangkan untuk navigation menu yang responsive dapat melihat panduan dibawah ini.

Responsive Navigation Menu

Selanjutnya untuk memahami lebih dalam mengenai implementasi UI responsive untuk berbagai macam tipe dan ukuran screen device, saya akan mulai dari View System yaitu dengan Activity Embeding dan Navigation Menu Responsive.

1. Clone repository simple demo yang sudah saya siapkan pada link berikut, selanjutnya pilih branch initial. Sebagai gambaran sample project memiliki tampilan seperti dibawah ini.

2. Tambahkan library Window Manager pada gradle file anda, selanjutnya syncronize.

implementation("androidx.window:window:1.0.0")

3. Sebagai langkah awal buat sebuah file res baru sebagai konfigurasi split page. Karena pada dasarnya activity embedding adalah sebuah skema yang memungkinkan kita membagi screen menjadi 2 halaman yang bisa terdiri dari 2 activity yang berbeda. (res-xml-split_config.xml)

4. Pada sample project terdapat 2 page yang dapat di setup sebagai primary dan secondary page pada split configuration.

• Primary, MainActivity
• Secondary, DetailsActivity

<resources xmlns:window="http://schemas.android.com/apk/res-auto">
    <SplitPairRule
        window:clearTop="true"
        window:alwaysExpand="true"
        window:finishPrimaryWithSecondary="false"
        window:finishSecondaryWithPrimary="true"
        window:splitMinWidth="500dp"
        window:splitRatio="0.5">
        <SplitPairFilter
            window:primaryActivityName=".MainActivity"
            window:secondaryActivityName=".details.DetailsActivity"/>
    </SplitPairRule>
</resources>

5. Buat sebuah SampleActivityEmbedingApplication Application class.

6. Inisialisasi split configuration file pada class SampleActivityEmbedingApplication.

SplitController.initialize(this, R.xml.split_config)
val splitController = SplitController.getInstance()
if (!splitController.isSplitSupported()) {
    Toast.makeText(this, R.string.split_not_supported, Toast.LENGTH_LONG).show()
}

7. Selanjutnya tambahkan nama kelas SampleActivityEmbedingApplication pada Manifest file.

android:name=".SampleActivityEmbedingApplication"

8. Jika dijalankan akan menjadi seperti dibawah ini.

Secara konten split configuration sudah berjalan. Sekarang saatnya membuat navigation menu menjadi responsive. Cara paling mudah adalah buatlah dua opsi sebagai berikut.

• Compact — Medium Size, Bottom Navigation
• Expanded Size, Navigation Rails

1. Langkah pertama yang bisa dilakukan adalah buatlah sebuat layout resource untuk landscape condition. Ubah tools env dari android menjadi project → Create — layout-land

2. Buatlah layout untuk navigation rails dan buat pada activity_main.xml dan letakkan pada layout-land folder.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:fitsSystemWindows="true">

        <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize" />

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/listRecyclerView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:clipToPadding="false"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/navigationRail"
        app:layout_constraintTop_toBottomOf="@id/app_bar"
        tools:listitem="@layout/item_list" />
    <com.google.android.material.navigationrail.NavigationRailView
        android:id="@+id/navigationRail"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:clipToPadding="false"
        app:labelVisibilityMode="auto"
        app:headerLayout="@layout/nav_header"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/app_bar"
        app:menu="@menu/main_menu" />

    <TextView
        android:id="@+id/ex_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible"
        android:text="TextView"
        app:layout_constraintBottom_toBottomOf="@+id/listRecyclerView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/listRecyclerView"
        app:layout_constraintTop_toTopOf="@+id/listRecyclerView" />

</androidx.constraintlayout.widget.ConstraintLayout>

Langkah terakhir, Compile!

Untuk code lengkap dari sample di atas dapat di akses pada repositori berikut. Tunggu artikel mengenai android development berikutnya, semoga bermanfaat. Thanks :)

GitHub - veroanggra/SampleActivityEmbeding