What is the best way to achieve following design (attached image)?

Question

All,

I know this is not difficult one, But I just want to know that which is the best way to achieve . You can see two icons exactly between two layouts (blackish and white). I know we can achieve this using margin but is there any other better way ?

P.S To clarify the confusion this is what my entire screen should look like

Thanks in advance. Answer will be appreciated.

Try this : https://stackoverflow.com/a/30990661/8089770 – Vidhi Dave Dec 04 '17 at 10:54 — Vidhi Dave, Dec 04 '17 at 10:54
use `FloatingActionButton` with `layout_anchor` attribute – Abhishek Singh Dec 04 '17 at 10:55 — Abhishek Singh, Dec 04 '17 at 10:55
@VishvaDave , Abhishek thanks – Kalpesh Lakhani Dec 04 '17 at 10:57 — Kalpesh Lakhani, Dec 04 '17 at 10:57
Use CoordinatorLayout (frame layout on steroids) – denvercoder9 Dec 04 '17 at 11:00 — denvercoder9, Dec 04 '17 at 11:00
@KalpeshLakhani please check my answer – ND1010_ Dec 04 '17 at 11:12 — ND1010_, Dec 04 '17 at 11:12
@KalpeshLakhani check my updated answer. – ND1010_ Dec 04 '17 at 11:24 — ND1010_, Dec 04 '17 at 11:24
@ND1010_ Thanks champ...accepted it :) – Kalpesh Lakhani Dec 04 '17 at 11:26 — Kalpesh Lakhani, Dec 04 '17 at 11:26

ND1010_ · Answer 1 · 2017-12-04T12:19:54.570

Try This

Output:

   <?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context="com.nct.dhruv.demotest.LogCatActivity">

    <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:layout_weight="1"
            android:background="@color/colorPrimary" />

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

    </LinearLayout>

    <LinearLayout
        android:id="@+id/linear"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal"
        android:layout_centerVertical="true"
        android:layout_alignParentStart="true">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_marginRight="10dp"
            android:orientation="vertical"
            android:layout_height="wrap_content">

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/floatingActionButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"
                app:backgroundTint="#fff" />

        </LinearLayout>

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="wrap_content"
            android:layout_marginRight="10dp"
            android:layout_height="wrap_content">

            <android.support.design.widget.FloatingActionButton
                android:layout_width="wrap_content"
                app:backgroundTint="#fff"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher" />

        </LinearLayout>

    </LinearLayout>


</RelativeLayout>

Dhruv, Is it possible if layout height is not fixed ? in my case it is wrap content. — Kalpesh Lakhani, Dec 04 '17 at 11:50
Also it is completely based on content so i can not even use weight in this. Also in my case it is not floating buttons but just simple buttons. — Kalpesh Lakhani, Dec 04 '17 at 11:52
I tried your code but if i set it wrap_content than it is not working, it is working fine if i use fix hieght — Kalpesh Lakhani, Dec 04 '17 at 12:01
yup, because linear layout want some inner view i.e. child View — ND1010_, Dec 04 '17 at 12:02
As you can see in attached image it does have inner layouts (see inner views in black and white layouts) – — Kalpesh Lakhani, Dec 04 '17 at 12:08
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/160424/discussion-between-nd1010-and-kalpesh-lakhani). — ND1010_, Dec 04 '17 at 12:09

AskNilesh · Accepted Answer · 2017-12-05T05:41:13.333

You can Achieve that Design using RelativeLayout

Try this

<?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"
    android:orientation="vertical">


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

        <LinearLayout
            android:id="@+id/nilu"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorAccentJob"
            android:orientation="vertical"
            android:paddingBottom="30dp">


            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="NILU" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="NILU" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="NILU" />


        </LinearLayout>

        <LinearLayout
            android:id="@+id/nilu2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@id/nilu"
            android:background="@color/colorAccentAdhoc"
            android:orientation="vertical"
            android:paddingTop="30dp">


            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="NILU" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="NILU" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="NILU" />

        </LinearLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@id/nilu"
            android:layout_marginTop="-15dp"
            android:orientation="horizontal">

            <android.support.design.widget.FloatingActionButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_marginEnd="16dp"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="20dp"
                android:layout_toStartOf="@+id/floatingActionButton"
                android:src="@mipmap/ic_launcher_round"
                app:elevation="2dp" />

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/floatingActionButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_alignParentTop="true"
                android:layout_marginEnd="139dp"
                android:layout_marginRight="30dp"
                android:src="@mipmap/ic_launcher" />

        </RelativeLayout>


    </RelativeLayout>


</RelativeLayout>

Thanks for the answer.. Is it possible if layout height is not fixed ? in my case it is wrap_content — Kalpesh Lakhani, Dec 04 '17 at 11:53
@KalpeshLakhani yes you check out with my ans and let me know if any query — AskNilesh, Dec 04 '17 at 11:54
Thanks, But I can not use weight as content in both the containers will be dynamic. is there any other way ? — Kalpesh Lakhani, Dec 04 '17 at 11:56
Also in my case it is not necessary to be floating button, it is just simple buttons/imageviews. — Kalpesh Lakhani, Dec 04 '17 at 11:57
As you can see in attached image it does have inner layouts (see inner views in black and white layouts) — Kalpesh Lakhani, Dec 04 '17 at 12:04
@KalpeshLakhani check updated ans and you can modify as per your requirement — AskNilesh, Dec 04 '17 at 12:08
Thanks, let me try this. if works i will definitely accept your answer. I am still confused why you are using layout_weight here — Kalpesh Lakhani, Dec 04 '17 at 12:11
@KalpeshLakhani i am giving same weight to both layout for setting floating button in center of both layouyts — AskNilesh, Dec 04 '17 at 12:12
Yes got it, As a result both views (upper and lower) will have same height right ? In my case black layout is bigger than white in terms of weight — Kalpesh Lakhani, Dec 04 '17 at 12:15
@KalpeshLakhani you got it now set weight as per your requirement let me know if any query — AskNilesh, Dec 04 '17 at 12:16

Firoz Memon · Answer 3 · 2017-12-04T12:16:57.360

If you like to Use ConstraintLayout try:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="wrap_content">

    <!--UpperLayer-->
    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:background="@android:color/black"
        android:orientation="vertical"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </LinearLayout>

    <!--LowerLayer-->
    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:background="@android:color/darker_gray"
        android:orientation="vertical"
        app:layout_constraintEnd_toEndOf="@+id/linearLayout"
        app:layout_constraintStart_toStartOf="@+id/linearLayout"
        app:layout_constraintTop_toBottomOf="@+id/linearLayout">


    </LinearLayout>

    <!--MiddleLayer-->
    <LinearLayout
        android:id="@+id/linearLayout3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal"
        app:layout_constraintBottom_toTopOf="@+id/linearLayout2"
        app:layout_constraintEnd_toEndOf="@+id/linearLayout2"
        app:layout_constraintStart_toStartOf="@+id/linearLayout2"
        app:layout_constraintTop_toTopOf="@+id/linearLayout2">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:src="@android:drawable/ic_menu_add" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:src="@android:drawable/ic_menu_add" />
    </LinearLayout>


</android.support.constraint.ConstraintLayout>

It Outputs:

Note: Your UpperLayer and LowerLayer can be any Layout View, not fixed to LinearLayout

Thanks firoz for asnwer, Is it possible if layout height is not fixed ? in my case it is wrap_content — Kalpesh Lakhani, Dec 04 '17 at 11:53
Yes you can change the `layout_height` according to your needs — Firoz Memon, Dec 04 '17 at 12:01

What is the best way to achieve following design (attached image)?

3 Answers3