Go to Qiita Advent Calendar 2024 Top
LoginSignup
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@SousiOmine

Material3なカルーセルを作る【Android Studio】【Java】

Posted at

初心者です。
AndroidStudioでMaterial3なカルーセルを作りたああああああああああああああい！！
ということで作っていきます。

完成した物

レコーディング-2023-12-21-223958.gif
https://github.com/SousiOmine/Material3_Carousel_demo

参考にした資料

https://www.youtube.com/watch?v=nV48OJQvvIc
Atriiという方の解説動画です
https://github.com/material-components/material-components-android/blob/master/docs/components/Carousel.md
公式ドキュメントです

コピペで作っていく

Material_Carouselという名前で新規プロジェクトを作成しました。
試しにビルドしようとするとエラー発生！
何もしていないのに壊れた！

エラーログ
An issue was found when checking AAR metadata:

  1.  Dependency 'androidx.activity:activity:1.8.0' requires libraries and applications that
      depend on it to compile against version 34 or later of the
      Android APIs.

      :app is currently compiled against android-33.

      Also, the maximum recommended compile SDK version for Android Gradle
      plugin 7.4.2 is 33.

      Recommended action: Update this project's version of the Android Gradle
      plugin to one that supports 34, then update this project to use
      compileSdkVerion of at least 34.

      Note that updating a library or application's compileSdkVersion (which
      allows newer APIs to be used) can be done separately from updating
      targetSdkVersion (which opts the app in to new runtime behavior) and
      minSdkVersion (which determines which devices the app can be installed
      on).

なんでテンプレのままなのに動かないんだよ〇〇〇！
Gradleのバージョンを上げてcomplineSdkVersionを上げろと書いてありますがGradleは後回しにしても多分動くので
build.gradle(app)を

build.gradle(app)
android {
    namespace 'com.example.material_carousel'
    //compileSdk 33
    compileSdk 34

    defaultConfig {
        applicationId "com.example.material_carousel"
        minSdk 24
        //targetSdk 33
        targetSdk 34
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

のように変えると正常に動作しました。
カルーセルまだ全く触れてませんごめんね
image.png

Material3のライブラリを使えるようにgradleに追記します

build.gradle(app)
dependencies {
    implementation 'com.google.android.material:material:1.11.0'
}

res/layoutにカルーセルに表示させる内容を定義する？xmlを書きます。というよりは公式ドキュメントからコピペします。
私は画像と概要みたいなのを出したいのでテキストも出します
画像にはとりあえres\drawableに適当な画像を置いて指定しておきました

carousel_layout.xml
<com.google.android.material.carousel.MaskableFrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/carousel_item_container"
    android:layout_width="150dp"
    android:layout_height="match_parent"
    android:layout_marginStart="4dp"
    android:layout_marginEnd="4dp"
    android:foreground="?attr/selectableItemBackground"
    app:shapeAppearance="?attr/shapeAppearanceCornerExtraLarge">
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ImageView
            android:id="@+id/carousel_image_view"
            android:src="@drawable/karen"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"/>
        <TextView
            android:id="@+id/carousel_text_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:textSize="32sp"
            android:textColor="@color/white"
            android:text="Karen"/>
    </androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.carousel.MaskableFrameLayout>

activity_main.xmlにRecyclerViewを置きます。このときにlayoutManagerにmaterialライブラリのCarouselLayoutManagerを指定するらしい

activity_main.xml
<androidx.recyclerview.widget.RecyclerView
        android:id="@+id/carousel_recycler_view"
        app:layoutManager="com.google.android.material.carousel.CarouselLayoutManager"
        tools:listitem="@layout/carousel_layout"
        android:layout_width="match_parent"
        android:layout_height="196dp"
        android:clipChildren="false"
        android:clipToPadding="false"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

ちなみにRecyclerViewから書き始めるとlistitemがないのでプレビューが出ず怖くなります

これでactivity_main.xmlのデザインプレビューを見ると
image.png
ぽい！ぽいぞ！
ただ今はビルドして動かしてもなにも表示されません
E/RecyclerView: No adapter attached; skipping layout とかぬかすので、adapterとやらを作ります
参考にした資料の動画ではkotlinで書いててなにしてるのか全く分からなかったので、過去に自分で書いたJavaプログラムを見て思い出しながら書きました

まずカルーセルに表示するデータを格納するクラスを作ります。画像と文字を格納できればいいです

CarouselModel.java
package com.example.material_carousel;

import android.graphics.Bitmap;

public class CarouselModel {
    public Bitmap image;
    public String text;

    public CarouselModel(Bitmap img, String txt) {
        this.image = img;
        this.text = txt;
    }
}

次にViewHolderというわけわからんクラスも作ります。多分Adapterとカルーセルを結びつけるようなことをしています

CarouselHolder.java
package com.example.material_carousel;

import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

public class CarouselHolder extends RecyclerView.ViewHolder{
    public ImageView imageView;
    public TextView textView;

    public CarouselHolder(@NonNull View itemView) {
        super(itemView);
        imageView = itemView.findViewById(R.id.carousel_image_view);
        textView = itemView.findViewById(R.id.carousel_text_view);
    }
}

そしてAdapterを作ります。なんかいろいろするやつです

CarouselAdapter.java
package com.example.material_carousel;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Toast;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.ArrayList;
import java.util.List;

public class CarouselAdapter extends RecyclerView.Adapter<CarouselHolder> {
    ArrayList<CarouselModel> models;
    MainActivity main_activity;
    public CarouselAdapter(ArrayList<CarouselModel> list, MainActivity ma)
    {
        this.models = list;
        this.main_activity = ma;
    }

    @NonNull
    @Override
    public CarouselHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        //なにかよくわかっていない
        View inflate = LayoutInflater.from(parent.getContext()).inflate(R.layout.carousel_layout, parent, false);
        CarouselHolder carouselHolder = new CarouselHolder(inflate);
        return carouselHolder;
    }

    @Override
    public void onBindViewHolder(@NonNull CarouselHolder holder, int position) {
        //各項目に必要な要素をセットする
        holder.imageView.setImageBitmap(models.get(position).image);
        holder.textView.setText(models.get(position).text);
        holder.imageView.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                tapFunc();
            }
        });
    }
    
    private void tapFunc()  //要素が押されたときに実行するやつをここに書く
    {
        Toast.makeText(main_activity, "九条カレン", Toast.LENGTH_SHORT).show();
    }

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

で、最後にアダプターをコードで指定してやります
今回はMainActivityにカルーセルを出す想定なのでMainActivityに書いていきます

MainActivity.java
package com.example.material_carousel;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.RecyclerView;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
    ArrayList<CarouselModel> models;

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

        models = new ArrayList<>();
        Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.drawable.karen);
        //使った画像がでかすぎて何もしないとエラーを吐くので小さくしてます
        bmp = Bitmap.createScaledBitmap(bmp, 500, 500, false);
        models.add(new CarouselModel(bmp, "Karen1"));
        models.add(new CarouselModel(bmp, "Karen2"));
        models.add(new CarouselModel(bmp, "Karen3"));
        models.add(new CarouselModel(bmp, "Karen4"));
        models.add(new CarouselModel(bmp, "Karen5"));

        RecyclerView recyclerView = findViewById(R.id.carousel_recycler_view);
        //アダプターを指定
        recyclerView.setAdapter(new CarouselAdapter(models, this));
    }
}

ここまでいけばもう動くはず！
これは一体、どうなっちゃうんだ～～！？！？
レコーディング-2023-12-21-222511.gif
うごいたあああああああああああ！
でもなんか...ダサくない？

テーマを変えるのを忘れていました

res/values/themes.xml
<style name="Theme.Material_Carousel" parent="Theme.Material3.Light">
以下略

あとRecyclerViewにpadding(隙間)を設定しました
レコーディング-2023-12-21-223958.gif
おおお！Material3になりました！マテリアル3だせえええええ～

いかがでしたか？

ここまで作ったやつはGitHubに上げました
https://github.com/SousiOmine/Material3_Carousel_demo
というわけでカレンちゃんを眺められる世界最高のアプリが完成したのでここで終わります
誰かの参考になれば幸いです

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?