Put elements between layouts [ANDROID]

Question

I am doing an user interface in Android. My idea is divide this interface in three equals parts (this is easy, three layouts with weight), but I want to put a images in interesctions of these layouts. For example an image that overlapes some space in layout1 and layout2, and the same in 2 and 3.

How can do this? My code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:weightSum="1.0">


    <LinearLayout
        android:id="@+id/first"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.33">

    </LinearLayout>

    <LinearLayout
        android:id="@+id/second"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.33"></LinearLayout>

    <LinearLayout
        android:id="@+id/third"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.33"></LinearLayout>

</LinearLayout>

And my idea: Android: Placing ImageView on overlap between layouts Thanks

Where do you want the Imageview? On the first LinearLayout, no right? — Skizo-ozᴉʞS ツ, Aug 31 '15 at 14:59
I think you need to use PercentageRelativeLayout http://developer.android.com/reference/android/support/percent/PercentRelativeLayout.html — Derek Fung, Aug 31 '15 at 15:03

score 0 · Answer 1 · answered Aug 31 '15 at 15:04

Three options:

Make the view in between also percent. i. e. Each of your LinearLayouts gets a weight of 0.30 and your views in between get a weight of 0.05
Put the view on top of your LinearLayout 2 and 3 (not exactly same height of each of them then)
Do it programmatically, in code set the height of each of them.

Berťák · Accepted Answer · 2015-08-31T15:26:42.260

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

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

        <LinearLayout
            android:id="@+id/first"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="2"
            android:orientation="vertical" >
        </LinearLayout>

        <LinearLayout
            android:id="@+id/second"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="2"
            android:orientation="vertical" >
        </LinearLayout>

        <LinearLayout
            android:id="@+id/third"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="2"
            android:orientation="vertical" >
        </LinearLayout>
    </LinearLayout>

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

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1.0"
            android:orientation="vertical" >
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/firstDividerLayout"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="2.0" >

            <ImageView
                android:id="@+id/firstDividerImageView"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                android:src="@drawable/ic_launcher" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/secondDividerLayout"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="2.0" >

            <ImageView
                android:id="@+id/secondDividerImageView"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                android:src="@drawable/ic_launcher" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1.0" >
        </RelativeLayout>
    </LinearLayout>

</RelativeLayout>

Note that I wrapped your original LinearLayout in RelativeLayout and then I added another LinearLayout with 'dividers'. Dividers size is set by weights precisely so that it overlays your sections in the center.

This is the result (if you set red background for your 'second' layout):

I would love to know the reason why somebody downvoted my answer. However, thanks for accepting. :-) — Berťák, Aug 31 '15 at 15:28

Put elements between layouts [ANDROID]

2 Answers2