Steve Steve - 20 days ago 5
Android Question

Centering custom view inside RecyclerView

I have a cardview item:

<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/card_view"
android:layout_gravity="center"
android:layout_width="330dp"
android:gravity="center"
android:layout_height="190dp"
card_view:cardCornerRadius="4dp"
card_view:cardElevation="10dp"
android:layout_marginTop="0dp"
android:layout_marginBottom="0dp"
android:foregroundGravity="center_horizontal">
<TextView
android:id="@+id/grade"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical|center_horizontal"
android:textSize="30dp" />
</android.support.v7.widget.CardView>


And a layout containing a RecyclerView:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="@style/AppTheme"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal">
<include
layout="@layout/toolbar"
android:id="@+id/tb">
</include>
<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/refresh"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:gravity="center">
<android.support.v7.widget.RecyclerView
android:id="@+id/grade_list"
android:scrollbars="none"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#263238"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal" />
</android.support.v4.widget.SwipeRefreshLayout>
</LinearLayout>


I have an adapter which populates the RecyclerView with the cardview items. However, they are not being centered. Rather, they seem to be aligning to the left of my view. I have tried several solutions including using the following code in my OnCreate method of my RecyclerView's activity:

gradeList = (RecyclerView)findViewById(R.id.grade_list);
LinearLayoutManager lm = new LinearLayoutManager(getApplicationContext());
lm.setOrientation(lm.VERTICAL);
gradeList.setLayoutManager(lm);
gradeList.setAdapter(new RecyclerAdapter(gradeData));
gradeList.addItemDecoration(new RecyclerView.ItemDecoration() {

@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
int totalWidth = parent.getWidth();
int maxCardWidth = getResources().getDimensionPixelOffset(R.dimen.card_width);
int sidePadding = (totalWidth - maxCardWidth) / 2;
sidePadding = Math.max(0, sidePadding);
outRect.set(0,sidePadding,0,sidePadding);
}
});


However, nothing seems to be working.

EDIT: When using a layout as the root of my Card item:

enter image description here

Answer

On the support library at least, the card view layout is embedded in a FrameLayout and this one is the culprit for your problems.

Since you can't mess with it in a clean way, I would suggest embedding your CardView in another layout where you have width=match_parent and its contents are centered. I tried with LinearLayout:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center">
    <android.support.v7.widget.CardView>
        ...
    </android.support.v7.widget.CardView>
</LinearLayout>
Comments