How can i position a button in between two layouts

Question

I am trying to position a button in between two layouts.

Also, I don\'t want to have to do this with a margin if I can help it, when you start dealing with diffe

Answer 1

I think you should try using a RelativeLayout in which you will put your two layouts and your button. But if you want to put the button on top of the two layouts you have to put it in your RelativeLayout last because of the z-order, and then use the XML attribute android:centerInParent.

So your layout would be something like the following:

<RelativeLayout ...
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout ...
        android:id="@+id/myLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true" > <!-- Or wherever you want to position this layout -->
        ...
    </LinearLayout>
    <LinearLayout ...
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/myLayout1" > <!-- Or wherever you want to position this layout -->
        ...
    </LinearLayout>
    <Button ...
        android:layout_centerInParent="true" />
</RelativeLayout>

Answer 2

This kind of UI calls for overlap of multiple layers.
So FrameLayout is the hero here.

To give a basic idea of what we wish to achieve, we can sketch the screen and decide placements
FL is the main container which will be a FrameLayout.
You need to make a button of fixed height. Let's say BL is of height bl dp.
Simply provide a MarginBottom of length bl/2 dp to the LinearLayout LL.
Where LL is the container which would contain the profile image and the works.

The layout file will look like this

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:orientation="vertical"
    tools:context=".MainActivity">

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

        <!-- Parent FrameLayout 'FL' -->
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <!-- This is Layout 'LL'
                 This is where you will place your image & the nice bg
            -->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginBottom="25dp"
                android:background="#b2ebf2" />

            <!-- BL = 50dp -->
            <Button
                android:layout_width="100dp"
                android:layout_height="50dp"
                android:layout_gravity="bottom|center_horizontal"
                android:background="#558b2f"
                android:text="@android:string/ok"
                android:textSize="18sp"
                android:textColor="@android:color/white" />
        </FrameLayout>
    </LinearLayout>

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

</LinearLayout>

The output will look like this

Answer 3

You can easily implement this by using Coordinator layout.We have to specify multiple layouts one by one and the both layout must be LinearLayout . Now we have to use layout_anchor attribute inside Button

<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">

                <LinearLayout
                    android:id="@+id/LinearLayout1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="horizontal"
                    android:background="#CDDC39"
                    android:layout_weight="50"/>

                <LinearLayout
                    android:id="@+id/LinearLayout2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="horizontal"
                    android:layout_weight="50"
                    android:background="#C6FF00"
                    />

            </LinearLayout>

            <Button
                android:id="@+id/button"
                android:layout_width="200dp"
                android:layout_height="wrap_content"
                app:layout_anchor="@id/LinearLayout1"
                app:backgroundTint="#2196F3"
                app:elevation="7dp"
                android:text:"click Me"
                android:layout_margin="20dp"
                android:src="@android:drawable/ic_dialog_email"
                app:layout_anchorGravity="bottom|center" />

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