Top view in space between weight-distributed views in a linear layout

I am trying to create a layout as follows:

floating button above

Two views with a weight of 2 (green view) and 1 (blue view) in a linear layout. And a floating button located between these views opposite them. But this is not possible using a linear layout. Can anyone help a little here.

Update: Here is what I did

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

    <View
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:background="#22B14C" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="To be a floating button" />

    <View
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#00A2E8" />
</LinearLayout>

And i have

floating button between

+1
source share
2 answers

Thanks to the CoordinatorLayout in the Design Support Library, this problem can be resolved.

<android.support.design.widget.CoordinatorLayout
    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="match_parent"
        android:orientation="vertical">

        <View
            android:id="@+id/top"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="2"
            android:background="#22B14C" />

        <View
            android:id="@+id/bottom"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#00A2E8" />
    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        app:backgroundTint="#a349a4"
        app:fabSize="normal"
        app:layout_anchor="@id/top"
        app:layout_anchorGravity="bottom|right|end" />

</android.support.design.widget.CoordinatorLayout>

FloatingActionButton layout_anchor, layout_anchorGravity

:

solution image

+5

, LinearLayout, , - . ,

<Button
    android:layout_width="wrap_content"
    android:layout_height="48dp"
    android:layout_marginTop="-24dp"
    android:layout_marginBottom="-24dp"
    android:layout_gravity="center_horizontal"
    android:text="To be a floating button"/>

, RelativeLayout.

0

All Articles