How to set android staggered horizontal recycler view with dynamic span count

Question

I need this kind of recycler view. But when I use horizontal staggered view, I have to define the row count.

I need to solve these problems below.

1. There should not be a horizontal scroll bar or scroll view.
2. when the first row is filled, the view must start filling the next row.
3. component count per row can be dynamic.

This is my code

DeviceProfileFragment.java

public class DeviceProfileFragment extends Fragment {

    // TODO: Rename parameter arguments, choose names that match
    // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
    private static final String ARG_PARAM1 = "param1";
    private static final String ARG_PARAM2 = "param2";

    // TODO: Rename and change types of parameters
    private String mParam1;
    private String mParam2;

    RecyclerView moduleList;
    List<String> modules;
    ModuleRowViewAdapter adapter;

    public DeviceProfileFragment() {
        // Required empty public constructor
    }

    /**
     * Use this factory method to create a new instance of
     * this fragment using the provided parameters.
     *
     * @param param1 Parameter 1.
     * @param param2 Parameter 2.
     * @return A new instance of fragment BlankFragment.
     */
    // TODO: Rename and change types and number of parameters
    public static DeviceProfileFragment newInstance(String param1, String param2) {
        DeviceProfileFragment fragment = new DeviceProfileFragment();
        Bundle args = new Bundle();
        args.putString(ARG_PARAM1, param1);
        args.putString(ARG_PARAM2, param2);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mParam1 = getArguments().getString(ARG_PARAM1);
            mParam2 = getArguments().getString(ARG_PARAM2);
        }


    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view = inflater.inflate(R.layout.fragment_device_profile, container, false);
        moduleList = (RecyclerView) view.findViewById(R.id.moduleList);

        modules = new ArrayList<>();
        modules.add("IR Module");
        modules.add("x2 Motor Driver");
        modules.add("x2 Motor Driver");
        modules.add("Display");
        modules.add("Battery");

        adapter = new ModuleRowViewAdapter(this.getContext(),modules);
        StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.HORIZONTAL);
        moduleList.setLayoutManager(staggeredGridLayoutManager);
        moduleList.setAdapter(adapter);
        return view;
    }
}

This is Adapter class of the fragment

ModuleRowViewAdapter.java

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

    List<String> modules;
    LayoutInflater inflater;

    public ModuleRowViewAdapter(Context ctx, List<String> modules){
        this.modules=modules;
        this.inflater=LayoutInflater.from(ctx);
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = inflater.inflate(R.layout.list_item_module,parent,false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        holder.moduleName.setText(modules.get(position));
    }

    @Override
    public int getItemCount() {

        return modules.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder{

        TextView moduleName;
       public ViewHolder(@NonNull View itemView) {
           super(itemView);
           moduleName=itemView.findViewById(R.id.moduleName);
       }
   }
}

Answer 1

Use FlexboxLayoutManager as the layout manager for your recyclerview, from https://github.com/google/flexbox-layout.

I have project that has this exact UI/requirements and uses FlexboxLayoutManager(context, FlexDirection.ROW, FlexWrap.WRAP) to achieve it.