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>
Related
I am trying to apply background image to some fragments.
I want it look like that(But with a transparent toolbar):
This is what I have now:
So, for example, in the home fragment, toolbar will become transparent and will be full screen image.
This is the code:
activity_main.xml:
<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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
layout="#layout/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#+id/flContent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<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:menu="#menu/menu_drawer"
app:headerLayout="#layout/nav_header"/>
</android.support.v4.widget.DrawerLayout>
toolbar.xml:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:background="?attr/colorPrimary">
</android.support.v7.widget.Toolbar>
fragment_home.xml:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.hlsapps.unroutine.HomeFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Holla home fragment" />
</FrameLayout>
Any idea how I can achive that?
Thank you very much,
Haim
I want to set an image to be the background for my toolbar, with the image scaled to fit. For some reason the image just renders below the toolbar. and I am not sure why. Any help would be greatly appreciate. I have tried many of the ways people have suggested online and non of them yield the result I am looking for.
Also: Setting the background programmatically has the same result.
Here is my view code with the background set to the image
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/main_nav_drawer_layout"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/main_nav_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#drawable/header_bg"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<FrameLayout
android:id="#+id/app_fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:id="#+id/main_nav_view"
android:background="#D3D2D2"
app:itemBackground="#drawable/style_menu_bg_color"
app:menu="#menu/main_menu"
app:headerLayout="#layout/main_menu_header"
app:itemTextColor="#drawable/style_menu_text_color"
app:itemIconTint="#drawable/style_menu_text_color" />
</android.support.v4.widget.DrawerLayout>
I have also tried it this way with an ImageView in the ToolBar
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/main_nav_drawer_layout"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/main_nav_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/header_bg"/>
</android.support.v7.widget.Toolbar>
<FrameLayout
android:id="#+id/app_fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:id="#+id/main_nav_view"
android:background="#D3D2D2"
app:itemBackground="#drawable/style_menu_bg_color"
app:menu="#menu/main_menu"
app:headerLayout="#layout/main_menu_header"
app:itemTextColor="#drawable/style_menu_text_color"
app:itemIconTint="#drawable/style_menu_text_color" />
</android.support.v4.widget.DrawerLayout>
I was able to figure it out and getting working for my scenario. I added a relative layout, with an image view above the toolbar (in code, not actual screen position), then made the toolbar's background transparent and scaled accordingly.
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/main_nav_drawer_layout"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageViewplaces"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/header_bg"
android:maxHeight="?attr/actionBarSize"
android:scaleType="fitXY" />
<android.support.v7.widget.Toolbar
android:id="#+id/main_nav_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#00FFFFFF"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</RelativeLayout>
<FrameLayout
android:id="#+id/app_fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:id="#+id/main_nav_view"
android:background="#D3D2D2"
app:itemBackground="#drawable/style_menu_bg_color"
app:menu="#menu/main_menu"
app:headerLayout="#layout/main_menu_header"
app:itemTextColor="#drawable/style_menu_text_color"
app:itemIconTint="#drawable/style_menu_text_color" />
</android.support.v4.widget.DrawerLayout>
I hava a problem, when i using CoordinatorLayout which contain an imageview
in fragment,i can't make the status bar transparent and draw the imageview under the status bar(in activity it's ok).
To illustration the problem,i take cheesesquare for an example.
There's a CheeseDetailActivity in cheesesquare shows some content like this(which effect it's i want):
As we know,it easy to make this effect in activity,i pick up the key code:
styles.xml(v21)
< resources>
< style name="Theme.DesignDemo" parent="Base.Theme.DesignDemo">
< item name="android:windowDrawsSystemBarBackgrounds">true
< item name="android:statusBarColor">#android:color/transparent
< /style >
< /resources>
activity_detail.xml
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="24dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/card_margin">
<LinearLayout
style="#style/Widget.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Info"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/cheese_ipsum" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/card_margin"
android:layout_marginLeft="#dimen/card_margin"
android:layout_marginRight="#dimen/card_margin">
<LinearLayout
style="#style/Widget.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Friends"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/cheese_ipsum" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/card_margin"
android:layout_marginLeft="#dimen/card_margin"
android:layout_marginRight="#dimen/card_margin">
<LinearLayout
style="#style/Widget.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Related"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/cheese_ipsum" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
the problem
Now,for some reason ,i want to show the same content in fragment but not in activity.I try to modify the code in cheesesquare .I just add a fragment and the style.xml and layout.xml is almost the same.Then the problem exist:
the status bar look look different! I confirm the style and layout is the same.So my question is what makes different?How can i make the status bar transparent?
EDIT:
the xmls after modify
activity_main.xml(modified)
<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_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true">
<!--<include layout="#layout/include_list_viewpager"/>-->
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
class="com.support.android.designlibdemo.MainFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:menu="#menu/drawer_view"/>
fragment_main.xml(added)
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.support.android.designlibdemo.MainFragment">
<include layout="#layout/include_list_viewpager"/>
include_list_viewpager.xml(no modify)
style.xml(no modify)
activity_cheese_detail.xml(deleted)
fragment_cheese_detail.xml(added,just copy the source activity_cheese_detail.xml)
<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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/detail_backdrop_height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|right|end"
android:src="#drawable/ic_discuss"
android:layout_margin="#dimen/fab_margin"
android:clickable="true"/>
You can this in Java code
protected void makeTransperantStatusBar(boolean isTransperant) {
if (isTransperant) {
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
} else {
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
}
}
if you want complete transperent you should do following
add these lines in your theme
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
set this flag in your co-ordinator layout
android:fitsSystemWindows="true"
at last add these lines in onCreate method of Activity
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
Window w = getWindow(); // in Activity's onCreate() for instance
w.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
}
reference solution taken from here
Remove or change to a CoordinatorLayout type (with fitSystemWindows) the FrameLayout parent of a CoordinatorLayout child.
You have to use kitkat+ android to have this option.
Add this code to your theme:
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
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 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.