SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Android Studio 2で始めるアプリ開発入門

Androidのマテリアルデザイン ~スクロール連動~

Android Studio 2で始めるアプリ開発入門 第17回


FloatingActionButton(FAB)

 さあ、かなり目標に近づいてきました。最後の仕上げとしてFloatingActionButton(FAB)を実装しましょう。FloatingActionButtonはCoordinatorLayout配下で使用することによって、同じくCoordinatorLayout配下の任意の画面部品上に浮かした状態で表示できるボタンです。activity_scroll_article.xmlのCoordinatorLayoutの閉じタグ直前に以下のコードを追記してください。

リスト4 activity_scroll_article.xmlへの追記
      ~省略~
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fabEmail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        app:layout_anchor="@id/app_bar"  // (1)
        app:layout_anchorGravity="bottom|end"  // (2)
        app:srcCompat="@android:drawable/ic_dialog_email"/>  // (3)
</android.support.design.widget.CoordinatorLayout>

 ここでのポイントは2個です。

 まず、CoordinatorLayout配下のどの画面部品の上に浮かすかを指定します。それが(1)で、app:layout_anchor属性を使います。指定方法は「@id/」の後に画面部品のid値を記述します。ここでは、idがapp_bar、つまり、AppBarLayout上に浮かせて表示させます。

 次に、その画面部品内のどの位置に表示させるかを指定します。それが(2)で、app:layout_anchorGravity属性を使います。ここでは「bottom|end」と指定しているので、右下です。

 なお、(3)のapp:srcCompat属性は表示するアイコンを指定する属性です。ここでは、Android標準で用意されているメールのアイコンを指定しています。

 ところで、FABは特殊なボタンとはいえ、あくまでボタンです。したがって、android:onClick属性やリスナ登録で、通常のボタン同様にタップされたときの処理を記述できます。

 この状態でアプリを再起動してください。当初の目標とした以下の画面が表示されていると思います。

図8 最終的に目標とした画面(通常サイズ)
図8 最終的に目標とした画面(通常サイズ)

 さらに、スクロールすると、以下のようにアクションバーが縮小し、FABが消えます。

図9 最終的に目標とした画面(縮小サイズ)
図9 最終的に目標とした画面(縮小サイズ)

Scrolling Activity

 最後に、Scrolling Activityを紹介します。

 プロジェクトを作成する際のウィザードですが、今までのサンプルプロジェクトはすべて第3画面(Add an activity画面)でEmpty Activityを選択してきました。この画面には、実はScrolling Activityという選択肢があります。

図10 Add an activity画面
図10 Add an activity画面

 これを選択すると、今までレイアウトxmlファイルにコーディングしてきた内容をあらかじめ記述された状態にしてくれます。そのため、プロジェクトを作成しただけで、FAB付きでスクロール連動します。ただ、この状態からプロジェクトを改造していくには、ここまで説明してきた内容を理解しておく必要があります。そういった意味で、まずは自分で一からスクロール連動を作成しておくことには意味があります。

まとめ

 前回と今回の2回に分けてマテリアルデザインと、その典型的な画面構成としてスクロール連動を扱ってきました。次回は、いよいよこの連載の最終回となります。今回紹介したNestedScrollViewと同じ仲間であるRecyclerViewを扱います。

この記事は参考になりましたか?

連載通知を行うには会員登録(無料)が必要です。
既に会員の方はを行ってください。
Android Studio 2で始めるアプリ開発入門連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 齊藤 新三(サイトウ シンゾウ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook <個人紹介>WINGSプロジェクト所属のテクニカルライター。Web系製作会社のシステム部門、SI会社を経てフリーランスとして独立。屋号はSarva(サルヴァ)。HAL大阪の非常勤講師を兼務。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/9969 2018/05/23 15:37

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー