0

What I want to achieve:

enter image description here

What I did:

I have a button with 1 to 5 columns, when the user clic on the number of column he wants, the layout change but all the card are glued to each other. So far this is what I have been able to do: https://i.stack.imgur.com/OCzgW.jpg

My item:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/card"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <ImageView
        android:id="@+id/video_preview"
        android:layout_width="match_parent"
        android:layout_height="194dp"
        android:scaleType="centerCrop"
        tools:src="@drawable/img_error_v1"
        />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="16dp">
        <TextView
            android:id="@+id/video_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?attr/textAppearanceHeadline6"
            android:maxLines="1"
            tools:text="This is a really really really really really really really really really really really long title"
            />
        <TextView
            android:id="@+id/video_description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:maxLines="1"
            android:textAppearance="?attr/textAppearanceBody2"
            android:textColor="?android:attr/textColorSecondary"
            tools:text="This is the URL for now"
            />
    </LinearLayout>
</LinearLayout>

My question:

How can I achieve this kind of change ? I have read about ItemDecoration but I don't think I can change the layout_height of my item. Do I need create one layout for each column screen ?

Biscuit
  • 4,840
  • 4
  • 26
  • 54
  • To clarify, you want your items to each still have their full width, but now 2 per row? – Jake Lee Apr 10 '20 at 21:09
  • Hmm for example, in one column i'd like width of 100%, for 2 column 50% maybe a bit less to have margin around, 3 column 33% etc... the height would change as well – Biscuit Apr 10 '20 at 21:15
  • It can help for you. [answer](https://stackoverflow.com/a/38984354/8956604) – Kasım Özdemir Apr 11 '20 at 11:56
  • Yeah I saw `ItemDecoration` example but the issue is that on my one column the height of image is for example 200dp, and I want it to be 100dp for 2 columns – Biscuit Apr 11 '20 at 12:15

2 Answers2

0

You can achieve this by changing margins of your list item's root dynamically, you need to do this in your adapter onBindViewHolder() function

GridLayoutManager.LayoutParams params = (GridLayoutManager.LayoutParams) holder.card.getLayoutParams();
            if (position % 2 == 0) {
                params.setMargins(dpTopixel(20), dpTopixel(10), dpTopixel(10), dpTopixel(5));
            } else {
                params.setMargins(dpTopixel(10), dpTopixel(10), dpTopixel(20), dpTopixel(5));
            }
            holder.card.setLayoutParams(params);

here is the function to convert pixel to dp

private int dpTopixel(int dp) {
    float dip = (float) dp;
    Resources r = context.getResources();
    float px = TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_DIP,
            dip,
            r.getDisplayMetrics()
    );
    return (int) px;
}

If you are using the same adapter for both screens, then you can send a flag with the constructor of the adapter to block that code

haliltprkk
  • 1,428
  • 3
  • 14
  • 26
  • I tried what you said but it doesn't answer my question, as I want to change the height of my card when I'm displaying 2,3 and more columns, it is also adding a margin to all my display :/ – Biscuit Apr 11 '20 at 09:35
  • Actually you can change the height and width, as well like **params.height** and **params.width**, and to avoid implement this to all your display, you need to send something with your adapter constructor that says how many columns should be displayed so you can manipulate it however you want. – haliltprkk Apr 11 '20 at 17:03
  • But actually, if you need more than simple changes, you need to separate them by using more than one View Holder, like this https://stackoverflow.com/questions/26245139/how-to-create-recyclerview-with-multiple-view-type .I think this is a better way to do in your case – haliltprkk Apr 11 '20 at 17:22
  • Yeah I was actually answering you, I've tried `params.height` but it was changing my card it a weird way and I couldn't see the text anymore, I've answer this post but my answer was deleted, I'm waiting for it to pop up again. I've managed to do it using multiple `ViewHolder` and `ItemDecoration`. I don't know if it's the best way to do it, you can check the repo [here](https://github.com/yoobi/GridLayout) – Biscuit Apr 11 '20 at 17:26
0

I don't know if it is the right solution but this article help me change the layout of my view depending on the number of column.

  • The downside is that I need to create a different layout for each column layout I want to display.
  • The upside is that I have more control over the item of each of my layout and I can modify the text size or anything else.

As it is a bit long I've created a repo to show how I've done it.

There might be some improvement to make any help is appreciated :)

Biscuit
  • 4,840
  • 4
  • 26
  • 54