Search code examples
androidandroid-relativelayoutfloating-action-button

Layout appears when set to toRightOf but when set to toLeftOf

I am trying to make a layout with labels for FABs, but I have a problem with my RelativeLayout. The second RelativeLayout only appears when it is set to be to the right of the first, but not when set to be to the left. Here is my code:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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="match_parent"
android:fitsSystemWindows="true"
tools:context=".StartAndLogActivity">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/AppTheme.AppBarOverlay"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

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

<include layout="@layout/content_start_and_log" />

<RelativeLayout
    android:id="@+id/RelativeLayout_ActionButtonAndLabelContainer"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="right|bottom">

    <RelativeLayout
        android:id="@+id/RelativeLayout_FloatingActionButtonContainer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right|bottom">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/FAB_NewBankPurchase"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right|bottom"
            android:layout_marginBottom="16dp"
            android:layout_marginLeft="@dimen/fab_margin"
            android:layout_marginRight="@dimen/fab_margin"
            android:layout_marginTop="0dp"
            android:src="@drawable/ic_new_bank_purchase" />


        <android.support.design.widget.FloatingActionButton
            android:id="@+id/FAB_NewTrade"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/FAB_NewBankPurchase"
            android:layout_gravity="right|bottom"
            android:layout_marginBottom="16dp"
            android:layout_marginLeft="@dimen/fab_margin"
            android:layout_marginRight="@dimen/fab_margin"
            android:layout_marginTop="0dp"
            android:src="@drawable/ic_trade" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/FAB_ShowMenu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/FAB_NewTrade"
            android:layout_gravity="right|bottom"
            android:layout_marginBottom="@dimen/fab_margin"
            android:layout_marginLeft="@dimen/fab_margin"
            android:layout_marginRight="@dimen/fab_margin"
            android:layout_marginTop="0dp"
            android:src="@drawable/ic_show_menu" />

    </RelativeLayout>


    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/RelativeLayout_FloatingActionButtonContainer">
        <TextView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:text="HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HI"
            android:textColor="@color/colorAccent"
            android:layout_alignParentTop="true"/>
    </RelativeLayout>

</RelativeLayout>

This yields:

enter image description here

My other code (which does not work) is this: 

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/AppTheme.AppBarOverlay"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

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

<include layout="@layout/content_start_and_log" />

<RelativeLayout
    android:id="@+id/RelativeLayout_ActionButtonAndLabelContainer"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="right|bottom">

    <RelativeLayout
        android:id="@+id/RelativeLayout_FloatingActionButtonContainer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right|bottom">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/FAB_NewBankPurchase"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right|bottom"
            android:layout_marginBottom="16dp"
            android:layout_marginLeft="@dimen/fab_margin"
            android:layout_marginRight="@dimen/fab_margin"
            android:layout_marginTop="0dp"
            android:src="@drawable/ic_new_bank_purchase" />


        <android.support.design.widget.FloatingActionButton
            android:id="@+id/FAB_NewTrade"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/FAB_NewBankPurchase"
            android:layout_gravity="right|bottom"
            android:layout_marginBottom="16dp"
            android:layout_marginLeft="@dimen/fab_margin"
            android:layout_marginRight="@dimen/fab_margin"
            android:layout_marginTop="0dp"
            android:src="@drawable/ic_trade" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/FAB_ShowMenu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/FAB_NewTrade"
            android:layout_gravity="right|bottom"
            android:layout_marginBottom="@dimen/fab_margin"
            android:layout_marginLeft="@dimen/fab_margin"
            android:layout_marginRight="@dimen/fab_margin"
            android:layout_marginTop="0dp"
            android:src="@drawable/ic_show_menu" />

    </RelativeLayout>


    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/RelativeLayout_FloatingActionButtonContainer">
        <TextView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:text="HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HELLO, HI"
            android:textColor="@color/colorAccent"
            android:layout_alignParentTop="true"/>
    </RelativeLayout>

</RelativeLayout>

This code yields:

enter image description here

Thank you for your time and your help.

Solution

  • Ok the problem is its Working But your are unable to see that as its goes left beyond the display

    Try setting First Relative layout to right and your good to go, use this like

     <RelativeLayout
        android:id="@+id/RelativeLayout_FloatingActionButtonContainer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_gravity="right|bottom">
//First Layout contents
</RelativeLayout>
<RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"        
        android:layout_toLeftOf="@id/RelativeLayout_FloatingActionButtonContainer">
//Second Layout contents
</RelativeLayout>