Search code examples
androidoverlappingandroid-coordinatorlayoutfloating-action-button

Android Overlapping views and handle clicks

So i have this activity layout:

<android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">
    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">
            <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"
                    app:popupTheme="@style/AppTheme.PopupOverlay" />
            </android.support.design.widget.AppBarLayout>
    </android.support.design.widget.CoordinatorLayout>

    <FrameLayout
        android:id="@+id/mainContent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />

</android.support.v4.widget.DrawerLayout>

My mainContent is where the fragments will inflate its views. In my particular case, the inflated fragment will have a recyclerview of cardviews.

The problem is, as it is, the layout looks as i want it to, like this:

enter image description here

But the navigation drawer icon is unclickable. If i swap the coordinator layout with the framelayout, this happens:

enter image description here

And the navigation drawer becomes clickable but the icon cutted. I know i'm missing something here, i just cant figure it out. I tried to put both inside a framelayout, but same output.

Solution

  • That button shouldn't be there.That's not what MaterialDesign Guidelines says.

    You can use that FloatingActionaButton with a style like below: https://github.com/xuyisheng/DesignSupportLibraryDemo

    Or use it like below:

    <android.support.design.widget.FloatingActionButton
    android:onClick="checkin"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/fab_margin"
    android:clickable="true"
    android:src="@drawable/ic_discuss"
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom|right|end"/>

    https://github.com/xuyisheng/DesignSupportLibraryDemo/blob/master/app/src/main/res/layout/activity_detail.xml

    And about that FrameLayout, as i see, you have CoordinatorLayout with that FrameLayout i think that FrameLayout us recognizing like NavigationDrawer.

    Try to use it somewhere else.or use below answer: https://stackoverflow.com/a/32035783/4409113