overlapping children in RelativeLayout with percentage

Question

I want to put an ImageView on top of (over) another view which is derived from SurfaceView using percentages for width and height. But no idea how to achieve that. Any help?

That's my code so far:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/main"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
>

    <MyOwnView
        android:id="@+id/my_own_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight=".20"
        android:contentDescription="@string/imageview_description"
        android:src="@drawable/background_picture" />

</RelativeLayout>

And that's what I want:

enter image description here

Have you looked at this? http://stackoverflow.com/questions/4961355/percentage-width-in-a-relativelayout?rq=1 — RED_, Feb 19 '14 at 15:43
Indeed, I did. But it's completely different scenario because there are two elements using 30% and 70% of the space. In my scenario one view is behind the other. And I took the XML layout for my ImageView from that posting. But did not work. — Matthias, Feb 19 '14 at 15:45

Merlevede · Accepted Answer · 2014-02-19T17:02:07.453

You need to use a Frame Layout, the get overlapping views. Here's a little example.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <View
        android:id="@+id/my_own_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="3"
            android:src="@drawable/ic_launcher" />

        <View
            android:id="@+id/my_own_view"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="7" />
    </LinearLayout>

</FrameLayout>

This is an example of how you can do this. Instead of the image you embed another layout (in my example I choose a LinearLayout, but it can be a RelativeLayout, for example). In this inner-layout you arrange your views as usual. Note that I use a dummy view, along with the Imageview to give the weight some values. This weight is what allow you to specify percentages.

I hope this takes you into the right direction.

@Matthias I'm sorry, this was embarrassing, the formatter here thaught was an HTML tag! — Merlevede, Feb 19 '14 at 16:27
Ok, but how do you specify a percentage for width/height for the ImageView? — Matthias, Feb 19 '14 at 16:33
This either works with FrameLayout and RelativeLayout. To get the ImageView into the upper left, you need another LinearLayout (horizontal) within the first (vertical) one. layout_weight has to be zero dot something (.3) — Matthias, Feb 19 '14 at 17:02

score 0 · Answer 2 · answered Feb 19 '14 at 15:53

You can simply warp your ImageView around a Linear layout.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/main"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">

<MyOwnView
    android:id="@+id/my_own_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
<LinearLayout
android:layout_width="match_parent" 
android:layout_height="match_parent">

   <ImageView
       android:layout_width="wrap_content"
       android:layout_height="0dp"
       android:layout_weight=".20"
       android:contentDescription="@string/imageview_description"
       android:src="@drawable/background_picture" />

</LinearLayout>

</RelativeLayout>

You need another place-holder (empty LinearView with some background color) for the remaining 80 percent. Otherwise it's not working because the ImageView will be shown as 100%. — Matthias, Feb 19 '14 at 17:01

overlapping children in RelativeLayout with percentage

2 Answers2