How to place buttons in Android XML Layout file like in a Grid View

Question

I am trying to place 12 buttons in Grid View. Here is my layout XML file. How could I use RelativeLayout to achieve this? I am new to Android programming.

 <ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
     >
     <LinearLayout 
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

    <Button
        android:id="@+id/bAries"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Aries"
        android:drawableTop="@drawable/aries" />

    <Button
        android:id="@+id/bTauras"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tauras"
        android:drawableTop="@drawable/tauras" />

    <Button
        android:id="@+id/bGemini"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Gemini"
        android:drawableTop="@drawable/gemini" />

Answer 1

According to your question, I assume following are your requirements, hope they are aligned with what you really need:

• 12 Buttons to be seen as a Grid
• how to use RelativeLayout?

Note:
For a simple thing like this, especially where you know you only need to have a definite number of elements(12 buttons) and that number is static, you don't really need to use a complex layout like GridView, where you must have to implement a ListAdapter to provide the dynamically adding buttons. So the most simplest solution you have is as you have also asked, use a RelaiveLayout as I have provided bellow.

I tried something like following:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.androxp.randika.main.MainActivity"
    tools:showIn="@layout/activity_main">

<Button
    android:id="@+id/bAquarius"
    android:layout_height="wrap_content"
    android:layout_width="110dp"
    android:layout_marginLeft="5dp"
    android:text="Aquarius"/>
<Button
    android:id="@+id/bPisces"
    android:layout_toRightOf="@+id/bAquarius"
    android:layout_height="wrap_content"
    android:layout_width="115dp"
    android:layout_marginLeft="5dp"
    android:layout_marginRight=""
    android:text="Pisces"/>
<Button
    android:id="@+id/bAries"
    android:layout_toRightOf="@+id/bPisces"
    android:layout_height="wrap_content"
    android:layout_width="110dp"
    android:layout_marginRight="5dp"
    android:text="Aries"/>

<Button
    android:id="@+id/bTaurs"
    android:layout_height="wrap_content"
    android:layout_width="110dp"
    android:text="Taurs"
    android:layout_below="@+id/bAquarius"
    android:layout_alignLeft="@+id/bAquarius"
    android:layout_alignStart="@+id/bAquarius" />
<Button
    android:id="@+id/bGemini"
    android:layout_height="wrap_content"
    android:layout_width="115dp"
    android:text="Gemini"
    android:layout_alignTop="@+id/bTaurs"
    android:layout_alignRight="@+id/bPisces"
    android:layout_alignEnd="@+id/bPisces" />
<Button
    android:id="@+id/bCancer"
    android:layout_height="wrap_content"
    android:layout_width="110dp"
    android:text="Cancer"
    android:layout_below="@+id/bAries"
    android:layout_alignRight="@+id/bAries"
    android:layout_alignEnd="@+id/bAries" />

<Button
    android:id="@+id/bLeo"
    android:layout_height="wrap_content"
    android:layout_width="110dp"
    android:text="Leo"
    android:layout_below="@+id/bTaurs"
    android:layout_alignLeft="@+id/bTaurs"
    android:layout_alignStart="@+id/bTaurs"/>

<Button
    android:id="@+id/bVirgo"
    android:layout_height="wrap_content"
    android:layout_width="115dp"
    android:text="Virgo"
    android:layout_alignTop="@+id/bLeo"
    android:layout_alignLeft="@+id/bGemini"
    android:layout_alignStart="@+id/bGemini" />

<Button
    android:id="@+id/bLibra"
    android:layout_height="wrap_content"
    android:layout_width="110dp"
    android:text="Libra"
    android:layout_below="@+id/bCancer"
    android:layout_alignRight="@+id/bCancer"
    android:layout_alignEnd="@+id/bCancer"/>

<Button
    android:id="@+id/bScorpio"
    android:layout_height="wrap_content"
    android:layout_width="110dp"
    android:text="Scorpio"
    android:layout_below="@+id/bLeo"
    android:layout_alignLeft="@+id/bLeo"
    android:layout_alignStart="@+id/bLeo" />

<Button
    android:id="@+id/bSagittarius"
    android:layout_height="wrap_content"
    android:layout_width="115dp"
    android:text="Sagittarius"
    android:layout_below="@+id/bVirgo"
    android:layout_toLeftOf="@+id/bAries"
    android:layout_toStartOf="@+id/bAries" />

<Button
    android:id="@+id/bCapricorn"
    android:layout_height="wrap_content"
    android:layout_width="110dp"
    android:text="Capricorn"
    android:layout_below="@+id/bLibra"
    android:layout_alignRight="@+id/bLibra"
    android:layout_alignEnd="@+id/bLibra"/>
</RelativeLayout>

Above layout may render out something similar to the following screen:

Clue:
However, I created this using Android Studio. If you are using Eclipse, I recommend you to start using Android Studio as you are just beginning Android App Development.

For Android RelativeLayouts, please read the following References:

1. Android official documentation for Relative Layout
2. An excellently matching Tutorial for your requirement

And you may find ton of tutorials for this purpose just by a single search of Google.

Word of Advice:
Whatever you go through to learn Android development, try to use up-to-date materials.

Answer 2

You should use GridView class for this. Here's an official doc and sample