I need to display a staggered grid within a linear layout.
For that I have used a StaggeredGridLayoutManager on a RecyclerView from android.support.v7.widget. The problem is that StaggeredGridLayoutManager doesn't support wrap_content.
There are other questions addressing the issue, but they are concerned with linear layouts, not staggered grids:
Not able to add empty view below Recyclerview
How do I make WRAP_CONTENT work on a RecyclerView
As far as I understand I could derive StaggeredGridLayoutManager and implement onMeasure. Is there a way do to that without recalculating the positions and sizes of the children myself? When looking at the StaggeredGridLayoutManager.java source, I can see that it uses ScrollbarHelper to approximate the size of the scrolling content. Is there a way to reuse that?
The problem is that when RecyclerView is drawn, it calculates all the remaining size to itself before drawing the next elements and don't recalculate after the other elements are drawn, leaving them outside the screen.
There is an easy fix for this problem: The trick is to draw all other elements first, and leave RecyclerView for last. Use a relative layout and put the RecyclerView last on the XML layout file. Since with relative layout you can put each element wherever you want independently of the order on the XML file, you will draw all elements before RecyclerView and this will make it calculate the accurate remaining space and wrap_content will work properly.
Example to add a paginagion bar below the RecyclerView:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:padding="16dp"
tools:context=".MainActivity"
>
<LinearLayout
android:id="#+id/pagination_btns"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"> //HERE YOU ALIGN THIS ELEMENT TO THE BOTTOM OF THE PARENT
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="#string/previous_btn_label"/>
<Space
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="#string/next_btn_label"/>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/items_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:layout_above="#id/pagination_btns"/> //HERE YOU ALIGN THE RECYCLERVIEW ABOVE THE PAGINATION BAR
</RelativeLayout>
I ended-up using a custom control for this, inspired by:
https://github.com/expilu/AntipodalWall/blob/master/library/src/com/antipodalwall/AntipodalWallLayout.java
Related
I'm facing a tricky situation here and I don't know how to solve this problem.
In my project I have a custom BottomSheetDialogFragment and in the layout a FrameLayout to add or replace Fragments.
Now I have a Fragment and inside I have a RecyclerView with the height:="wrap_content" because I want the BottomSheetDialogFragment only use the necessary space. Everything looks great, the problem appear when I put another view inside of the same layout and set the RecyclerView bellow or above of that view.
The RecyclerView ignores the size of the other view (or views) and always grows to the max screen size, and then it's no possible to see a few elements and even scroll.
I saw a solution, some developers are suggesting to add paddingBottom equals to the height of the view. But in my case doesn't works because I want to have a dynamic solution.
Above I'll share a few images of the problem and GitHub Repository with a sample.
Thanks for your attention!
I've manage to do what you need just need to use this as your fragment_sample.xml:
<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="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="#+id/rclItems"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
app:layoutManager="android.support.v7.widget.LinearLayoutManager"/>
<Button
android:id="#+id/btnAddMoreItems"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/rclItems"
android:text="#string/add_1_item"/>
</LinearLayout>
Explanation
Using a LinearLayout gives you the ability to work with weight, and the vertical orientation allows you to place an item below the other. The weight on the recyclerview will increase the height of it as needed until filling the screen. The next item you add would be added to the recyclerview but you'll need to scroll the list to see it
The android developers blog says that :-
The scrolling containers in your bottom sheet must support nested scrolling .
Try changing your fragment_sample.xml as below to make the recyclerview scroll working and to make the add button persistent.
<?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="wrap_content">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:id="#+id/next"
android:layout_above="#id/btnAddMoreItems"
android:layout_height="wrap_content">
<android.support.v7.widget.RecyclerView
android:id="#+id/rclItems"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</android.support.v4.widget.NestedScrollView>
<Button
android:id="#+id/btnAddMoreItems"
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
android:layout_height="wrap_content"
android:text="#string/add_1_item"/>
</RelativeLayout>
Note: making bottomsheet layout a child view of CoordinatorLayout will allow you to get the implement BottomSheetBehavior and recieve its transitions callbacks .
My Layout has a few complex layouts and they are pretty big. That's why I need a ScrollView. But whatever I try it doesn't work.
Here is my layout file:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="fill_parent"
android:fillViewport="true"
android:layout_weight="1"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.33"
android:id="#+id/Linear1"
>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#color/tileColor1"
android:layout_weight="1"
android:id="#+id/tileLayout1"
android:onClick="openFirst"
>
I have only posted a part of it but all the closing tags are ok and inside my RelativeLayout there are 2 textViews and an image. There are 9 more RelativeLayouts with the same structure.
How can I fix the problem and why doesn't it work? It doesn't even show a scrollbar.
EDIT
I have uploaded my full layout to pastebin
EDIT 2
On the developer.android it is said:
You should never use a ScrollView with a ListView, because ListView takes care of its own vertical scrolling. Most importantly, doing this defeats all of the important optimizations in ListView for dealing with large lists, since it effectively forces the ListView to display its entire list of items to fill up the infinite container supplied by ScrollView.
Mine doesn't deal with the scrolling at all. I suppose it is this way because I edit LayoutParams in code. How do I fix this?
1. Try removing android:layout_weight="1" and android:orientation="vertical".
2. Ensure that there is only one ViewGroup inside the ScrollView (i.e. one child as they say). I assume you've done this, but as you haven't provided your full layout I couldn't confirm it.
ScrollView only accepts one child view. So wrap everything inside it in a LinearLayout with wrap_content set as height and you're set.
I had the same problem, and I do not know if my solution helped (mainly because it is a very late response), but my ScrollView not worked since set up a layout that fit exactly on the screen, so it was not necessary to create scrolling. When increased my layout (I put all my items with
android:layout_height = WRAP_CONTENT) became operational.
I have this layout:
All views fill the entire space horizontally, and they're inside a LinearLayout oriented vertically. The blue parts have a fixed height (they have the wrap_content property).
The red part is a ListView. How can I make it fill that center space if there are not enough elements in the list and at the same time preventing it to push the last two elements down if it has more elements?
So far it doesn't push down the two views under it (with the layout_weight="1" property), but if it doesn't have enough elements, it shrinks and makes those two elements go up, leaving an ugly white space under them.
This is what happens:
This is what I expect:
Notice that even though the ListView is smaller, the two last views don't go up.
So far I've tried:
Giving all views a weight (ugly display but sort of works).
Giving each view a size (different results on different devices).
Giving the last view the android:gravity="bottom" property, but the view still goes up.
What may work
I've been messing around and I think a RelativeLayout may work, with a property like layout_alignBottom that instead of aligning to the end of the given view, it aligned to the start of it.
SOLUTION
The solution was to use a RelativeLayout and set the list's layout_above and layout_below properties to that of the elements I want to align it to.
<LinearLayout 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: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"
tools:context="com.stackoverflow.app.MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="48dp"
android:text="#string/hello_world" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="48dp"
android:text="#string/hello_world" />
</LinearLayout>
Here's a couple of options that may work for you. Let me know how it goes.
Option 1:
Set the containing vertical orientated linear layout to fill_parent / match_parent (they are the same). Then set the gravity or layout gravity of the bottom 2 views to bottom.
Option 2:
Contain the list view in a linear layout with a fixed height. Set the list view to wrap_content.
EDIT
You could use relative layouts for this, this link here seems to do what you need
http://www.javacodegeeks.com/2013/10/android-fixed-header-and-footer-with-scrollable-content-layout-example.html
How about wrapping your list view inside the a layout and give the layout the fixed height.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="300dp" >
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
</RelativeLayout>
I want to use two child layout (one linear layout and one relative layout) inside a parent layout (relative layout) in such a way that both of the child layout will take exactly half of the screen and items inside of each child layout will not cause one child layout to get more width than another one!
It is pretty easy, use parameter layout_weight in children of LinearLayout, something like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent">
</RelativeLayout>
<RelativeLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent">
</RelativeLayout>
</LinearLayout>
If I understand correctly from your illustration, the red box is a RelativeLayout, whereas the green boxes are a LinearLayout and a RelativeLayout.
A simple solution would be to center an empty View inside the RelativeLayout and align the two child Views against it:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="#+id/v_center" />
<View
android:id="#+id/v_center"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerInParent="true" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toRightOf="#+id/v_center" />
</RelativeLayout>
A nice little bonus here is that you can provide some spacing between the two by specifying the View's dimensions.
Beware, however, that RelativeLayouts aren't very efficient, and nesting them is an especially bad idea. I suggest using the hierarchy viewer tool to inspect the layout timings to make sure it's relatively fast, and to try to avoid nesting the layouts in this fashion.
So I am developing a screen where there are some images and buttons on top and Below that is a list view which shows a list of some activity.
The design is something like this :-
Now on smaller screen the ListView height becomes very small as the screen space is taken up by the above icons and images.
So how can i increase the height of the Linearlayout or ListView so that user can scroll to the see the rest of the ListView.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
.... Other Layouts .....
<ListView
android:id="#+id/listArea"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:paddingLeft="#dimen/list_padding"
android:paddingRight="#dimen/list_padding" />
</LinearLayout>
Edit: Tried using the top view as a header to the List but since I want an EmptyView too, this is creating a problem as it replaces the whole header + listview
From what I read about that issue, you should specify the Views on top as header of the list, and the'll scroll properly.
Afaik this only works if the list is non-empty, as the empty view replaces the whole list including headers.
You can use the weightSum and layout_weight attributes to control how much of the parent's available space a child view will take up. To use these, a parent layout, for example, your LinearLayout, gets the android:weightSum attribute. Each child layout gets the android:layout_weight attribute, where the sum of all child weights is the weightSum of the parent. In addition, each child should have their layout_height or layout_width set to 0dp, whichever is going to be decided by the weight.
Here's an example based on your diagram. Let's say you want the two top views to take up 1/4 of the screen each, and the ListView to take up the bottom half. Add android:weightSum="4" to your LinearLayout, android:layout_weight="1" to the two child layouts that you represent with ...Other Layouts..., and android:layout_weight="2" to the ListView. Code might look something like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="4">
<ImageView
android:layout_weight="1"
android:layout_height="0dp"
...some other attributes.../>
<LinearLayout
android:layout_weight="1"
android:layout_height="0dp"
android:orientation="horizontal"
...some other attributes...>
...some children of the LinearLayout...
</LinearLayout>
<ListView
android:id="#+id/listArea"
android:layout_width="match_parent"
android:layout_height="0dp"
android:paddingLeft="#dimen/list_padding"
android:paddingRight="#dimen/list_padding"
android:layout_weight="2"/>
</LinearLayout>