android UI material style

Question

My intention is to do something like this:

with a button in the middle of the two views.

I followed several instructions, but without success. Currently I have this in my xml

And as I said, I try to get something like this:

I have done many tests, but can not get the goal.

This is the xml I'm using:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/background">

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

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

            <LinearLayout
                android:id="@+id/up"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/room" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/center"
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:layout_below="@+id/up"
                android:background="#f42323"
                android:orientation="vertical">


            </LinearLayout>

            <LinearLayout
                android:id="@+id/bottom"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/center"
                android:orientation="vertical">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla " />

            </LinearLayout>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/up"
                android:drawableLeft="@drawable/ic_launcher"
                android:text="Hello!!" />

        </RelativeLayout>
    </LinearLayout>

</FrameLayout>

appreciate the help

Thanks and regards.

Answer 1

What you want is to use a RelativeLayout

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/background">

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

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

            <LinearLayout
                android:id="@+id/up"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/room" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/center"
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:layout_below="@+id/up"
                android:background="#f42323"
                android:orientation="vertical">


            </LinearLayout>

            <LinearLayout
                android:id="@+id/bottom"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/center"
                android:orientation="vertical">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla " />

            </LinearLayout>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBottom="@id/up"
                android:drawableLeft="@drawable/ic_launcher"
                android:layout_alignParentRight="true"
                android:layout_marginBottom="-25dp"
                android:layout_marginRight="8dp"
                android:text="Hello!!" />

        </RelativeLayout>
    </LinearLayout>

</FrameLayout>

You align the bottom with your header or top layout. Then use marginBottom to go back half the size of the button: for example: -25 This should do it!

If you also want the Floating Action Button here is a library I'm currently using: https://github.com/makovkastar/FloatingActionButton

Answer 2

There's a sample project of Google in Android Studio that does exactly what you want.

You can access it by File > Import Sample > Floating Action Button Basic

This Sample contains a FloatingActionButton View which inherits from FrameLayout.

Answer 3

Update your button like this:

<Button
        android:layout_width="wrap_content"
        android:layout_height="60dp"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/up"
        android:layout_marginRight="10dp"
        android:layout_marginTop="-30dp"
        android:drawableLeft="@drawable/ic_launcher"
        android:text="Hello!!" />

Hope this helped!