Desain Tampilan Android Dengan HorizontalScrollView Scrollbar Kanan Kiri dan ScrollView Atas Bawah

Desain Tampilan Android Dengan HorizontalScrollView Scrollbar Kanan Kiri dan ScrollView Atas Bawah digunakan saat tampilan layar HP atau Tablet terlalu kecil, misalnya ketika menampilkan Komponen pada Project Android yang cukup banyak ke arah kanan (mendatar) maupun ke arah bawah (vertikal).

Triknya adalah menggabungkan penggunaan ScrollView pada bagian luar dan di dalamnya ditambahkan HorizontalScrollView. Hanya saja harus anda perhatikan bahwa ScrollView dan HorizontalScrollView tidak mau langsung memuat komponen di dalamnya, hanya mau membawahi satu Layout. Sehingga urutannya seperti ini : ScrollView, LinearLayout, HorizontalScrollView, LinearLayout, baru komponen lain ada di dalamnya.



Pertama buat dahulu Project Android baru di Eclipse.

Kemudian pada MainActivity.java tidak perlu diubah seperti berikut ini :

package com.amijaya.desain_scrollview_kanan_kiri_atas_bawah_horizontalscrollview; import android.os.Bundle; import android.app.Activity; import android.view.Menu; public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.activity_main, menu); return true; } } 

Untuk tampilan, buat desain tampilan berikut ini pada activity_main.xml, disinilah kelihatan penggunaan ScrollView dan HorizontalScrollView secara bersamaan :

<ScrollView 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"
    tools:context=".MainActivity" >

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

        <HorizontalScrollView
            android:id="@+id/horizontalScrollView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

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

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

                    <Button
                        android:id="@+id/button1"
                        android:layout_width="400px"
                        android:layout_height="400px"
                        android:text="Button" />

                    <Button
                        android:id="@+id/button2"
                        android:layout_width="400px"
                        android:layout_height="400px"
                        android:text="Button" />

                    <Button
                        android:id="@+id/button3"
                        android:layout_width="400px"
                        android:layout_height="400px"
                        android:text="Button" />

                </LinearLayout>

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

                    <Button
                        android:id="@+id/button4"
                        android:layout_width="400px"
                        android:layout_height="400px"
                        android:text="Button" />

                    <Button
                        android:id="@+id/button5"
                        android:layout_width="400px"
                        android:layout_height="400px"
                        android:text="Button" />

                    <Button
                        android:id="@+id/button6"
                        android:layout_width="400px"
                        android:layout_height="400px"
                        android:text="Button" />

                </LinearLayout>

            </LinearLayout>
        </HorizontalScrollView>

    </LinearLayout>

</ScrollView>

Konfigurasi AndroidManifest.xml tidak perlu dirubah :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.amijaya.desain_scrollview_kanan_kiri_atas_bawah_horizontalscrollview"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="9"
        android:targetSdkVersion="16" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.amijaya.desain_scrollview_kanan_kiri_atas_bawah_horizontalscrollview.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Hasilnya setelah dijalankan Aplikasi Android mampu discroll ke kanan kiri dan atas bawah :

File project selengkapnya dapat anda download disini. Jika bingung cara download, silakan lihat caranya disini.

Semoga bermanfaat ^_^