Develop Reference

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

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" />

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:
Android official documentation for Relative Layout
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.

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

Why isn't my relativelayout filling the screen? - android

I am struggling to figure out why my relativelayout screen is not filling the entire screen. I have tried a number of things, but the horizontal space of the screen never appears filled. What am i doing wrong?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/splashscreen"
android:background="#color/splashScreenBackgroundColor"
>
<ImageView
android:id="#+id/imgLogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:textSize="12sp"
android:textColor="#454545"
android:gravity="center_horizontal"
android:layout_alignParentBottom="true"
android:text="MyAppName"
/>
</RelativeLayout>

The old name is deprecated, change the values to this..
android:layout_width="match_parent"
android:layout_height="match_parent"
Adding singletop will replace the last instance of your activity so if that solved your problem maybe you are instantiating your activity more than once somewhere, and that is why didnt worked before.

I figured out a solution. I added
"
android:launchMode="singleTop"
"
to the relativelayout and it solved the problem!

Layout XML View IDs and R problems

I am creating a layout in XML, and I have noticed this very strange occurrence. It has never happened before, but lately it's been getting on my nerves. I kind of want to abandon Eclipse and find a better IDE because of it.
Here is my layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<EditText
android:id="#+id/action_search_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="kkm" >
</EditText>
<ListView
android:id="#+id/actions_list"
android:layout_width="90dp"
android:layout_height="match_parent"
android:layout_above="#id/cancel_action_selection"
android:layout_below="#id/action_search_bar" >
</ListView>
<TextView
android:id="#+id/action_preview_pane"
android:layout_width="230dp"
android:layout_height="match_parent"
android:layout_alignBottom="#id/actions_list"
android:layout_alignTop="#id/actions_list"
android:layout_toRightOf="#id/actions_list"
android:gravity="center_vertical|center_horizontal"
android:text="kk" />
<Button
android:id="#+id/cancel_action_selection"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layout_alignParentBottom="true"
android:text="Cancel" />
<Button
android:id="#+id/define_new_action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#id/cancel_action_selection"
android:text="NEW" />
<Button
android:id="#+id/select_action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#id/define_new_action"
android:text="OK" />
</RelativeLayout>
Here is what I'm trying to achieve:
The problem is, if I try to set the ListView to be above the cancel button (via android:layout_above), it will say that it can't find the id for the cancel button.
Now, what I have noticed is that if I try and specify any ids for layouts BEFORE they are created with #+id, then I will get that strange error. What I mean by this is the following:
In the XML, apparently IDs have to be declared in order. Strange, no?
I would have to declare the cancel button's id first with #+id way before I define the ListView and set its layout_above attribute.
If I try to do what I have done here, it will say that it cannot find the id for the cancel button.
I have tried cleaning the project, ending adb.exe, refreshing, etc. and all it does is corrupt my project even more. R is not even generated afterwards. I don't want to have to go in a loop problem after problem because Eclipse can't handle things like this properly.
Does anyone have a solution for this? Or a better IDE?

http://developer.android.com/guide/topics/ui/layout/relative.html
RelativeLayout lets child views specify their position relative to the parent view or to each other (specified by ID). So you can align two elements by right border, or make one below another, centered in the screen, centered left, and so on.
So you are placing listview relative to the button cancel. So you need to define button with a id. Position the listview relative to the button.
http://developer.android.com/guide/topics/ui/layout/linear.html
There is an example in the links posted both for linearlayout and relative layout have a look at it.
Edit:
If you have errors in your resource files R.java will not be generated. So make sure you do not have errors in your resource files and then clean and build the project.
To clarify the confusion. Note android:layout_above="#+id/button1"
<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"
tools:context=".OtherScreenActivity1" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="24dp"
android:text="Button" />
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/button1"
>
</ListView>
</RelativeLayout>
Same as above
<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"
tools:context=".OtherScreenActivity1" >
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/button1"
android:layout_alignParentTop="true" >
</ListView>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="24dp"
android:text="Button" />
</RelativeLayout>
You have this
android:layout_above="#id/cancel_action_selection"
Use
android:layout_above="#+id/cancel_action_selection"
http://developer.android.com/guide/topics/ui/declaring-layout.html.
Look at the attribute id in the above link

Why doesn't Eclipse detect new onClick method I've added in my layout file

Here is my full layout file:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:orientation="horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:onClick="showButtons"
android:text="#string/buttons_label" />
</RelativeLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/relativeLayout1"
android:layout_centerHorizontal="true"
android:onClick="showSpinners"
android:text="#string/spinners_label" />
</RelativeLayout>
And here is where I call showSpinners:
private void showSpinners(View clickedButton){
goToActivity(SpinnerActivity.class);
}
Eclipse underlines in yellow showSpinners by saying it's never used locally, my guess is it is not detecting my onClick attribute in the layout file.
I'm wondering why it just wont work and what I should do to make it work...

Change the your method to :
public void showSpinners(View clickedButton) {
// do the work
}
The method needs to be visible outside the class (source).

View layout after setvisibility

I've got problem with setting visibility to relative layout. I have part of big layout in relativelayout and below that next TextView. But in my code, when myRelativeLayout.setVisibility(View.GONE);
is called, TextView which is below that did not appear. I tried several ways to rearange layout, but i need that textview under it. Thanks
My XML:
<merge xmlns:android="http://schemas.android.com/apk/res/android" >
<ScrollView
android:id="#+id/scrollView_liab_ra_flipper_04"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<RelativeLayout
android:id="#+id/linearLayout_liab_ra_flipper_04"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/someTextView"
android:text="Something" />
<!-- This relative layout should be removable -->
<RelativeLayout
android:id="#+id/vg_liab_ra_04_flipper_car_container_visible"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/someTextView" >
<TextView
android:id="#+id/tv_1"
style="#style/WhiteFormText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginTop="2dp"
android:text="#string/licence_plate_counter" >
</TextView>
<EditText
android:id="#+id/et_1"
style="#style/WhiteFormField"
android:layout_below="#+id/tv_1"
android:hint="#string/licence_plate_hint" >
</EditText>
</RelativeLayout>
<!-- This textview is not visible if relative layout is gone -->
<TextView
android:id="#+id/tv_liab_ra_04_flipper_mandat"
style="#style/WhiteFormTextHint"
android:layout_below="#+id/vg_liab_ra_04_flipper_car_container_visible"
android:layout_marginBottom="15dp"
android:text="#string/mandatory_field" >
</TextView>
</RelativeLayout>
</ScrollView>
</merge>
Java Code:
private void hideCar() {
if (!accident.getParticipant(0)) {
rlCarContainer.setVisibility(View.GONE);
} else {
rlCarContainer.setVisibility(View.VISIBLE);
}
}

The easiest way to do what you want is to use LinearLayout instead of your root RelativeLayout.. the child views will get realigned after you hide the RelativeLayout just the way you want.. if you don't want that, you can use android:layout_alignWithParentIfMissing on the TextView see here the documentation. That won't work exactly how you want but it might help you to solve the problem :).