Tech Blog

グローバルな家族アプリFammを運営するTimers inc (タイマーズ) の公式Tech Blogです。弊社のエンジニアリングを支える記事を随時公開。エンジニア絶賛採用中!→ https://timers-inc.com/engineering

Material Theme を使って、カスタマイズ可能な Dialog のような画面を楽に綺麗につくる

こんにちは。Android Developerのさわいです。最近レヴォーグ STI Sport 2.0を試乗したのですが、これに「STI」ってつけるの?という感じで、拍子抜けでした。標準モデルよりは走りのレベルが高いかもしれません。でも冷静に考えると、一応欧州プレミアムカーと張り合うクルマとして、標準モデルでこれくらいのレベルにはなっていてほしい感はありました。「STI」というブランドとまぁまぁなプライスタグから期待すると、悲しみが生まれます。商売的には成功しているみたいですけど。利幅が大きそうなので、このまま売れて欲しいですね。その後乗った WRX STI がとにかく最高すぎて、余計にそう思ってしまった次第です。

さて今回は、Androidで、カスタマイズ可能なDialogのような画面を楽につくる方法について触れていきたいと思います。

Android でカスタマイズダイアログをつくるのはめんどくさいです。AlertDialogよりはDialogFragmentのほうが楽にはなっていますが、それでもやることが多く、骨が折れます。

なので今回は、DialogはAlertDialogやDialogFragmentで作るもの、という発想は捨てて、ActivityにMaterial Themeに用意されているDialogのStyleを適応することで、簡単に綺麗に実装していく方法で進めることにします。

ライブラリ的に用意するものは、Googleから提供されている、Support Libraryのうちの一つ、 appcompat-v7のみです。今Android Studioで新規プロジェクトを作ると、予めappのbuild.gradleに記載されているので、導入に特別な手順も必要ありません。

後は、AppCompatActivityを用意し、Manifest側でDialogのThemeを適応するだけです。
Dialogの起動も、Activityと同じくstartActivityを呼び出すだけですし、回転やタスク切り替えの特別な配慮も必要なくなります。素晴らしい。

GitHubにサンプルを置いておきます。局所的にコードを書き記すよりも全体を見たほうが状況を把握しやすいかと思います。このサンプルは、Dialogの中身がWebViewとなっていて、画面を立ち上げるとGoogleのトップページが開きます。Activityをベースにつくると、こういった奇抜な画面も作成可能になります(笑)。
f:id:timers-tech:20160913173300p:plain

https://github.com/tatuas/AndroidWebViewDialogSample

Deploygateから、サンプルコードをビルドしたAPKを配布していますので、ご活用下さい。
Try it on your device via DeployGate

上記サンプルで使用している Theme は、中身の大きさが Style 側で dp 指定されている、 Theme.Base.AppCompat.Dialog.FixedSize という Theme なのですが、要件によっては、そのサイズをカスタマイズしたい需要もあるかもしれません。ただ、ちょっと Style の命名が直感的でないので、以下の Stackoverflow を参考にされると良いかと思います。

http://stackoverflow.com/questions/29003591/android-fixed-size-dialog-dimension-what-is-major-minor

上記を参考に、
values
values-large
values-xlarge
にそれぞれdimens.xmlでサイズを定義して、style.xmlでその値に Override すればよいです。サンプルコードには、サイズを変更する実装も含んでいます。

積極採用中!!

子育て家族アプリFamm、カップル専用アプリPairyを運営するTimers inc. では、現在エンジニアを積極採用中! 急成長中のサービスの技術の話を少しでも聞いてみたい方、スタートアップで働きたい方など、是非お気軽にご連絡ください! 採用HP : http://timers-inc.com/engineerings

Timersでは各職種を積極採用中!

急成長スタートアップで、最高のものづくりをしよう。

募集の詳細をみる