By Antonio Mele


2018-04-23 04:04:12 8 Comments

I have cards with different width and I would like to create a Grid Layout where width = match the parent (filling the screen) and fixed height. I would like to set the cards in the Grid layout so the number of columns changes accordingly to the width of the elements that can fit the row.

So the elements will be set in a horizontal row till they can fit the screen and then go to the next row, with a vertical scroll when they exceed the fixed height.

I am trying to use a Grid Layout but I don't know if it the suitable solution for this. I use native Android.

Here a picture of it should look like:

enter image description here

Thanks.

2 comments

@dev 2018-04-23 04:21:14

You can use Staggered GridView libraries. For eg. https://github.com/etsy/AndroidStaggeredGrid Edit: add dependency in build.gradle and in your xml you can add:

 <com.etsy.android.grid.StaggeredGridView

        android:id="@+id/itemgridfragment_gridview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:column_count="2"
        android:background="@color/white"
        app:item_margin="@dimen/fragment_landingpage_8" />

</android.support.v4.widget.SwipeRefreshLayout>

@Antonio Mele 2018-04-23 07:32:18

Thank you. I've tried your solution and it was good but not exactly what I need. The reply of @Nilesh Rathod suit my need. Thank you for your help, by the way it's an interesting solution.

@Nilesh Rathod 2018-04-23 04:26:18

You can use FlexboxLayoutManager

Add the following dependency to your build.gradle file:

implementation 'com.google.android:flexbox:0.3.2'

SAMPLE CODE

LAYOUT.XML

<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="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <android.support.v7.widget.RecyclerView
      android:id="@+id/recyclerView"
      android:layout_width="match_parent"
      android:layout_height="250dp" />



</LinearLayout>

ACTIVTY CODE

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.RecyclerView;

import com.google.android.flexbox.FlexDirection;
import com.google.android.flexbox.FlexboxLayoutManager;
import com.google.android.flexbox.JustifyContent;

import java.util.ArrayList;


public class MainActivity extends AppCompatActivity {

    RecyclerView recyclerView;
    ArrayList<String> arrayList = new ArrayList<>();
    DataAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        recyclerView = findViewById(R.id.recyclerView);
        initArray();
        FlexboxLayoutManager layoutManager = new FlexboxLayoutManager(this);
        layoutManager.setFlexDirection(FlexDirection.COLUMN);
        layoutManager.setJustifyContent(JustifyContent.FLEX_END);
        recyclerView.setLayoutManager(layoutManager);
        adapter = new DataAdapter(this, arrayList);
        recyclerView.setAdapter(adapter);

    }

    private void initArray() {

        arrayList.add("ioreeoe");
        arrayList.add("fghfgh");
        arrayList.add("ftyjyjhghgh");
        arrayList.add("jfgewrg");
        arrayList.add("rwrewr");
        arrayList.add("ghyjtyfghh");
        arrayList.add("gfhfgh");
        arrayList.add("gfhfht");
        arrayList.add("retretret");
        arrayList.add("retret");
        arrayList.add("ioreeoe");
        arrayList.add("fghfgh");
        arrayList.add("ftyjyjhghgh");
        arrayList.add("jfgewrg");
        arrayList.add("rwrewr");
        arrayList.add("ghyjtyfghh");
        arrayList.add("gfhfgh");
        arrayList.add("gfhfht");
        arrayList.add("retretret");
        arrayList.add("retret");
        arrayList.add("ioreeoe");
        arrayList.add("fghfgh");
        arrayList.add("ftyjyjhghgh");
        arrayList.add("jfgewrg");
        arrayList.add("rwrewr");
        arrayList.add("ghyjtyfghh");
        arrayList.add("gfhfgh");
        arrayList.add("gfhfht");
        arrayList.add("retretret");
        arrayList.add("retret");
    }

}

Adapter code

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.ArrayList;

/**
 * Created by nilesh on 3/4/18.
 */

public class DataAdapter extends RecyclerView.Adapter<DataAdapter.ViewHolder> {

    Context context;
    ArrayList<String> arrayList = new ArrayList<>();

    public DataAdapter(Context context, ArrayList<String> arrayList) {
        this.context = context;
        this.arrayList = arrayList;
    }

    @Override
    public DataAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context).inflate(R.layout.custom_layout, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(DataAdapter.ViewHolder holder, int position) {

        holder.title.setText(arrayList.get(position));
    }

    @Override
    public int getItemCount() {
        return arrayList.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder {
        TextView title;

        public ViewHolder(View itemView) {
            super(itemView);
            title = itemView.findViewById(R.id.nilu);
        }
    }
}

custom_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/nilu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@drawable/test"
        android:padding="10dp"
        android:textColor="#050505" />
</LinearLayout>

@drawable/test

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle"  >
            <corners android:radius="30dp"/>
            <solid android:color="#d10e0e"/>
            <stroke android:width="1dip" android:color="#070fe9" />
        </shape>
    </item>
</selector>

RESULT

![enter image description here

@Antonio Mele 2018-04-23 07:30:49

Thank you! Exactly what I need. I just changed: layoutManager.setFlexDirection(FlexDirection.ROW); layoutManager.setJustifyContent(JustifyContent.FLEX_START);

@Nilesh Rathod 2018-04-23 07:31:25

@AntonioMele welcome happy to help u my friend

Related Questions

Sponsored Content

30 Answered Questions

[SOLVED] How to get the build/version number of your Android application?

18 Answered Questions

[SOLVED] How do I align views at the bottom of the screen?

12 Answered Questions

8 Answered Questions

18 Answered Questions

[SOLVED] Linear Layout and weight in Android

15 Answered Questions

2 Answered Questions

[SOLVED] Adding equally sized views dynamically in GridLayout

6 Answered Questions

[SOLVED] GridLayout Column width

0 Answered Questions

Sponsored Content