CODEWITHSUNDEEP
androidandroid-layout
Andrei Herford
Andrei Herford

Reputation: 18729

How to overlap layouts/views within LinearLayout?

I would like to create layout that looks like this:

enter image description here

Layout1and Layout2 are some layouts of any kind, nested in a parent LinearLayout. The LinearLayout is necessary to give both child layouts a 50% height by using layout_weight.

The red squares should be Buttons which overlap both Layout1and Layout2 and are centered between the two layouts.

Of course this could achived by using RelativeLayout as parent instead but then I would loose the possibility to use layout_weight...

If I keep using LinearLayout, it seems to be impossible to let the buttons overlap the two other layouts.

Furthermore the buttons cannot be siblings of the two layouts but need to be nested inside a common container layout that takes care of the horizontal positioning (e.g. a LinearLayout with horizontal orientation).

Any idea how to solve this?

I already tried to place the buttons inside Layout1 (or Layout2), place them below the bottom and use android:clipChildren=false, but this had no effect. The button where simple cut in half.

Edit: Splitting the height between the two layouts 50/50 is just one version. Another view uses the same basic layout but splits the height 70/30 between the two layouts. The buttons should always be centered between the two layouts. Sorry for not pointing this out earlier.

Layout Code:

<!-- parent/root layout -->
<LinearLayout
    ...
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    ... >

    <!-- Layout1 -->
    <LinearLayout 
        android:layout_weight="1"
        ... />

    <!-- Buttons -->
    <LinearLayout             
        android:orientation="horizontal"
        ... >

        <Button ... />
        <Button ... />
        <Button ... />

    </LinearLayout>


    <!-- Layout2 -->
    <LinearLayout 
        android:layout_weight="1"
        ... />


</LinearLayout>

Upvotes: 2

Views: 15719

Answers (4)

ND1010_
ND1010_

Reputation: 3841

50% linearOne 50% linearTwo

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_test"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@color/colorAccent">

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@color/colorPrimary">

    </LinearLayout>


</LinearLayout>

    <LinearLayout
        android:layout_centerInParent="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <View
            android:layout_weight="1"
            android:layout_width="50dp"
            android:layout_height="50dp"
             />
        <View
            android:layout_weight="1"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#000" />
        <View
            android:layout_weight="1"
            android:layout_width="50dp"
            android:layout_height="50dp"
            />
        <View
            android:layout_weight="1"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#000" />
        <View
            android:layout_weight="1"
            android:layout_width="50dp"
            android:layout_height="50dp"
            />
        <View
            android:layout_weight="1"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#000" />
        <View
            android:layout_weight="1"
            android:layout_width="50dp"
            android:layout_height="50dp"
            />


    </LinearLayout>

</RelativeLayout>

============================================================================

70% linearOne 30% linearTwo

Just close your eyes Copy and paste

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="10"
    tools:context="com.ncrypted.myapplication.MainActivity">

    <LinearLayout
        android:layout_weight="6"
        android:id="@+id/linear1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        android:orientation="vertical">

    </LinearLayout>

    <RelativeLayout
        android:layout_weight="2"
        android:id="@+id/relative1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@color/colorAccent">

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <View
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:background="@color/colorAccent"
                android:layout_weight="1" />
            <View
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:background="@color/colorPrimary"
                android:layout_weight="1" />


        </LinearLayout>
        <LinearLayout
            android:layout_centerInParent="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <View
                android:layout_weight="1"
                android:layout_width="50dp"
                android:layout_height="50dp"
                 />
            <View
                android:layout_weight="1"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#000" />
            <View
                android:layout_weight="1"
                android:layout_width="50dp"
                android:layout_height="50dp"
                />
            <View
                android:layout_weight="1"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#000" />
            <View
                android:layout_weight="1"
                android:layout_width="50dp"
                android:layout_height="50dp"
                />
            <View
                android:layout_weight="1"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#000" />
            <View
                android:layout_weight="1"
                android:layout_width="50dp"
                android:layout_height="50dp"
                />
        </LinearLayout>

    </RelativeLayout>

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

    </LinearLayout>

</LinearLayout>

Upvotes: 4

Stanley Ko
Stanley Ko

Reputation: 3497

Here, this is the solution using only Linearlayout.

Key point is: button is consist of two part. Half top and Half bottom. And minus margin means half of your button's height.

But, please do not use this code. Use GuideLine of ConstraintLayout. It has percentage option, so you can implement almost evert layout you want.

enter image description here

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_test"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="0.5"
        android:background="#d3d3d3">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_marginBottom="-25dp"
            android:layout_weight="1"
            android:src="@mipmap/ic_launcher"/>

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_marginBottom="-25dp"
            android:layout_weight="1"
            android:src="@mipmap/ic_launcher"/>

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_marginBottom="-25dp"
            android:layout_weight="1"
            android:src="@mipmap/ic_launcher"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="0.5"
        android:background="#Ed1c24">

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:layout_marginTop="-25dp"
            android:layout_weight="1"
            android:src="@mipmap/ic_launcher"/>

        <ImageView
            android:id="@+id/imageView5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:layout_marginTop="-25dp"
            android:layout_weight="1"
            android:src="@mipmap/ic_launcher"/>

        <ImageView
            android:id="@+id/imageView6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:layout_marginTop="-25dp"
            android:layout_weight="1"
            android:src="@mipmap/ic_launcher"/>
    </LinearLayout>


</LinearLayout>

Upvotes: 0

sumit
sumit

Reputation: 1087

Here you can use this: Position the imageviews according to your requirement

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_test"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#e2e2"
            android:layout_weight="1"
            >

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#Ed1c24"
            android:layout_weight="1"
            >

        </LinearLayout>
    </LinearLayout>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        android:id="@+id/imageView"
        android:layout_marginStart="48dp"
        android:layout_centerVertical="true"
        />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        android:id="@+id/imageView1"
        android:layout_toEndOf="@+id/imageView"
        android:layout_marginStart="48dp"
        android:layout_centerVertical="true"
        />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        android:id="@+id/imageView3"
        android:layout_toEndOf="@+id/imageView1"
        android:layout_marginStart="38dp"
        android:layout_centerVertical="true"
        />


</RelativeLayout>

Upvotes: -1

romtsn
romtsn

Reputation: 11982

Hm, if you don't have any restrictions besides those ones that you've described in the question, you could do it by the next way:

<!-- parent/root layout -->
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <!-- Layout1 -->
        <LinearLayout 
            android:layout_weight="1"
             ... />

        <!-- Layout2 -->
        <LinearLayout 
            android:layout_weight="1"
            ... />

    </LinearLayout>

    <!-- Buttons -->
    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"            
        android:orientation="horizontal"
        android:background="@android:color/transparent"
        ... >

        <Button ... />
        <Button ... />
        <Button ... />

    </LinearLayout>

</RelativeLayout>

Upvotes: 0

Related Questions