Centralizing RecyclerView with LinearLayoutManager

Question

I am trying to centralize a RecyclerView list in the screen. Its going to be a single list, so I will use the LinearLayoutManager (LLM). However using the LLM its not centralizing the items, and it looks like this on the landscape mode:

The XML code looks like this:

<FrameLayout 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:orientation="vertical" android:layout_width="match_parent"

    android:layout_height="match_parent">

    <android.support.v7.widget.CardView
        android:id="@+id/recipe_card"
        android:layout_gravity="center"
        android:layout_width="400dp"
        android:layout_height="186dp"
        style="@style/CardViewStyle">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">


            <ImageView
                android:id="@+id/recipe_image"
                android:layout_width="120dp"
                android:layout_height="163dp"
                app:srcCompat="@mipmap/ic_pan"
                app:layout_constraintTop_toTopOf="parent"
                android:layout_marginTop="8dp"
                app:layout_constraintBottom_toBottomOf="parent"
                android:layout_marginBottom="8dp"
                android:layout_marginLeft="8dp"
                app:layout_constraintLeft_toLeftOf="parent"
                tools:layout_editor_absoluteY="3dp" />

            <TextView
                android:id="@+id/recipe_name"
                android:layout_width="250dp"
                android:layout_height="119dp"
                android:text="TextView"
                app:layout_constraintLeft_toRightOf="@+id/recipe_image"
                android:layout_marginLeft="8dp"
                app:layout_constraintTop_toTopOf="parent"
                android:layout_marginTop="16dp" />

            <TextView
                android:id="@+id/recipe_servings"
                android:layout_width="164dp"
                android:layout_height="32dp"
                android:text="TextView"
                android:layout_marginTop="8dp"
                app:layout_constraintTop_toBottomOf="@+id/recipe_name"
                app:layout_constraintBottom_toBottomOf="parent"
                android:layout_marginBottom="8dp"
                app:layout_constraintLeft_toRightOf="@+id/recipe_image"
                android:layout_marginLeft="94dp"
                app:layout_constraintVertical_bias="0.0" />
        </android.support.constraint.ConstraintLayout>

    </android.support.v7.widget.CardView>

</FrameLayout>

On the Android Studio's Preview, it looks fine, but on the app, it does not. I manage to fix it by changing the LLM for a GridLayoutManager with only one column. But it looks ugly.

Does anyone knows what is going on? Thanks.

Answer 1

Try to set the content gravity of main layout to center. There are two ways to do that:

1. Add "centerHorozontal" property to "true" to your frame layout.
2. Change your frame layout to linear layout and set gravity of main linear layout to "center".

Hope it will work, if it doesn't then just send me the images you are using in your layout, I'll try to fix it by using some other techniques and will send you the updated code.

Answer 2

Replace constraint layout with Relative layout

Then, make the image be central, use this

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:clickable="true"
        android:scaleType="centerCrop" />

Then also make each of those texts be central

android:textAlignment="center"

Answer 3

Please check your public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType), if you write like that:

@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new ViewHolder(mLayoutInflater.inflate(R.layout.your_item_layout, null));
}

this will make your FrameLayout disabled and CardView will be the itemView of your ViewHolder, So you should change as follow: @Override public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { return new ViewHolder(mLayoutInflater.inflate(R.layout.your_item_layout, parent, false)); } Hope Help you.

Answer 4

if I were you I would get my display size width and set my ViewHolder some margin accordingly.

this is my code in my application class:

public class MyApp extends Application {
public static Point displaySize = new Point();
public static float density = 1;
public static Context appContext = null;
public static int height;

@Override
public void onCreate() {
    super.onCreate();
    ActiveAndroid.initialize(this);
    appContext = getApplicationContext();
    checkDisplaySize();
    density = appContext.getResources().getDisplayMetrics().density;
}

public static void checkDisplaySize() {
    try {
        WindowManager manager = (WindowManager)  
appContext.getSystemService(Context.WINDOW_SERVICE);
        if (manager != null) {
            Display display = manager.getDefaultDisplay();
            if (display != null) {
                    display.getSize(displaySize);
            }
           height = (int) (displaySize.x / 1.777f); //Aspect Ratio 16:9
        }
    } catch (Exception e) {
    }
}
}

and after all this in your adapter where you get the holder view just do the following:

int marginWidth = (MyApp.desplaySize.x - itemView.getMeasuredWidth())/2;
LayoutParams params = new LayoutParams(
    LayoutParams.WRAP_CONTENT,      
    LayoutParams.WRAP_CONTENT
);
params.setMargins(marginWidth, 0, marginWidth, 0);
itemView.setLayoutParams(params);

I am not really sure that this exact code will solve your issue but you could easily change this so it will.

Answer 5

write this code in your FrameLayout

    android:layout_gravity="center"