Fill up A RecyclerView Without Scrolling - android

So I have a RecyclerView that uses a GridLayoutManager and uses a super simple adapter that does nothing besides put text in textviews.
My issue is that I want the text to evenly fill out the entire grid (down to the buttons) while making the grid not scrollable. I just want a grid that doesn't scroll and fills up the layout.
Here is what I currently have (the grid is everything between the "you win" and the buttons at the bottom):
val numberOfColumns = 3
resultsRecyclerView.layoutManager = GridLayoutManager(this, numberOfColumns)
val adapter = GridAdapter(this, gridData)
resultsRecyclerView.adapter = adapter
grid item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:padding="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="24sp"
android:textColor="#color/textColor"/>
</LinearLayout>
I was told this would be a good way of making a grid without doing each textview individually. Is there a better way of making a non-scrollable, evenly spaced grid? Any help is appreciated.

Try changing linear layout's layout_weight property.

The RecyclerView has scrolling baked in the widget. If you just need data on the screen consider the ScrollView and add these two lines of code
View.setVerticalScrollBarEnabled(false);
View.setHorizontalScrollBarEnabled(false);
Then I am guessing just put a bunch of TextViews in the ScrollView to display data

I think what you're trying to reach for a non-scroll list is:
GridLayoutManager glm = new GridLayoutManager(this, 3) {
#Override
public boolean canScrollVertically() {
return false;
}
}
It's in Java but not hard to port it to Kotlin, hope it helps.

Related

Android recyclerview itemDecoration divider is invisible until scroll

I've got a simple RecyclerView like this:
<android.support.v7.widget.RecyclerView
android:id="#+id/tempRv"
android:layout_width="match_parent"
android:layout_height="match_parent"
</android.support.v7.widget.RecyclerView>
I add divider in onCreate() method in Fragment:
mRv = (RecyclerView) view.findViewById(R.id.tempRv);
mRv.addItemDecoration(new DividerItemDecoration(getContext(), DividerItemDecoration.VERTICAL));
I also have a simple Adapter that holds the items.
The problem is, that the divider is not visible until I scroll Up or Down the recyclerView.
I tried:
Scrolling programmatically by using scrollTo(position) method to
the last item and the first item right after updating items in the
adapter.
Adding NestedScrollView as a parent and scrolling
programmaticaly the scrollView by fullScroll(View.FOCUS_UP).
Nothing helps. The dividers are visible only after physical scrolling.
The wierd thing is that I have another RecyclerViews that work fine.
EDIT
Due to Sharan Salian request to add the item layout to the post so he could reproduce this behaviour, I actually tried to reproduce it by myself. The item parent layout is:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:transitionGroup="true"
android:background="?android:attr/selectableItemBackground"
android:padding="16dp">
...
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
...
</RelativeLayout>
I didn't mention before that I'm using the item as a SharedElement, that's why I added an attribute android:transitionGroup="true" to the parent tag.
After removing this attribute, the DividerItemDecoration works fine. Once I add it, the divider is invisible until the scroll.
Seems like just a bug.
Recycler View Divider Programmatically
mRv.addItemDecoration(new DividerItemDecoration(getContext(), LinearLayout.VERTICAL));
Try this above code snippet replace with LinearLayout.Vertical & let me know.
Can you show your item layout that you are inflating in the Adapter?
I think your item layout has an android:orientation = "horizontal" & you want a vertical divider. It's just an assumption as there is a very few insights I'm getting from the Question.

HorizontalScrollView's child not matching it's parent view's width even on setting android:layout_width="match_parent"

I want to display a horizontal list of scrollable buttons at top of the phone screen containing 30 items, for this purpose I am using a HorizontalScrollView with a LinearLayout with "horizontal" orientation as it's child but the linear layout is not taking up the entire phone width even on setting its width as "match-parent". Here's the code :
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_gravity="center">
<GridView
android:id="#+id/gridView_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:stretchMode="columnWidth" />
</LinearLayout>
</HorizontalScrollView>
Here is shown in the image that linear layout is not taking up the entire space and LinearLayout is only covering some of the space. Also on changing the size to a fixed size, I noticed that the HorizontalScrollView was actually behaving like a vertical Scroll View only.
NOTE: Also if there is an alternative way to display a horizontal list of buttons with 30 items with numbers from 1 to 30 on it, please suggest it.
To achive this easily you may use Recyclerview with Horizotanl Layout Manager.For Example
recycler_view.setLayoutManager(new LinearLayoutManager(MainActivity.this, LinearLayoutManager.HORIZONTAL, false));
I don't think you need a HorizontalScrollView with a nested LinearLayout for what you are trying to achieve. It would be a better idea to simply use a horizontal RecyclerView if your button layouts are similar and the functionality of the buttons is similar too. Refer to this answer for help https://stackoverflow.com/a/40584425/9119277

RecyclerView with GridLayoutManager - layouting items

I have a simple layout with a recycler. I feed it with Adapter and set GridLayoutManager for the recycler.
<android.support.v7.widget.RecyclerView
android:id="#+id/scripts_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="50dp"
android:verticalSpacing="20dp"
android:clipToPadding="false"
android:orientation="vertical"
app:layoutManager="android.support.v7.widget.GridLayoutManager"
tools:listitem="#layout/tmpl_script"
android:paddingBottom="20dp"
android:layout_marginEnd="20dp"
android:layout_marginRight="20dp"
android:paddingTop="30dp"
app:layout_gravity="center" />
Activity
RecyclerView recyclerView = (RecyclerView)findViewById(R.id.scripts_recycler_view);
recyclerView.setAdapter(adapter);
int columns = getResources().getInteger(R.integer.scripts_columns);
recyclerView.setLayoutManager(new GridLayoutManager(this, columns));
recyclerView.setHasFixedSize(true);
Item
<LinearLayout
android:layout_width="300dp"
android:layout_height="300dp"
android:background="#drawable/game_border"
android:gravity="center"
android:orientation="vertical">
I have two problems:
there is no space between rows
items are not centered within the row
I tried all properties in Android Studio but they do not have any effect. I googled, opened many questions but I still have no luck. What magic property shall I use?
As you can see items are positioned on left side of the screen. I want to move it to center. And there is no space between first and second row.
The easiest solution for (1) is to add top and/or bottom margin, like #suraj said.
Regarding (2) - the critical issue is that your items are square. To get it working, set android:layout_width="match_parent" and change the design of your items to use the actual smaller dimension (width or height) for both dimensions (maybe all you need to do in your case is to make the background square). Then display the content centered within the item's LinearLayout (you are already doing this). You have to do it this way because GridLayoutManager does not support layout_gravity at this time.
For 1.there is no space between rows
Try android:layout_marginBottom="10dp" in the linear layout of item.This should provide the spacing below each item.
For 2.items are not centered within the row
Looks like you have given right margin to your recyclerview and no left margin.
android:layout_marginLeft="20dp"
android:layout_marginStart="20dp"
should give equal spacing on both sides.
or set
app:layout_gravity="center"
in linear layout of the item.

Android - Difference between Gridlayout and Staggered Gridlayout

I am working in android material design api & want to display some data in grid format. I tried both GridLayout and StaggeredGridlayout and both look same. For general information, i want to ask what is the difference between Gridlayout and StaggeredGridlayout?
Thank you.
Grid View : It is is a ViewGroup that displays items in a two-dimensional, scrollable grid. In this each Grid is of same size (Height and width). Grid View shows symmetric items in view.
Staggered Grid View : It is basically an extension to Grid View but in this each Grid is of varying size(Height and width). Staggered Grid View shows asymmetric items in view.
Tutorial to implement Staggered Grid View :
Staggered Grid View
Pinterest Masonry layout Staggered Grid View
My time at Oodles Technologies taught me about staggered.
I'll share that.
StaggeredGridLayout is a LayoutManager, it is just like a GridView but in this grid each view have its own size (height and width). It supports both vertical and horizontal layouts.
Below are some basic steps to create a staggered grid:
1) Create a view.
As we know StaggeredGrid is not a direct view, it is a LayoutManager that lays out children in a staggered grid formation. We use RecyclerView as a view for the staggerd grid.
Here is our RecyclerView in layout:
<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.support.v7.widget.RecyclerView
android:id="#+id/favPlaces"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
2) Set StaggeredGridLayout LayoutManager.
Once our view is ready, let's use LayoutManager to create grids on the view:
RecyclerView favPlaces = (RecyclerView) findViewById(R.id.favPlaces);
StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL);
layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE);
favPlaces.setLayoutManager(layoutManager);
favPlaces.setHasFixedSize(true);
3) Adapter to inflate the StaggeredGrid views.
To inflate the data in form of a grid, we first need a layout which will represent that data. We are using CardView for this and the layout is:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardcornerradius="4dp"
app:cardusecompatpadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
android:orientation="vertical">
<ImageView
android:id="#+id/placePic"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustviewbounds="true"
android:scaletype="fitXY" />
<TextView
android:id="#+id/placeName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textsize="16sp" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
After we setup our all the basic steps, it's time to complete our main activity. Here is the complete code of MainActivity:
public class MainActivity extends AppCompatActivity {
int placeImage[]= {R.drawable.agattia_airport_lakshadweep,R.drawable.nainital,R.drawable.goa,
R.drawable.lotus_temple,R.drawable.valley_of_flowers,R.drawable.ranikhet,R.drawable.dehradun,R.drawable.nainital1};
String placeName[]= {"Lakshadweep, India","Nainital, India","Goa, India","Lotus-Temple, India","Valley-Of-Flowers, India","Ranikhet, India",
"Dehradun, India","Nainital, India"};
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
RecyclerView favPlaces = (RecyclerView) findViewById(R.id.favPlaces);
StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL);
layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE);
favPlaces.setLayoutManager(layoutManager);
favPlaces.setHasFixedSize(true);
ArrayList<PlaceDetails> placeList = getPlaces();
StaggeredAdapter staggeredAdapter = new StaggeredAdapter(placeList);
favPlaces.setAdapter(staggeredAdapter);
}
private ArrayList<PlaceDetails> getPlaces() {
ArrayList<PlaceDetails> details = new ArrayList<>();
for (int index=0; index<placeImage.length;index++){
details.add(new PlaceDetails(placeImage[index],placeName[index]));
}
return details;
}
}
StaggeredGridlayout
This lays out children in a staggered grid formation.
It supports horizontal & vertical layout as well as an ability to layout children in reverse.
Staggered grids are likely to have gaps at the edges of the layout.
To avoid the gaps, StaggeredGridLayoutManager can offset spans independently or move items between spans. You can control this behavior via setGapStrategy(int).
GridLayout
This lays out its children in a rectangular grid.
The grid is composed of a set of infinitely thin lines that separate the viewing area into cells.
Children occupy one or more contiguous cells, as defined by their rowSpec and columnSpec layout parameters.
A staggered grid Layout includes multiple columns with multiple rows of varying sizes.
It allows for a flexible column/row view with a header and footer and looks fairly easy to implement, though Gradle users will have an easier time than those working with Eclipse and Ant. This is what the view looks like in the Etsy Github app for which it was developed.
Whereas a GridLayout is a layout that places its children in a rectangular grid.
It was introduced in API level 14, and was recently backported in the Support Library. Its main purpose is to solve alignment and performance problems in other layouts. Check out this tutorial if you want to learn more about GridLayout.

Two recycler view in same layout as in flipboard app

I want to use a RecyclerView(list like) below another RecyclerView(Grid like) as in flipboard
I tried two RecyclerView inside ScrollView with wrap content but nothing is showing.
I can able to see two views if it is placed in linear layout and equal weight is added to it. But that does not look like this app View.
This is my layout
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="#+id/parent_category_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minWidth="#dimen/default_small_padding"
android:gravity="center"
android:visibility="visible"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/category_grid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnWidth="150dp"
android:gravity="center"
android:visibility="visible"/>
</LinearLayout>
There's actually a really simple way to achieve the desired layout with just one RecyclerView!
The key is using a GridLayoutManager and its SpanSizeLookup.
First of all define your GridLayoutManager like this:
GridLayoutManager layoutManager = new GridLayoutManager(context, spanCount);
where spanCount is the maximum amount of spans/columns you want to have. In your case, spanCount should be 2;
Now you need a way to tell this layoutManager how many spans an item should span.
A simple way would be to use a viewtype/ViewHolder for items that should span just one column and another one for items that span the whole width.
Let's assume you define the viewtype for grid-items as VIEWTYPE_GRID_ITEM and the viewtype for standard listitems as VIEWTYPE_LIST_ITEM.
You can then use these viewtypes to tell the layoutManager when to use just one span:
layoutManager.setSpanSizeLookup(new SpanSizeLookup() {
#Override
public int getSpanSize(int position){
return adapter.getItemViewType(position) == VIEWTYPE_GRID_ITEM ? 1 : spanCount;
}
});
Finally, set the layoutManager to your RecyclerView:
recyclerView.setLayoutManager(layoutManager);
And that's it!
I don't think that they use two ListViews (or ListView + GridView).
I think they use a ListView ( the one in the bottom) and they add a custom Header to this list (the one in the top), which look like a GridView.
Or if they use a Recyclerview, they can achieve this by using a different layout in the adapter for the first item.
PS: it's not recommended to use two scrollable view inside each other (like Recyclerview inside ScrollView).
In android we are advise to use only one scrollable view at time , if you want to use one scrollable view inside other one refer below links.
1)Android list view inside a scroll view
2) https://stackoverflow.com/questions/6210895/listview-inside-scrollview-is-not-scrolling-on-android

Categories

Resources