Develop Reference

RelativeLayout weight

In a layout resource XML, I have 3 RelativeLayout(s) which are inside a main RelativeLayout. The view will be shown vertically. These 3 RelativeLayout() are set next to each other, and I want them to fill the whole screen, doesnt matter what will be the screen size. My, layout view:
<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"
android:background="#drawable/backg"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="#dimen/top_mr_image"
android:src="#drawable/temp" />
<RelativeLayout
android:id="#+id/r1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView1"
android:layout_marginLeft="10dp"
android:background="#drawable/r1bg"
android:layout_weight="1"
>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="#dimen/txt_mr_right"
android:layout_marginRight="#dimen/txt_mr_right"
android:layout_marginTop="39dp"
android:text="S"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#id/textView1"
android:layout_marginLeft="#dimen/txt_mr_right"
android:layout_marginRight="#dimen/txt_mr_right"
android:text="T"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/r2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignTop="#+id/r1"
android:layout_toRightOf="#+id/r1"
android:layout_weight="1" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/r3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignTop="#+id/r2"
android:layout_toRightOf="#+id/r2"
android:layout_weight="1" >
</RelativeLayout>
I set weight=1 and layout_width=0dp for each relativeLayout and this technique works with buttons, I thought the same will be with relativeLayout, seems my thoughts were wrong. Any idea?
UPD1: I have added an image of what I would like to have

RelativeLayout does not pay attention to android:layout_weight. (That's a property of LinearLayout.LayoutParams, but not of RelativeLayout.LayoutParams.)
You should be able to get the layout you want with a much simpler view hierarchy. It's not clear what you are trying to do, since the last two RelativeLayouts are empty. If you need a purely vertical organization, I'd suggest using LinearLayout instead of RelativeLayout.
EDIT Based on your edit, it looks like you want a horizontal layout of three compound views, each one clickable. I think something like the following will work:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<!-- First column -->
<LinearLayout
android:id="#+id/firstColumn"
android:orientation="vertical"
android:gravity="center_horizontal"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="..." />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="text 1"
. . . />
</LinearLayout>
<!-- Second column -->
<LinearLayout . . . >
. . .
</LinearLayout>
</LinearLayout>
If the contents of the buttons aren't correct, you can replace the second-level LinearLayout views with RelativeLayout if that helps organize the layout better.

RelativeLayouts do not support weight. You need to use a LinearLayout as a parent container if you want to use weights.

Solution is very simple. I have been looking for weight distribution in relative layout.
It's a small trick for all these kind situations.
Use LinearLayout with android:orientation="horizontal"

You can use Horizontally oriented LinearLayout Manager in the Recycler View, and place each RelativeLayout in each item, of its Adapter.
The Link: How to build a Horizontal ListView with RecyclerView?
If your RelativeLayouts are set to a fixed width and height, that is to the size of the Screen, that you can get from DisplayMatrics, that will be OK.
The Link: Get Screen width and height
If the contents of your RelativeLayouts are different, then you can use getItemViewType() method.
Please see: How to create RecyclerView with multiple view type?
Happy Coding :-)

Proper way to divide into 4 pieces an android layout

what I want to achieve is, divide the rows layout described in picture below. what should I do to achieve dividing the row into 3 exactly same size and 1 unknown size? X are same size and i dont know and dont want to specify if its not necessary...
EDIT: buttons are on the left , center, and right.

Use a LinearLayout inside a RelativeLayout. Put 3 items inside the LinearLayout and give them the same weight. Put the unknown item to the right of the LinearLayout with the help of RelativeLayout.
Left elements will align themselves according to the right-one's width.
Here's the code: https://gist.github.com/3772838
And here 2 screenshots with different sized right most elements:
http://goo.gl/Nezmn
http://goo.gl/XbQwL
Kolay gelsin =)

You can use android:layout_weight to distribute extra space proportionally. You want the three left buttons to absorb all the extra width, so the right (fourth) button should have the default weight of 0. Since you also want them to have the same width, the easiest is to assign them a width of 0dp and give them all the same weight:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

Does your extreme left size has a minimum width ?
If so, you should use a LinearLayout with horizontal orientation.
It could contains 2 LinearLayout, one which contains 3 Views (your Buttons) with 0 width and with 1 weight each and the other LinearLayout has a minimumWidth set.
Instead of the marginRight, you could specify a width for the first layout.
Ted Hopp get it right ;)

<?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:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" android:id="#+id/rlayoutParent">
<RelativeLayout
android:layout_width="wrap_content"
android:id="#+id/rlayoutButtons" android:layout_height="wrap_content">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" android:layout_toRightOf="#+id/button1"/>
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" android:layout_toRightOf="#+id/button2"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/rlayoutOther"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/rlayoutButtons" android:gravity="right">
<Button
android:id="#+id/button4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button" />
</RelativeLayout>
</RelativeLayout>

you cab use the layout_weight attribute. give all the x layout the same weight and the question mark a diffrent weight until the screen will devide as u like

Android Linear/Relative Layout - how to "auto size" object in the middle (3 objects)

I have two cases with Linear (also tried Relative) layout in android. The one happens for horizontal and the other for vertical. Lets start with the horizontal:
it is something like:
<LinearLayout ... >
<Button ... layout:gravity = "left" layout:width = "wrap_content"/>
<TextView ... layout:width = ??????? />
<Image .... layout:gravity = "right" layout:width = "wrap_content"/>
</LinearLayout>
Well , I want the button to stay at the left, the image to stay at the right(stick to the end , not just right of the text view) and the textview to (probably with an autowidth or whatever) to stay in the middle. If I put in textview width = "fill/match_parent it sends the image out of the screen. If I put wrap_content, then the image does not stay at the right of the screen. I have also tried relative layout without success.
Same case in vertical , where I have something like:
<LinearLayout ...>
<LinearLayout .... layout:height = "wrap_content" layout:gravity= "top" />
<ListView layout:height = ???????>
<LinearLayout ... layout:height = "wrap_content" layout:gravity = "bottom" />
</LinearLayout>
Same requirement here. I want the first L.layout to stay on top, List view auto size between them and the 2nd Linear layout to stay at the bottom. (Imagine I'm trying to create a view that looks like a UITableView in iPhone that has a NavigationBar, the list of items and a ToolBar at the bottom. Fist LinearLayout is the NavigationBar, the LIst view are the cells and the second LinearLayout is the ToolBar).
Any suggestions? Would prefer the xml solutions.

It can simply done by using RelativeLayout here we go.
Horizontal alignment
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="something"
/>
<TextView
android:id="#+id/text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/image"
android:layout_toRightOf="#+id/button" />
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#drawable/icon" />
</RelativeLayout>
Vertical alignment
<LinearLayout
android:id="#+id/linear_top"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ListView
android:id="#+id/text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/linear_top"
android:layout_above="#+id/linear_bottom" />
<LinearLayout
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
</RelativeLayout>

For your second requirement use layout_weight for list view
<RelativeLayout ...>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_alignParentTop="true" />
<ListView
android:layout_height ="0dp"
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_below="#+id/top_layout"
android:layout_above="#+id/bottm_layout" />
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_alignParentBottom="true" />
</RelativeLayout>

You may try TableLayout instead LinearLayout with Stretch Column is 1 (Columns in Table LAyout are indexed base 0).
First column is your button.
Second column is your textview.
Third column is your image.
You can google about example or see TableLayout.
Updated:
You can see this for clearer:
<RelativeLayout>
<!-- This is Header-->
<LinearLayout
.....
android:layout_alignParentTop="true" >
</LinearLayout>
<!-- This is your table-->
<TableLayout
.....
android:stretchColumns = 1>
<TableRow>
<Button>
.....
</Button>
<TextView>
.....
</TextView>
<ImageView>
.....
</ImageView>
</TableRow>
</TableLayout>
<!-- This is Footer-->
<LinearLayout
.....
android:layout_alignParentBottom="true" >
</LinearLayout>
</RelativeLayout>

Picture is too big to see all views

I have a PizzaOverview.
XML:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView android:layout_height="wrap_content" android:layout_width="fill_parent" android:text="" android:id="#+id/pizza_tv" android:gravity="center_horizontal" android:textSize="15pt"></TextView>
<ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/pizza_iv" android:src="#drawable/icon" android:layout_gravity="center_horizontal"></ImageView>
<RatingBar android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/pizza_rb" android:layout_gravity="center_horizontal"></RatingBar>
<TextView android:layout_height="wrap_content" android:text="" android:id="#+id/pizza_date" android:gravity="center|center_horizontal" android:layout_width="fill_parent"></TextView>
<RelativeLayout android:id="#+id/relativeLayout2" android:layout_width="fill_parent" android:layout_height="fill_parent">
<Button android:text="close" android:layout_height="wrap_content" android:id="#+id/pizza_bt" android:layout_alignParentBottom="true" android:layout_width="fill_parent"></Button>
</RelativeLayout>
</LinearLayout>
If the picture is too big the date is invisible.

add scroll view to your layout or fix the size of imageview
add the scroll view to your layout
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<TextView android:layout_height="wrap_content" android:layout_width="fill_parent" android:text="" android:id="#+id/pizza_tv" android:gravity="center_horizontal" android:textSize="15pt"></TextView>
<ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/pizza_iv" android:src="#drawable/icon" android:layout_gravity="center_horizontal"></ImageView>
<RatingBar android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/pizza_rb" android:layout_gravity="center_horizontal"></RatingBar>
<TextView android:layout_height="wrap_content" android:text="" android:id="#+id/pizza_date" android:gravity="center|center_horizontal" android:layout_width="fill_parent"></TextView>
<RelativeLayout android:id="#+id/relativeLayout2" android:layout_width="fill_parent" android:layout_height="fill_parent">
<Button android:text="close" android:layout_height="wrap_content" android:id="#+id/pizza_bt" android:layout_alignParentBottom="true" android:layout_width="fill_parent"></Button>
</RelativeLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>

Ensure that the images you supply to the activity are the correct resolution and size.
Also make sure that you have separate layouts for separate screen size categories.
Read this section of the android documentation for more details on layouts and managing different screen sizes. It tells you the basics you'll need.

You could place your image with the rating bar and the text below it in a RelativeLayout. Give a marginBottom to your RelativeLayout equal to the height of your Button. Then place your text, give it an id and add android:layout_alignParentBottom="true". Set the height of the image to fill_parent and add attribute android:layout:below="id_of_text".

You can as the other answer states make the screen scrollable. But if your content is dynamic (and depending on device it is arguable to say you content will ALWAYS by dynamic) you should make sure the that ImageView has it's bounds set correctly.
In the source code you have:
<ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/pizza_iv" android:src="#drawable/icon" android:layout_gravity="center_horizontal"></ImageView>
You should instead have:
<ImageView android:layout_height="0dp"
android:weight="1"
android:layout_width="match_parent"
android:id="#+id/pizza_iv"
android:src="#drawable/icon"
android:layout_gravity="center_horizontal"
android:scaleType="centerInside"/>
The extra attribute of weight will make your view fill any available space along the orientation set in the bounding LinearLayout. This is dependant on the weight of other views along that orientation (as the other views have no weight value in this case it will fill all space up until the edge of your fixed views).
The extra attribute of scaleType="centerInside" will make your image sit in the center of the bound's you have suggested (which are the width of the screen and all available space vertically) without ever growing large enough to overlap the bounding container.
When using ImageView you should keep in mind that the ImageView is a bounding container for an Image. It can be as large or as small as possible but is only a mechanism for telling the UI where to place an image. The scaleType attribute is what you use to say how you want the image placing within this bounding countainer. Using "wrap_content" on an ImageView isn't effective and can lead to trouble later in the design (especially when considering different devices).

Android - Two ImageViews side-by-side

I am trying to create an Activity for an Android app with two imageViews aligned side-by-side. my current layout config is as follows:
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:paddingTop="15dip" android:paddingBottom="15dip"
android:background="#drawable/dark_bg">
<ImageView android:id="#+id/numberDays"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:scaleType="fitStart"
android:src="#drawable/counter_01" />
<ImageView android:src="#drawable/counter_days"
android:layout_height="wrap_content" android:layout_width="wrap_content"
android:scaleType="fitStart"
android:id="#+id/daysText"></ImageView>
</LinearLayout>
The first image will be a square (lets say 100x100) and the second image will be rectangular (300x100) - and I want them to be aligned next to each other but always be scaled to fit within the width of the device - is this possible just with layout config?
The current config just shows the first image the entire width (and almost height) of the screen and the second image is not shown at all. I have tried changing wrap_content with fill_parent and hardocding widths but that has just resulted in the both images being shown but the first image on top of the second image (both anchored left).
Thanks
UPDATED AGAIN:
I have updated my layout to look like this now including the ScrollView as recommended but no joy:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:gravity="top"
android:layout_width="fill_parent" android:layout_height="fill_parent" >
<!-- Header for activity - this has the countdown in it -->
<ScrollView android:id="#+id/ScrollView01" android:layout_height="wrap_content" android:layout_width="fill_parent">
<LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content"
android:gravity="right"
android:background="#drawable/dark_bg" android:orientation="horizontal">
<ImageView android:id="#+id/numberDays"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_weight="2"
android:src="#drawable/counter_01" />
<ImageView android:src="#drawable/counter_days"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/daysText"/>
</LinearLayout>
</ScrollView>
<!-- main body for the rest of the info -->
<LinearLayout android:orientation="horizontal" android:gravity="center"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="#drawable/light_bg">
</LinearLayout>
</LinearLayout>
Using the layout_weight as suggested has given both the images the right ratios and appear to be scaled perfectly, however, I am still having the problem whereby they are both anchored to the far left of the screen, so the first image is actually overlaid on top of the second image, rather than having them side by side.
Below is a screenshot of the Eclipse display:

try using layout_weight for both of the ImageView components. So something like:
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="15dip"
android:paddingBottom="15dip"
android:background="#drawable/dark_bg">
<ImageView android:id="#+id/numberDays"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:layout_weight="1"
android:src="#drawable/counter_01" />
<ImageView android:src="#drawable/counter_days"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:scaleType="fitStart"
android:layout_weight="1"
android:id="#+id/daysText"></ImageView>
</LinearLayout>
i added android:layout_weight="1" to each of them. Read up on layout_weight for LinearLayout definitions, it's very useful!

You can try creating a horizontal ScrollView with a layout_width of a pixel value greater than the two ImageViews combined, rather than fill_parent. Then place your LinearLayout inside of it.