CODEWITHSUNDEEP
androidandroid-layoutandroid-fragments
Anuj TBE
Anuj TBE

Reputation: 9796

Fragment layout in navigation drawer Android application

I'm new to Android application and have just started learning. I'm writing an application using Navigation drawer and fragments

It was working fine with layout but with Fragment the content is hidden inside navigation top bar

Expected Display is like to be

expected

But, this is how the layout is

enter image description here

NEXT DATE is hidden behind action bar

Code for layout is

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    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:openDrawer="start"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.thecoders.periodtracker.MainActivity">

    <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>

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

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

    <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>

Upvotes: 1

Views: 102

Answers (4)

Gordak
Gordak

Reputation: 2070

You probably should wrap your framLayout inside a NestedSCrollView (not necessary though).

The trick is this line :

app:layout_behavior="@string/appbar_scrolling_view_behavior"

The CoordinatorLayout's children will behave differently if you give them a Behavior. 

<android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="fill_vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <!-- Rest of the code there -->

        </FrameLayout>
</android.support.v4.widget.NestedScrollView>

Upvotes: 0

Akshay Bhat &#39;AB&#39;
Akshay Bhat &#39;AB&#39;

Reputation: 2700

Put a relative layout inside the coordinator layout and add rule to your frame layout that it should be below appBarLayout something like below :

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <RelativeLayout android:layout_width="match_parent"
                    android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/app_bar_layout"
            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>

        <FrameLayout
            android:id="@+id/content_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/app_bar_layout"/>
    </RelativeLayout>

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

Upvotes: 0

Rajesh Gosemath
Rajesh Gosemath

Reputation: 1872

Add this in your FrameLayout.

app:layout_behavior="@string/appbar_scrolling_view_behavior"

and this too.

xmlns:app="http://schemas.android.com/apk/res-auto"

Upvotes: 2

Ashwani Kumar
Ashwani Kumar

Reputation: 1472

Add topMargin in your Framelayout:

android:layout_marginTop="56dp"

Upvotes: 0

Related Questions