Develop Reference

How do I align the right/left side of a button in android to the center of the screen?

I was thinking it would be something like android:layout_startOf"centerHoriztonal" or something like that but I have searched and couldn't find anything. If it helps I am trying to make a soundboard app where all the buttons can be the same size across multiple device screens.

try this xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button1"
android:text="Here is button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
/>
<Button
android:id="#+id/button2"
android:text="Here is button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
/>
</RelativeLayout>

You can wrap the button(s) inside a horizontal LinearLayout and use layout_weight to divide the screen in half and then layout_alignParentLeft/layout_alignParentRight to align the buttons inside a RelativeLayout that takes up exactly half the screen width.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Button Text"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1">
</RelativeLayout>
</LinearLayout>
Another way to do it is to create a dummy view object that is centered horizontally in the parent view, and align your buttons to the left or right of it:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="#+id/dummyview"
android:layout_width="0px"
android:layout_height="0px"
android:layout_centerHorizontal="true"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/dummyview"
android:text="Button Text"/>
</RelativeLayout>

Are you sure you want the same size of buttons in all devices? People try to avoid it and make make view elements flexible.
Anyways if you want to set same size just directly write in layout
android:layout_width = "#dimen/valueForButton"; //some absolute value
For starting at same point, just add all buttons inside LinearLayout and make some operations there, such as
android:layout_gravity = "center_horizontal";
Your layout must be something like this:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="#dimen/valueForButton"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="#dimen/valueForButton"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="#dimen/valueForButton"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>

How to place one layout on another layout

I have a question. I am working on a layout wherein I want one layout to be above the other layout.
Situation: There is one RelativeLayout which has a Touchlistener. At the bottom of this layout, there is anothet relative layout having three buttons which are clickable. Now the problem is when I click on one these buttons, the listener of the first layout gets activated and none of the buttons work.
I did make use of frame layout but its not working. Did make use of .bringToFront method. But this did not work also.
Please I need suggestions for the same.
I am uploading my code.
<RelativeLayout
android:id="#+id/rlayout"
android:layout_width="458dp"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:gravity="center"
android:layout_height="278dp"
android:background="#drawable/anim_layout" >
<TextView
android:id="#+id/textView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:scaleType="centerInside"
android:visibility="visible" />
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:gravity="center"
android:scaleType="centerInside"
android:visibility="invisible" />
</RelativeLayout>
<ImageView
android:id="#+id/more"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_gravity="bottom"
android:background="#drawable/image_unfocus" />
<RelativeLayout
android:id="#+id/rlayout_anim_bg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginLeft="4dp"
android:background="#drawable/anim_bg" >
<ImageButton
android:id="#+id/sequence_image"
android:layout_width="22dip"
android:layout_height="17dip"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="22dp"
android:layout_marginTop="3dip"
android:background="#drawable/unfocus_image" />
<ImageView
android:id="#+id/edit_image"
android:layout_width="22dip"
android:layout_height="17dip"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="80dp"
android:layout_marginTop="3dp"
android:layout_toRightOf="#id/sequence_image"
android:background="#drawable/edit_icon" />
<ImageView
android:id="#+id/close_image"
android:layout_width="22dip"
android:layout_height="17dip"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="130dp"
android:layout_marginTop="3dp"
android:layout_toRightOf="#id/edit_image"
android:background="#drawable/close_img" />
</RelativeLayout>

use Layout Inflator ... make an xml . with the use of inflator , you can inflate another layout over the previous one.
enjoy

Button on the left of a frame layout?

In a vertical linear layout, I have 2 textviews, then a button and then a frame layout.
I would like the button to be on the left of the frame layout. I tried putting the button in a relative layout, but how do I tell the frame layout to be on the right?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/content_container_white"
android:orientation="vertical" >
<TextView
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="30dp"
android:text="#string/t0"
android:textColor="#color/black"
android:textSize="30dp" />
<TextView
android:id="#+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/t1"
android:textColor="#color/black" />
<RelativeLayout
android:id="#+id/RelativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/buybtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_marginLeft="30dp"
android:text="#string/buy_button" />
</RelativeLayout>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|right"
android:layout_marginTop="10dp" >
<ImageButton
android:id="#+id/videothumb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:src="#drawable/button_play_on" />
<ImageView
android:id="#+id/videothumbimage"
android:layout_width="380dp"
android:layout_height="170dp"
android:scaleType="centerCrop"
android:src="#drawable/demo_thumb_home" />
</FrameLayout>
</LinearLayout>

You can do it by simply telling your FrameLayout android:layout_toRightOf="#+id/#+id/buybtn", but your FrameLayout must be inside a RelativeLayout too.
<RelativeLayout
android:id="#+id/RelativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/buybtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_marginLeft="30dp"
android:text="#string/buy_button" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|right"
android:layout_marginTop="10dp"
android:layout_toRightOf="#+id/#+id/buybtn" >
<ImageButton
android:id="#+id/videothumb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:src="#drawable/button_play_on" />
<ImageView
android:id="#+id/videothumbimage"
android:layout_width="380dp"
android:layout_height="170dp"
android:scaleType="centerCrop"
android:src="#drawable/demo_thumb_home" />
</FrameLayout>
</RelativeLayout>

Push FrameLayout into RelativeLayout or just put button and frame together in horizontal LinearLayout - what would be more simple
ps - kepp your code clean, use ctrl+shift+F (if using Eclipse) to auto-arrange it

Put your framelayout within Relativelayout and then set property align parent right.

The question makes no sense. From the documentation:
FrameLayout is designed to block out an area on the screen to display a single item.
Emphesis mine.
If you want your layout to contain more than one item, do not use a frame layout. Use something else.
Shachar

what RelativeLayout properties should i use?

i want to design a layout for my app as shown below in image
but im getting problem which is that the properties im applying for relative layout are not going right as in below my xml code there is horizontal ruler image having centerInParent property and a verticle ruler image also having property of centerInParent by doing this the both rulers come to accurate place but when i put a child above the horizontal ruler or a child toLeftOf verticle ruler they dont appear as the graphical view of xml file shows the reason that although by applying centerInParent the both rulers come to center but their reference remains at edges thats why by using layout_above or layout_toLeftOf the childs go outside of layout
My xml code
<?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="fill_parent"
android:background="#FFFFFF"
android:orientation="vertical">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/title"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/icon_img"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dip"
android:layout_marginTop="2.5dip"
android:src="#drawable/smicon"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dip"
android:layout_toRightOf="#id/icon_img"
android:layout_marginTop="3dip"
android:text="Welcome To JEM"
android:textStyle="bold"
android:id="#+id/wcm_id"
android:textSize="18dip"
android:textColor="#FFFFFF"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/wcm_id"
android:layout_alignParentRight="true"
android:layout_marginRight="5dip"
android:text="APPS BY SAM"
android:id="#+id/app_by"
android:textSize="16dip"
android:textColor="#FFFFFF"
/>
</RelativeLayout>
<!-- This relative layout which is showing the main cross and icon around it -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dip"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/center_hr"
android:layout_centerInParent="true"
android:src="#drawable/horizontal"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/center_vr"
android:layout_centerInParent="true"
android:src="#drawable/verticle"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/center_hr"
android:layout_toLeftOf="#id/center_vr"
android:id="#+id/getuser"
android:src="#drawable/adduser"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/center_hr"
android:layout_toRightOf="#id/center_vr"
android:id="#+id/set"
android:src="#drawable/set"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/center_hr"
android:layout_toLeftOf="#id/center_vr"
android:id="#+id/get"
android:src="#drawable/get"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/center_hr"
android:layout_toRightOf="#id/center_vr"
android:id="#+id/ico"
android:src="#drawable/icon"
/>
</RelativeLayout>
</LinearLayout>
so guys please tell me how can i achive this main cross and icon to lef,right and above,below it as shown in image

Try this..
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageView
android:id="#+id/vertical_ruler"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/imageView1"/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/vertical_ruler"
/>
<ImageView
android:id="#+id/horizontal_ruler"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imageView1"/>
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/horizontal_ruler"/>
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/vertical_ruler"
android:layout_below="#id/horizontal_ruler"
/>
May be it helpful for you..

You could use a TableLayout embedded in a RelativeLayout. The RelativeLayout can be used to center the TableLayout on the screen and in the TableLayout you can add your pictures/buttons and state how many rows and colums you want the TableLayout to have.

android can android:gravity do this?

Searched all day and came up with a poor solution i think.
i want three ImageButton placed on the right sida of the screen.
Not centered but just above center position..
With the code below i get the result i want but,
If the user have a bigger screen they will not have this position right?
I have tried the android:gravityall day and all i can do with it is
to center the three buttons very nicely.
What should i use to make the three buttons always stay at the positions that
they are on the image belove.
i have the button image in 3 different sizes in hdpi,mdpi,xhdpi folder.
<RelativeLayout
android:id="#+id/rightRelativeLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<ImageButton
android:id="#+id/btn_A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:text="A"
android:src="#drawable/drawer_1"
android:background="#android:color/transparent"
android:layout_alignParentRight="true"
/>
<ImageButton
android:id="#+id/btn_B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="B"
android:src="#drawable/drawer_1"
android:background="#android:color/transparent"
android:layout_alignParentRight="true"
android:layout_below="#+id/btn_A"
/>
<ImageButton
android:id="#+id/btn_C"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="C"
android:src="#drawable/drawer_1"
android:background="#android:color/transparent"
android:layout_alignParentRight="true"
android:layout_below="#+id/btn_B"
/>
</RelativeLayout>
Picture of the three buttons placed on the right side, and my daughter of course.

One option would be to put all three buttons within a LinearLayout (for simplicity's sake) and then set the layout of this container programmatically.
You can see the size of the screen using getResources().getDisplayMetrics().heightPizels and then set the top margin accordingly.

You could add a LinearLayout inside the RelativeLayout, and then use the following properties on the LinearLayout:
android:layout_alignParentRight="true"
android:layout_gravity="center_vertical"
EDIT: Ok, I've done some testing and found a way of doing what you want without the use of styling it programatically, here's the xml:
<RelativeLayout
android:id="#+id/rightRelativeLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="80dip"
>
<LinearLayout
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true">
<ImageButton
android:id="#+id/btn_A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
android:src="#drawable/icon"
android:background="#android:color/transparent"
/>
<ImageButton
android:id="#+id/btn_B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
android:src="#drawable/icon"
android:background="#android:color/transparent"
/>
<ImageButton
android:id="#+id/btn_C"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C"
android:src="#drawable/icon"
android:background="#android:color/transparent"
/>
</LinearLayout>
</RelativeLayout>