Centering cards in RecyclerView - android

The question is pretty straightforward, I've a CardView in a RecyclerView using a GridLayout with 2 columns.
The colors are just to make easy to see the components...
white is the LinearLayout
blue is the RecyclerView
green is the CardView
I want the cards be centered in the view with some margin from the edge... but i couldn't achieve it doesn't matter what I do. (this is what I want, made on paint)
If it is not possible, i would be okay with the cards aligned to the edge with all margin left between then
HERE GOES THE CODE:
This is the CardView:
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/cardView"
android:layout_width="#dimen/influencerCardSize"
android:layout_height="#dimen/influencerCardSize"
android:layout_gravity="center"
android:layout_marginBottom="#dimen/smallMargin"
card_view:cardBackgroundColor="#android:color/holo_green_dark"
card_view:cardElevation="0dp"
card_view:layout_anchorGravity="center_horizontal">
This is the RecyclerView
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="#dimen/influencersViewHeight"
android:layout_gravity="center"
android:layout_margin="#dimen/smallMargin"
android:background="#android:color/holo_blue_bright"
android:scrollbars="vertical"
android:visibility="visible" />

Try having you card view inside the Linear layout
Like :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_margin="10dp"
android:id="#+id/cardView"
card_view:cardBackgroundColor="#android:color/holo_green_dark"
android:layout_width="match_parent"
android:layout_height="150dp"
</android.support.v7.widget.CardView>
</LinearLayout>
Your RecyclerView looks good.
Then if you want only two card per row .. try using AutoFitGridLayoutManager for the recycler view
Like:
AutoFitGridLayoutManager layoutManager = new AutoFitGridLayoutManager(context, width);
recyclerView.setLayoutManager(layoutManager)

Related

How to change bottom margin of swipeRefreshlayout programmatically?

I have such layout:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
tools:context=".jobAGENT.JobsList">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="75dp"
android:gravity="center_horizontal"
android:text="#string/no_jobs"
android:textSize="32sp"
android:textStyle="italic"
android:visibility="gone" />
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/refresh_t"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="5dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="5dp"
android:background="#color/white">
<android.support.v7.widget.RecyclerView
android:id="#+id/job_list_t"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="10dp" />
</android.support.v4.widget.SwipeRefreshLayout>
<ProgressBar
android:id="#+id/loader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:visibility="gone" />
</RelativeLayout>
I would like to change margin of RecyclerView and SwipeRefreshLayout programmatically when I reach some conditions. For example, at my onScrollListener when my list reaches its end I would like to change bottom margin of my views and show progressbar below it. I saw this and this questions and I have also managed to change margin of refreshLayout but the last item of RV become cut and I think that I have to change margin of RV also. But I can't get layout params of this view. For refreshLayout I used smth like that:
val param = refreshLayout.layoutParams as RelativeLayout.LayoutParams
param.setMargins(5,10,5,150)
refreshLayout.layoutParams = param
and it works good, but how I can also change margin of recyclerview which is placed inside refresh layout?
Last item in your RecyclerView cuts, meaning, you'll have to add padding only to the last element of RecyclerView, instead of giving padding to complete RecyclerView.
You can do that by setting android:clipToPadding="false", and giving it paddingBottom equal to the height of your SwipeRefreshLayout.
You can do that as follows:
<android.support.v7.widget.RecyclerView
android:paddingBottom="56dp"
android:clipToPadding="false"
android:layout_width="match_parent"
android:layout_height="match_parent" />
Adjust the paddingBottom as per your need.
A suggestion, instead add the progress bar as an item of the recyclerview at the last position when you reach the scroll end... this will ensure that the bar is displayed.. It is easy enough to have multiple types of viewholders in a recyclerview and this should solve your issue without needing to add any margin/padding
try this..
RecyclerView.LayoutParams params = new RecyclerView.LayoutParams(
RecyclerView.LayoutParams.MATCH_PARENT,
RecyclerView.LayoutParams.MATCH_PARENT
);
params.setMargins(50, 50, 50, 50);
jobListT.setLayoutParams(params);

Custom view with horizontalScrollview in RecyclerView match_parent not working

I have a RecyclerView that includes my custom view.
My custom view not get all the width even so I configure it as match_parent.
what i want is that the horizontal scroll view will take all screen, and also the card will take screen width (so the yelow part will stay outside at beginning)
I've tried to use LayoutInflater.from(getContext()).inflate(R.layout.view_home_screen_card, (ViewGroup) this, false), but didn't work
Also I've tried to set width programmatically, but I'm seeing the wrong size for few milliseconds before it's change and its look ugly.
The weird thing is that when i'm taking out the horizontal scroll view, the view take all place.
attached the layout
<?xml version="1.0" encoding="utf-8"?> <merge
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="wrap_content">
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/horizontal_scroll_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:scrollbars="none">
<LinearLayout
android:id="#+id/view_home_card_and_button_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="100dp"
android:layout_height="150dp"
android:background="#color/amber_200" />
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/half_unit"
app:cardCornerRadius="#dimen/8dp">
</android.support.v7.widget.CardView>
</LinearLayout>
</HorizontalScrollView>
</merge>
any more ideas?
Is your recyclerview have match_parent width? If no then make it.

A big white space area is showing at the bottom of my ScrollView in my case

I have a ScrollView inside which a ConstraintLayout, inside the ConstraintLayout there is a RecyclerView.
The structure is like this:
<ScrollView
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_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical"
android:fillViewport="true"
android:overScrollMode="never">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="#+id/my_list"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginBottom="8dp"
android:layout_marginTop="15dp"
android:clipToPadding="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintVertical_bias="0.0" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
My code populate a list of objects to the RecyclerView, no problem there. The only problem is there is a big white space area showing at the bottom of the ScrollView , I can't understand why? Could someone please point me to the right direction? Thanks in advance!
(A problem with this result is that for example if I have only one object in my list, there is no need to scroll the view, but it is still scrollable with the big white space area at the bottom.)
Lost the ScrollView, RecyclerView can scroll on its own.
Also match_parent is not supported by ConstraintLayout
You need to constraint all sides to the parent and have 0dp (match_constraint) for width and height
<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"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="#+id/my_list"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="parent"
android:layout_marginBottom="8dp"
android:layout_marginTop="15dp"
android:clipToPadding="false"
/>
</android.support.constraint.ConstraintLayout>
Notes
Your ConstraintLayout has match_parent for width and height.
You RecyclerView has 0dp for width and height, which means to match the constraint, and your RecyclerView is constraint to all sides to the parent.
You recycler view will scroll when content is more that fits on screen
After using wrap_content instead of match_content for RecyclerView, my problem get solved.
This is a ConstraintLayout bug (when wrapping a ConstraintLayout in a ScrollView) and was fixed in the new beta release. I had the same issue and updated to 1.1.0-beta4 and that solved it. Check here for latest releases:
https://dl.google.com/dl/android/maven2/com/android/support/constraint/group-index.xml

RecyclerView inside a ScrollView/NestedScrollView does not scroll properly

I have a layout which has a CardView and a FloatingActionButton associated with it. There is a list of replies below the CardView (which is a RecyclerView). Sometimes the CardViews' height is greater than the screen, so I have used layout_height="wrap_content" for the CardView and wrapped the whole LinearLayout inside a ScrollView.
However, this causes a problem(since it is a scrolling view inside a ScrollView) while scrolling the items of the RecyclerView. As suggested in some of the questions and answers posted, I have used both the NestedScrollView and the android:nestedScrollingEnabled="true" tag but the scrolling in the RecyclerView is still bad.
Here is my Layout file -
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.forum.reply.ReplyActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/reply_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:titleTextColor="#android:color/white"/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:nestedScrollingEnabled="true"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:id="#+id/topic_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="#dimen/card_margin"
android:paddingLeft="#dimen/card_margin"
android:paddingRight="#dimen/card_margin"
android:paddingTop="#dimen/card_margin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingEnd="#dimen/card_margin"
android:paddingStart="#dimen/card_margin">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/topic_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:textAppearance="#style/TextAppearance.AppCompat.Title"/>
<android.support.v7.widget.AppCompatTextView
android:id="#+id/topic_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"/>
</LinearLayout>
</android.support.v7.widget.CardView>
<ProgressBar
android:id="#+id/reply_progressbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:indeterminate="true"
android:visibility="visible"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/list_of_replies"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="invisible"/>
</LinearLayout>
</ScrollView>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/reply_to_topic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/ic_reply_white_24dp"
app:layout_anchor="#id/topic_card"
app:layout_anchorGravity="bottom|right|end"/>
</android.support.design.widget.CoordinatorLayout>
Here are some images -
When you have multiple scrolling Views in your layout (eg. RecyclerView + ScrollView) and when you scroll while in your recyclerView, the recyclerView scrolls with the parent Scrollview. this causes jitters in RecyclerView. You can avoid this jitter by the following.
You can add android:nestedScrollingEnabled="false"
to your RecyclerView in XML or recyclerView.setNestedScrollingEnabled(false);
to your RecyclerView in Java.
If you want to support devices older than api 21 then you should use
ViewCompat.setNestedScrollingEnabled(mRecyclerView, false);
in your Activity/Fragment
You have to do multiple tasks:
put your recyclerview inside a android.support.v4.widget.NestedScrollView instead of normal ScrollView
set your recyclerview android:nestedScrollingEnabled="true" in layout XML file
to support devices older than API 21 then you should use ViewCompat.setNestedScrollingEnabled(mRecyclerView, false) in your code
set your RecyclerView height to android:layout_height="wrap_content" (or width if it is horizontal!)
Besides Setting the android:nestedScrollingEnabled="false" you need to make sure that the parent of the RecyclerView is a android.support.v4.widget.NestedScrollView
I had troubles that the RecyclerView did not measure properly (on big screens) when it was in a standard ScrollView
if you want to scroll RecyclerView inside ScrollView and ScrollView prevents from scrolling RecyclerView (in API 16 this occurred) you should use android.support.v4.widget.NestedScrollView
instead of ScrollView and also you must set
nestedScrollView.setNestedScrollingEnabled(false);
by this way you can prevent from scrolling nestedScrollView when you scroll RecyclerView.
hope this help some one
I have this problem ,solving it with :
custom ScrollView and override onInterceptTouchEvent to return false.
hope it's help someone/

Android: why are CardView margins not showing white background?

I have set up a CardView in a RecyclerView list. The layout_marginTop and layout_marginBottom are showing a grey color rather than the white background I had hoped to see (image below). Any ideas on how to get the top and bottom margins to show a white background?
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
card_view:cardCornerRadius="6dp"
android:layout_margin="4dp">
<TextView
android:id="#+id/cardText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:background="#android:color/white" />
</android.support.v7.widget.CardView>
Removed the TextView background and added this background to the CardView:
"card_view:cardBackgroundColor="some color""
Add some margin to card
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="7dp"
app:cardCornerRadius="2dp"
app:cardElevation="4dp">
</android.support.v7.widget.CardView>
Make sure you're actually populating it with data from your domain model, i.e. check that you've implemented <data> and <variable> tags and that you've set your android:text="#{}" to the appropriate object.

Categories

Resources