RecyclerView pushes checkboxes out of the screen - android

In an Android app using FastAdapter I am trying to display 3 checkboxes underneath a RecyclerView.
This should give the user a possibility to filter the list of games by wins, losses, draws.
However the full screen height is filled by the RecyclerView (pardon the non-english texts below):
The 3 checkboxes are only shown at the beginning, while the data is loaded via HTTP. And then they disappear as if the RecyclerView has pushed them away or overlayed them.
Below is my layout file, how could I fix my problem? I would also prefer the 3 checkboxes to be in 1 row if there is enough width (i.e. some flexible layout, which would break the line automatically):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical" />
<CheckBox
android:id="#+id/wonBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Wins" />
<CheckBox
android:id="#+id/lostBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Losses" />
<CheckBox
android:id="#+id/drawBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Draws" />
</LinearLayout>
UPDATE:
No luck with RelativeLayout sofar (the checkbox overlay the list):

Use a relative layout:
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_above="#+id/llbottom"
android:scrollbars="vertical" />
<LinearLayout
android:id="#+id/llbottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">
<CheckBox
android:id="#+id/wonBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Wins" />
<CheckBox
android:id="#+id/lostBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Losses" />
<CheckBox
android:id="#+id/drawBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Draws" />
</LinearLayout>

EDITED:
It's not the best solution but it works.
Use android:layout_height like this
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:scrollbars="vertical" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<CheckBox
android:id="#+id/wonBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Wins" />
<CheckBox
android:id="#+id/lostBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Losses" />
<CheckBox
android:id="#+id/drawBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Draws" />
</LinearLayout>
</LinearLayout>

Related

NestedScrollView scrolls on top when content changes

I have a fragment_layout.xml with two buttons (filter_1_btn, filter_2_btn) that perform filtering to the items of a RecyclerView. The problem is that when I scroll a bit (because the TextView above the buttons contains multiple lines of text) and then apply the filtering, then the NestedScrollView scrolls on top of the screen. Is there a way to stay at the same scrolled height after the filtering?
fragment_layout
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/nested_scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:descendantFocusability="blocksDescendants"
android:focusable="true"
android:focusableInTouchMode="true"
android:orientation="vertical">
<TextView
android:id="#+id/description_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="36dp"
android:text="Very long random text..." />
<Button
android:id="#+id/filter_1_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Filter 1"/>
<Button
android:id="#+id/filter_2_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Filter 2"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="24dp" />
</LinearLayout>
</androidx.core.widget.NestedScrollView>
This is happening because the recyclerView's container is set to wrap_content , so when the height get smaller than the NestedScrollView, it gets scrolled to top.
you can fix it by providing a height larger than NestedScrollView :
So add minHeight :
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/nested_scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:descendantFocusability="blocksDescendants"
android:focusable="true"
android:focusableInTouchMode="true"
android:orientation="vertical">
<TextView
android:id="#+id/description_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="36dp"
android:text="Very long random text..." />
<Button
android:id="#+id/filter_1_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Filter 1" />
<Button
android:id="#+id/filter_2_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Filter 2" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="1000dp">
<!-- Add min height to support scrolling-->
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp" />
</FrameLayout>
</LinearLayout>
</androidx.core.widget.NestedScrollView>

Align Recycler View above linear layout

The list of things expected in the outout
1.a linear layout to the buttom of the activity as shown in the expected image
2.a recycler view above the linear layout to achieve the scrolling funtionality as shown in the expected image
The problem can be solved if I give the height to the recycler view.But in this case the layout won't be responsive to the samller sized screens
How can I achieve it?
xmlfile.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:numberpicker="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:orientation="vertical"
tools:context=".CartPage">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:padding="20dp">
<ImageView
android:id="#+id/back_icon"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_centerVertical="true"
android:src="#drawable/ic_arrow_back_black_24dp" />
<TextView
android:id="#+id/product_buy"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical|center_horizontal"
android:layout_marginLeft="20dp"
android:layout_toRightOf="#+id/back_icon"
android:fontFamily="#font/carter_one"
android:text="My Cart"
android:textColor="#color/black"
android:textSize="20sp"
tools:ignore="RtlCompat" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/product_recycler"
android:layout_width="match_parent"
android:layout_height="400sp"
android:padding="0dp" />
// this is the buttom recycler
<LinearLayout
android:layout_alignParentBottom="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/buttom"
android:gravity="bottom|end"
android:layout_gravity="bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/border_gray"
android:orientation="vertical"
android:padding="5dp">
<TextView
android:id="#+id/details"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/border_gray"
android:fontFamily="sans-serif"
android:lineHeight="28dp"
android:padding="5dp"
android:text="Price Details"
android:textColor="#color/grey_400"
android:textSize="18sp"
tools:ignore="RtlCompat" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
If you wish to tell your RecyclerView to fill the left over space of your LinearLayout you have to use the following layout_height and layout_weight on your RecyclerView:
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/product_recycler"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:padding="0dp" />

scrollbar in constraint layout not working

I have tried the below code but it doesn't scroll when I rotate my application it will cover most of screen but I need to scroll there it doesn't working there. Is it right way to use scroll view in constraint layout. I have seen this type of example. There it was in working condition I have tried the below code but it doesn't scroll when I rotate my application it will cover most of screen but I need to scroll there it doesn't working there. Is it right way to use scroll view in constraint layout. I have seen this type of example.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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">
<include layout="#layout/tool_bar" />
<ScrollView
android:id="#+id/scrollView2"
android:layout_width="match_parent"
android:layout_height="611dp"
android:layout_marginTop="70dp"
android:scrollbars="none"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="0dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2">
<ImageView
android:id="#+id/main_bmi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/bmi" />
<ImageView
android:id="#+id/bmr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/bmr" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal"
android:weightSum="2">
<ImageView
android:id="#+id/ideal_weight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ideal" />
<ImageView
android:id="#+id/water_intake"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/water" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal"
android:weightSum="2">
<ImageView
android:id="#+id/calorie"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/calories" />
<ImageView
android:id="#+id/nutrition"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/nutrition" />
</LinearLayout>
</LinearLayout>
</ScrollView>
</android.support.constraint.ConstraintLayout>
follow this layer it might work.put appbarlayout inside ConstraintLayout layout
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--add your scrollview or nestedscrollview here-->
</LinearLayout>
</android.support.design.widget.AppBarLayout>
Your ScrollView height is fixed to 611dp.
If you use a fixed size, then the content should be greater than 611dp to be able to scroll.
You should use
<ScrollView
android:id="#+id/scrollView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
....>

Wrapping all elements in RecycleView

I have two recyclerViews (one under second). How to make them not to scale and resize to all elements height, so their scrolling won't be necessary and all items will be visible by scrolling main ScrollView?
Now it looks that:
My xml:
<?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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/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>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_below="#+id/appBarLayout"
>
<LinearLayout
android:id="#+id/content_detail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<ImageView
android:id="#+id/ivPoster"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"
app:srcCompat="#mipmap/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Title"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:id="#+id/tvDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="01.01.2001" />
<TextView
android:id="#+id/tvRate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5.10/10" />
<Button
android:id="#+id/btFav"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Mark as favourite"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
<TextView
android:id="#+id/tvOverview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="Lorem Ipsum" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:textColor="#000df0"
android:text="Trailers:" />
<android.support.v7.widget.RecyclerView
android:id="#+id/trailerRecyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:textColor="#000df0"
android:text="Reviews:" />
<android.support.v7.widget.RecyclerView
android:id="#+id/reviewRecyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</ScrollView>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
The easiest solution to your problem is to use NestedScrollView instead of ScrollView as the root scrolling element.
but...
if you really think about all this, it's not really a solution in terms of the performance of your code. Because it will look as desired but it will not be really efficient.
If your RecyclerView wraps its contents (the way you want it to) it inflates all items at once, and not really uses its recycling capabilities. It does not reuse any items it just keeps everything in memory. Essentially it becomes a component that creates a ton of Views using an Adapter based on some data, instead of a RecyclerView.
The way you should implement a thing like that is to create an Adapter that inflates multiple types of Views (4 types to be exact in your case), and use a single RecyclerView instead of your whole ScrollView. There are multiple threads here on SO that describe how to create such Adapters. For example here.
To help you a bit more, here's how you should plan your view types:

How to use ScrollView with one RelativeLayout and two LinearLayout?

I have implemented a ScrollView in which i have added a RelativeLayout. In this RelativeLayout a have added two LinearLayout. Each of this contains a TextView and a ListView. Each ListView contains over 25 items. I want to display all the items of both list views and have a single scroll for both. Now, if i add in the first ListView only 3 items and in the second 25, the first one gets no scroll and only the second gets a scroll. If i add in the first ListView 25 items and in the second 3, the first one gets a scroll and the second is not even displayed. How can i do that? Here is my code:
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/linearLayout1">
<TextView
android:text="title1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/productsToBuyTitle" />
<com.example.alexm.shoppinglist.dlv.DragSortListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/dragSortList1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/linearLayout2"
android:layout_below="#id/linearLayout1">
<TextView
android:text="title2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/allProductsTitle" />
<com.example.alexm.shoppinglist.dlv.DragSortListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/dragSortList2" />
</LinearLayout>
</RelativeLayout>
</ScrollView>
Thanks in advance!
Try this layout
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical"
android:id="#+id/linearLayout1">
<TextView
android:text="title1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/productsToBuyTitle" />
<com.example.alexm.shoppinglist.dlv.DragSortListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/dragSortList1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:text="title2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/allProductsTitle" />
<com.example.alexm.shoppinglist.dlv.DragSortListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/dragSortList2" />
</LinearLayout>
</LinearLayout>
</ScrollView>
I think that what would be better, not only in terms of scroll, but also considering performance, would be to have a SINGLE listview that inflates all those layouts. You would only have a single scroll to deal with and your performance would also be improved; nested listview with scrollview is not a good idea and the scroll can get tricky and, this way, your listview would only load visible cells (yay, even better performance).
So, you would define a ListView in that layout and use the adapter to inflate each of those views (the TextView and the list content, that is, the cells).
I believe that solves your problem. If you need the code, let me know, I'll update the answer
i HAVE DIVIDEN the screen into two part equally.. hope it will be scrolled now
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:orientation="vertical"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/linearLayout1">
<TextView
android:text="title1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/productsToBuyTitle" />
<com.example.alexm.shoppinglist.dlv.DragSortListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/dragSortList1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/linearLayout2"
android:layout_below="#id/linearLayout1">
<TextView
android:text="title2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/allProductsTitle" />
<com.example.alexm.shoppinglist.dlv.DragSortListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/dragSortList2" />
</LinearLayout>
</LinearLayout>
</ScrollView>

Categories

Resources