I have an AppBar and a horizontal linearlayout (which includes an edit text and two imagebuttons) and other things in my layout. When user scrolls down, I want AppBar(actually, the Toolbar to hide. This is what I have tried, the appbar isn't hiding it just stays there. I followed the Chris Banes Cheesesquare Sample.
Here is the screenshot of my app:
When user scrolls, I want that AppBar/Toolbar to disappear, and that horizontal layout, which includes the edittext, replace the appbar and stayed there.
Can you tell me what I am doing wrong?
<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">
<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/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
xmlns:android="http://schemas.android.com/apk/res/android"
app:layout_scrollFlags="scroll|enterAlways|snap"
/>
</android.support.design.widget.AppBarLayout>
<LinearLayout 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:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_show" tools:context="com.example.bimpc1.sozluk.GosterActivity"
android:background="#color/white"
android:id="#+id/mylin">
<View
android:layout_width="fill_parent"
android:layout_height="30dp">
</View>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/topLayout"
android:layout_alignParentTop="true"
android:paddingLeft="10dp"
android:paddingRight="10dp">
<ImageButton
android:id="#+id/btn_sil"
android:layout_width="45dp"
android:layout_height="45dp"
android:gravity="center"
android:src="#drawable/delete"
android:background="#color/white"
android:paddingRight="10dp"
android:paddingLeft="10dp"
android:paddingTop="0dp"
android:paddingBottom="15dp"
/>
<EditText
android:gravity="center"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/et_word"
android:ems="12"
android:background="#android:color/transparent"/>
<ImageButton
android:id="#+id/btn_getir"
android:layout_width="45dp"
android:layout_height="45dp"
android:gravity="center"
android:src="#drawable/search"
android:background="#color/white"
android:paddingRight="10dp"
android:paddingLeft="10dp"
android:paddingTop="0dp"
android:paddingBottom="15dp"
/>
</LinearLayout>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:layout_below="#+id/topLayout"
xmlns:app="http://schemas.android.com/apk/res-auto">
<!--many views inside scrollview..... -->
</ScrollView>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
</android.support.v4.widget.DrawerLayout>
Actually, that design seems to be wrong.Why? let me explain that to you.
Except those xmlns:android="http://schemas.android.com/apk/res/android" which it wasn't necessary or using: android:layout_alignParentTop="true" in the LinearLayout or using that ScrollView under the contents or etc, seems like you don't have any idea what's going on.(no problem).
Note: the most important thing was, adding:
app:layout_behavior="#string/appbar_scrolling_view_behavior" which also mentioned here:
http://guides.codepath.com/android/Handling-Scrolls-with-CoordinatorLayout
And this flag should hide that section:(exitUntilCollapsed)
app:layout_scrollFlags="scroll|exitUntilCollapsed"
exitUntilCollapsed: When the scroll flag is set, scrolling down will
normally cause the entire content to move.
So finally: http://i.stack.imgur.com/qf1So.gif
Hope this is what you were looking for, if it wasn't please edit your question and add some screenshots.
Feel free to change the flags or add a new to achieve what you exactly need.
UPDATE:
If you want to hide that Toolbar(red section) after collapsing, just use this in the CollapsingToolbarLayout:
app:layout_scrollFlags="scroll|snap"
Finally, you will get the same result(something like googleplay design).
Codes:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<!-- Your Scrollable contents should be here - such as,
ViewPager or etc -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:scrollbarSize="15sp"
android:text="You Contents" />
</android.support.v4.widget.NestedScrollView>
<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.CollapsingToolbarLayout
android:id="#+id/collapsingtoolbarly"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|snap">
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<ImageView
android:layout_width="match_parent"
android:layout_height="190dp"
android:minHeight="190dp"
android:scaleType="fitXY"
android:src="#drawable/header"
app:layout_collapseMode="parallax" />
</android.support.design.widget.CollapsingToolbarLayout>
<LinearLayout
android:id="#+id/mylin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<View
android:layout_width="fill_parent"
android:layout_height="30dp" />
<LinearLayout
android:id="#+id/topLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:id="#+id/btn_sil"
android:layout_width="45dp"
android:layout_height="45dp"
android:background="#drawable/ic_arrow_drop_up_black_24dp"
android:gravity="center"
android:paddingBottom="15dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="0dp" />
<EditText
android:id="#+id/et_word"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:ems="12"
android:gravity="center" />
<ImageButton
android:id="#+id/btn_getir"
android:layout_width="45dp"
android:layout_height="45dp"
android:background="#drawable/ic_arrow_drop_up_black_24dp"
android:gravity="center"
android:paddingBottom="15dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="0dp" />
</LinearLayout>
</LinearLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
<!-- And finally, NavigationView -->
<!-- <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/app_header"
app:insetForeground="#color/app_color_primary_dark"
app:menu="#menu/navigation_menu" /> -->
</android.support.v4.widget.DrawerLayout>
Results: after collapsing, the searchedittext won't hide:
UPDATE: New way :)
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/mylin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<View
android:layout_width="fill_parent"
android:layout_height="30dp" />
<LinearLayout
android:id="#+id/topLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:id="#+id/btn_sil"
android:layout_width="45dp"
android:layout_height="45dp"
android:background="#drawable/ic_arrow_drop_up_black_24dp"
android:gravity="center"
android:paddingBottom="15dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="0dp" />
<EditText
android:id="#+id/et_word"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:ems="12"
android:gravity="center" />
<ImageButton
android:id="#+id/btn_getir"
android:layout_width="45dp"
android:layout_height="45dp"
android:background="#drawable/ic_arrow_drop_up_black_24dp"
android:gravity="center"
android:paddingBottom="15dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="0dp" />
</LinearLayout>
</LinearLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<!-- Your Scrollable contents should be here - such as,
ViewPager or etc -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:scrollbarSize="15sp"
android:text="You Contents" />
</android.support.v4.widget.NestedScrollView>
<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/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
app:layout_scrollFlags="scroll|enterAlways"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
<!-- And finally, NavigationView -->
<!-- <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/app_header"
app:insetForeground="#color/app_color_primary_dark"
app:menu="#menu/navigation_menu" /> -->
</android.support.v4.widget.DrawerLayout>
Results:
I hope that this article will help you: https://guides.codepath.com/android/Handling-Scrolls-with-CoordinatorLayout
Try using CoordinatorLayout and CollapsingToolbar.
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
check this out you need to set flag for it in CoordinatorLayout and CollapsingToolbar,
<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.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<!-- Your scrolling content -->
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent">
<android.support.v7.widget.Toolbar
...
app:layout_scrollFlags="scroll|enterAlways"/>
<android.support.design.widget.TabLayout
...
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
http://developer.android.com/reference/android/support/design/widget/AppBarLayout.html
You need to structure your layout like this:
<android.support.design.widget.CoordinatorLayout >
<android.support.design.widget.AppBarLayout >
<android.support.design.widget.CollapsingToolbarLayout >
<ImageView />
<android.support.v7.widget.Toolbar />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!-- Your scrollable content here -->
</android.support.design.widget.CoordinatorLayout>
Complete tutorial at: http://blog.grafixartist.com/toolbar-animation-with-android-design-support-library/
In the Drawer.Layout add in android:fitsSystemWindows="true".
<android.support.v4.widget.DrawerLayout android:id="#+id/drawer_layout"
.../...
// add in
android:fitsSystemWindows="true">
It's better to separate out your concerns. Using the sample provided by chrisbanes/cheesesquare, your layout would be better looking like this:
<android.support.v4.widget.DrawerLayout android:id="#+id/drawer_layout"
.../...
// add in
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout .../...>
<android.support.design.widget.AppBarLayout .../...>
<android.support.v7.widget.Toolbar
// Why are you using two themes?
// android:theme="#style/ThemeOverlay.AppCompat.ActionBar"/>
</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>
</android.support.v4.widget.DrawerLayout>
Replace this:
<LinearLayout .../...>
<View .../...>
</View>
<LinearLayout .../...>
<ImageButton
.../...
/>
</LinearLayout>
<ScrollView .../...>
<!--many views inside scrollview..... -->
</ScrollView>
</LinearLayout>
With
<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"/>
And then use the ViewPager to populate your list.
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
if (viewPager != null) {
setupViewPager(viewPager);
}
private void setupViewPager(ViewPager viewPager) {
Adapter adapter = new Adapter(getSupportFragmentManager());
adapter.addFragment(new CheeseListFragment(), "Category 1");
adapter.addFragment(new CheeseListFragment(), "Category 2");
adapter.addFragment(new CheeseListFragment(), "Category 3");
viewPager.setAdapter(adapter);
}
Then you can format this CheeseListFragment to add your image views individually.
It's also unnecessary to keep declaring your schema:
xmlns:app="http://schemas.android.com/apk/res-auto"
This is an indicator that you are copying and pasting code and not understanding it.
You should also be using a nestedScrollView without the view, and linear layout above it. Mind you, it's not clear what you are trying to acheive with that.
In order to hide toolbar use the code below.
toolbar.animate().translationY(-toolbar.getBottom()).setInterpolator(new AccelerateInterpolator()).start();
Try this code: Use layout_scrollFlags like below:
app:layout_scrollFlags="scroll|enterAlways"
and your XML file change like 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"
tools:context="MainActivity">
<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"
app:layout_scrollFlags="scroll|enterAlways"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"/>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
this is content_main XML file
<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">
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
Related
Screenshot
As you can see, the layout is a bit too big for the older device. My idea is to shrink the CardView while the user is scrolling in the white area (ViewPager) to make it bigger. I have seen it working well in another app (can't remember which). I have no idea how I can do it, do I need write it programmatically?
XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:context=".WordActivity">
<WebView
android:id="#+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="20dp"
android:visibility="gone" />
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
app:cardBackgroundColor="#color/primary_dark"
app:cardCornerRadius="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp">
<TextView
android:id="#+id/wordTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/poweredBy"
android:layout_centerInParent="true"
android:layout_marginTop="-12dp"
android:fontFamily="#font/poppins"
android:text="#string/word_title"
android:textColor="#android:color/white"
android:textSize="30sp" />
<TextView
android:id="#+id/wordTranslated"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/wordTitle"
android:layout_alignStart="#id/wordTitle"
android:layout_marginTop="-10dp"
android:fontFamily="#font/poppins"
android:textColor="#android:color/darker_gray"
android:textSize="16sp" />
<TextView
android:id="#+id/poweredBy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:fontFamily="#font/bungee_hairline"
android:text="#string/powered"
android:textColor="#android:color/darker_gray"
android:textSize="16sp" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/cardView">
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#color/primary"
android:elevation="5dp"
app:tabIndicatorColor="#android:color/white"
app:tabIndicatorHeight="2dp"
app:tabPaddingEnd="-1dp"
app:tabPaddingStart="-1dp"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#color/white_transparent" />
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="45dp" />
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
try again with this sample layout.
activity_main2.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:theme="#style/Theme.AppCompat.Light.NoActionBar">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Theme.AppCompat.Light.NoActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:expandedTitleTextAppearance="#android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="170dp"
android:background="#drawable/bckg_toolbar"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
app:layout_collapseMode="pin"
app:popupTheme="#style/Theme.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#202020"
app:layout_anchorGravity="top|center"
app:tabGravity="fill"
app:tabIndicatorColor="#FBA601"
app:tabMode="fixed"
app:tabSelectedTextColor="#FBA601"
app:tabTextColor="#fff" />
</LinearLayout>
</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"/>
scene 1
scene 2
It may not be applicable to your current layout but if you can integrate Android's collapsing toolbars you may save youself a bit of time.
Otherwise you could use something like this to detect when the user is at the top of your list and show the view, hiding it otherwise
Try this sample layout, just change the code inside nested scrollview with your tablayout
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:theme="#style/Theme.AppCompat.Light.NoActionBar">
<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"
android:theme="#style/Theme.AppCompat.Light.NoActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:expandedTitleTextAppearance="#android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="170dp"
android:background="#drawable/bckg"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
app:layout_collapseMode="pin"
app:popupTheme="#style/Theme.AppCompat.Light"/>
</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"
android:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/textLoremIpsum"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Here is my sample screenshot
Scene 1
Scene 2
I have a problem with toolbar, when I scroll up, the toolbar hide, and when I scroll down, the toolbar show immediately. I want to scroll to top of RecyclerView, the toolbar will show, how can I do it?
Thanks!!!!
<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/dn_main_container"
android:background="#android:color/white"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".phone.activity.ActivityPerspective">
<android.support.v7.widget.RecyclerView
android:id="#+id/listView"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#android:color/white"
android:layout_marginTop="-56dp"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<android.support.design.widget.AppBarLayout
app:elevation="0dp"
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
app:contentInsetStartWithNavigation="0dp"
android:elevation="0dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<RelativeLayout
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content">
<TextView
android:id="#+id/titleView"
android:text="Author"
android:textSize="9pt"
android:textColor="#4D4D4D"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
<ImageView
android:id="#+id/search"
android:src="#drawable/search_dark"
android:paddingTop="19dp"
android:paddingBottom="19dp"
android:layout_marginLeft="6dp"
android:layout_width="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
You should add app:layout_scrollFlags="scroll|enterAlways" in child(in your case <android.support.v7.widget.Toolbar>) of <android.support.design.widget.AppBarLayout> to achieve on scroll down hide app bar and on scroll top show app bar.
Use below format code this will work for you what you want.
<?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/activity_notice"
android:orientation="vertical"
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:orientation="vertical"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</FrameLayout>
Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar_help);
setSupportActionBar(toolbar);
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:background="#color/fragment.background">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/fragment.background"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/fragment.background"
android:orientation="vertical"
app:layout_scrollFlags="scroll|enterAlways">
<TextView
style="#style/merchantHintText"
android:id="#+id/contract_template_title"
android:layout_width="match_parent"
android:background="#color/white"
android:padding="15dp"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="1dp"
android:src="#color/fragment.background" />
<com.tqmall.salestool.merchant.task.UploadImgLayout
android:id="#+id/contract_template_imglayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:background="#color/white"
android:orientation="vertical"
android:padding="15dp" />
<TextView
android:id="#+id/contract_template_info"
style="#style/merchantHintText"
android:layout_width="match_parent"
android:background="#color/white"
android:padding="15dp"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="1dp"
android:src="#color/fragment.background" />
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<com.tqmall.salestool.view.ListRecyclerView
android:id="#+id/contract_template_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:paddingBottom="40dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
<TextView
android:id="#+id/contract_template_sure_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/text.red"
android:gravity="center"
android:padding="10dp"
android:textColor="#color/white"
android:textSize="20sp" />
</RelativeLayout>
When my adapter have enough number of data (which inflating a much higher view than screen), the LinearLayout in AppBarLayout will collapse correctly. However, if there are few data, it will not collapse. I read the source code of AppBarLayout, but not find the code cause that.
Why it acts like that?
Just put you Linear layout into CollapsingToolbarLayout like this
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android: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="wrap_content"
android:fitsSystemWindows="true"
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"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<!-- views -->
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/scrollableView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Try this. It should work.
Hi I have the following issue , when pressing a tab icon the view is not shown, i can see the class is being loaded. I can see the that in the console log. I believe the issue is related the the xml as i have moved the relative layout main_content below the view pager and when the icon is pressed in the tab layout, the tab fragment content is shown but the main content views don't attach then which is a problem.
My Layout:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.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"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimaryDark"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="#dimen/custom_tab_layout_height"
app:tabGravity="fill"
app:tabMode="fixed" />
<RelativeLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
</RelativeLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
<RelativeLayout
android:id="#+id/drawer_pane"
android:layout_width="280dp"
android:layout_height="match_parent"
android:layout_gravity="start">
<!-- Profile box -->
<RelativeLayout
android:id="#+id/profile_box"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#color/material_blue_grey_800"
android:gravity="center_vertical">
<ImageView
android:id="#+id/icon"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="10dp"
android:background="#drawable/ic_mail_black_24dp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_toRightOf="#+id/icon"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Phong"
android:textColor="#fff"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="PTIT HCM"
android:textColor="#fff"
android:textSize="16sp" />
</LinearLayout>
</RelativeLayout>
<!-- Navigation Listview -->
<ListView
android:id="#+id/nav_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/profile_box"
android:background="#ffffff"
android:choiceMode="singleChoice">
</ListView>
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
Since you are using CoordinatorLayout, Let's use that NavigationDrawer too.
Here what you should exactly do (StandardWay):
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
android:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<!-- Your Contents -->
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimaryDark"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="fixed" />
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="#id/tab_layout" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/header"
app:menu="#menu/drawer" />
<!-- navigationdrawer menu -->
</android.support.v4.widget.DrawerLayout>
Not sure if this is a good implementation :
<RelativeLayout
android:id="#+id/drawer_pane"
android:layout_width="280dp"
android:layout_height="match_parent"
android:layout_gravity="start">
especially, with this one:
<!-- Navigation Listview -->
<ListView
android:id="#+id/nav_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/profile_box"
android:background="#ffffff"
android:choiceMode="singleChoice" />
Here you learn more about using this CoordinatorLayout with contents and mastering it:
http://saulmm.github.io/mastering-coordinator/
I am working on code that have FrameLayout and customview at bottom. I loaded a fragment inside FrameLayout, which is having CoordinatorLayout with ViewPager inside.
So problem is ViewPager takes full height of the phone and hide contents of list behind customview. Here is Code:
main_layout.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/root_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/playerView"
android:layout_alignParentTop="true" />
<TextView
android:id="#+id/playerView"
android:layout_width="match_parent"
android:layout_height="#dimen/player_size"
android:layout_alignParentBottom="true"
android:background="#D7D7D7"
android:gravity="center"
android:text="Player View"
android:textSize="20sp" />
</RelativeLayout>
fragment_view.xml
<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="wrap_content">
<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.TabLayout
android:id="#+id/tabs_view_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="pin"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/tabs_view_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
In above image you can see some content of list is hidden beside PlayerView.
Try to use LinearLayout with layout_weight instead of RelativeLayout inside main_layout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="#+id/root_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<TextView
android:id="#+id/playerView"
android:layout_width="match_parent"
android:layout_height="#dimen/player_size"
android:background="#D7D7D7"
android:gravity="center"
android:text="Player View"
android:textSize="20sp" />
</LinearLayout>