Develop Reference

How to align the center of a box with the left edge of another box?

Image of what I want to do
I want to align the center of the smaller red box to the left-edge of the black box. The red box has it's width and height set to wrap_content and there is a text-view inside. The black box takes up half the screen width. It's in a linear-layout with a spacer on the left and right, the spacers have .25 weight while the black-box has .5 weight.
I'd prefer to do this in XML without the use of margins. The red-box may contain 2 characters or 20, the contents come from the server.
There's only "toLeftOf" and "alignLeft". What I want to do is essentially "align center of box to left edge of another box".

Here is a simple implementation of what you want using only XML.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="100dp"
android:layout_height="50dp"
android:id="#+id/imageView"
android:background="#000000"
android:layout_marginLeft="50dp" />
<ImageView
android:layout_width="50dp"
android:layout_height="25dp"
android:id="#+id/imageView2"
android:background="#ff0000"
android:layout_marginTop="-40dp"
android:layout_marginLeft="25dp" />

You can try this xml for your purpose. But what you want center of black box with dynamic content, but it's not recommended, the reason is, if Content too long or too short, it will not look good in UI, because You want to maintain width of red box dynamically as well as center of left edge also. So black box size also you need to change everytime. That is not good. Please try my solution and you can always modify this layout as per your thought process.
<?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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:id="#+id/view_1"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:background="#000000" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/view_1"
android:layout_centerVertical="true"
android:background="#ff0000">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="Hi"
android:textColor="#ffffff" />
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
Hope it will help you !

RelativeLayout positioning not working properly

Hi,
I am trying to design a layout that has no dependency on screen size. Actually I am designing a sample layout in which there is a large size add in the center of screen. There is a text in the center of upper remaining area and lower remaining part. The xml is:
<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" >
<ImageView
android:id="#+id/ads_layout_large"
android:layout_width="300dp"
android:layout_height="250dp"
android:layout_centerInParent="true"
android:background="#android:color/background_light" />
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/ads_layout_large"
android:background="#fff000"
android:gravity="center"
android:text="#string/exit_enjoyed_text" />
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#id/ads_layout_large"
android:background="#fff000"
android:gravity="center"
android:text="#string/exit_enjoyed_text" />
</RelativeLayout>
The problem is, it is working on upper part, the text is exactly in the center of the remaining area, but the lower TextView has covered half of the screen, can you please help me find the mistake? Or any other way to design the same?

I think here is your problem :
android:layout_height="fill_parent"
setting your TextView height to fill_parent cause your textview extend to reach it's parent size , use wrap_content or static value like "30dp" instead

RelativeLayout ignores second ImageView?

I have the following XML layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical">
<ImageView
android:id="#+id/IVLEFT"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:background="#ff0000"
android:padding="1dp"
/>
<ImageView
android:id="#+id/IVRIGHT"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_toRightOf="#+id/IVLEFT"
android:layout_alignParentRight="true"
android:layout_alignBottom="#+id/IVLEFT"
android:layout_alignTop="#+id/IVLEFT"
android:src="#drawable/shadow_pages"
android:background="#00ff00"
android:padding="1dp" />
</RelativeLayout>
I would expect my layout to have 2 ImageViews - one to the left, one to the right.
But what actually happens is:
During runtime I set IVLEFT's image to a large image (say 1024X768) - and it covers all of my layout, abandoning IVRIGHT (I cant even see it)
Any ideas?

It is because your RelativeLayout is wrap_content in width. it takes all the space it needs even if it is outside the screen.
Use fill_parent instead.

Its because you have given first ImageView width and height to fill_parent. So it will acquire the whole layout. Then also, your layout depends on your first image, because if you give a large image to the first Imageview, it will take the whole layout.
If you want to show 2 images side by side, try using linearlayout with layout_weights to two imageViews.
Also give your RelativeLayout width and height to fill_parent

Change the RelativeLayout width to fill_parent
There is no ImageView with the id = "#+id/magazineImageView" in your xml, if you mean "#+id/IVLEFT", then the 1st image itself is occupying the whole Screen width, hence you cannot see the 2nd image.
If you want to see the 2nd image make both the ImageView width as wrap_content or some hard coded value
More importantly when you are using any View id as a reference dont use + sign in the id. + sign is used to define an id for a view, for the first time
use:
android:layout_toRightOf="#id/magazineImageView"

Try this::
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical">
<ImageView
android:id="#+id/IVLEFT"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:background="#ff0000"
android:padding="1dp"
android:src="#drawable/ic_launcher"/>
<ImageView
android:id="#+id/IVRIGHT"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/IVLEFT"
android:layout_alignParentRight="true"
android:layout_alignBottom="#+id/IVLEFT"
android:layout_alignTop="#+id/IVLEFT"
android:src="#drawable/ic_launcher"
android:background="#00ff00"
android:padding="1dp" />
</RelativeLayout>

image out of bounds of image view

I'm having trouble figuring out why my image isn't within the bounds of my imageview. Instead, it is floating off to the left and hidden. Is this only because the Graphical Interface doesn't show it?
EDIT:
I edited the original code to more clearly show the issue i'm having and added a picture(i want the image to show in the red box):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="#+id/top_container"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
>
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
>
<View
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_weight="195"
android:background="#00FF00"/>
<ImageView
android:id="#+id/img"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#ff0000"
android:src="#drawable/img" />
<View
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:background="#0000FF"
/>
</LinearLayout>
</LinearLayout>

Ok I have it working. The height attribute of "block_container" is set to a random 200dp you WILL want to change the height to whatever your needs are, or potentially set it to "wrap_content". I tested this on emulator and device.
I am also assuming that you want all three block to be equally spaced. Notice how the parent "block_container" has a weight_sum of 9? Well the children are equal widths because they have a weight of 3 each (3 blocks * 3 weight each = 9 weight total).
I noticed before it looks like you were trying to use weight as width directly e.g. a weight of 569. Just remember weight != width directly.
EDIT: added the missing id attributes from some of the views
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/top_container"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:id="#+id/block_container"
android:layout_width="fill_parent"
android:layout_height="200dp"
android:orientation="horizontal"
android:weightSum="9"
>
<View
android:id="#+id/left_block"
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_weight="3"
android:background="#00FF00"/>
<ImageView
android:id="#+id/img"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="3"
android:background="#ff0000"
android:src="#drawable/logo" />
<View
android:id="#+id/right_block"
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_weight="3"
android:background="#0000FF"
/>
</LinearLayout>
</LinearLayout>

Why are you setting android:layout_height to be 0dp? I can't even get it to display unless I change this to something like fill_parent.
Either way, its because of your layout_weight for the parent LinearLayout. Specify a larger layout_weight for your ImageView and it will come into view.
<ImageView
android:id="#+id/my_img"
android:gravity="center"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="279"
android:src="#drawable/my_img" />
This worked for me.. but math might not be right.

I don't know where to begin with the issues with what you posted, some simple observations before even debugging further:
Your layouts ALL need ids (e.g. android:id="#+id/another_layout")
You have a width on the second linear layout of 0dp
Your first linear layout has a height of 0 dp, combined with the previous I'm surprised it renders at all
The last inner linear layout again has a width of 0dp
What are you trying to achieve? To me there seems to be a lot of layouts unless you have removed some elements to make it easier to understand? You could post a simple image of what you are trying to do then perhaps we can help you refine the markup?

How to make a view's size depend on another view's size?

I'm making a UI designed as shown below. View 1 is an image, when showing different pictures, its size will be different. The sizes of view 2 and view 3 are depend on View 1. How to define the xml file to make this happen?
ps: The design came from client so I can't change it.

better use RelativeLayout to achieve this task....Make appropriate changes and use it
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:layout_below="#id/view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:layout_toRightof="#id/view1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"/>
</RelativeLayout>

I think LinearLayout is better here, because the easiest way to set the appropriate sizes is to use layout_weight. If you set a non-zero weight for only one element in a LinearLayout, then it will take all the remaining space. layout_weight divides the remaining spaces in the ratio of the given weights. It calculates the size of the remaining space after setting the given layout_width-s (or height) first, then it will override these sizes. When you want to divide the whole screen into fixed ratios, not the remaining spaces after some initial setting, then you should first set the size of the elements to 0. So set the size of View1 to wrap_content, and all the other sizes in the appropriate directions to 0 (fill parent in the other direction), and use layout_weight=1.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical" android:layout_width ="wrap_content"
android:layout_height="fill_parent">
<ImageView
android:id="#+id/view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src=.../>
<SomeKindOfView
android:id="#+id/view2"
android:layout_width="fill_parent"
android:layout_height="0px"
android:layout_weight="1"/>
</LinearLayout>
<AnotherView
android:id="#+id/view3"
android:layout_width="0px"
android:layout_height="fill_parent"
android:layout_weight="1"/>
</LinearLayout>