見出し画像

Material DesignのカタログアプリでMaterial Youの対応をしました

個人で Material Design のカタログアプリなるものを細々と開発&リリースしていて、先日 Material You (Material 3)の対応をしました。

↓ソースコード↓

↓Play Store↓

このアプリは何をするアプリ?

このアプリは Material Design のデフォルトのコンポーネントを確認できたり、カスタマイズされた Material Theming を適用したアプリの例を確認できたりする Android アプリになっています。

画像1

画像6

Material You 対応で何が変わったの?

Material You(Material 3)ではこれまでの Material Design から以下の変更を確認しました。(material-component 1.5.0-alpha03時点)

・Color Theming の属性の追加
    (primary / secondary などにいくつか追加された)
・Typography Theming の属性の刷新
    (Headline 1~6や他にもいくつか無くなり、全体的に刷新された)
・一部コンポーネントのデザインの変更とパターンの追加
    (BottomNavigation のデザインが変わったり、変更された Theming に追従するように)

Material You(Material 3) で何が変わるのか、どう対応していくのかはまた後日まとめて記事にしようと思います。

このアプリでも Color/Typography Theming を新しいものに移行しました。
Android 12 以降の端末でこのアプリを使うと、Material You の Dynamic color で設定されている色がアプリの色として反映されるようになっています。

画像5

画像6

Android 11 以前の端末では Dymanic color の機能が使用できないため、デフォルトで設定されている Color Theming が適用されるようになっています。

画像5

また、Material You(Material 3)対応でコンポーネントが新しいデザインに置き換えられたので、これまでのコンポーネントのデザインも確認できるようにしています。

画像6


元々は自分が Material Design のコンポーネントを確認するために作成して使っていたのですが、Android アプリ開発に関わるエンジニアやデザイナーの人もぜひ活用していただければと思います。

この記事が気に入ったらサポートをしてみませんか?