How to create Listview inside CoordinatorLayout? - android

I want to create a layout with:
toolbar on top
tablayout with 3 tabs
two of the tabs show a list
one of the tab shows a grid
On scrolling the list/grid the toolbar should collapse and the tablayout should go on top. I have this worked out but I am working with a dummy list of the type:
<android.support.v4.widget.NestedScrollView
app:layout_behavior="#string/appbar_scrolling_view_behavior"
....>
<LinearLayout
...
/>
...
.... copied 10 times
</NestedScrollView>
I now want to use a real list, like a listview and a gridview. What do I use? Is it okay to use a listview inside a NestedScrollView?

You should use RecyclerView instead of Listview. Take a look at this android developer blog post about the Design Support Library [LINK]
Also never use a ListView / GridView / RecyclerView in ScrollView or NestedScrollView. [LINK]

try it in listview:
app:layout_behavior="#string/appbar_scrolling_view_behavior"
<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>
<ListView
android:layout_width="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_height="match_parent" />

Related

How do I use a ViewPager in conjuction with bottom tab?

I'm trying to create a MainActivity with 3 tabs. In the first tab there is a ViewPager that displays a card that can be changed by swiping left/right. The second and third tabs each contains a simple Fragment displaying a TextView.
I'm using roughike/BottomBar and ncapdevi/FragNav library to achieve this. The Problem is FragNav doesn't work if the container is a viewpager and the card fragment doesn't work properly if I use something like a FrameLayout.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
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">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="0dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
For anyone who is looking for a solution to encapsulate a fragment inside a tab navbar of any kind, I kinda have a workaround. In later android API (IIRC 21) fragments inside fragments is allowed so you can ignore this but for previous api levels you can try to hide the views instead using
view.hide();

Do I have to implement RecyclerView in order to scroll out a view out of screen

I have following layout:
What I would like to achieve is to scroll out the ViewPager out of the screen when you scroll in any of the listviews at the half bottom of the screen. As the ViewPager would be getting out of the screen the ListViews should take up more and more screen. Toolbar should stay pinned.
I was having look at the Support Design Library.
In my case from the examples the most interesting piece of code was this:
<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">
<! -- Your Scrollable View -->
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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>
Do I need to change my ListViews to RecyclerViews in order to achieve scrolling out the ViewPager from the screen - while the ListViews would increase their height as the ViewPager would getting out of the screen? Is that even possible with the Coordinator Layout?

Nested scrollview inside gridview place is taking only somepart

I have:
1.Coordinator layout
2.appbar layout (child of Coordinator layout)
3.Collapsing toolbar layout (child of app bar)
4.NestedScrollView (child of coordinator)
I want to put a grid view inside NestedScrollView so that user can scroll over the entire screen space.
My problem is that currently the gridview occupies a small portion of the NestedScrollView and not full space of NestedScrollView and scrolls inside that portion,like in this image:
As you can see my gridview height is limited upto only that highlighted portion in sky blue color, i want that to occupy the entire screen space below that image(which is my Collapsing toolbar).i tried different ways but nothing works out.
my xml file is:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:id="#+id/app_bar"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="196dp"
android:background="#3f51b5"
app:contentScrim="#color/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/imageview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/index"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<GridView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="1dp"
android:layout_marginRight="1dp"
android:id="#+id/gridView"
android:verticalSpacing="1dp"
android:horizontalSpacing="1dp"
android:numColumns="2"
android:stretchMode="columnWidth"/>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|bottom"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />
GridView already has scrolling built in, so it conflicts with a NestedScrollView. You should be using a RecyclerView with a GridLayoutManager and appbar_scrolling_view_behavior layout behavior in place of the NestedScrollView.
well i had the same issue , the following worked for me.
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:fillViewport="true">
It is true, that GridView conflicts with the NestedScrollView and the correct solution would be to use the RecyclerView, but I needed a quick workaround with such setup and came across a solution using a custom class extending the GridView:
https://gist.github.com/jiahuang/2591977
Then you just have to replace your GridView with the custom class and set the parameter of NestedScrollView as in Apoorv's answer:
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:fillViewport="true">
Apoorv Singh's answer helped me, but not fully. You can put a GridView inside a NestedScrollView, but only the 1st row will show up. You need to add the android:fillViewport="true" inside the NestedScrollView definition in order for everything to display properly.
But, when I scroll down, it doesn't scroll past the bottom of the screen. I have a grid with 10 rows, there are multiple rows not on screen, but I cannot scroll down to view them now.
Answer:
This worked for me now. Use RecyclerView with GridLayoutManager instead of GridView. As Recycler view is compatible with Collapsing toolbar as well. And when you use RecyclerView inside NestedScrollView, it works well. Everything sizes correctly, as well as scrolls correctly.
Inside NestedScrollView add this one line code
android:fillViewport="true"

Scroll behavior in nested RecyclerView with horizontal scroll

I have to create vertical RecyclerView with nested horizontal RecyclerView in every item. Everything is within CoordinatorLayout. When I scroll by tapping outside nested RecyclerView toolbar hides, but when I scroll parent Recycler by tapping on nested one toolbar stays.
Any help would be appreciated.
Here is my xml layouts:
main_activity.xml:
<android.support.design.widget.CoordinatorLayout
...>
<FrameLayout
android:id="#+id/fragment_frame"
...
android:fitsSystemWindows="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.AppBarLayout
...
android:fitsSystemWindows="true"
android:id="#+id/appbar_layout">
<include layout="#layout/toolbar"/>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
Here is toolbar.xml :
<android.support.v7.widget.Toolbar
android:id="#+id/main_toolbar"
...
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways">
<TextView .../>
</android.support.v7.widget.Toolbar>
fragment.xml:
<android.support.v7.widget.RecyclerView
...
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
And recycler_view_item.xml:
<RelativeLayout ...>
<TextView .../>
<!-- fixme(CullyCross) fix bug with hiding toolbar -->
<android.support.v7.widget.RecyclerView
...
android:scrollbars="horizontal"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</RelativeLayout>
Thanks,
Anton
As requested here is the solution I found good enough so far:
In my case I have a nestedScrollView with 4 RecyclerViews set to scroll horizontally inside. For each of those RecyclerViews I have done this programatically:
restaurantsRecylerView.setHasFixedSize(true);
restaurantsRecylerView.setNestedScrollingEnabled(false);
You probably don't want the fixedSize, not sure if it will make any difference, my list is always 25 so I can use that for performance. After having done this I can scroll without issues even when I touch on the recyclerViews
Hope it helps
Try with RecyclerView inside android.support.v4.widget.NestedScrollView.
<android.support.v4.widget.NestedScrollView
android:id="#+id/nScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Set other views of your Layout -->
</android.support.v4.widget.NestedScrollView>
Also try with different layout_scrollFlags in Toolbar and
RecylerView.setNestedScrollingEnabled(false); // set it true or false as per requirement
We can achieve this in XML
android:nestedScrollingEnabled="false"

How to hide ActionBar while scrolling ListView in android?

I need to create a GUI with a ListView and an ActionBar which will hide when scrolling down and when scrolling up it must reappear.
The following guides didn't help me:
https://mzgreen.github.io/2015/06/23/How-to-hideshow-Toolbar-when-list-is-scrolling%28part3%29/
https://github.com/ksoichiro/Android-ObservableScrollView
I need something like this:
If you would like to obtain a list with this behaviour, you should:
add the design support library with compile 'com.android.support:design:22.2.0'
Use a CoordinatorLayout with a Toolbar where you have to define app:layout_scrollFlags="scroll|enterAlways"
Use a RecyclerView instead of a ListView. As described here ListView and the GridView have the expected behavior with the CoordinatorLayout only with API>21. In this case you have to use setNestedScrollingEnabled(true);
The official blog post shows this case:
<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">
<! -- Your Scrollable View -->
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
...
app:layout_scrollFlags="scroll|enterAlways">
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
I would recommend using the new support design library by Google.
Include it in your dependecies:
compile 'com.android.support:design:22.2.0'
and then use the AppBarLayout together with NestedScrollView.
For your Toolbar define app:layout_scrollFlags="scroll|enterAlways", which says it will disappear as you scroll, and come back immediately if you scroll up (meaning you don't have to scroll all the way up).
<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"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
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>
Use [CoordinatorLayout]:https://developer.android.com/reference/android/support/design/widget/CoordinatorLayout.html, which allow co-oridanation among child views. it's like, act(AppBarLayout->scrolling) on some view when there is a behaviour observed(ListView->scroll) in another view.
Make Listview nestedScrollingEnabled, works for >API 21
android:nestedScrollingEnabled="true"
Trigger layout behaviour to appbar scrolling.
android:nestedScrollingEnabled="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
Any layout(ToolBar/TabLayout/any), which is required to show-hide/scroll, place it inside AppBarLayout, and enabled scroll flag.
app:layout_scrollFlags="scroll|enterAlways"
you should use CoordinatorLayout for this task. It is part of the support design library. Here, in the CoordinatorLayout and the app bar section, you can find an example

Categories

Resources