I have an xml like this, when I show drawer layout, It overlays Toolbar, I want my drawerlayout below my Toolbar, I cannot figure out how to do it, I tried lots of stuff and I tried it all day long. How can I use CoordinatorLayout with DrawerLayout without overlapping the Toolbar ?
This is my actionbar style:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/ColorPrimary</item>
<item name="colorPrimaryDark">#color/ColorPrimaryDark</item>
<item name="colorAccent">#color/ColorPrimary</item>
</style>
This is my layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawerLayout"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/ColorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<TextView
android:id="#+id/toolBarTv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/app_name"
android:textColor="#color/white"
android:textSize="18dp"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|bottom"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"
app:elevation="4dp"
app:fabSize="normal"
app:layout_behavior="com.frt.poppcar.utils.FabBehavior"/>
</android.support.design.widget.CoordinatorLayout>
<ScrollView
android:id="#+id/drawerList"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="left|start"
android:background="#color/white">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/mainTv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/main"
android:textColor="#color/five"
android:textSize="18dp"/>
</LinearLayout>
</ScrollView>
</android.support.v4.widget.DrawerLayout>
This works for me very well.. u need to have coordinator layout as parent layout and set layout behavior for ur drawer layout
<?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"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
<!-- to make toolbar scroll and hide towards upside include this line
app:layout_behavior="#string/appbar_scrolling_view_behavior"-->
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_marginTop="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--<include layout="#layout/navigation_drawer_content"/>-->
<FrameLayout
android:id="#+id/content_frame"
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"
app:headerLayout="#layout/nav_header"
app:menu="#menu/drawer_view" />
</android.support.v4.widget.DrawerLayout>
</android.support.design.widget.CoordinatorLayout>
First of all it's not recommended to do this because of Material Design Style Guide
So then, you should define android:minHeight="?attr/actionBarSize" in your toolbar Layout first. after that define android:layout_marginTop="?attr/actionBarSize" in your NavigationView layout. it's kind of a trick.
I think it is too late but you may want to know what was the problem or what you could do.Anyways.
New Support Design Library included NavigationDrawer which you could use it like this answer : https://stackoverflow.com/a/34921695/4409113
<!-- The navigation drawer -->
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/activity_main_drawer" />
And this should work now after adding and editing some mistakes:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/root_coorinator"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolBar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<TextView
android:id="#+id/toolBarTv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/app_name"
android:textSize="18dp" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginEnd="10dp"
app:elevation="4dp"
app:fabSize="normal"
app:layout_anchor="#id/root_coorinator"
app:layout_anchorGravity="bottom|end|right" />
</android.support.design.widget.CoordinatorLayout>
<!--<ScrollView
android:id="#+id/drawerList"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="left|start">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/mainTv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="main"
android:textSize="18dp" />
</LinearLayout>
</ScrollView>-->
<!--Don't use it like that, Use NavigationDrawer instead-->
</android.support.v4.widget.DrawerLayout>
And one thing more, you could use that Toolbar alone without adding that TextView as a title.
Also, you could use that layout inside the NestedScrollView.
Related
I want to hide and show the toolbar when I scroll down and up in a recycler view fragment, but the CollapsingToolbarLayout doesn't do what it's supposed to do.
First I tried to do it with just the coordinator layout and it worked, but it's not as fluid as the collapsing toolbar layout (when it works that is)
Is it because the recycler view is in a fragment? What is the problem exactly?
Main layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="7dp">
<android.support.design.widget.CoordinatorLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context="com.github.mpivchev.app.activities.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="2dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<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/ThemeOverlay.AppCompat.Light"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Spinner
android:id="#+id/spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:gravity="start"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:spinnerMode="dialog" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:fontFamily="#font/roboto"
android:paddingTop="18dp"
android:text="TestString" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" >
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/main_drawer" />
Part of fragment layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
...
</android.support.constraint.ConstraintLayout>
Your toolbar doesn't have a defined collapseMode, so there's no instruction for how it should behave. Add app:collapseMode="pin" to your Toolbar xml.
I have a problem with my navigationdrawer of my tabbedActivity.
I have a problem of design if I can say like that.
When I open the navigation drawer, I'd like that he opens like this (this is another activity of my app) :
But instead it opens like this in my tabbed activity :
How can I move down my navigation drawer so it doesn't cut the title of my activity ?
my xml file
<?xml version="1.0" encoding="utf-8"?>
<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/drawerLayout"
fitToSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:theme="#style/ToolBarStyle"
android:background="#color/colorPrimary" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="5dp"
app:theme="#style/ToolBarStyle"
app:layout_scrollFlags="scroll|enterAlways"
tools:ignore="UnusedAttribute" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</android.support.v4.view.ViewPager>
</LinearLayout>
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="200dp"
android:layout_gravity="start"
android:id="#+id/menu_navigation"
app:menu="#menu/navigation_menu"></android.support.design.widget.NavigationView>
You should move your toolbar to outside of the drawerLayout.
Since now the toolbar is having drawerLayout as its parent, that's why its showing like this.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="match_parent"
android:layout_height="match_parent"
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.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:theme="#style/ToolBarStyle"
android:background="#color/colorPrimary"/>
<android.support.v4.widget.DrawerLayout
android:layout_below="#+id/toolbar"
android:id="#+id/drawerLayout"
fitToSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="5dp"
app:theme="#style/ToolBarStyle"
app:layout_scrollFlags="scroll|enterAlways"
tools:ignore="UnusedAttribute"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</android.support.v4.view.ViewPager>
</LinearLayout>
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="200dp"
android:layout_gravity="start"
android:id="#+id/menu_navigation"
app:menu="#menu/navigation_menu"></android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="200dp"
android:layout_gravity="start"
android:layout_marginTop="#dimen/some_margin"
android:id="#+id/menu_navigation"
app:menu="#menu/navigation_menu" />
add margin top to your NavigationView
Make this change to your navigation view.
<android.support.design.widget.NavigationView
android:layout_marginTop="?android:attr/actionBarSize"
android:layout_width="wrap_content"
android:layout_height="200dp"
android:layout_gravity="start"
android:id="#+id/menu_navigation"
app:menu="#menu/navigation_menu">
I've tried searching SO a few hours and couldn't find anything relating to what I want. Most questions are in relations to making the Navigation Drawer appear behind the status bar.
However, this isn't the behavior that I want.
I want the status bar to remain opaque over the Drawer, but is transparent over the DrawerLayout container (the fragment).
Here's what I have:
And here's what I want:
I can get the status bar to be translucent over other activities, except for the main activity which has the DrawerLayout. Because everytime I try to make the status bar translucent only the Drawer can become translucent, which is exactly the opposite of what I want for the Drawer. The status bar should only be translucent over the fragment.
Any ideas how I can achieve this?
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:openDrawer="start"
android:fitsSystemWindows="true">
<!-- This FrameLayout is the container for all other fragments
so I want this to have a transparent status bar because some fragments
may have "cover photos" that needs to take up the status bar. It looks
nicer that way. I tried playing around with the fragment layouts
themselves. Bit nothing seems to budge, so I give up on that part. -->
<FrameLayout
android:id="#+id/main_fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
<android.support.design.widget.NavigationView
android:fitsSystemWindows="false"
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/activity_main_nav_header_main"
app:menu="#menu/activity_main_drawer"/>
</android.support.v4.widget.DrawerLayout>
fragment_profile.xml (one of the fragment to be placed inside the container)
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:id="#+id/card_cover"
android:layout_width="match_parent"
android:layout_height="200dp"
app:cardElevation="10dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#11b4ff"
android:src="#android:drawable/sym_def_app_icon"/>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/card_profile"
android:layout_below="#id/card_cover"
android:layout_width="120dp"
android:layout_height="120dp"
app:cardElevation="10dp"
android:layout_marginLeft="15dp"
android:layout_marginBottom="15dp"
android:layout_marginTop="-60dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#1119ff"
android:src="#android:drawable/sym_def_app_icon"
/>
</android.support.v7.widget.CardView>
<TextView
android:layout_margin="15dp"
android:layout_below="#id/card_cover"
android:layout_toRightOf="#id/card_profile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Profile Name"
android:textSize="30sp"/>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/fragment_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
app:tabIndicatorColor="#android:color/white"
app:tabIndicatorHeight="6dp"
app:tabMode="scrollable"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#android:color/white"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
v21\styles.xml
<resources>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
</resources>
After more searching on SO I found this answer that although didn't directly solve my problem, it gave me clues as to what was going on. In order to enable the translucent status bar in the fragment I needed to change the container layout to a CoordinatorLayout.
Furthermore, I needed to add "fitsSystemWindows=true" to all child views in order for the inset to be placed correctly in my desired fragment.
Here's the updated code that gave me the desired result:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:openDrawer="start"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:fitsSystemWindows="true"
android:id="#+id/main_fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:fitsSystemWindows="false"
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/activity_main_nav_header_main"
app:menu="#menu/activity_main_drawer"/>
</android.support.v4.widget.DrawerLayout>
fragment_profile.xml
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways">
<RelativeLayout
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:id="#+id/card_cover"
android:layout_width="match_parent"
android:layout_height="200dp"
app:cardElevation="10dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#11b4ff"
android:src="#android:drawable/sym_def_app_icon"/>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/card_profile"
android:layout_below="#id/card_cover"
android:layout_width="120dp"
android:layout_height="120dp"
app:cardElevation="10dp"
android:layout_marginLeft="15dp"
android:layout_marginBottom="15dp"
android:layout_marginTop="-60dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#1119ff"
android:src="#android:drawable/sym_def_app_icon"
/>
</android.support.v7.widget.CardView>
<TextView
android:layout_margin="15dp"
android:layout_below="#id/card_cover"
android:layout_toRightOf="#id/card_profile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Profile Name"
android:textSize="30sp"/>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/fragment_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
app:tabIndicatorColor="#android:color/white"
app:tabIndicatorHeight="6dp"
app:tabMode="scrollable"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#android:color/white"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
I am a little confused on how Coordinator Layout works. Below is the layout of my app_bar_news_feed.xml file:
<?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=".news_feed">
<android.support.design.widget.AppBarLayout android:layout_height="wrap_content"
android:layout_width="match_parent" 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>
<include layout="#layout/content_news_feed" />
<android.support.design.widget.FloatingActionButton android:id="#+id/fab"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="bottom|end" android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
And this is the layout of the file that has the action and status bar the same color that includes this app_bar_news_feed.xml file, we can call it originalpage.xml:
<?xml version="1.0" encoding="utf-8"?>
<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">
<include layout="#layout/app_bar_news_feed" 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">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
layout="#layout/nav_header_news_feed"
android:id="#+id/navigation_header"/>
<ListView
android:id="#+id/friends_list"
android:layout_weight="7"
android:layout_width="match_parent"
android:layout_height="0dp"></ListView>
</LinearLayout>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
However, when I try to create the layout on another page, my status bar on this new page is all white while my action bar is the tint of blue I want it to be. Below is what I have on, we can call it newpage.xml. It doesn't include app_bar_news_feed.xml but I have tried to replicate some of the attributes from that file into this file like so:
<?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"
xmlns:tool="http://schemas.android.com/tools"
tool:context=".CreatePost"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/create_post">
<android.support.design.widget.AppBarLayout android:layout_height="wrap_content"
android:layout_width="match_parent" android:theme="#style/AppTheme.AppBarOverlay"
android:id="#+id/create_post_appbar">
<android.support.v7.widget.Toolbar android:id="#+id/create_post_toolbar"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:background="?attr/colorPrimary" app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</android.support.design.widget.AppBarLayout>
<!-- Send button -->
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:id="#+id/send_post_button"
android:textSize="18sp"
android:background="#null"
android:textColor="#FFF"
android:text="Send"
android:layout_marginBottom="5dp"
android:layout_alignBottom="#+id/create_post_appbar"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
<!-- Edit text for typing status. Light gray placeholder. -->
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/send_post_button"
android:textColorHint="#d3d3d3"
android:hint="Update your friends!"
android:padding="10dp"
android:gravity="top"
android:background="#android:color/transparent"
android:inputType="textMultiLine"
android:id="#+id/type_status"/>
</RelativeLayout>
I have no idea why this is happening. The only difference I can find is the fact that the first xml file is wrapped in a CoordinatorLayout while the second is in a RelativeLayout. The Java files only set the action bar and do not set the tint of the status bar. Any ideas why this might be occurring?
I have a layouting problem when combining CoordinatorLayout with an AppBarLayout and a NavigationDrawer.
The problem is, that the NavigationDrawer and it's content are hidden behind the toolbar. I have already did a lot of research and tried a lot of restructuring, but none of the "solutions" fixed my issue.
A demonstration can be found in this little Webm video: https://www.dropbox.com/s/i5zfc2x2ts2fws7/navigation_drawer_stackoverflow32523188.webm?dl=0
The base style is Theme.AppCompat.Light.NoActionBar.
My activity_overview.xml looks like this:
<?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"
android:id="#+id/overview_coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimaryDark"
app:layout_scrollFlags="enterAlways|scroll" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:focusableInTouchMode="true">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/lorem_ipsum_long" />
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.NavigationView
android:id="#+id/nvView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#android:color/white"
app:headerLayout="#layout/nav_header"
app:menu="#menu/navigationdrawer_main" />
</android.support.v4.widget.DrawerLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/overview_floating_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/ic_add"
app:layout_anchor="#id/overview_coordinator_layout"
app:layout_anchorGravity="bottom|right|end"
app:layout_behavior="#string/fab_onscroll_behavior" />
</android.support.design.widget.CoordinatorLayout>
Your CoordinatorLayout is wrapping your DrawerLayout and NavigationView, which means the Coordinator is in control of how everything is laid out. You need to nest the Coordinator inside the drawer, like so:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:focusableInTouchMode="true">
<android.support.design.widget.CoordinatorLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/overview_coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimaryDark"
app:layout_scrollFlags="enterAlways|scroll" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/lorem_ipsum_long" />
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/overview_floating_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/ic_add"
app:layout_anchor="#id/overview_coordinator_layout"
app:layout_anchorGravity="bottom|right|end"
app:layout_behavior="#string/fab_onscroll_behavior" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nvView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#android:color/white"
app:headerLayout="#layout/nav_header"
app:menu="#menu/navigationdrawer_main" />
</android.support.v4.widget.DrawerLayout>
That should sort it out!
To add on to the previous answer, you can make the DrawerLayout cleaner by moving the CoordinatorLayout+child elements into a separate xml file. And then just use the "include" option to add the file.
<?xml version="1.0" encoding="utf-8"?>
<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">
<!-- Widget Coordinator + child elements go here -->
<include
layout="#layout/app_bar_main"
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>