NestedScrollView VS ScrollView

Ceritanya, beberapa hari terakhir saya main2 ama layar yang bisa di-scroll di Android. Berbekal pengalaman training dari beberapa tahun lalu, saya tau musti pakai Scroll View. Dan kebetulan, pas kemarin ngecek dokumentasi dari scroll view, saya menemui kenyataan bahwa ada yang namanya NestedScrollView. Saya ga tau ini adanya sejak kapan, tapi ternyata yang disarankan justru menggunakan NestedScrollView, dan bukan ScrollView. Menurut stackoverflow, pebedaan mendasarnya adalah:

  1. NestedScrollView digunakan jika ada view yang harus di-scroll (digulir) di dalam view lain yang juga harus di-scroll.
  2. NestedScrollView compatible dengan CoordinatorLayout.

Perbedaan mendasar bisa dilihat dari hal di atas, tapi secara behaviour pun, ternyata ScrollView sama NestedScrollView punya sifatnya masing-masing. Saya ga bisa klasifikasikan ini sebagai kelebihan/kekurangan, jadi kamu bisa nilai sendiri nantinya.

Jadi… perbedaan behaviour yang pertama apa? Jawabannya… ScrollView akan nge-scroll balik ke focus edit text yang terpilih. Mungkin kamu bingung, jadi di sini akan saya perlihatkan screen layar saya dengan aplikasi JustJava dari Udacity.com pelajaran 3B (kamu musti sign-in dulu buat liat materinya).

ScrollView – Screen Scroll Back

Kalau kamu lihat gif di atas, kamu mungkin bisa tau kalau tiap kali button di-klik, maka layar kembali ke-scroll ke atas. Hal ini terjadi karena di layar, ada edit text yang sedang dalam kondisi “focus” (bisa dilihat dari cursor yang berkedip). ScrollView punya kecendrungan buat nampilin edit text yang focus itu. Kalau edit text yang lagi focus ini di dekat tombol, mungkin ga bakal keliatan pengaruhnya di layar. Tapi kalau udah pakai contoh kasus seperti di atas, edi text di paling atas layar, sedangkan button di paling bawah, ini bikin frustasi. Oh iya, untuk informasi. Hal ini ga akan terjadi kalau kamu pakai NestedScrollView. Untuk mengatasi hal di atas dari ScrollView (ceritanya kamu tetap harus pakai scroll view), maka kamu perlu menambahkan kode untuk menambahkan focus langsung di scroll view-nya. Caranya:

ScrollView view = (ScrollView)findViewById(R.id.scrollView);
view.setDescendantFocusability(ViewGroup.FOCUS_BEFORE_DESCENDANTS);
view.setFocusable(true);
view.setFocusableInTouchMode(true);
view.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        v.requestFocusFromTouch();
        return false;
    }
});

Kode di atas, saya ga bisa jelasin lebih banyak. Jadi bisa dilihat sendiri langsung di sumbernya ya. Yap! Kodenya pakai Java. Kalau kotlin, belum tau.. belum move on eung. Segera deh.

Oke… itu behaviour dari ScrollView yang ga dimiliki oleh NestedScrollView. Sekarang, sebaliknya. Hal yang dimiliki NestedScrollView. Sifatnya, NestedScrollView gak akan bisa digulir kalau keyboard lagi dalam mode open. Hmmm… mungkin baiknya kamu lihat dulu kondisinya kayak gimana dari gambar di bawah ini.

Kondisi di atas merupakan kondisi normal dari ScrollView. Pas waktu keyboard lagi dalam kondisi terbuka, layar bisa di-scroll. Tapi, kondisi di atas ga akan bisa kamu temui di NestedScrollView. Bisa kamu cobain deh. Pas keyboard nutupin layar, kamu cuma bisa nge-scroll si layarnya sampai jarak tertentu yang udah kamu atur di layar. Intinya, kalau dari awal, layarnya emang udah tampil sepenuhnya di layar, layar ga akan nge-scroll. Walaupun ada view yang ketutup keyboard. Solusi dari hal ini, bisa kamu lihat dari pertanyaan di stackoverflow ini. Tambahkan android:windowSoftInputMode=”adjustResize” di manifest kamu untuk bagian activity.

<activity android:name="YourActivity" 
          android:windowSoftInputMode="adjustResize" />

Okeh… begitulah.. padahal cuma nulisin hal sepele yah, tapi jadi panjang banget gini. Tapi… Ya sudah lhah yah… Selamat bermain-main dengan view yang bisa digulir… btw, untuk yang mau bermain-main sama coordinator layout dan nested scrollview, bisa lihat link berikut. Keren banget lhoh.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s