Menangani Scroll Dengan CoordinatorLayout Scrolling Behavior

Menangani Scroll Dengan CoordinatorLayout Scrolling Behavior

Diposting pada

Menangani scroll dengan CoordinatorLayout scrolling behavior diibaratkan seperti menangani sebuah wadah yang agak mirip dengan FrameLayout tetapi memiliki kemampuan ekstra, karenanya CoordinatorLayout disebut sebagai FrameLayout super dan bertenaga seperti yang tertera di dokumentasi resmi.

Dengan melampirkan CoordinatorLayout.Behavior secara langsung ke child CoordinatorLayout, Anda akan dapat menangkap event touch, window insets, measurement, layout, dan nested scrolling.

Untuk menggunakannya, pertama-tama Anda harus menambahkan dependency yang dapat mensupport fitur tersebut di file gradle Anda:

implementation 'com.android.support:design:25.3.1'

Versi terbaru library bisa Anda dapatkan di sini

Satu kasus praktis dari penggunaan CoordinatorLayout adalah membuat tampilan dengan FloatingActionButton. Dalam kasus khusus ini, kita akan membuat RecyclerView dengan SwipeRefreshLayout dan FloatingActionButton di atasnya. Inilah cara Anda melakukannya:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/coord_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/swipe_refresh_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/recycler_view"/>
</android.support.v4.widget.SwipeRefreshLayout>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:color="@color/colorAccent"
android:src="@mipmap/ic_add_white"
android:layout_gravity="end|bottom"
app:layout_anchorGravity="bottom|right|end"/>
</android.support.design.widget.CoordinatorLayout>

CoordinatorLayout juga dapat digunakan untuk mendapatkan Material Design Scrolling Effects ketika menggunakan inner layout yang mendukung Nested Scrolling, seperti NestedScrollView atau RecyclerView.

Sebagai contoh:

Baca juga:  Download 5 Aplikasi TV Indonesia Terpopuler
  • app:layout_scrollFlags="scroll|enterAlways" digunakan pada Toolbar properties
  • app:layout_behavior="@string/appbar_scrolling_view_behavior" digunakan pada ViewPager properties
  • RecyclerView digunakan pada ViewPager Fragments

Di bawah ini merupakan layout xml file yang digunakan pada Activity:


<android.support.design.widget.CoordinatorLayout
android:id="@+id/main_layout"
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"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="6dp">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:elevation="0dp"
app:layout_scrollFlags="scroll|enterAlways"
/>
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
app:tabMode="fixed"
android:layout_below="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:elevation="0dp"
app:tabTextColor="#d3d3d3"
android:minHeight="?attr/actionBarSize"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_below="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout> 

Jika kode itu dijalankan, maka hasilnya adalah:

Expanding and Collapsing Toolbars


Langkah pertama adalah pastikan Anda tidak menggunakan ActionBar yang sudah usang. Pastikan untuk mengikuti penggunaan ToolBar sebagai panduan ActionBar. Juga pastikan bahwa CoordinatorLayout adalah wadah layout utama.

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

      <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

</android.support.design.widget.CoordinatorLayout>

Merespon Scroll Events

Selanjutnya, kita harus membuat responsive Toolbar untuk menscroll events menggunakan container layout yang disebut AppBarLayout:

<android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/detail_backdrop_height"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true">

  <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

 </android.support.design.widget.AppBarLayout>

Selanjutnya, kita perlu mendefinisikan hubungan antara AppBarLayout dan View yang akan discroll. Tambahkan app:layout_behavior  ke RecyclerView atau View lainnya yang mampu melakukan nested scrolling seperti NestedScrollView. Library pendukung berisi sumber string khusus @string/appbar_scrolling_view_behavior yang memetakan ke AppBarLayout.ScrollingViewBehavior, di mana string tersebut digunakan untuk memberi tahu AppBarLayout ketika scrolling terjadi pada tampilan khusus ini. Behaviour harus ditetapkan pada view agar dapat memicu sebuah event.

<android.support.v7.widget.RecyclerView
        android:id="@+id/rvToDoList"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

Ketika CoordinatorLayout memperhatikan atribut yang dideklarasikan di RecyclerView, atribut ini akan mencari atribut lainnya di seluruh tampilan yang terkandung di dalamnya. Dalam kasus ini, AppBarLayout.ScrollingViewBehavior menggambarkan ketergantungan antara RecyclerView dan AppBarLayout. Event scrolling ke RecyclerView harus memicu perubahan ke tata letak AppBarLayout atau tampilan apa pun yang ada di dalamnya.

Baca juga:  Download 10 Tema Keyboard Android Keren Lucu Gratis

Anda juga dapat menggunakan atribut app:layout_scrollFlags untuk merubah views yang dideklarasikan di dalam AppBarLayout:

<android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_scrollFlags="scroll|enterAlways"/>

 </android.support.design.widget.AppBarLayout>

Demikianlah pembahasan mengenai bagaimana menangani scroll dengan CoordinatorLayout scrolling behavior. Artikel selengkapnya bisa sobat baca di sini

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *