Membuat Layout ScrollView Dengan Go To Top di Android

Pagi ini Saya akan mengajarkan bagaimana cara membuat sebuah halaman layout dengan ScrollView dengan scroll go to top saat Anda sudah sampai di bawah. Membuat Layout ScrollView Dengan Go To Top di Android nantinya ada sedikit koding di java menggunakan sintak scroll.fullScroll(View.FOCUS_UP). Nantinya Anda membuat sebuah halaman berisi TextView lorem ipsum yang dapat di scroll ke atas dan kebawah, dan di bawah ada tombol button untuk go to top. Baca juga artikel blog sebelumnya Membuat Layout ScrollView di Android.

Berikut file strings.xml :

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">ScrollView</string>
    <string name="lipsum">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</string>
    <string name="action_settings">Settings</string>
    <string name="header">Header</string>
    <string name="footer">Footer</string>
    <string name="imageDesc">Gambar Playstore</string>
    <string name="up">UP</string>

</resources>

Berikut file fragment_main.xml :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.dumet.androidscrollview.MainActivity$PlaceholderFragment" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0sp"
        android:layout_weight="1"
        android:background="#FF0"
        android:gravity="center"
        android:text="@string/header" />

    <ScrollView
        android:id="@+id/scroll"
        android:layout_width="match_parent"
        android:layout_height="0sp"
        android:layout_weight="5" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:adjustViewBounds="true"
                android:contentDescription="@string/imageDesc"
                android:src="@drawable/playstore" />

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/lipsum"
                android:textAppearance="?android:attr/textAppearanceMedium" />
            
            <Button
                android:id="@+id/up"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:text="@string/up"
                />
        </LinearLayout>
    </ScrollView>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0sp"
        android:layout_weight="1"
        android:background="#F00"
        android:gravity="center"
        android:text="@string/footer" />

</LinearLayout>

Berikut file MainActivity.java :

public static class PlaceholderFragment extends Fragment {

    Button up;
    ScrollView scroll;

    public PlaceholderFragment() { }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_main, container, false);

        up = (Button) rootView.findViewById(R.id.up);
        scroll = (ScrollView)rootView.findViewById(R.id.scroll);

        up.setOnClickListener(new View.OnClickListener() {
            @Override public void onClick(View arg0) {
                scroll.fullScroll(View.FOCUS_UP); 
                scroll.pageScroll(View.FOCUS_UP);
                scroll.smoothScrollTo(0, 0);
            }
        });
       
        return rootView;
    }
}

Berikut adalah hasil akhirnya : Scroll kebawah lalu klik tombol button UP maka nanti akan scroll ke atas.