My Activity is built on layout android.support.design.widget.CoordinatorLayout which contains toolbar. In the activity i have three webview which loads google.com, as soon i click the search-bar(to input the keyboards), toolbar extends itself to search-bar, but as soon as i click back key(which removes the cursor from the search bar), toolbar goes to normal size.
Here is my layout:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinatorLayout"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/tool_bar"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/ColorPrimary"
android:elevation="2dp"
android:theme="#style/Base.ThemeOverlay.AppCompat.Dark"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways"
android:fitsSystemWindows="true" />
<com.taadu.slidechat.adaptor.SlidingTabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/ColorPrimary"
android:layout_below="#+id/tool_bar"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_below="#+id/tabs">
</android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>
I have tried to define some numbers in android:layout_height of AppBarLayout but this makes my tabs go away, but then also toolbar size is not normal, it is always short of it's regular height.
I have searched whole stackoverflow, but couldn't find any relevant data.
Your question is a bit unclear... But if I got it correctly, try to set your layout_height to ?attr/actionBarSize.
Your layout will look like this:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/tool_bar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:background="#color/ColorPrimary"
android:elevation="2dp"
android:theme="#style/Base.ThemeOverlay.AppCompat.Dark"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways"
android:fitsSystemWindows="true" />
<com.taadu.slidechat.adaptor.SlidingTabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/ColorPrimary"
android:layout_below="#+id/tool_bar"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>
Related
I want to achieve a UI in which the fragment should be anchored to appbarlayout.
What I've done so far is, I've set anchor-gravity to my fragment second_container as bottom|center and transacted one fragment inside it:
<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"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="200dp"
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|snap"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/second_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|center"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed" />
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
The output should be like this:
what I'm getting is:
As you can see, the fragment content is getting overlapped on appbarlayout, what is the problem here? Thanks for your attention.
I am using the following code to hide my toolbar when I scroll on my main activity and it works perfectly. Though, I want to change its behavior a little:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinatorLayout"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarsdfs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:scrollbars="horizontal"
android:layout_below="#+id/toolbarsdfs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:tabTextColor="#android:color/white"
app:tabSelectedTextColor="#android:color/white"
app:tabIndicatorColor="#android:color/white"
app:tabIndicatorHeight="3dp" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="fill_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_below="#+id/tablayout"/>
</android.support.design.widget.CoordinatorLayout>
I want the toolbar to only show when the user reaches the far top of the view. I have a recyclerview that has a lot of rows. I want the user to be able to go up and down without being bothered by the toolbar unless he reaches the very top of the view. How can this be done? Thanks.
Edit: edited the code.
in content_main.XML use android.support.v4.widget.NestedScrollView instead of ScrollView.
also use app:layout_behavior="#string/appbar_scrolling_view_behavior" inside android.support.v4.widget.NestedScrollView like below.
<android.support.v4.widget.NestedScrollView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/textone"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="hello world"
android:textSize="25dp"
android:textStyle="bold" />
/// Add your other code here
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
reference from hear : How to hide ToolBar when i scrolling content up in android
I'm trying to work with different AppBarLayouts in one Activity.
When a Fragment is loaded, it can call a "ToolbarManager", that handles the replacing of the currently active Toolbar (namely an AppBarLayout).
For some of these Toolbars (using CollapsingToolbarLayout) I want them to draw behind the StatusBar.
This works fine when setting the "fitsSystemWindow" to true in the XML.
But when using just a Toolbar with layout_scrollFlags="scroll", the Toolbar Title is displayed even behind the StatusBar.
To avoid this, I want to disable the "fitsSystemWindow" when loading such a Toolbar by using setFitsSystemWindow(false).
Disabling works fine, but when re-enabling by setFitsSystemWindow(true) for using with CollapsingToolbarLayout, the StatusBar is colored and the Toolbar is placed below the StatusBar with a padding in size of the StatusBar on top.
Image: Drawn below StatusBar instead of behind
When I don't use setFitsSystemWindow(true) and just set it to true in the XML layout, the display of CollapsingToolbarLayout is fine.
Is this a bug in setFitSystemWindow or is this method just different from the XML attribute?
Here are the layouts I use:
Activity:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/drawer_layout"
android:fitsSystemWindows="true"
tools:context=".activities.MainActivity"
style="#style/AppTheme">
<android.support.design.widget.CoordinatorLayout
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:id="#+id/coordinator_layout">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="wrap_content">
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/fragment_container"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</FrameLayout>
<ProgressBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="true"
android:indeterminateDuration="1000"
android:layout_marginBottom="-7dp"
android:id="#+id/loadingBar"
style="#style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_gravity="center_horizontal|bottom"
android:gravity="bottom"/>
</android.support.design.widget.CoordinatorLayout>
<include layout="#layout/include_navigationview" />
The AppBarLayout is replaced every time a new Fragment is loaded.
The following layout is the Toolbar which should not draw behind the StatusBar, but the Toolbar should scroll (leaving only the TabLayout visible)
<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:id="#+id/toolbar_discover"
android:fitsSystemWindows="true"
android:paddingBottom="0dp">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:theme="#style/AppTheme.Toolbar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|snap">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tablayout_discover"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:tabMode="fixed"
app:tabGravity="fill" />
</android.support.design.widget.AppBarLayout>
This used to work when I set fitsSystemWindows=false on the CoordinatorLayout in the MainActivity Layout. When doing so, the following CollapsingToolbar cannot draw behind the StatusBar.
<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:id="#+id/toolbar_account"
android:fitsSystemWindows="true"
android:paddingBottom="0dp">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
android:fitsSystemWindows="true"
android:id="#+id/collapsingToolbarLayout">
<ImageView
android:layout_width="match_parent"
android:layout_height="250dp"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
android:id="#+id/banner_image"
android:src="#mipmap/img_header"/>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:id="#+id/toolbar"
android:fitsSystemWindows="false"
android:layout_height="?attr/actionBarSize"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:theme="#style/AppTheme.Toolbar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
I'm working on creating a layout that works as follows:
Toolbar at the top
Toolbar below top toolbar
RecyclerView
And when I scroll, I want to hide the toolbar in between top toolbar and recyclerView. My Layout is as follows:
<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="SomeActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
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="wrap_content"
android:elevation="4dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:layout_scrollFlags="scroll|enterAlways"/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="50dp"
android:minHeight="0dp"
android:id="#+id/info_bar"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/content_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
With these changes, both the toolbars become hidden when scrolling.
I just need to hide the second toolbar.
EDIT : If I can't get this to work, I'll be attaching a scroll listener to my recyclerView and resolving this that way. But I was wondering if there is a cleaner solution with scroll behaviors
Moved the top toolbar out of the coordinatorlayout and thus resolved this issue.
(Thanks to a colleague)
<LinearLayout 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:orientation="vertical">
<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.CoordinatorLayout
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.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways" />
</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.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"
android:src="#drawable/ic_done" />
</android.support.design.widget.CoordinatorLayout>
If I understood properly, then you might want to collapse hole collapseableToolbar when it is scrolled up, instead it is showing some (20dp) space between ToolBar and listItem. for me it took half of the day, and problem is just a boolean value in coordinatorLayout. Just change "fitsSystemWindows" value from true to false.
with this you can hide image of the collapseToolBar upon scrolling.
<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="false"
tools:context="com.thedeveloperworldisyours.imagecollapsingtoolbarlayout.ScrollingActivity">
I'm working on a tab activity in my app, but it seems that the tabs are using the wrong height (thinking the layout is about half an inch taller than it is on any device) and as a result any vertical centering is off on the low side, and my scrollviews are messed up because the screen won't scroll far enough down to see the bottom of the view. I have tried tinkering with the layout_height on any relevant class I can think of and hiding the tabs, but nothing helps and I cant find this problem anywhere else. I generated the default template for a TabLayout activity in Android Studio 1.4.
activity_main
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
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"
tools:context=".MainActivity">
<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.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"
app:layout_scrollFlags="scroll|enterAlways">
</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="#color/colorPrimaryDark" />
</android.support.design.widget.AppBarLayout>
<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"
android:src="#drawable/ic_youtube_searched_for_white_18dp"
android:visibility="gone"/>
</android.support.design.widget.CoordinatorLayout>
fragment_main
<ScrollView 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:background="#color/white"
tools:context="com.example.ggould.flyingfood.HistoryFragment">
<LinearLayout
android:id="#+id/main_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
//other stuff
</LinearLayout
</ScrollView>
On activity_main you can create a RelativeLayout. Put your ViewPager and AppBarLayout inside RelativeLayout and set your ViewPager like this:
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/appbar"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>
you have to wrap content for the widget.toolbar