The new Android Toolbar gives us some flexibility in what we can do with the actionbar, but I have ran into an issue. I'm using a ToolBar in the layout of my activity as an actionbar('AppBar' is correct name now I guess). When user focuses on a edittext the content is scrolled up by the system to let the user see the field. It also scrolls the ToolBar up and off the screen. This is a problem because navigation is on the Toolbar and now hidden from the user.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize">
</Toolbar>
</LinearLayout>
How can we keep the ToolBar in place?
You can do this by placing a ScrollView below the Toolbar and putting content in it. Also will need to set android:windowSoftInputMode="adjustResize" on the activity. Also, to avoid the actionmode pushing the toolbar down, add this attribute
android:windowActionModeOverlay="true"
Related
In my app, when the keyboard is invoked, the toolbar is moved upwards. How do I prevent the toolbar from moving upwards?
Here's the code to make the activity full screen:
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
Layout:
<RelativeLayout xmlns:android=".."
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/toolbar_background">
<include layout="#layout/layout_toolbar" />
</android.support.design.widget.AppBarLayout>
<ScrollView.......>
<RelativeLayout......>
<EditText....><!--There are multiple EditTexts here.-->
</RelativeLayout>
Add this line in menifests for Activity
android:windowSoftInputMode="adjustResize"
add android:fitsSystemWindows="true" in your toolbar's root layout
Most of the time, your app won’t need to draw under the status bar or
the navigation bar, but if you do: you need to make sure interactive
elements (like buttons) aren’t hidden underneath them. That’s what the
default behavior of the android:fitsSystemWindows="true" attribute
gives you: it sets the padding of the View to ensure the contents
don’t overlay the system windows.
A few things to keep in mind:
fitsSystemWindows is applied depth first — ordering matters: it’s the
first View that consumes the insets that makes a difference
from https://medium.com/androiddevelopers/why-would-i-want-to-fitssystemwindows-4e26d9ce1eec
basically you're telling the toolbar not to move & stay on top & instead move the views underneath it upwards below it
You can use a CollapsingToolBarLayout if it fits your UI requirement inside of the AppBarLayout.
<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="wrap_content">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ripple="http://schemas.android.com/apk/res-auto"
android:id="#+id/tv_toolbar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#fff"
ripple:contentInsetStart="0dp">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
I'm having a lot of problems with scrolling and detection of it inside fragments using coordinatorLayout in Android.
I have a "Main Activity" that has inside it 3 fragments. Only on one of those fragments I want to have Appbar that collapses when fragment is scrolled. I've managed to do that, but if i set scrolling beahivour to allow that, my bottomNavigationView (which is found in mainactivity.xml) does NOT react to scrolling. Codes go something like this:
Fragment1.xml
<android.support.design.widget.CoordinatorLayout
...
.../>
<android.support.design.widget.AppBarLayout
...
.../>
<android.support.design.widget.CollapsingToolbarLayout
app:layout_scrollFlags="scroll|exitUntilCollapsed"
...>
<android.support.v7.widget.Toolbar
.../>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
app:layout_behavior="#string/appbar_scrolling_view_behavior"
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
MainActivity.xml
<android.support.design.widget.CoordinatorLayout
.../>
<FrameLayout
app:layout_behavior="#string/appbar_scrolling_view_behavior"
.../>
<android.support.design.widget.BottomNavigationView
app:layout_behavior="#string/hide_bottom_view_on_scroll_behavior"
.../>
</android.support.design.widget.CoordinatorLayout>
Now, this works well enough, in the sense that when i scroll inside fragment my AppBar collapses into the title (what i want), BUT my bottomNavigationView does not react to scrolling.
What i found out is that if i add the line
app:layout_behavior="#string/appbar_scrolling_view_behavior"
to the AppBarLyout xml declaration i get the bottomView to collapse on scroll event (when i scroll up it shows again). So basically either i have the ability to collapse appbar inside fragment OR i have the ability to hide BottomNavigationView when i detect a scroll event in fragment.
Any sort of help would be appreciated, I'm losing my mind over this for 3 straight days.
I'm creating a layout using a CoordinatorLayout holding an AppBarLayout with a CollapsableToolbarLayout and a Toolbar. Below the app bar is a RecyclerView.
When scrolling in the RecyclerView, the Toolbar should collapse, similar to the CheeseSquare demo app. The difference from that demo is that 1) I want my Toolbar (including the title) always statically at the top (so I've set app:titleEnabled on my CTL), and 2) I don't want to collapse the app bar fully into only showing the single line Toolbar since I have some text views etc below the Toolbar which the app bar should never collapse beyond. I am using a custom Behavior to control these text views during collapsing, and all this works fine.
Problem is, I don't seem to grasp how to best set the anchor point at which the collapsing will end. I know that the app bar will collapse until it snaps to to the height of the Toolbar. So I would need to either put my custom views inside the toolbar, hence increasing the height of the Toolbar itself, or somehow instruct the CTL to anchor to my custom view instead. However, whenever I change the height of the Toolbar, the title text gets strangely aligned and I haven't found a good way of keeping it properly aligned with any set of reasonable attributes.
Question is, should I be playing with the height of the Toolbar at all, or is there a way of getting the CTL to stop collapsing at some other anchor point than the bottom of the Toolbar?
Or should I indeed modify the height of the Toolbar and place my own layout in it that includes the title text, and manually make sure to align it vertically with the toolbar icons etc? The best I've managed so far is to place a LinearLayout containing a TextView inside the Toolbar, with a hard-coded layout_marginTop="14dp", which might have compat issues. It seems really strange that it wouldn't be possible to increase the height of a Toolbar while still maintaining the default title text position.
Or should I not use the CTL at all but instead create my completely custom behavior also for the parts that collapses the app bar during initial RecyclerView scroll events?
I've searched for similar questions obviously, and the closest I've found is this question which does not address my problem with the title text getting messed up.
My current layout, including the ugly hard-coded manual title TextView inside the Toolbar:
<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:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="180dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<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"
app:titleEnabled="false"
app:contentScrim="?attr/colorPrimary">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="110dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="14dp">
<TextView
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Title"/ >
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="80dp"
android:elevation="10dp"
android:gravity="center"
android:orientation="horizontal"
app:layout_anchor="#id/toolbar"
app:layout_behavior="my behavior class">
<!-- My custom views to be shown in the app bar, animated through custom behavior -->
</LinearLayout>
<android.support.v7.widget.RecyclerView android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
I encountered a strange problem with the new Android Design Support Librar (http://android-developers.blogspot.com.ar/2015/05/android-design-support-library.html). If I place additional content (like a LinearLayout) in an AppBarLayout along with the ToolBar and toggle the visibility of that content then switching fragments will have show a dead space at the top of the fragment content.
It appears that AppBarLayout isn't resizing the parent CoordinatorLayout correctly when visibility of the content is toggled. I have my CoordinatorLayout wrapped in the DrawerLayout. I want to toggle the visibility of the extra LinearLayout in the AppBarLayout depending on the which fragment shown.
Here is my main.xml file for the MainActivity:
<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">
<android.support.design.widget.CoordinatorLayout
android:layout_height="match_parent"
android:layout_width="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_vertical"">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="start"
android:text="Hello"/>
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/drawer"/>
</android.support.v4.widget.DrawerLayout>
I had a similar problem using the support design widget. I had a CoordinatorLayout inside a DrawerLayout and an AppBarLayout inside the CoordinatorLayout. I had two toolbars inside the AppBarLayout. My aim was to display a toolbar with a ViewPager displaying a recyclerview content. I wanted to swop between the toolbars when selecting items. In other words, I made one toolbar GONE while the other was visible and vise versa. Scrolling the content up would push the toolbar up off the top of the screen. Everything worked perfectly except that changing orientation would show a space for the toolbar that should be gone. I tried every hack I could think of to get rid of it but did not succeed. I then came across this post and realized that it was a bug in the support library. I then tried putting a FrameLayout in the AppBarLayout and then put the two toolbars inside the FrameLayout and NO MORE SPACE! everything now works as I intend it to work. GONE toolbars are GONE and only the visible toolbar shows, even when changing the orientation.
Hope this helps someone.
I used the way https://stackoverflow.com/a/27051852/3875363 to achieve the drawer behind the status bar, it seems fine before only stay for one view.
But I faced a strange case after I hide and show this fragment, a white padding appears on the bottom of the drawerlayout, it likes below.
I comment most codes to show a simple example.
The layout of activity:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/content_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
The layout of fragment with drawer
<android.support.v4.widget.DrawerLayout android:id="#+id/drawer_layout"
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:fitsSystemWindows="true"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/action_bar_in_list"
layout = "#layout/toolbar"/>
</RelativeLayout>
<com.ghostflying.portalwaitinglist.ScrimInsetsFrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/debug_content"
android:background="#color/setting_item_group_title_text"
app:insetForeground="#4000"
android:fitsSystemWindows="true"
android:layout_gravity="start"
android:layout_height="match_parent"
android:layout_width="#dimen/navigation_drawer_width">
</com.ghostflying.portalwaitinglist.ScrimInsetsFrameLayout>
</android.support.v4.widget.DrawerLayout>
The layout of the second fragment:
<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">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/hello_blank_fragment"/>
</FrameLayout>
Once I hide the drawer fragment, show the second fragment, then I popup the back stack to return. The drawer fragment will seem like the image, a padding with the height of status bar always appear. So strange.
Try to remove android:paddingBottom from DrawerLayout.
android:paddingTop makes Drawer doesn't cover the Status Bar, but there is no reason to duplicate padding at the bottom.
EDIT:
After your update, I analyzed it once more and I think your issue can be caused by your unusual design. All guides suggest that DrawerLayout should be root element of view hierarchy (as in your example you provided). See here: link
So I suggest one of these solutions.
Use separate Activities to display Views with and without Drawer. (I recommend this, especially when your Drawer plays navigational role.)
Use one Activity with Drawer Layout as root and put Fragments as Drawer's main content. If you don't want Drawer to be openable use this method after changing Fragment:
mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);
Try to remove the android attribute:
fitsSystemWindows = "true"
This worked for me.
According to the official documentation it's a
Boolean internal attribute to adjust view layout based on system
windows such as the status bar. If true, adjusts the padding of this
view to leave space for the system windows.