Develop Reference

put space between android buttons

<Button
android:id="#+id/o_pharmacy"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/p2"
android:text="#string/o_pharmacy"
android:textSize="26sp" />
<Button
android:id="#+id/lab"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/lab"
android:text="#string/lab"
android:textSize="26sp" />
<Button
android:id="#+id/i_pharmacy"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/p1"
android:text="#string/i_pharmacy"
android:textSize="26sp" />
I tried above code to display 3 buttons in Liner layout. It works but I need to put space between the two buttons.

android:layout_margin="10dp"
for each button

If the orientation of your LinearLayout is vertical, use
android:layout_marginTop="10dp"
otherwise, use
android:layout_marginLeft="10dp"

<Button
android:id="#+id/o_pharmacy"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/p2"
android:text="#string/o_pharmacy"
android:textSize="26sp" />
<Button
android:id="#+id/lab"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="25dp"
android:drawableLeft="#drawable/lab"
android:text="#string/lab"
android:textSize="26sp" />
<Button
android:id="#+id/i_pharmacy"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="25dp"
android:drawableLeft="#drawable/p1"
android:text="#string/i_pharmacy"
android:textSize="26sp" />
Try this.

The easiest way to make space between 3 buttons in an horizontal LinearLayout to use this on the center button:
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
If you have vertical LinearLayout, you can use marginTop and marginBottom.

The best is to use android:layout_marginTop="10dp" in your XML activity as this gives accurate spacing between that button and the other button or widget.
Repeat this for rest of the buttons.
Happy Programming!

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Button
android:id="#+id/o_pharmacy"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:drawableLeft="#drawable/p2"
android:text="#string/o_pharmacy"
android:textSize="26sp" />
<Button
android:id="#+id/lab"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:drawableLeft="#drawable/lab"
android:text="#string/lab"
android:textSize="26sp" />
<Button
android:id="#+id/i_pharmacy"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:drawableLeft="#drawable/p1"
android:text="#string/i_pharmacy"
android:textSize="26sp" />
I am assuming that you are using a Vertical orientation for your LinearLayout, otherwise this code won't make sense as your buttons are Fill_parent for layout_width. Notice the line that says android:layout_marginTop="10dip" which ensures that you leave a reasonable 10 dip space in between your buttons. Ofcourse, you can increase (or decrease) that space in between your buttons. That's your choice.
Hope this answered your question satisfactorily.

android:layout_marginBottom="50dp"
android:layout_marginTop="50dp"

I think you can try layout_weight. If you need 3 in a row with some space in between. you can do like this
<LinearLayout
android:id="#+id/buttons"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<com.google.android.material.button.MaterialButton
android:id="#+id/o_pharmacy"
android:layout_width="0dp"
android:layout_height="64dp"
android:layout_weight="1"
android:layout_marginLeft="16dp"
android:text="#string/o_pharmacy"
/>
<com.google.android.material.button.MaterialButton
android:id="#+id/lab"
android:layout_width="0dp"
android:layout_height="64dp"
android:layout_weight="1"
android:layout_marginLeft="16dp"
android:padding="5dp"
android:text="#string/lab"
/>
<com.google.android.material.button.MaterialButton
android:id="#+id/i_pharmacy"
android:layout_width="0dp"
android:layout_height="64dp"
android:layout_weight="1"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:text="#string/i_pharmacy"
/>
</LinearLayout>

It's better to use
android:textSize="26dp"
instead of
android:textSize="26sp"
to have a better result in all devices of varied sizes!

android child layout not showing

I have a LinearLayout with three RelativeLayout inside. The first two children layouts show. The third one does not show. When I change the children from RelativeLayout to LinearLayouts, the third one still does not show. Any ideas on how to fix this? The one not showing contains the ImageView.
Here is the code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="60dp"
android:clickable="true"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/back1" >
<View
android:id="#+id/fract"
android:layout_width="60dp"
android:layout_height="1dp"
android:layout_centerInParent="true"
android:background="#00a5e5"
android:paddingLeft="5dp"
android:paddingRight="5dp" />
<TextView
android:id="#+id/nume"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/fract"
android:layout_centerHorizontal="true"
android:ellipsize="end"
android:singleLine="true"
android:text="58 apple"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="14sp" />
<TextView
android:id="#+id/denom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/fract"
android:layout_centerHorizontal="true"
android:ellipsize="end"
android:singleLine="true"
android:text="46 orange"
android:textSize="12sp"
android:textStyle="bold" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/back2" >
<TextView
android:id="#+id/red_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:ellipsize="end"
android:singleLine="true"
android:text="11 apple "
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="14sp" />
<TextView
android:id="#+id/red_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/red_1"
android:layout_centerHorizontal="true"
android:layout_marginRight="5dp"
android:ellipsize="end"
android:singleLine="true"
android:text="13 oranges "
android:textSize="12sp"
android:textStyle="bold" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#ffffff" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:src="#drawable/guess" />
</RelativeLayout>
</LinearLayout>

Your second Relative Layout's height is
android:layout_height="match_parent"
try putting:
android:layout_height="wrap_content"
--edit - try adding a weight attribute.
</RelativeLayout>
<RelativeLayout
android:weight=1
>
</RelativeLayout>
<RelativeLayout
android:weight=1>
</RelativeLayout>

android:layout_centerInParent="true" remove this from the view, if you want to add a view you can add separately out of the RelativeLayout with this your Layout is already in the center of the parent, For debug purpose set the width of each view to certain level so that you can see. Your two RelativeLayout already took the width of the Linear Layout, so no space left for the third Layout.

I decide to do it programmatically. I get the width of the device using context.getResources().getDisplayMetrics().widthPixels. Then from there I layout my pieces pixels by pixels, so to speak.

Android RelativeLayout with wrap_content truncates some children

I have a RelativeLayout whose width/height is set to wrap_content. However, the button in the bottom right is truncated on its lower side.
Changing the RelativeLayout's paddingBottom doesn't help, neither does adding a marginBottom to the button.
Any ideas?
Here's my code:
<RelativeLayout
android:id="#+id/sign_up_phase_enteraddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingTop="10dp"
android:paddingRight="10dp"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:background="#ff6aa639"
>
<TextView
android:id="#+id/sign_up_signuphere"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginBottom="29dp"
android:text="#string/sign_up_signuphere"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/sign_up_emaillabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/sign_up_signuphere"
android:layout_alignLeft="#id/sign_up_signuphere"
android:layout_alignBaseline="#+id/sign_up_email"
android:text="#string/sign_up_emailaddress"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/sign_up_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="46dp"
android:layout_below="#id/sign_up_signuphere"
android:layout_toRightOf="#id/sign_up_emaillabel"
android:ems="10"
android:inputType="textEmailAddress" >
<requestFocus />
</EditText>
<Button
android:id="#+id/sign_up_signup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/sign_up_haveaccount"
android:layout_alignRight="#id/sign_up_email"
android:layout_below="#id/sign_up_email"
android:text="#string/sign_up_signup" />
<TextView
android:id="#+id/sign_up_haveaccount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/sign_up_emaillabel"
android:layout_marginTop="27dp"
android:layout_below="#id/sign_up_email"
android:text="#string/sign_up_haveaccount"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>
...and this is what it looks like in the emulator:
Any thoughts on how I can get the bottom of my button to show?
TIA!

My fast idea is to set button bottom border to height of text on the left by using xml code
android:layout_alignBottom="#+id/sign_up_haveaccount"
because you've setted layout_below option already. However your xml code is quite not proper :) I will try write here better xml code for you, later.
Well, I found your problem. And I was searching for solution.
I setted for textview new padding bottom because button was aligned to this textview basline. I know that it could be a nice hack but I coudln't find andy good way to handle it :)
According to your layout I changed behaviour for edittext to make it stretchable. Also I grouped all elements into 3 groups. Each one per row to make it more readable.
Also do not forget that first 2 lines about xmls.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/sign_up_phase_enteraddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#ff6aa639"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp" >
<!-- 1 row -->
<RelativeLayout
android:id="#+id/row1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="29dp" >
<TextView
android:id="#+id/sign_up_signuphere"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/sign_up_signuphere"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>
<!-- 2 row -->
<RelativeLayout
android:id="#+id/row2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/row1" >
<TextView
android:id="#+id/sign_up_emaillabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/sign_up_email"
android:text="#string/sign_up_emailaddress"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/sign_up_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="20dp"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/sign_up_emaillabel"
android:inputType="textEmailAddress" >
<requestFocus />
</EditText>
</RelativeLayout>
<!-- 3 row -->
<RelativeLayout
android:id="#+id/row3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/row2" >
<TextView
android:id="#+id/sign_up_haveaccount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="27dp"
android:paddingBottom="15dp"
android:text="#string/sign_up_haveaccount"
android:textAppearance="?android:attr/textAppearanceSmall" />
<Button
android:id="#+id/sign_up_signup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/sign_up_haveaccount"
android:layout_alignParentRight="true"
android:text="#string/sign_up_signup" />
</RelativeLayout>
</RelativeLayout>

This is happening because of your padding , you have given 10 dp padding in bottom and your button view doesn't have enough space.Remove padding and check it .

layout_weight and layout_width = 0dp in a linearlayout create an unexpected layout

i tried to put two buttons with the same size in linearlayout. my problem is that the left button isn't at the same height than the right one.
i searched for an answer but i didn't find anything related to my problem.
here a picture of what i get on an android 2.1 device:
http://tinypic.com/r/eskb4n/5
i used this code:
`
<LinearLayout
android:layout_alignParentBottom="true"
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="bottom">
<Button
android:id="#+id/take_pic_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/take_pic" />
<Button
android:id="#+id/from_gallery_btn"
android:text="#string/from_gallery"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
</LinearLayout>`
thanks for your help!
EDIT: i used 0dp for layout_width instead of fill_parent..

You can set the android:layout_height="fill_parent" to both buttons.
Hope this helps!

I see 2 possible solutions:
1) set fixed android:layout_height so both buttons will definitely take equal vertical space.
<LinearLayout
android:layout_alignParentBottom="true"
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="bottom">
<Button
android:id="#+id/take_pic_btn"
android:layout_width="fill_parent"
android:layout_height="40dip"
android:layout_weight="1"
android:text="#string/take_pic" />
<Button
android:id="#+id/from_gallery_btn"
android:text="#string/from_gallery"
android:layout_width="fill_parent"
android:layout_height="40dip"
android:layout_weight="1"
/>
2) force text on button to take single line only.
<LinearLayout
android:layout_alignParentBottom="true"
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="bottom">
<Button
android:id="#+id/take_pic_btn"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:singleLine="true"
android:maxLines="1"
android:text="#string/take_pic" />
<Button
android:id="#+id/from_gallery_btn"
android:text="#string/from_gallery"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:singleLine="true"
android:maxLines="1"
/>

Align buttons inside a TableRow

I'm developing an Android application.
I have this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="200px"
android:orientation="vertical">
<TextView
android:id="#+id/gameTitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:focusable="false"
android:focusableInTouchMode="false"
android:gravity="left"
android:layout_margin="5px"
android:text="aaaaa"/>
<TextView
android:id="#+id/gameDescription"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:focusable="false"
android:focusableInTouchMode="false"
android:gravity="left"
android:layout_margin="5px"
android:typeface="sans"
android:textSize="16sp"
android:textStyle="bold"
android:text="dddddd"/>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ButtonsTable"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:text="#string/yes"
android:id="#+id/playGame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Button
android:text="#string/no"
android:id="#+id/noPlayGame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</TableRow>
</TableLayout>
</LinearLayout>
I want to put playGame button in the left side of the center, and noPlayGame button in the right side of the center.
Now, both appear aligned to the left of the TableRow.
How can I do this?
Thank you.
EDIT: I've added the complete layout and the modifications suggested by Ashay.
2nd EDIT: THE SOLUTIONI've added to TableLayout the following: android:stretchColumns="0,1". Now the buttons are center aligned but they fill their entiry column!!!

I hope this helps:
<TableRow
android:id="#+id/tableRow1"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/stringtxt1"></Button>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:text="#string/stringtxt2"
android:layout_height="wrap_content"
android:layout_gravity="center|center_horizontal"></Button>
</TableRow>

I posted my code, I hope that will help others users to resolve theirs problems (center content). I wanted to center two buttons in table row, here is my code, which solve this problem:
we indicate which columns will be stretched in prop android:strechColumns="a,b.." using comma-delimited list
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/buttonGroup"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="0,1" >
<TableRow>
<Button
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/button1Name"
android:layout_gravity="right"/>
<Button
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/button2Name"
android:layout_gravity="left"/>
</TableRow>
</TableLayout>
I hope that it will help. Sorry for my english :/

For centering a single button on a single row:
<TableRow android:id="#+id/rowNameHere"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:gravity="center">
<Button android:id="#+id/btnDoStuff"
android:text="Do Stuff" />
</TableRow>
After reviewing the above answers, I grabbed a few things from each answer and this worked for me.

I added two dummy textviews to align my button in the center.
<TableRow>
<TextView
android:text=""
android:layout_weight=".25"
android:layout_width="0dip"
/>
<Button
android:id="#+id/buttonSignIn"
android:text="Log In"
android:layout_height="wrap_content"
android:layout_weight=".50"
android:layout_width="0dip"
/>
<TextView
android:text=""
android:layout_weight=".25"
android:layout_width="0dip"
/>
</TableRow>

Remove this line <TableRow android:layout_gravity="center">
And give android:fill_containt in table row for both height & width
EDITED ANSWER:
Well, I'm so sorry for the last posts spelling mistake
Through XML it seems impossible for TableLayout. You need to set this UI in code in oncreate.
In your java file you can set those by using below.
playGame.setWidth(ScreenWidth()/2-var);
noPlayGame.setWidth(ScreenWidth()/2-var);
here var can be used to set the distance between these 2 buttons like 10 or 30.
Also, your xml will get change as follows:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ButtonsTable"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TableRow
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="center">
<Button
android:text="yes"
android:id="#+id/playGame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"/>
<Button
android:text="no"
android:id="#+id/noPlayGame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"/>
</TableRow>
</TableLayout>
The method ScreenWidth() can be used for getting width of the screen through these methods
private int ScreenWidth() {
DisplayMetrics dm=new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
String width=""+dm.widthPixels;
return Integer.parseInt(width);
}