Android RecyclerViewで選択したアイテムを適切にハイライト表示する方法【初心者向け完全ガイド】

はじめに

この記事では、Androidアプリ開発においてRecyclerViewで選択されたアイテムを適切に強調表示（ハイライト表示）する方法を、ステップごとのサンプルコード付きで詳しく解説します。リスト形式のUIは多くのアプリで使われており、ユーザーがどの項目を選んだかを視覚的に分かりやすくすることは、使いやすいアプリを作る上で非常に重要なポイントです。

Step 1：新規プロジェクトの作成と依存関係の追加

まずAndroid Studioで新しいプロジェクトを作成します。File → New Project を選択し、必要な情報を入力してプロジェクトを作成しましょう。

次に、build.gradle（Module: app）に以下の依存関係を追加します。

implementation 'com.android.support:recyclerview-v7:28.0.0'

Step 2：メインレイアウト（activity_main.xml）の作成

RecyclerViewを配置するためのメイン画面レイアウトです。res/layout/activity_main.xmlに以下のコードを記述します。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="4dp"
    tools:context=".MainActivity">
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="8dp" />
</RelativeLayout>

Step 3：リスト項目用レイアウト（list_layout.xml）の作成

次に、RecyclerViewの各行（アイテム）の見た目を定義するレイアウトファイルを作成します。list_layout.xmlという名前で新しいレイアウトリソースファイルを作り、以下のコードを追加してください。受賞タイトル・受賞年・プレイヤー名の3つのTextViewを持つシンプルな構成です。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="https://schemas.android.com/apk/res/android"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background_selector"
    android:padding="16dp">
    <TextView
        android:id="@+id/awardTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="New Text"
        android:textSize="18sp"
        android:textStyle="bold" />
    <TextView
        android:id="@+id/awardYear"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/awardTitle"
        android:layout_alignStart="@+id/awardTitle"
        android:layout_marginTop="20dp"
        android:text="New Text"
        android:textColor="#000" />
    <TextView
        android:id="@+id/playerName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:text="New Text" />
</RelativeLayout>

ポイントはandroid:background="@drawable/background_selector"の部分です。ここで後述するセレクターを指定することで、選択状態に応じて背景色が切り替わる仕組みを作ります。

Step 4：Drawableリソースの作成

選択状態を視覚的に表現するために、2つのDrawableリソースファイルを作成します。

background_selector.xml（背景セレクター）

アイテムが「選択されているかどうか」に応じて背景色を切り替えるセレクターです。state_selectedがtrueの場合はアクセントカラー、falseの場合は白色を表示します。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <item android:drawable="@color/colorAccent" android:state_pressed="false" android:state_selected="true" />
    <item android:drawable="@android:color/white" android:state_selected="false" />
</selector>

line_divider.xml（区切り線）

リスト項目間に表示される細い区切り線の形状を定義します。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android" android:shape="rectangle">
    <size
        android:width="2dp"
        android:height="2dp" />
    <solid android:color="@color/colorPrimaryDark" />
</shape>

Step 5：Javaクラスの作成

続いて、データモデル・アダプター・ViewHolder・装飾クラスの4つのJavaクラスを作成していきます。

ItemObject.java（データモデルクラス）

リストに表示する各項目のデータ（受賞タイトル、受賞年、プレイヤー名）を保持するクラスです。

class ItemObject {
    private String awardTitle;
    private String awardYear;
    private String player;
    ItemObject(String awardTitle, String awardYear, String player) {
        this.awardTitle = awardTitle;
        this.awardYear = awardYear;
        this.player = player;
    }
    String getAwardTitle() {
        return awardTitle;
    }
    String getAwardYear() {
        return awardYear;
    }
    String getPlayer() {
        return player;
    }
}

RecyclerViewAdapter.java（アダプタークラス）

データとRecyclerViewをつなぐアダプターです。onBindViewHolder()で各項目にデータをセットします。

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import java.util.List;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
public class RecyclerViewAdapter extends
RecyclerView.Adapter<RecyclerViewHolders> {
    private List<ItemObject> itemList;
    RecyclerViewAdapter(Context context, List<ItemObject> itemList) {
        this.itemList = itemList;
    }
    @NonNull
    @Override
    public RecyclerViewHolders onCreateViewHolder(ViewGroup parent, int viewType) {
        View layoutView = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_layout, null);
        return new RecyclerViewHolders(layoutView);
    }
    @Override
    public void onBindViewHolder(RecyclerViewHolders holder, int position) {
        holder.awardTitle.setText("Award Title: " + itemList.get(position).getAwardTitle());
        holder.awardYear.setText("Award Year: " + itemList.get(position).getAwardYear());
        holder.player.setText("Player Name: " + itemList.get(position).getPlayer());
    }
    @Override
    public int getItemCount() {
        return this.itemList.size();
    }
}

RecyclerViewHolders.java（ViewHolderクラス）

このクラスが本チュートリアルの核心部分です。SparseBooleanArrayを使って選択状態を管理し、アイテムがクリックされるたびにsetSelected()でビューの選択状態を切り替えます。これにより、Step 4で定義したセレクターが反応し、背景色が変化します。

import android.util.SparseBooleanArray;
import android.view.View;
import android.widget.TextView;
import androidx.recyclerview.widget.RecyclerView;
class RecyclerViewHolders extends RecyclerView.ViewHolder implements
View.OnClickListener {
    TextView awardTitle;
    TextView awardYear;
    TextView player;
    private SparseBooleanArray selectedItems = new SparseBooleanArray();
    RecyclerViewHolders(View itemView) {
        super(itemView);
        itemView.setOnClickListener(this);
        awardTitle = itemView.findViewById(R.id.awardTitle);
        awardYear = itemView.findViewById(R.id.awardYear);
        player = itemView.findViewById(R.id.playerName);
    }
    @Override
    public void onClick(View view) {
        if (selectedItems.get(getAdapterPosition(), false)) {
            selectedItems.delete(getAdapterPosition());
            view.setSelected(false);
        }
        else {
            selectedItems.put(getAdapterPosition(), true);
            view.setSelected(true);
        }
    }
}

SimpleItemDecoration.java（区切り線描画クラス）

RecyclerView.ItemDecorationを継承したクラスで、各アイテムの下部に区切り線を描画します。

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.drawable.Drawable;
import android.view.View;
import androidx.annotation.NonNull;
import androidx.core.content.ContextCompat;
import androidx.recyclerview.widget.RecyclerView;
class SimpleItemDecoration extends RecyclerView.ItemDecoration {
    private Drawable drawable;
    SimpleItemDecoration(Context context) {
        drawable = ContextCompat.getDrawable(context, R.drawable.line_divider);
    }
    @Override
    public void onDrawOver(@NonNull Canvas canvas, RecyclerView parent, @NonNull RecyclerView.State state) {
        int left = parent.getPaddingLeft();
        int right = parent.getWidth() - parent.getPaddingRight();
        int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            View child = parent.getChildAt(i);
            RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();
            int top = child.getBottom() + params.bottomMargin;
            int bottom = top + drawable.getIntrinsicHeight();
            drawable.setBounds(left, top, right, bottom);
            drawable.draw(canvas);
        }
    }
}

Step 6：MainActivity.javaの実装

最後に、これまでに作成したコンポーネントを組み合わせるActivityを実装します。RecyclerViewにLayoutManager・Adapter・ItemDecorationをセットし、サンプルデータとしてバロンドール受賞者のリストを表示しています。

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import android.os.Bundle;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        RecyclerView recyclerView = findViewById(R.id.recyclerView);
        recyclerView.addItemDecoration(new SimpleItemDecoration(this));
        LinearLayoutManager layoutManager = new LinearLayoutManager(MainActivity.this);
        recyclerView.setLayoutManager(layoutManager);
        List<ItemObject> posts = returnListItems();
        RecyclerViewAdapter adapter = new RecyclerViewAdapter(MainActivity.this, posts);
        recyclerView.setAdapter(adapter);
    }
    private List<ItemObject> returnListItems() {
        List<ItemObject> items = new ArrayList<>();
        items.add(new ItemObject("Ballon'd'or", "2007", "Ricardo KaKa"));
        items.add(new ItemObject("Ballon'd'or", "2008", "Cristiano Ronaldo"));
        items.add(new ItemObject("Ballon'd'or", "2009 - 2012, 2015", "Lionel Messi"));
        items.add(new ItemObject("Ballon'd'or", "2013, 2014, 2016, 2017", "Cristiano Ronaldo"));
        items.add(new ItemObject("Ballon'd'or", "2018", "Luca Modric"));
        items.add(new ItemObject("Ballon'd'or", "2019", "Haven't decided yet"));
        return items;
    }
}

Step 7：AndroidManifest.xmlの確認

androidManifest.xmlに以下のようにMainActivityが登録されていることを確認してください。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="app.com.sample">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

アプリの実行と動作確認

それでは実際にアプリを起動してみましょう。実機のAndroidスマートフォンをPCに接続していることを前提に説明します。Android Studioからプロジェクト内のアクティビティファイルを開き、ツールバーのRun（実行）アイコンをクリックしてください。接続済みのモバイルデバイスを選択すると、端末の画面に以下のようなリストが表示されます。

リスト内の任意のアイテムをタップすると、その行の背景がアクセントカラーに変わり、選択状態が明確に強調表示されます。もう一度同じアイテムをタップすれば、選択が解除されて元の白色に戻ります。

まとめ

今回はRecyclerViewで選択アイテムをハイライト表示する手法を紹介しました。ポイントは以下の3つです。

① Drawable Selectorで選択状態の見た目を定義する
② ViewHolder内でsetSelected()により選択状態を切り替える
③ SparseBooleanArrayで複数アイテムの選択状態を効率的に管理する

この仕組みを応用すれば、チェックボックス的な複数選択リストや、単一選択のみ許可するリストなど、さまざまな要件に対応したUIを構築できます。ぜひ自分のプロジェクトでも試してみてください。