1

I need a layout with 3 sections as shown below

enter image description here

It contains 3 sections header , body and footer and one button. I need this button exactly center of screen , overlapping footer and body. Right now I am setting fixed dp margins to achieve this. But it is not properly aligned in different screens. How can I set this design? I need this button to be exactly at the center of screen. Below is my layout xml code

<?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"
android:gravity="center_horizontal">

<RelativeLayout
    android:background="@color/transparent_black"
    android:id="@+id/header"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    />

<RelativeLayout

    android:id="@+id/body"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@id/header"
    android:layout_above="@+id/relativeLayout2" />

<RelativeLayout
    android:background="@color/transparent_black"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:id="@+id/relativeLayout2"></RelativeLayout>

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:src="@drawable/ic_plus"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignBottom="@id/body"
    android:layout_marginBottom="-32dp"
    android:layout_marginRight="160dp" />
</RelativeLayout>
Onik
  • 19,396
  • 14
  • 68
  • 91
dev
  • 1,085
  • 4
  • 19
  • 26
  • This older question will help you. http://stackoverflow.com/questions/4182486/placing-overlappingz-index-a-view-above-another-view-in-android?answertab=active#tab-top – sharp Sep 05 '15 at 07:15

1 Answers1

2

try this

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:src="@drawable/ic_plus"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_alignBottom="@id/body"
    android:layout_marginBottom="-32dp" />
Derek Fung
  • 8,171
  • 1
  • 25
  • 28