Center items in RecyclerView grid - android

I have main layout which includes my View which have RecyclerView and have grid applied on it. Now items have default width because of drawable i apply, and now they are aligned to left instead to center what i want to achieve.
My main layout:
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dp"
android:layout_height="0dp"
android:id="#+id/main_view"
xmlns:app="http://schemas.android.com/apk/res-auto">
<include android:id="#+id/constraint_more"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:visibility="gone"
layout="#layout/list_more_view"/>
</android.support.constraint.ConstraintLayout>
More layout:
<?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"
android:id="#+id/list_more_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/list_more_bg">
<TextView
android:id="#+id/textview_title_more"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:gravity="center_vertical"
android:paddingLeft="20dp"
android:shadowRadius="2"
android:text="#string/title"
android:textColor="#color/list_text_color"
android:textSize="25dp"/>
<ImageView
android:id="#+id/button_closemore"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:contentDescription="#string/close_button"
android:src="#drawable/btn_close"
app:layout_constraintBottom_toBottomOf="#id/textview_title_more"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerview_morelist"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/textview_title_more" />
</android.support.constraint.ConstraintLayout>
And the item layout:
<?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"
android:id="#+id/constraintlayout_item_view"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:background="#drawable/plate_basic">
<TextView
android:id="#+id/textview_unit_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:maxLines="2"
app:autoSizeTextType="uniform"
android:textColor="#color/item_text_color"
android:paddingTop="#dimen/tile_title_padding"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
So the thing is items in this more view are all aligned to left but i want the whole view of items centred, i tried with setting the width to wrap content and than centring with gravity but no success.

Change constraintlayout_item_view to have:
android:layout_width="match_parent"
Then set textview_unit_title to have:
android:layout_width="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
That should place the TextView centered inside its row.
In addition, your main layout's width and height are a little strange:
android:layout_width="0dp"
android:layout_height="0dp"
They should probably both be match_parent

Related

RecyclerView inside of NestedScrollView only showing 1 element at a time

I have a RecyclerView inside of a NestedScrollView, my problem is that the RecyclerView is very short, only large enough to show 1 element at a time. The dataset is small (3-5 elements) so my goal is to show all elements at once.
I've tried disabling nested scrolling, changing the layout_height to wrap_content/match_parent, etc. but to no avail.
Code:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:paddingBottom="52dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="2dp">
<!-- A bunch of other layouts -->
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/documents_rv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:paddingBottom="8dp"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#id/title"
app:layout_constraintTop_toBottomOf="#id/doc1"
tools:visibility="visible"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
Update, item xml (I know it could be replaced with just 1 TextView, but for now it will stay as is):
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
android:layout_marginTop="4dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/doc_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_doc"
tools:ignore="ContentDescription" />
<TextView
android:id="#+id/doc_name"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="4dp"
android:gravity="center_vertical" />
</LinearLayout>
Not an ideal solution since it uses nested layouts, but I was able to display all items by wrapping my RecyclerView in a RelativeLayout:
<RelativeLayout
android:id="#+id/list_container"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:paddingBottom="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#id/title"
app:layout_constraintTop_toBottomOf="#id/title">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/documents_list"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>

RecyclerView card items not centering, when RecyclerView parent is ConstraintLayout?

I have a list of card views which has the flag of the country and name of it. The CardView has a ConstraintLayout as a child for aligning the views inside, and has a LinearLayout as parent.
The RecyclerView in MainActivity has a ConstraintLayout as Parent(which is the parent view by default created by AndroidStudio when doing a new project)
<?xml version="1.0" encoding="utf-8"?> <!-- MAIN ACTIVITY XML-->
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_marginTop="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="#dimen/card_view_item_main_width"
android:layout_height="#dimen/card_view_item_main_height">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/countryCardImage"
android:layout_width="match_parent"
android:layout_height="128dp"
android:contentDescription="#string/imagen_pais"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"/>
<TextView
android:id="#+id/countryCardText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintVertical_bias="1"
/>
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?> <!-- ITEMMAIN.XML -->
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".main.ui.main.MainActivity">
<android.support.v7.widget.RecyclerView
android:id="#+id/listMain"
android:layout_width="0dp"
android:layout_height="0dp"
android:scrollbars="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintHorizontal_weight="0"
/>
</android.support.constraint.ConstraintLayout>
In your item root view, the layout_gravity="center" is not going to work on LinearLayout with layout_width="wrap_content: on a RecyclerView, so you could try changing its width to match_parent, and either change the gravity to android:gravity="center" or move android:layout_gravity="center" to its child view:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_marginTop="10dp"
android:layout_width=“match_parent”
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="#dimen/card_view_item_main_width"
android:layout_height="#dimen/card_view_item_main_height"
android:layout_gravity="center">
The problem is in layout item, you set the layout_width="wrap_content" in LinearLayout, and in main layout, layout_width in Recyclerview is 0dp (must be match_parent) so it's not center in main layout because the main layout depend on item layout => wrong with this case.
In your layout item, change like this:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">

Recyclerview first item start margin

How do I align the first item to tvFoo when starting the fragment (without putting theRecyclerView inside another container)?
Right now, tvFoo is separated 16dp from the left edge and the first item from the list, only 8dp.
What I want is that the horizontal list is visible completely across the screen when scrolling (but at the beginning it is 16dp from the left).
This is what I have
This is what I want
fragment_foo.xml
<?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="wrap_content">
<TextView
android:id="#+id/tvFoo"
style="#style/Tv.16.Black"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="#string/foo"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/tvCount"
style="#style/Tv.13.Gray"
android:layout_marginStart="4dp"
app:layout_constraintBottom_toBottomOf="#id/tvFoo"
app:layout_constraintStart_toEndOf="#id/tvFoo"
app:layout_constraintTop_toTopOf="#id/tvFoo"
tools:text="(21)"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/rv"
style="#style/WrapContent"
android:layout_marginTop="16dp"
app:layout_constraintTop_toBottomOf="#id/tvFoo"
tools:layoutManager="android.support.v7.widget.GridLayoutManager"
tools:listitem="#layout/item_foo"
tools:orientation="horizontal"/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="16dp"
android:background="#color/colorPrimaryLight"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/rv"/>
</android.support.constraint.ConstraintLayout>
item_foo.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
style="#style/WrapContent"
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_marginStart="8dp"
android:background="?selectableItemBackground">
<ImageView
android:id="#+id/ivFoo"
android:layout_width="160dp"
android:layout_height="90dp"
android:background="#color/lightGray"
android:padding="16dp"
android:src="#drawable/ic_picture_64dp"/>
</android.support.constraint.ConstraintLayout>
Add padding to your RecyclerView and Use
android:clipToPadding = "false"
inside your RecyclerView, to disable padding while scrolling it.
<android.support.v7.widget.RecyclerView
android:id="#+id/rv"
style="#style/WrapContent"
android:layout_marginTop="16dp"
android:padding="16dp"
android:clipToPadding = "false"
app:layout_constraintTop_toBottomOf="#id/tvFoo"
tools:layoutManager="android.support.v7.widget.GridLayoutManager"
tools:listitem="#layout/item_foo"
tools:orientation="horizontal"/>

How can I center a fragment?

I have a fragment THAT IS RIGHT JYSTFIED NOW, IS THEFRE A WAY TO CENTER IT?
XML
<?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="com.example.tedpo.bitcoinproject2.MainActivity">
<fragment
android:id="#+id/headlines_fragment"
android:name="com.example.tedpo.bitcoinproject2.BlankFragment"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendMessage"
android:text="Add Excahnge"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Use layout_gravity="center" which tells Android how to align the view relative to the parent.
If you want, in your parent view, you can use gravity="center" which tells the view how to layout its content.

How to center RecyclerView items horizontally with vertical GridLayoutManager

I have a vertical RecyclerView using a GridLayoutManager. I want each column to be centered, but the columns begin all the way on the left. In the following picture you can see what I'm talking about. I used the ugly color scheme to illustrate the columns and background. The green is the background for each item in the RecyclerView, the red is the background of the RecyclerView itself:
http://imgur.com/a/J3HtF
I'm setting it up with:
mRecyclerView.setLayoutManager(new GridLayoutManager(this, 2));
Here's the column_item.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="120dp"
android:layout_height="180dp"
android:orientation="vertical"
android:padding="4dp">
<ImageView
android:id="#+id/movie_column_photo"
android:layout_width="80dp"
android:layout_height="120dp"/>
<TextView
android:id="#+id/movie_column_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
Here's the recyclerview xml:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.RecyclerView
android:id="#+id/company_details_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical">
</android.support.v7.widget.RecyclerView>
</LinearLayout>
Try letting the column item fill the width of the column while centering everything inside:
<?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="180dp"
android:orientation="vertical"
android:padding="4dp">
<ImageView
android:id="#+id/movie_column_photo"
android:layout_width="80dp"
android:layout_height="120dp"
android:layout_gravity="center_horizontal"/>
<TextView
android:id="#+id/movie_column_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"/>
</LinearLayout>
To restate #kris larson's answer;
If you are using ConstraintLayout, adding android:layout_gravity="center" or android:layout_gravity="center_horizontal" to the parent layout in item's XML would be enough (the first parent in hierarchy).
In your case, the codes would be something similar to this:
<android.support.constraint.ConstraintLayout
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_width="match_parent"
android:layout_height="180dp"
android:orientation="vertical"
android:padding="4dp"
android:layout_gravity="center">
<ImageView
android:id="#+id/movie_column_photo"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_width="80dp"
android:layout_height="120dp"/>
<TextView
android:id="#+id/movie_column_title"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.constraint.ConstraintLayout>
Simply set the width of the root layout for your column_item.xml to match_parent will center RecyclerView items horizontally.
Wrap your recyclerview inside the constraintlayout, something like this:
<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="match_parent"
android:layout_height="match_parent" >
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/book_list"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:spanCount="2" />
Hope it helps!!

Categories

Resources