How to have a good Toolbar when using the <item name="android:windowTranslucentStatus">true</item> flag ?
I tried to add almost every combinaison of fitSystemWindow to my view hierarchy but none is working !
Here is my layout with the best result :
<?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:id="#+id/activity_main"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
tools:context="fr.pdegand.fullscreentoolbar.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
app:layout_scrollFlags="scroll|enterAlways"
app:title="Test"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_height="match_parent"
android:layout_width="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical">
<EditText
android:layout_height="wrap_content"
android:layout_width="match_parent"/>
<View
android:background="#FF00FF"
android:layout_height="400dp"
android:layout_width="match_parent"/>
<View
android:background="#00FF00"
android:layout_height="400dp"
android:layout_width="match_parent"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
But it has 2 problems : first, the Coordinator is using the colorPrimaryDark to fill the gap of the status bar and when the view is fully scrolled, the Toolbar doesnt disapear totally at the top of the screen.
The best result would be that the Toolbar itself stretch it's top to fill the gap so that the color behind the status bar would always match the color of the toolbar (my toolbar actually have dynamic coloring in my real app) and when the view is fully scrolled the toolbar should totally disappear at the top. And if possible without code. I know I could add some OnApplyWindowInsetsListener and manually handle the insets but I'm looking for a more generic solution that could be applied to all my screens.
Thank you for the help.
Related
I'm trying to pin my toolbar at the top just like a normal 'Action Bar' just like when u click on a twitter post the toolbar up top stays there no matter how much u scroll down.
I found a lot of guides on "how to make the Toolbar collapse and other cool effects" but what i want from it, is to act as an Action bar and stay at the top, is there a simple way of accomplishing that ? without the use of (CoordinatorLayout, CollapsingToolbarLayout, ...) ?
Yes you can pin your toolbar at the top of the activity for that you have to create a layout file named toolbar_layoutlike this
<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_width="match_parent"
android:layout_height="?android:actionBarSize"
android:background="#color/colorPrimary"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
android:theme="#style/ToolbarStyle"
app:titleTextColor="#color/colorWhite"
app:subtitleTextColor="#color/colorWhite"
app:titleTextAppearance="#style/ToolbarStyle"/>
And in the activity layout i.e activity_main file include it as like this:-
<LinearLayout
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"
android:orientation="vertical">
<include layout="#layout/toolbar_layout"/>
</LinearLayout>
And after that design accordingly the layout
Cheers Happy Coding.
You can make your layout xml like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
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="?attr/actionBarSize" />
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- Your content here -->
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</LinearLayout>
or put RecyclerView instead of ScrollView + LinearLayout if you have a list
I am trying to get the gradient that is the background of my tabbed toolbar to extend over the translucent status bar, like the image below.
I have attempted to use the LAYOUT_NO_LIMITS and the TRANSLUCENT_NAVIGATION flags to achieve this, but then half of the toolbar goes under the status bar and snackbars go under the navigation bar.
This is the current layout file:
<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="software.endeavor.projectg.TabbedActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay"
android:background="#drawable/main_gradient">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/main_gradient"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#android:color/white"/>
</android.support.design.widget.AppBarLayout>
<View
android:id="#+id/toolbar_shadow"
android:layout_width="match_parent"
android:layout_height="12dp"
android:layout_below="#id/toolbar"
android:background="#drawable/toolbar_dropshadow" />
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/swipeContainer"
android:layout_width="368dp"
android:layout_height="495dp">
<android.support.v4.view.ViewPager
android:id="#+id/container"
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="end|bottom"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#android:drawable/ic_dialog_email" />
</android.support.v4.widget.SwipeRefreshLayout>
</LinearLayout>
How would I go about extending the tabbed toolbar gradient to the status bar while still maintaining the proper system layout boundaries and keeping the regular colored navigation bar?
I had faced a similar problem long time ago. Easy way to solve it is using a dummy View to push your Toolbar and other views down.
Dummy view:
View with height of status bar to push content below.
<View
android:layout_width="match_parent"
android:layout_height="#dimen/status_bar_height"/>
Now the layout becomes:
<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="software.endeavor.projectg.TabbedActivity">
<View
android:layout_width="match_parent"
android:layout_height="#dimen/status_bar_height"/>
...
</android.support.design.widget.CoordinatorLayout>
I hope you get idea. Also take care of status_bar_height value in the dimen and note that status bar height changed in Android M or N (Not sure).
Refer this article get status bar height:
Height of status bar in Android
Where you place your fitSystemWindows is important. The view that has that property is the one that will be added padding to make sure that the system components (status bar in this case) don't overlap your content.
For example, if you move it to the Toolbar then padding will be added to it and you will have a padded Toolbar under the status bar.
Keep in mind that only the first view in the hierarchy with fitSystemWindows will be added padding.
This is a lot simpler than using dummy views and relying on getting the height of the status bar which brings several other issues.
A good article on this available here
Hello I'm attempting to simply put my content below the toolbar but at the moment when I run my application some of the content is hidden behind it when it should be below it.
I have read up about using a frame layout to attempt to separate it but I have come a little stuck. I'm currently using a basic android studio navigation drawer template provided with the software and was wondering what changes I have to make.
My coordinator layout
<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/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.design.widget.CoordinatorLayout>
My drawer 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">
<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>
What changes do I need to make?
Many ViewGroups allow their children to overlap. These include FrameLayout, RelativeLayout, CoordinatorLayout, and DrawerLayout. One that does not allow its children to overlap is LinearLayout.
The answer to your question really depends on what the end result should be. If you are trying to just have a Toolbar that is always on screen and some content below it, then you don't need a CoordinatorLayout and AppBarLayout at all, you can just use a vertical LinearLayout with two children:
<LinearLayout android:orientation="vertical" ...>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
... />
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
... />
</LinearLayout>
Note layout attributes of the FrameLayout.
If you want to do the fancy stuff where the toolbar scrolls on and off the screen as you scroll the content, then you need an AppBarLayout and you need to give your content area a special attribute like this:
<android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
... >
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll"
... />
</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"
... />
</android.support.design.widget.CoordinatorLayout>
app:layout_behavior="#string/appbar_scrolling_view_behavior"
Add this code to your frame tag
As #Brian Hoang and #Karakuri said using the layout_behaviour property:
app:layout_behavior="#string/appbar_scrolling_view_behavior"
seems to be a very good solution. Even if you don't have any animations at the moment but you plan to have in the future then you can still keep the CoordinatorLayout and an AppBarLayout in case you want to add animations in the future.
What the property seems to do in general from my understanding, is to calculate the height of the whole AppBarLayout UI component. The UI component that uses the layout_behaviour property with the #string/appbar_scrolling_view_behaviour will automatically be shown exactly below the AppBarLayout regardless of what the height is.
In this way there is no need to hardcode any top margins in the UI that is supposed to be under the AppBarLayout.
In the code below the include_app_bar_with_tabs_layout (AppBarLayout) has a fixed height of 200dp (it can be wrap_content or anything else). Then the RelativeLayout that contains the content of the screen uses the layout_behaviour property.
Have a look at the code and UI image below:
<?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">
<include
layout="#layout/include_app_bar_with_tabs_layout"
android:layout_width="match_parent"
<!-- this can be anything, even wrap_content -->
android:layout_height="200dp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/Green"
<!-- this tells it to be below the include_app_bar_with_tabs_layout (AppBarLayout) -->
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/adView" />
<com.google.android.gms.ads.AdView
android:id="#id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
app:adSize="BANNER"
app:adUnitId="#string/banner_ad_unit_id"
tools:background="#color/green"
tools:layout_height="50dp" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
I have implemented material navigation drawer and toolbar in MainActivity. For implementing the navigation drawer and to ensure it shows up behind the status bar I have used following code for toolbar.xml
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primaryColor"
android:fitsSystemWindows="true"
android:theme="#style/ToolbarTheme">
</android.support.v7.widget.Toolbar>
and included this in activity_main.xml as follows:
<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/navigation_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
........
in styles.xml I am using following attribute,
<item name="android:windowTranslucentStatus">true</item>
With this everything is working just fine and I get the following result,
The problem occurs when i click on the edit text view (00.00). The moment that edit text view or any edit text view in the page is clicked, the toolbar just expands. See image below:
Now, I was able to rectify the issue by placing android:fitsSystemWindows="true" in activity_main.xml as follows:
<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/navigation_drawer"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="match_parent">
........
My question is, though this solution works but I am not sure as to why do I have to use the same attribute twice in layout file? And what made the toolbar expand? Also, is this the right approach to tackle this issue?
Edit - Removing android:fitsSystemWindows="true" from toolbar.xml and placing it in drawer layout results in the main activity yielding correct results but other activities have a white bar. See image below.
I had the same problem that you and I will tell you what I did for fix it
1) Defining the 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/toolBarDetalleContacto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="4dp"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
app:layout_collapseMode="pin"
app:theme="#style/Theme.GpsFriends.Material">
</android.support.v7.widget.Toolbar>
The trick is to use this attribute in your activity xml inside a <android.support.v4.widget.DrawerLayout> parent component and set here the property android:fitsSystemWindows="true" (also in your toolbar.xml). If you dont use DrawerLayout the permanent grey color in your colorPrimaryDark attribute wont be change, will be always grey and just grey.
2) Defining your activity xml:
<android.support.v4.widget.DrawerLayout 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"
android:orientation="vertical"
android:fitsSystemWindows="true"
tools:context="com.wherefriend.activities.agregaramigos.AgregarAmigosActivity">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar_main_gps_friends"
layout="#layout/toolbar_gps_friends"
></include>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/bBuscar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:onClick="buscarAmigos"
android:text="Buscar" />
<EditText
android:id="#+id/etfragmentCorreo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/bBuscar"
android:ems="10"
android:inputType="textEmailAddress" />
</RelativeLayout>
<ListView
android:id="#+id/listaResultado"
android:divider="#drawable/horizontal_linear_layout_divider"
android:dividerHeight="0dp"
android:layout_width="match_parent"
android:layout_height="fill_parent" >
</ListView>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
As you can see, I defined first child activity xml UI as DrawerLayout but just below I use <LinearLayout> to include my whole User interface View compontents. At first my Toolbar and then the rests of the components.
The result is like that, testing in a real Nexus 4 - LG API versión 22:
Q: How do I make the system bar be the correct color?
I've tried setting this up following the cheesesquare sample app.
When doing that, they use a coordinator layout and an appbar layout which contains a toolbar layout -- it looks like this:
Then I tried removign the coordinator layout, and app bar, and just have a LinearLayout with a toolbar and a nested scroll view inside it -- looks like this:
As you can probably tell it doesn't look like quite right. Using their nav drawer layout worked perfectly fine with the status bar being the same color as the toolbar.
I've also tried messing with fitsSystemWindows to no avail.
Q: How do I make the system bar be the correct color?
I think I heard about this potentially being a bug in the design library, so perhaps there is a workaround for now?
Here is my layout code:
<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:popupTheme="#style/ThemeOverlay.AppCompat.Light"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/fixed_scroll_behavior">
<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="blank text for now" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
My style-v21 theme contains:
<item name="android:statusBarColor">#android:color/transparent</item>
Removing that fixed the problem.