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.
Related
My application has a lot of nested recycler views , In one of those I have a layout which holds an image and a textview like this.
The text view is an indicator which would disappear when the user opens that specific course.
And it would become something like this :
Since the indicator is present only on some of the courses , the indicator might disappear (view.gone) and appear (view.visible) on certain conditions.
This is the recyclerview code that holds these courses.
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_video_packs"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_16dp"
android:clipToPadding="false"
android:paddingEnd="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/rv_continue_watching" />
Notice that the recycler view is a wrap content.
When there is a case of multiple courses , some courses might not contain the new video indicator. And if those courses with no indicator is present on the screen then the recyclerview would wrap its height to only hold on to the course image , something like this.
but the issue is , when we scroll horizontally , some courses might contain the indicator , meaning that the recyclerview should increase its height accordingly to accommodate the indicator as well .
Instead recyclerview fails to update its height to wrap around both the view hence resulting in this incomplete view.
This is happening because the recyclerview was unable to update its height when scrolling hence making the view cut in half.
I have tried multiple ways to fix this like ,
Setting setHasFixedSize to false etc . But didnt seem to work
This is happening only sometimes.
The only viable solution now is to fix the recycler view height to a specific height so that it holds both the views.
But I want a more scalable and optimum solution if possible for this .
Is there any way to make recyclerview recalculate its height ?
Recyclerview Item view code.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="true"
android:clickable="true"
android:orientation="vertical"
>
<ImageView
android:id="#+id/iv_learn_item"
android:visibility="invisible"
android:layout_width="134dp"
android:layout_height="200dp"
android:adjustViewBounds="true"
android:layout_marginStart="16dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:foreground="?attr/selectableItemBackground"
/>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/video_update_tv_guideline"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintGuide_begin="195dp"
android:orientation="horizontal"
/>
<TextView
android:id="#+id/video_update_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#id/iv_learn_item"
app:layout_constraintEnd_toEndOf="#id/iv_learn_item"
app:layout_constraintTop_toBottomOf="#+id/video_update_tv_guideline"
android:layout_marginStart="#dimen/dimen_11dp"
android:layout_marginEnd="#dimen/dimen_11dp"
style="#style/content_update_pill"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
Adapter code
rvVideoPacks.layoutManager =
LinearLayoutManager(itemView.context, LinearLayoutManager.HORIZONTAL, false)
rvVideoPacks.setHasFixedSize(false)
rvVideoPacks.itemAnimator = null
rvVideoPacks.isNestedScrollingEnabled = true
rvVideoPacks.adapter = videoPackAdapter
EDIT :
I have also tried to make the indicator invisible , but that just creates an extra space at the bottom , making it look bad.
I want the recyclerview to adjust its height accordingly.
One way to fix this issue is give fix height to main ConstraintLayout if possible for your layout.
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
Hi I have a fragment with two RecyclerViews in it, one above the other.
The first is a list of items for the user to take an action on and the second is where the items will be populated once the action is taken. So when an item is removed from the top list it is added to the bottom list.
The issue I am having is when I remove an item from the top RecyclerView all the remaining items in the top RecyclerView move up to fill in the space left by the removed item, but this leaves a gap between the top and bottom RecyclerViews.
How can I move the bottom recyclerview up to fill in the gap created once an item is removed from the top RecyclerView
Here is my layout xml
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:layout_alignParentTop="true"
android:id="#+id/pending_tasks"
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.v7.widget.RecyclerView
android:layout_below="#id/pending_tasks"
android:id="#+id/completed_tasks"
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
I have tried calling invalidate() on the bottom RecyclerView but that has not worked. Any help would be appreciated, thanks!
It's impossible to update layout size once it's been displayed on the screen. If you modify the content of your RecyclerView you can't just simply refresh the layout to shrink it.
I would suggest using single RecyclerView and storing lower bound of the first list in some variable. Then simply update it accordingly to modifications in your first list.
Another solution which may help you:
Change Relative layout width and height dynamically
I'm trying to build a UI involving RecyclerView or GridView, where i want to set the number of columns automatically depending upon the number and width of the items that i'm populating dynamically.
Here's the image of what i've achieved so far...
Here's the image of what i'm trying to achieve...
My item layout xml
<TextView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:background="#drawable/hollow_white_background"
android:id="#+id/foodItemName"
android:text="PIZZA"
android:gravity="center"
android:textColor="#color/colorGray300"
android:textStyle="bold"
android:textSize="15sp"
android:paddingLeft="10dp"
android:paddingRight="10dp" />
Please Help!
In your xml file, add android:numColumns="auto_fit" and android:stretchmode="columnWidth" attributes for your GridView. First attribute decides how many columns there should be depending on the screen size, and second attribute decides what to do with the extra space left, which in this case increases the column widths.
Try using StaggeredGridLayoutManager as LayoutManager of RecyclerView with fixed width of item_layout.xml
In my layout, I have a textview which I need to be fixed at the top of the screen, a button to be fixed at the bottom of the screen.
Between these two, I have a list with a textview(with a drawable) below it. (please see image). I want the textview positioned below the list;i.e.; as list items grow, the textview should reposition itself. As I click on the textview, I add items to the list. I am able to achieve this, but as my list items increase, the textview goes below the list & is not visible. So what I see on screen is the top textview with the list below it & the bottom button. The textview to add items in list view is not visible, so I cannot add items to my list. I need that even if the list items increase, I want the list to be visible along with the textview.i.e.; as list items grow, the textview should reposition itself. I tried various approaches suggested with several combinations of linear & relative layouts & positioning techniques, but I am not able to achieve this.
Try this..
<?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="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="abc xyz"
android:gravity="center"
android:layout_alignParentTop="true" />
<ListView
android:id="#+id/lv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/button"></ListView>
<TextView
android:layout_below="#+id/lv"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Save"
android:id="#+id/button" />
</RelativeLayout>
You have to nest the layouts here. You could for example use a LinearLayout with vertical orientation as parent and place your textview and listview (or whatver you are using for your item list) inside the LinearLayout. Here's the idea:
-TopView: set to wrap content
-ListView: set to fill parent
-TextView: Set to wrap content
If I'm not mistaken this should set the top and bottom view to fixed sizes and make the ListView fill the remaining space.
You can try adding that button with image as footer to the listview it will work with less noumber of items when it exceed the screen hight remove footer and make the bottom layout visible(Have to add the same footer item in bottom layout also).