0

Why does this layout seems to inverse what I put as attributes?

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="600dp"
    android:layout_height="600dp" >

    <LinearLayout
        android:id="@+id/top_left"
        android:layout_width="400dp"
        android:layout_height="200dp"
        android:layout_alignParentTop="true"

    >
        <View
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/green”
            />
    </LinearLayout>

    <LinearLayout
        android:layout_width="200dp"
        android:layout_height="400dp"
        android:layout_alignRight="@id/top_left"

    >
        <View
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/red"
            />

    </LinearLayout>

</RelativeLayout>

I was expecting that it would be something like: 

_____400_________200__
|              |      |
200 top_left   |      |400
|______________|      |
               |      |
               |      |
               |      |
               |______|

But I get:
enter image description here

Jim
  • 18,826
  • 34
  • 135
  • 254
  • you are expecting the red color to be below the green right ? – Umair Mar 30 '15 at 09:50
  • May I suggest you to use a LinearLayout as the main container with weightSum attribute and finally the 2 View as child? – JJ86 Mar 30 '15 at 09:54
  • @Darkie:I am expecting 400dp goes to green and 200dp goes to red in width. No overlay – Jim Mar 30 '15 at 09:54
  • Use android:layout_toRightOf="@+id/top_left" in your second LinearLayout :) – Ajeet Mar 30 '15 at 10:00

2 Answers2

1
<?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="match_parent"
    android:background="#FFFFFF"
    android:orientation="horizontal" >

    <View
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_weight="0.4"
        android:background="#00FF00" />

    <View
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:layout_weight="0.6"
        android:background="#FF0000" />

</LinearLayout>

enter image description here

Yogendra
  • 4,817
  • 1
  • 28
  • 21
0

You're putting a 400x200 green rectangle down, aligned to the top of the RelativeLayout.

Then you're putting a 200x400 red rectangle down, aligned to the right of the RelativeLayout. There's not 600 dp of screen space, so it goes over the top (if there was more than 600 dp, you would get a gap between the two).

If you want them not to overlap, you need to tell the RelativeLayout that, by using android:layout_toRightOf="@+id/top_left". That will force the red rectangle to start to the right of the green rectangle. In your case, it will probably force the red rectangle off-screen, because there's not enough space for both of them.

gkee
  • 771
  • 1
  • 7
  • 11
  • If I add `android:layout_toRightOf="@+id/top_left"` to the second one it dissappears – Jim Mar 30 '15 at 10:44
  • Yes - it's getting pushed off screen, as I mentioned. Try rotating your device to look at it in landscape mode and you should see what I mean. You need to make the green rectangle smaller, or use a device with a bigger screen! – gkee Mar 30 '15 at 10:47
  • But why is it pushed out? Shouldn't it be 400dp for the first and then alocate 200dp for the second = 600dp which is total width? – Jim Mar 30 '15 at 10:52
  • What is the total width of the screen you are looking at, in dp? (see http://stackoverflow.com/questions/6465680/how-to-determine-the-screen-width-in-terms-of-dp-or-dip-at-runtime-in-android for how to get it). I suspect it's smaller than you think. – gkee Mar 30 '15 at 10:55
  • What I pasted as a screenshot is the design preview – Jim Mar 30 '15 at 11:04