Cara Menyusun Button Pada RelativeLayout Dan LinearLayout

Kebanyakan orang yang baru menggunakan Eclipse atau Android Studio sering mengalami kendala saat membuat atau menyusun Button pada activity_main.xml. Jika menggunakan Button hanya 2 atau 4 mungkin Anda cukup menggunakan RelativeLayout bagaimana jika Buttonnya lebih dari 4 bahkan hingga 10 dengan tata letak yang berbeda?



Seperti contoh diatas saya hanya menggunakan RelativeLayout, LinearLayout, dan 14 Button. Bagaimana jika Buttonya lebih dari 14?



14 Button saja sudah memakan banyak tempat di layout utama mau nambah lagi gimana ya...???



Mungkin Anda cukup menggunakan ScrollView. Jika Anda menggunakan ScrollView maka Button yang Anda gunakan akan jauh lebih banyak tanpa adanya batasan pada layout.

Untuk tutorial ScrollView akan saya bahas di minggu depan.



Langkah-langkah membuat layout seperti diatas sebagai berikut:

1. Buat project baru dan beri nama aplikasi sesuai selera Anda.

2. Buka folder res-> layout -> activity_main.xml (biasanya langsung terbuka)



Pada activity_main terdapat 1 RelativeLayout sebagai layout utama dan 5 LinearLayout sebagai layout penyusun tataletak pada 14 Button dengan tinggi/height rata-rata 70dp.



Untuk uji coba silahkan ketikan program berikut ini:


activity_main.xml


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
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=".MainActivity" >

<Button
android:id="@+id/button6"
android:layout_width="fill_parent"
android:layout_height="70dp"
android:layout_alignLeft="@+id/linearLayout1"
android:layout_alignParentTop="true"
android:text="@string/a" />

<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_below="@+id/button6"
android:layout_centerHorizontal="true" >

<Button
android:id="@+id/button2"
android:layout_width="165dp"
android:layout_height="70dp"
android:text="@string/b" />


<Button
android:id="@+id/button3"
android:layout_width="165dp"
android:layout_height="70dp"
android:text="@string/c" />
</LinearLayout>

<LinearLayout
android:id="@+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_alignLeft="@+id/linearLayout1"
android:layout_below="@+id/linearLayout1" >


<Button
android:id="@+id/button4"
android:layout_width="165dp"
android:layout_height="70dp"
android:text="@string/d" />


<Button
android:id="@+id/button5"
android:layout_width="165dp"
android:layout_height="70dp"
android:text="@string/e" />

</LinearLayout>
<LinearLayout>
android:id="@+id/linearLayout3"
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_alignLeft="@+id/linearLayout1"
android:layout_centerVertical="true" >



        <Button

            android:id="@+id/button1"

            android:layout_width="110dp"

            android:layout_height="70dp"

            android:text="@string/f" />



        <Button

            android:id="@+id/button7"

            android:layout_width="110dp"

            android:layout_height="70dp"

            android:text="@string/g" />



        <Button

            android:id="@+id/button8"

            android:layout_width="110dp"

            android:layout_height="70dp"

            android:text="@string/h" />

    </LinearLayout>



    <Button

        android:id="@+id/button14"

        android:layout_width="match_parent"

        android:layout_height="70dp"

        android:layout_below="@+id/linearLayout3"

        android:layout_centerHorizontal="true"

        android:text="@string/i" />



    <LinearLayout

        android:id="@+id/linearLayout4"

        android:layout_width="170dp"

        android:layout_height="match_parent"

        android:layout_alignLeft="@+id/button14"

        android:layout_below="@+id/button14"

        android:layout_marginTop="0dp"

        android:orientation="vertical" >



        <Button

            android:id="@+id/button9"

            android:layout_width="match_parent"

            android:layout_height="70dp"

            android:text="@string/j" />



        <Button

            android:id="@+id/button10"

            android:layout_width="match_parent"

            android:layout_height="70dp"

            android:text="@string/k" />

    </LinearLayout>



    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_alignTop="@+id/linearLayout4"

        android:layout_marginLeft="0dp"

        android:layout_marginTop="0dp"

        android:layout_toRightOf="@+id/linearLayout4"

        android:orientation="vertical" >



        <Button

            android:id="@+id/button11"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:text="@string/l" />



        <Button

            android:id="@+id/button12"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:text="@string/m" />



        <Button

            android:id="@+id/button13"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:text="@string/n" />



    </LinearLayout>





</RelativeLayout>





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

<resources>

<string name="app_name">ZamalPost MultiLayout</string>

<string name="action_settings">Settings</string>

<string name="hello_world">Hello world!</string>

<string name="a">ZamalPost 1</string>

<string name="b">ZamalPost 2</string>

<string name="c">ZamalPost 3</string>

<string name="d">ZamalPost 4</string>

<string name="e">ZamalPost 5</string>

<string name="f">ZamalPost 6</string>

<string name="g">ZamalPost 7</string>

<string name="h">ZamalPost 8</string>

<string name="i">ZamalPost 9</string>

<string name="j">ZamalPost 10</string>

<string name="k">ZamalPost 11</string>

<string name="l">ZamalPost 12</string>

<string name="m">ZamalPost 13</string>

<string name="n">ZamalPost 14</string>



</resources>





Pada materi ini tidak mengubah AndroidManifest.xml (selain icon/ic_launcher) dan MainActivity.java karena belum ada proses di dalamnya.



Mari kita coba jalankan aplikasi ZamalPost MultiLayout. Gunakan kabel USB dan jangan lupa pastinya Anda harus mengistal Driver terlebih dahulu. Saya menganggap Anda telah menghubungkan Ponsel Android Anda ke Laptop/PC  Anda. Anda juga bisa menginstal Vysor sebagai Emulator.




Untuk menjalankan aplikasi dari Eclipse, buka salah satu file aktivitas proyek Anda dan klik ikon Jalankan dari bilah alat berwarna hijau. Sebelum memulai aplikasi Anda, Eclipse akan menampilkan jendela berikut untuk memilih opsi tempat Anda ingin menjalankan aplikasi Android Anda.

Tampilan AVD

Pilih aktif  Emulator lalu OK

Aplikasi Yang Dijalankan

 Baca Juga: Membuat Kalkulator Android di ECLIPSE

Silahkan download project disini

Semoga ini dapat membantu masalah Anda dalam mempelajari Text to Speech Android

Tweet

Subscribe to receive free email updates: