LoginSignup
32

More than 3 years have passed since last update.

MaterialDesignを扱うために情報を追うTips

Last updated at Posted at 2018-12-03

Android #2 Advent Calendar 2018の4日目の記事です。

対象者

  • Material Designを何となく使っていた人
  • 最新のMaterial Designを知りたい&情報を追いたい

対象でない人

  • 何かのコミッター

目標

  • 最新のMaterial Designの追い方を知る
  • リファレンスを読みつつ実装できるようになること

できるだけ、ソースはGoogleからにします。補足で他の記事を使います。

Material Designとは

マテリアルデザインについて少し調べるで紹介されています。Googleが発表しました。「デザインのガイドライン」といわれています。このガイドラインに則って開発されているコンポーネント(ビューやボタン)がmaterial-componentsです。

https://material.io/ 」みなさんもご存知のMaterialDesignの総合サイトです。
What's newには進捗がかかれています。
また、一番下にはリポジトリのリンクがあります。https://github.com/material-components
今日話すのはこのリポジトリについてです。

1.png
見ての通り開発されているのは、

  • android
  • ios
  • web
  • flutter

の4種類です。今回解説するのはAndroidのみに絞っています。(Android以外知らないから)

見たところ、webがスター多いですね。Androidももっと増えろー

歴史

そもそも、Material Designが発表されたのが2014年6月25日のGoogle I/O 2014です。最近ですね。
I/O 2014 アプリに学ぶマテリアルデザイン
この記事は日本語に意訳された記事です。

ニュースサイトの記事

Material Designの原則
原則は

  • レイヤーの概念により影を作る
  • アニメーション
  • デザインをユーザーアクションに重点を置く

以降、この原則に則ってMaterial Designは開発されています。

Materil Designを扱うために

Catalog App

Android版のリポジトリはCatalog Appがあり、クローンして自分のスマホで動きを確認できます。(ここをAndroidStdioで開く)

Screenshot_20181201-201418_Material Components Catalog.jpg

コンポーネント一覧

このページは今実装されている、もしくはは今後実装される予定のコンポート達です。
開発中のisuueを見るのが楽しいですよ

Road Map

Road Mapには今後実装される予定のMaterial Designが記載されています。Androidは少し開発が遅れているようです。

情報収集サイト

Google Developer(JP)のMaterial Designタグ

Releaseブランチ

現在、1.1.0-alpha01まであります。安定板は1.0.0です。rc~はRelease Candidate(リリース候補版)の略です。releaseをRSSで追うにはhttps://github.com/material-components/material-components-android/releases.atom としましょう。

isuueの動きを追うにはGithubのWatch機能もいいですね。メールやらだと見逃すので、SlackのRSSアプリに管理させたり色々ありますが、自分はGH:WatchというAndroidアプリで情報を追っています。

試しにChipを使ってみる

新しいコンポーネントの中にChipがあります。使ってみましょう。まずは、getting startより、Gradleに以下を記入。

  dependencies {
    // ...
    implementation 'com.google.android.material:material:1.0.0'
    // ...
  }

もし、1.1.0-alpha01を使いたい場合はこうなります。

  dependencies {
    // ...
    implementation 'com.google.android.material:material:1.1.0-alpha01'
    // ...
  }

また、style.xmlにMaterial Design用のAppThemeをオーバライドします。

style.xml
<resources>
  <!-- Base application theme. -->
  <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
  </style>
</resources>

ここを参考にXMLを書く

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<layout
  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">
  <data>
  </data>
  <androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.chip.ChipGroup
      android:layout_width="match_parent"
      android:layout_height="438dp"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" android:layout_marginTop="8dp" android:layout_marginLeft="8dp"
      android:layout_marginStart="8dp" android:layout_marginEnd="8dp" android:layout_marginRight="8dp">

      <com.google.android.material.chip.Chip
        style="@style/Widget.MaterialComponents.Chip.Action"
        android:text="いぬ"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:id="@+id/chip"/>
      <com.google.android.material.chip.Chip
        style="@style/Widget.MaterialComponents.Chip.Entry"
        android:text="ねこ"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/chip2"/>
      <com.google.android.material.chip.Chip
        style="@style/Widget.MaterialComponents.Chip.Filter"
        android:text="きりん"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/chip3"/>
      <com.google.android.material.chip.Chip
        style="@style/Widget.MaterialComponents.Chip.Choice"
        android:text="ぞう"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/chip4"/>
    </com.google.android.material.chip.ChipGroup>
  </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

結果
Screenshot_20181203-233909_chip.jpg

参考記事など

Google I/O 2015のビデオ翻訳記事
この記事も
Google I/O 2018 で発表された Material Design のアップデート
解説動画Android Studio: Chips - Material Components

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
32