Bottom Sheet Design Issue with FAB

Question

i achieved the following Layout for my bottom sheet:

but i am not satisfied about the implementation. I used a dummy fab which is invisible so that the title can align to it. The visible fab is outside of the layout with the title. Without the dummy fab the title is too long (sometimes) and is placed under the fab. I couldn't figure out how to get this layout without the dummy fab.

Here is my layout.xml by far:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical">

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

    <RelativeLayout
        android:id="@+id/titleLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/ColorPrimary">

    <TextView
        android:id="@+id/markerTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/bottom_sheet_navigation_dummy"
        android:layout_toStartOf="@+id/bottom_sheet_navigation_dummy"
        android:textSize="18sp"
        android:textStyle="bold"
        android:textColor="@color/white"
        android:padding="@dimen/defaultPadding"
        android:maxLines="1"/>

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/bottom_sheet_navigation_dummy"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:src="@drawable/ic_navigation_white_24dp"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:visibility="invisible"
            android:theme="@style/MenuButtonsStyle"/>

    </RelativeLayout>

    <TextView
        android:id="@+id/markerAdressLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:text="@string/address"
        android:textSize="14sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/markerAdress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="4dp"
        android:layout_marginLeft="8dp"
        android:textSize="14sp" />

    <TextView
        android:id="@+id/markerTelephoneNumberLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:text="@string/telephone"
        android:textSize="14sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/markerTelephoneNumber"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="4dp"
        android:layout_marginLeft="8dp"
        android:textSize="14sp" />

    <TextView
        android:id="@+id/markerOpeningHoursLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:text="@string/opening_hours"
        android:textSize="14sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/markerOpeningHours"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="4dp"
        android:layout_marginLeft="8dp"
        android:textSize="14sp" />

    <TextView
        android:id="@+id/markerWebsiteLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:text="@string/website"
        android:textSize="14sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/markerWebsiteLabel2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:text="@string/more_information"
        android:textSize="14sp" />

    <TextView
        android:id="@+id/markerWebsite"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:textSize="14sp" />
</LinearLayout>

<com.github.clans.fab.FloatingActionButton
    android:id="@+id/bottom_sheet_navigation"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:src="@drawable/ic_navigation_white_24dp"
    android:layout_alignParentTop="true"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:theme="@style/MenuButtonsStyle"/>

Can anyone share a smarter solution for my layout? Thanks in advance!

Answer 1

I would take the RelativeLayout with the title and the title itself out of the LinearLayout and make them siblings of the Fab Button.

This way you can tell the TextView to be "layout_toLeftOf="@+id/bottom_sheet_navigation". Then you will need to make sure, that the background of the text (your RelativeLayout) still stretches all the way to the right. Unfortunately you will still need an invisible dummy TextView for this, which needs to have the same parameters (padding, textSize) as your title.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

    <!--Title background-->
    <RelativeLayout
        android:id="@+id/titleLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent">

        <!--Dummy Textview which is required to provide the correct height for the background
        "@id/titleLayout"
        It has the same parameters as ""@id/markerTitle""-->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:textStyle="bold"
            android:padding="@dimen/defaultPadding"
            android:maxLines="1"
            android:background="@color/colorAccent"
            android:visibility="invisible"/>

    </RelativeLayout>

    <!--The title with the correct allignment-->
    <TextView
        android:id="@+id/markerTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:textStyle="bold"
        android:textColor="@color/white"
        android:padding="@dimen/defaultPadding"
        android:maxLines="1"
        android:background="@color/colorAccent"
        android:layout_toLeftOf="@+id/bottom_sheet_navigation"
        android:text="This is a super long title. 123456"/>

    <!--The info LinearLayout needs to be placed below the title-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/markerTitle"
        android:orientation="vertical">

        <!--...-->

    </LinearLayout>

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/bottom_sheet_navigation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:src="@drawable/ic_navigation_white_24dp"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:theme="@style/MenuButtonsStyle"/>
</RelativeLayout>