Develop Reference

Android layout objects placement

I have this simple activity in my android app but I don't know how to place my button so it appears at the same position on various screen sizes.
I want the button to always be placed at the bottom of the screen. The screenshot shown is from a phone screen. When displayed on a larger screen the button is higher up.
How can I fix this?
Thanks
See this screenshot

You can use RelativeLayout with this parameter (android:layout_alignParentBottom="true")
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Click Me!"/>
</RelativeLayout>

You should use a RelativeLayout
If you have a RelativeLayout that fills the whole screen you should be able to use android:layout_alignParentBottom to move the button to the bottom of the screen.
If your button at the bottom doesn't show then probably the layout above it takes all the space. In this case you can put the button first in your layout file and position the rest of the layout above the views with android:layout_above.

Have a look a RelativeLayout. Use this ViewGroup and add a Button inside it with alignParentBottom
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
<Button
android:id="#+id/button_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:alignParentBottom="true"
android:text="HORAIRE"
android:layout_margins="<your_margin_in_dp>" />
</RelativeLayout>

Make footerButton.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:text="HORAIRE"
android:textColor="#ffffff"
android:textSize="20sp" />
</RelativeLayout>
And add it in all your layout file like below line:
Android Activity_Layout
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- Footer aligned to bottom -->
<include layout="#layout/footer" />
<!-- Content above footer -->
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/footer"
android:layout_below="#id/header"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Content goes here"
android:textColor="#FFFFFF"
android:textSize="20sp" />
</RelativeLayout>
</RelativeLayout>
Hope it will solve your problem

This is what I ended up doing. Thanks to everyone who posted, it helped me get in the right direction!
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/container"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_main"
tools:context="xxxx.MainActivity"
android:orientation="vertical"
android:weightSum="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Dernières nouvelles Twitter"
android:id="#+id/textView"
android:textStyle="bold"
android:textSize="17dp"
android:paddingLeft="8dp"
android:paddingTop="6dp"
android:paddingRight="6dp"
android:paddingBottom="6dp"
android:layout_alignParentTop="true"/>
<ListView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/listView_tweets"
android:layout_above="#+id/buttonDisplay"
android:choiceMode="none"
android:paddingTop="25dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Horaire"
android:layout_margin="5dp"
android:id="#+id/buttonDisplay"
android:onClick="buttonGotoDisplay"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"/>
</RelativeLayout>

Android relative layout, positioning something in the middle of 2 views [duplicate]

This question already has answers here:
issue with "#id" vs "#+id" in positioning in Relative Layout
(3 answers)
Closed 7 years ago.
I have 2 ImageButtons and a Seerkbar inside a relative layout and I am trying to position them so that :
1) first imageButton is on the left, it's left side and the parent's left side align.
2) second imageButton is on the right, it's right side and the parent's right side align.
3) the Seekbar is in the middle, and it covers all of the remaining space.
It should look something like this:
I tried this:
<RelativeLayout android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageButton android:id="#+id/image_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/image_1"/>
<SeekBar android:id="#+id/seek_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/image_1"
android:layout_toLeftOf="#id/image_2"
android:max="95"/>
<ImageButton android:id="#+id/image_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/image_2"/>
</RelativeLayout>
This works fine on my intellij device preview, BUT fails to compile because of the line:
android:layout_toLeftOf="#id/image_2"
as I am using the id/image_2 before declaring it. Is there a solution to this ?

TRY THIS....
<RelativeLayout android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageButton android:id="#+id/image_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/image_1"/>
<SeekBar android:id="#+id/seek_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/image_1"
android:layout_toLeftOf="#+id/image_2"
/>
<ImageButton android:id="#+id/image_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/image_2"/>
</RelativeLayout>

I think you forgot to put + sign before id like this:
android:layout_toRightOf="#+id/image_1"
android:layout_toLeftOf="#+id/image_2"

This would help you deal with different resolution, give it a try
i have put the imageview instead of seekbar lol
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="100"
android:gravity="center"
android:background="#FFF"
android:layout_margin="1dp">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="40"
android:background="#aef"
android:layout_margin="4dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView"
android:background="#984"/>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="100dip"
android:layout_weight="20"
android:background="#fec"
android:layout_margin="4dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView2"
android:background="#594"/>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="40"
android:background="#9ef"
android:layout_margin="4dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/imageView3"
android:background="#994"/>
</LinearLayout>
</LinearLayout>

I don't recommend in the RelativeLayout to reference two components such as toRightOf and toLeftOf. Always try to reference each to only one. In your case you can also use LinearLayout with weights for a uniformed distribution for the chils as the following
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageButton
android:id="#+id/image_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
<SeekBar
android:id="#+id/seek_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:max="95" />
<ImageButton
android:id="#+id/image_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
</LinearLayout>

RelativeLayout containing a webview and another relativelayout

I am trying to make an Activity that has a WebView and a small bar at the bottom with height of 40dp which has buttons for refresh, back, forward, etc. The issue i'm facing is that I want the WebView to consume the height of the entire view except for the bottom 40dp.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<WebView
android:id="#+id/id_web_view_browser"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:background="#000000"
android:orientation="horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:background="#drawable/ic_action_example"
android:onClick="onClick"
android:textSize="14sp" />
</RelativeLayout>
</RelativeLayout>
Above is what I have so far... Right now the browser has height of the whole screen with the RelativeLayout at the bottom (covering a piece of the browser). Is there anything else I can do to leave the bottom 40dp for the RelativeLayout only?

Put the webview so it layout_above the 2nd relative layout. Then change the relative layout to be aligned to parent bottom. That ought to work

Figured it out.
I was able to do the below:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<WebView
android:id="#+id/id_web_view_browser"
android:layout_above="#+id/id_web_view_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
<RelativeLayout
android:id="#+id/id_web_view_bar"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:background="#000000"
android:orientation="horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:background="#drawable/icon_refresh"
android:onClick="onClick"
android:textSize="14sp" />
</RelativeLayout>
</RelativeLayout>
In the WebView I set the following property: android:layout_above="#+id/id_web_view_bar". That kept the bottom 40dp for the bar.

Kinda late... however might help any other arround...
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:id="#+id/button_xs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dp"
android:layout_alignParentBottom="true"
android:background="#drawable/ic_action_example"
android:onClick="onClick"
android:textSize="14sp" />
<WebView
android:id="#+id/id_web_view_browser"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_above="#+id/button_xs"/>
</RelativeLayout>
In this case theres no need specific any height for the button or other view suppose to be after the webview.

relative layout issues/android

I am having issues with creating a menu (not menu when you click menu button -- but menu as in the welcome screen to select items). I went to ImageView and TextView float (left/right) Android and I did not solve my issue. I would like to create at least five or six options to select from on this menu class. This is my menu.xml file. Please let me know what I need to do.
The issue is that the first item appears, but the second item overlaps the first item. I been picking away with this for the last hour and cannot solve this issue.
<?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="wrap_content"
android:padding="5dp">
<TextView
android:textSize="18dp"
android:id="#+id/message_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=" Check Your Account" />
<ImageView
android:src="#drawable/ic_menu_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/icon" />
<TextView
android:textSize="18dp"
android:id="#+id/message_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=" View our Site" />
<ImageView
android:src="#drawable/ic_menu_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
thannk you.

Why don't you use a LinearLayout (like a vertical one with severals little horizontal ones inside, each with a TextView and an ImageView) ?
Anyway, if you want to use RelativeLayout you should use something like android:layout_toRightOf, android:layout_toLeftOf, android:layout_above or android:layout_below in your xml to place your elements.
I advise you to take a look at http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html if you don't know those parameters.

You use a RelativeLayout but you don't place elements with reference to each other.
Example :
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<Button android:id="#+id/topBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Top"
android:layout_centerHorizontal="true">
</Button>
<Button android:id="#+id/leftBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Left"
android:layout_below="#+id/topBtn"
android:layout_toLeftOf="#+id/topBtn">
</Button>
</RelativeLayout>
http://developer.android.com/reference/android/widget/RelativeLayout.html

A Linear Layout would be better.
Try this and tell me if this is what you needed:
<?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:padding="5dp"
android:orientation="vertical"
>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/message_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=" Check Your Account"
android:textSize="18dp" />
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_menu_add" android:layout_gravity="center_horizontal"/>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/message_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=" View our Site"
android:textSize="18dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_menu_add" android:layout_gravity="center_horizontal"/>
</LinearLayout>
</LinearLayout>

backgroundimage is hiding all buttons in android app

in my app i am trying to show two buttons and an a title bar with a title text over it. these all are been placed along with a background image. But i am able to see only the background image and the other buttons, title bar and text. Following is the layout of my activity.
here i have denoted the background imageView id as bgd.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView android:id="#+id/bgd"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:src="#drawable/startingpage">
</ImageView>
<LinearLayout android:id="#+id/linearLayout1"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<ImageView android:id="#+id/title"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/applicationbar">
</ImageView>
<TextView android:id="#+id/titletext"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_marginTop="2dip"
android:layout_gravity="center"
android:layout_marginLeft="80dip">
</TextView>
</LinearLayout>
<ImageButton android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dip"
android:layout_marginLeft="20dip"
android:id="#+id/add"
android:src="#drawable/addrestingspot">
</ImageButton>
<ImageButton android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:layout_marginLeft="20dip"
android:id="#+id/search"
android:src="#drawable/search">
</ImageButton>
</LinearLayout>
please tell me where i am going wrong.....

I think your ImageView is "eating" all the space and pushing the rest of the elements to the bottom. Since you don't have a scrollbar you can't see them. You should use the Background Image in the first LinearLayout (the top level one). Something like:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/startingpage"
>
For the first layout should do the trick