Introduction

When displaying a list of reusable views on Android, a widget called RecyclerView is the mainstream. But at first, multiple parts came out and I wasn't sure, so I'll make a minimum sample.

↓ Completed image

Preparation

Add RecyclerView to build.gradle.


dependencies {
    implementation "androidx.recyclerview:recyclerview:1.1.0"

Character

Activity
The foundation on which the Recycler View can be placed
RecyclerView
Widget to display list
ViewHolder
View for one list
Adapter
Mediator between RecyclerView and ViewHolder. ViewHolder manages and binds to RecyclerView nicely.

Steps to display

Create layout file for RecyclerView
Create layout for ViewHolder (one line of list)
Create Adapter / ViewHolder
Generate RecylerView with Activity

Let's look at each one.

1. Create layout file for RecyclerView

Place the RecyclerView on top of the Activity for which you want to display the RecyclerView. (If you want to use fragments, the same is true for fragments.)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/main_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

2. Create layout for ViewHolder (one line of list)

Next, make a layout for one line. This time I will make it like this. This depends on the content of the list you want to make.

Although it may be typed directly, please forgive it because it is the minimum.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="12dp">

    <ImageView
        android:id="@+id/hoge_image_view"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"/>

    <TextView
        android:id="@+id/hoge_title_text_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="12dp"
        android:text="hogeTitle"
        android:textSize="24dp"
        app:layout_constraintTop_toTopOf="@id/hoge_image_view"
        app:layout_constraintStart_toEndOf="@id/hoge_image_view"
        app:layout_constraintEnd_toEndOf="parent"/>

    <TextView
        android:id="@+id/hoge_contents_text_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="hogeContents"
        android:layout_marginTop="12dp"
        app:layout_constraintTop_toBottomOf="@id/hoge_title_text_view"
        app:layout_constraintStart_toStartOf="@id/hoge_title_text_view"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

3. Create Adapter / ViewHolder

After that, the order doesn't really matter, but this time we will prepare the Adapter first. This is because a set of Adapters is required when generating a RecyclerView.


public class MainAdapter extends RecyclerView.Adapter<MainAdapter.MainViewHolder> {
    
    private List<RowData> rowDataList;

    MainAdapter(List<RowData> rowDataList) {
        this.rowDataList = rowDataList;
    }

    /**
     *One line of data
     */
    static class MainViewHolder extends RecyclerView.ViewHolder {
        ImageView hogeImage;
        TextView hogeTitle;
        TextView hogeContents;

        MainViewHolder(@NonNull View itemView) {
            super(itemView);
            hogeImage = itemView.findViewById(R.id.hoge_image_view);
            hogeTitle = itemView.findViewById(R.id.hoge_title_text_view);
            hogeContents = itemView.findViewById(R.id.hoge_contents_text_view);
        }
    }

    /**
     *ViewHolder method
     *Only called first.
     *Here, the ViewHolder that generated the ViewHolder layout file as inflation is returned to the RecyclerView.
     */
    @NonNull
    @Override
    public MainViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.view_holder_main, parent, false);
        return new MainViewHolder(view);
    }

    /**
     *Bind ViewHolder and RecyclerView
     *Write here the processing that you want to do in common for one line of View. This time I only set the text.
     */
    @Override
    public void onBindViewHolder(@NonNull MainViewHolder holder, int position) {
        RowData rowData = this.rowDataList.get(position);
        holder.hogeTitle.setText(rowData.hogeTitle);
        holder.hogeContents.setText(rowData.hogeContents);
    }

    /**
     *Number of rows in the list
     */
    @Override
    public int getItemCount() {
        return rowDataList.size();
    }
}

4. Generate RecylerView with Activity

Create a RecyclerView with Activity. Once generated, set the Adapter.

Since this is a sample, 20 lines of data are generated and passed when initializing the Adapter.

public class MainActivity extends AppCompatActivity {

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

        RecyclerView recyclerView = findViewById(R.id.main_recycler_view);

        //Turn on the setting that does not change the layout size of RecyclerView
        //Settings for improving performance.
        recyclerView.setHasFixedSize(true);

        //Set layoutManager in RecyclerView.
        //Depending on the type of this layoutManager, you can select "one-column list" or "two-column list".
        RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(layoutManager);

        //Generate Adapter and set it in RecyclerView
        RecyclerView.Adapter mainAdapter = new MainAdapter(createRowData());
        recyclerView.setAdapter(mainAdapter);
    }

    private List<RowData> createRowData() {
        List<RowData> dataSet = new ArrayList<>();
        int i = 0;
        while (i < 20) {
            RowData data = new RowData();

            data.hogeTitle = "HogeTitle!!";
            data.hogeContents = "HogeHogeHogeHogeHogeHogeHogeHogeHogeHogeHoge";

            dataSet.add(data);
            i = i + 1;
        }
        return dataSet;
    }

    class RowData {
        Image hogeImage;
        String hogeTitle;
        String hogeContents;
    }
}

I will build it when I can do it so far.

It's done.

[For beginners] Minimum sample to display RecyclerView in Java