Overlapping views in coordinatorlayout

Question

The code is below. When fragment loads, it covers the toolbar and my floating action bar. How can I handle this? I want the toolbar to show. It seems there is some overlapping in coordinatorlayout. I have checked out different problems like this. None seems to answer my question

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="@dimen/activity_horizontal_margin"
    android:orientation="vertical"
    tools:context="com.example.sammybobo.moglis.MoGLISMaps"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:android="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <android.support.v7.widget.Toolbar
        android:layout_width="fill_parent"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_height="?attr/actionBarSize"
        android:id="@+id/toolbar"
        android:elevation="4dp"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        android:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

    <android.support.design.widget.FloatingActionButton
        android:id = "@+id/fab"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:src = "@android:drawable/ic_input_add"
        android:layout_gravity = "bottom|end"
        app:fabSize = "mini">

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

    <fragment
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:id="@+id/main_map"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        xmlns:android="http://schemas.android.com/apk/res/android"
        tools:context = "com.example.sammybobo.moglis.MoGLISMaps"
        xmlns:tools="http://schemas.android.com/tools"
        />
 <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#fff"
        android:layout_gravity = "bottom"
        >
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="My location"
            android:onClick="observe"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text = "Friends"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text = "settings"/>
    </LinearLayout>
    </android.support.design.widget.CoordinatorLayout>

Answer 1

It is because Inside a coordinator layout you can not set one view in relation to another. You can only have them in relation to the parent. Try with layout below.

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:android="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    android:orientation="vertical"
    android:padding="@dimen/activity_horizontal_margin"
    tools:context="com.example.sammybobo.moglis.MoGLISMaps">

    <RelativeLayout
        android:layout_height="wrap_content"
        android:layout_width="fill_parent">

        <android.support.v7.widget.Toolbar
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/toolbar"
            android:layout_width="fill_parent"
            android:layout_height="?attr/actionBarSize"
            android:elevation="4dp"
            android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            android:theme="@style/ThemeOverlay.AppCompat.ActionBar"/>

        <fragment
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:id="@+id/main_map"
            android:name="com.google.android.gms.maps.SupportMapFragment"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_below="@+id/toolbar"
            tools:context="com.example.sammybobo.moglis.MoGLISMaps"
            />

    </RelativeLayout>


    <LinearLayout
        android:background="#fff"
        android:layout_gravity="bottom"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        >

        <Button
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:onClick="observe"
            android:text="My location"/>

        <Button
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:text="Friends"/>

        <Button
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:text="settings"/>
    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        app:fabSize="mini"
        android:id="@+id/fab"
        android:layout_gravity="bottom|end"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:src="@android:drawable/ic_input_add">

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

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

If you want the bottom linear layout also to not overlap with the fragment then put it inside the relative layout and make sure fragment in above the linear layout.

Answer 2

You can also just wrap all the views inside a LinearLayout to prevent any overlapping.