移行予定

どうも。どっことです。

タイトルの通りですが、諸事情により GitHubPage に移行予定です。

https://mkt120.github.io/

この備忘録に記載の内容を転記しつつ、今後はこちらのページを更新していく予定です。

Android gradle.properties に定数を入れる

どうも。どっことです。今回はgradle.propertiesを使った設定値の管理方法について紹介します。

gradle.propertiesで設定値を管理する

gradle.propertiesを用意し定数値感覚で設定すれば、アプリのバージョンやtargetVersion/minSDKVersionなどの値を一つのファイルで管理させることができます。

設定方法

例えば以下のbuild.gradleにあるマジックナンバーを定数化しgradle.propertiesに移して参照しましょう。

android {
    namespace = "com.mkt120.sampleapplication"
    compileSdk = 35
    defaultConfig {
        applicationId = "com.mkt120.sampleapplication"
        minSdk = 26
        targetSdk = 35
        versionCode = 100
        versionName = "1.0.0"
        ... 
    }
    ... 

gradle.propertiesに外出しする定数を記述します。

ANDROID_SDK_VERSION=35
ANDROID_MIN_SDK_VERSION=26
ANDROID_VERSION_NAME="1.0.0"
ANDROID_VERSION_CODE=100

上で配置した定数をbuild.gradleで参照します。

android {
    namespace = "com.mkt120.sampleapplication"
    compileSdk = Integer.parseInt(project.ANDROID_BUILD_SDK_VERSION)

    defaultConfig {
        applicationId = "com.mkt120.sampleapplication"
        minSdk = Integer.parseInt(project.ANDROID_MIN_SDK_VERSION)
        targetSdk = Integer.parseInt(project.ANDROID_BUILD_SDK_VERSION)
        versionCode = Integer.parseInt(project.ANDROID_VERSION_CODE)
        versionName = project.ANDROID_VERSION_NAME
        ...        
    }
    ...

gradle.propertiesに記述した定数はproject.XXXXXの形式で参照することができます。

まとめ

今回はgradle.propertiesを使った設定値の管理方法について紹介しました。

参考

• build.gradleからAdndroidのバージョンベタ書きを避ける

Android いまさら聞けないRelativeLayout

どうも。どっことです。今回はRelativeLayoutについて解説します。

RelativeLayout

RelativeLayoutはViewを相対的な位置関係で配置するためのViewGroupです。親のViewGroupを基準とした位置や同じRelativeLayout内の他Viewを基準として位置を決めることができ、FrameLayoutやLinearLayoutより柔軟にViewを配置することができます。現在はConstraintLayoutが制約という形でRelativeLayoutよりも難しい配置設定を実現できるようになったことから、RelativeLayoutはレガシーなViewGroupという整理になっていますが、長く開発されてきたアプリの場合RelativeLayoutを使って画面レイアウトを実装しているものも多いと思いますので、理解しておくに越したことはないでしょう。今回はそんなRelativeLayoutの使い方を解説します。

押さえておくポイント

RelativeLayoutを使ううえで、押さえておくべきポイントは以下です。

1. layout_alignParent***
2. layout_center***
3. layout_toStartOf
4. layout_toEndOf
5. layout_above
6. layout_below
7. layout_align***

順番に解説していきます。

layout_alignParent**

まずはlayout_alignParent**です。layout_alignParent** はViewを上下左右のいずれかに寄せる設定です。以下の4種類があります。

• layout_alignParentTop：
• Viewを上寄せに配置する（デフォルトなので使うことが少ない）
• layout_alignParentBottom：
• Viewを下寄せに配置する
• layout_alignParentStart(Left)：
• Viewを左寄せに配置する（デフォルトなので使うことが少ない）
• layout_alignParentEnd(Right)：
• Viewを右寄せに配置する

以下はサンプルです。layout_alignParentTopとlayout_alignParentStartは設定してもViewが移動しないので、省略します。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:text="alignParentEnd" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="alignParentBottom" />

</RelativeLayout>

こちらを実装した時のプレビューは以下です。

layout_center**

layout_center**は上下中央、左右中央、中央にViewを配置するための設定です。以下の3種類があります。

• layout_centerVertical
• Viewを上下中央に配置する
• layout_centerHorizontal
• Viewを左右中央に配置する
• layout_centerInParent
• Viewを中央に配置する

以下はサンプルです。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Center\nIn\nParent" />
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="Center\nHorizontal" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:text="Center\nVertical" />

</RelativeLayout>

こちらを実装した時のプレビューが以下です。

layout_toStartOf

ここまでの配置設定は親Viewを基準にして設定するものでしたが、ここからは同じRelativeLayout内にある他のViewに対する設定となります。

まずはlayout_toStartOfです。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/text_view_target"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:text="target" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="8dp"
        android:layout_toStartOf="@id/text_view_target"
        android:text="toStartOf" />

</RelativeLayout>

layout_toStartOfを設定すると、指定したViewの左と自身の右の位置を揃えてくれます。

layout_toEndOf

次にlayout_toEndOfです。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/text_view_target"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:text="target" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/text_view_target"
        android:padding="8dp"
        android:text="toStartOf" />

</RelativeLayout>

layout_toEndOfを設定すると、指定したViewの右と、自身の左の位置を揃えてくれます。

layout_above

次にlayout_aboveです。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/text_view_target"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:text="target" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/text_view_target"
        android:padding="8dp"
        android:text="above" />

</RelativeLayout>

layout_aboveを設定すると、指定したViewの下と自身の上の位置を揃えてくれます。

layout_below

そしてlayout_belowです。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/text_view_target"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:text="target" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/text_view_target"
        android:padding="8dp"
        android:text="below" />

</RelativeLayout>

layout_belowを設定すると、指定したViewの上と自身の下の位置を揃えてくれます。

layout_align**

最後に紹介するのは、layout_align**です。この設定は指定のViewの端を揃えるものです。以下の4種類があります。

• layout_alignTop：
• 指定Viewの上端を揃える
• layout_alignBottom：
• 指定Viewの下端を揃える
• layout_alignStart(Left)：
• 指定Viewの左端を揃える
• layout_alignEnd(Right)：
• 指定Viewの右端を揃える

layout_alignTop

layout_alignTopです。指定したViewの上端と揃う位置に配置されます。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/text_view_target"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="target" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/text_view_target"
        android:padding="4dp"
        android:text="alignTop" />

</RelativeLayout>

指定したtargetと上端が揃う位置にViewが配置されます。

layout_alignBottom

次にlayout_alignBottomです。指定したViewの下端と揃う位置に配置されます。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/text_view_target"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="target" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/text_view_target"
        android:padding="4dp"
        android:textSize="8dp"
        android:text="alignBottom" />

</RelativeLayout>

指定したtargetと下端が揃う位置にViewが配置されます。（テキストサイズを小さくしています）

layout_alignStart

続いてlayout_alignStartです。指定したViewの左端と揃う位置に配置されます。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/text_view_target"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="target" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignStart="@id/text_view_target"
        android:padding="4dp"
        android:text="alignStart" />

</RelativeLayout>

layout_alignEnd

最後にlayout_alignEndです。指定したViewの右端と揃う位置に配置されます。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/text_view_target"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="target" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignEnd="@id/text_view_target"
        android:padding="4dp"
        android:text="alignEnd" />

</RelativeLayout>

まとめ

今回はRelativeLayoutについて解説しました。すでにレガシーとなったViewGroupですが、まだまだ利用されているプロジェクトも多いと思うので、それぞれの設定について理解しておきたいですね。

参考

• RelativeLayout  |  API reference  |  Android Developers

Android いまさら聞けないLinearLayout

どうも。どっことです。今回はLinearLayoutについて解説します。

LinearLayout

LinearLayoutは順番にViewを並べてくれるというかなり便利なViewGroupであり、それでいて利用するために必要な設定が多くないところから今でも利用頻度が高いものとなっています。

今回はそんなLinearLayoutの使い方を解説します。

押さえておくポイント

LinearLayoutを使う上で押さえておくべきポイントは以下です。

1. orientation
2. layout_weight
3. layout_gravity／gravity

順番に解説していきます。

orientation

orientationは、Viewをどの方向に並べるか設定するものです。Viewを順番に並べる機能を持つLinearLayoutの最も重要な設定となります。

設定は縦方向（vertical）か横方向（horizontal）のいずれかで、縦方向を設定した場合は上から下に、横方向を設定した場合は左から右にViewが配置されます。

もし画面に収まらない場合は当然はみ出してしまいますが、LinearLayoutにはスクロールする機能がないので、ScrollViewやHorizontalScrollViewの中にLinearLayoutを配置することで画面をスクロール可能にしましょう。

layout_weight

layout_weightはLinearLayout内に並べたViewの大きさを比率で決定するためのものです。

例えばいくつかのViewを同じ大きさで並べたい場合は、すべてのViewのlayout_weightを1に設定することで全てのViewの大きさを1:1にすることができます。Viewの大きさを決めるlayout_widthまたはlayout_heightを0dpに設定する必要があります。

例えば3つのViewを均等幅（1:1:1）で並べる場合は以下です。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="左"
        android:background="@android:color/holo_red_dark"
        android:gravity="center" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="中"
        android:gravity="center" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="右"
        android:background="@android:color/holo_blue_dark"
        android:gravity="center" />
</LinearLayout>

このレイアウトのプレビューが以下です。

またlayout_weightの便利な使い方として、並べたViewのうちの1つだけ画面いっぱいに表示したいケースが挙げられます。

例えば画面内にヘッダ・フッタを持つページの場合です。ヘッダとフッタは固定（または可変長）、コンテンツ領域は残った領域全てとしてViewを配置するケースがほとんどだと思いますが、このようなケースでlayout_weightが大活躍します。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/darker_gray"
        android:gravity="center"
        android:text="ヘッダ領域" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:text="コンテンツ領域" />


    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/darker_gray"
        android:gravity="center"
        android:text="フッタ領域" />
</LinearLayout>

この実装をプレビュー表示すると以下になります。

RelativeLayoutやConstraintLayoutでも同様の画面構成を実現できますが、これらを使う場合はヘッダ・フッタ領域にidを付与する必要があり、それを基準にコンテンツ領域に対して制約をつける必要があります。

layout_gravity／gravity

layout_gravityはViewの位置を決める設定です。LinearLayout内のViewに対して設定します。

この設定はFrameLayoutにも同様にありますが、LinearLayoutではorientationの設定が反映されつつ、layout_gravityの設定が反映されます。

例えば、以下のケースを見てみましょう。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_red_dark"
        android:layout_gravity="end"
        android:text="左" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="中" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_blue_dark"
        android:text="右" />
</LinearLayout>

このレイアウトのプレビューは以下になります。LinearLayoutのorientationの制約が守られつつ、layout_gravityに合わせた位置にViewが配置されています。

また、LinearLayoutに対してgravityを設定することもできます。gravityはView内の要素に対して位置を指定するもので、テキストの改行位置などを決めるためにTextViewでも指定できます。

↑の例にgravityを適用させるとどうなるか見てみましょう。LinearLayoutにgravity:centerを設定します。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">
    <!-- 内部は同じなので省略 -->
</LinearLayout>

これのプレビューは以下になります。

全てのViewが中央寄せになりましたが、個別にlayout_gravityを設定している左は右寄せのまま、逆にもともと左寄せになっていた右はLinearLayoutのgravityの設定により中央寄せに移動しました。

何も設定していなかった右が中央寄せに移動するのは良いとして、左が右寄せのままになっているのは、layout_gravityが親のViewGroup（LinearLayout）のgravityの設定を上書きしているから、と考えられますね。

まとめ

今回はLinearLayoutについて解説しました。非常に高頻度に使われるとても使いやすいViewGroupなので、ぜひ使いこなせるようにしておきましょう。

参考

• LinearLayout  |  API reference  |  Android Developers

Android いまさら聞けないFrameLayout

どうも。どっことです。今回はFrameLayoutについて解説します。

FrameLayout

FrameLayoutはAndroidViewで使われるViewGroupの一つです。利用頻度はあまり多くありませんが、一時期まではかなり重要な使い道がありました。今回はそんなFrameLayoutの使い方について解説します。

押さえておくポイント

FrameLayoutを使うにあたって押さえておくべきポイントを解説します。

1. layout_gravity
2. 使いどころ

layout_gravity

layout_gravityはViewをどこに配置するかを設定するものです。LinearLayoutにもこの設定項目はありますが、LinearLayoutがorientationの設定値にも影響する一方、FrameLayoutではこれ一つで配置が完結します。

layout_gravityには以下を設定することができます。|（パイプ）で繋げることで複数設定することも可能です。

• top
• FrameLayoutに対して上寄せにViewを配置します。
• bottom
• FrameLayoutに対して下寄せにViewを配置します。
• start
• FrameLayoutに対して左寄せにViewを配置します。
• end
• FrameLayoutに対して右寄せにViewを配置します。
• center_vertical
• FrameLayoutの上下中央にViewを配置します。
• center_horizontal
• FrameLayoutの左右中央にViewを配置します。
• center
• FrameLayoutの中央にViewを配置します。

実装サンプルを載せます。topとstartはViewが移動しないので省略します。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:text="center"
        android:textSize="8dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"/>
        
    <TextView
        android:text="center\nvertical"
        android:textSize="8dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"/>

    <TextView
        android:text="center\nhorizontal"
        android:textSize="8dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"/>

    <TextView
        android:text="end"
        android:textSize="8dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end"/>

    <TextView
        android:text="bottom"
        android:textSize="8dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"/>

</FrameLayout>

このレイアウトのプレビューが以下になります。

使いどころ

前述した通り、FrameLayoutは使いどころが少ないViewGroupです。ただ古いアプリの場合、特にAndroidのバージョンが4.4まではLinearLayoutやRelativeLayoutにforegroundの設定がサポートされていませんでした。その時に唯一foregroundがサポートされていたViewGroupがFrameLayoutでした。Viewをタップした時にオーバーレイする形でViewの色を変えたい時はこのforegroundが唯一の解決方法ですので、そのような表示をするためにFrameLayoutが利用されていたというわけです。

まとめ

今回はFrameLayoutの使い方について解説しました。「いまさら聞けないFrameLayout」と名打ちましたが、押さえておくべきポイントは他のViewGroupより少ないので、いざ使うことになったとしても困ることは多くないでしょう。

参考

• FrameLayout  |  API reference  |  Android Developers

Android ウィジェット機能の実装方法を解説

どうも。どっことです。今回はAndroidのウィジェット機能の実装方法について解説します。

ウィジェット機能

iOSと大きく違うところとして、Androidはウィジェット機能が挙げられると思います。アプリを起動しなくても、必要な機能だけ切り出したコンポーネントをホーム画面に配置することで、ユーザが必要なサービスにダイレクトにアクセスできるようになり、ユーザにより良い体験を提供することができます。

今回は、そんなウィジェット機能の実装方法について解説します。

実装手順

実装手順は以下の通りです。

1. レイアウトファイルを用意する
2. ウィジェット用の設定ファイルを追加する
3. AppWidgetProviderのサブクラスを作成する
4. AndroidManifest.xmlに追記する

順番に解説していきます。

レイアウトを用意する

後続の処理を円滑に進めるため、まずはウィジェットとして表示するレイアウトファイルを追加します。これは通常のレイアウトファイルと同様res/layoutフォルダに配置します。ここではwidget_sample_view.xmlとして以下を配置します。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:text="Button"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</FrameLayout>

ウィジェット用の設定ファイルを追加する

アプリがウィジェット機能を具備していることをOS側に検知してもらうため、設定ファイルを作成します。作成したファイルは（普段使うことがあまりない）res/xmlフォルダに配置します。ここではwidget_provider.xmlとして以下を配置します。

<?xml version="1.0" encoding="utf-8"?>
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:initialLayout="@layout/widget_sample_view"
    android:minHeight="100dp"
    android:minWidth="200dp"
    android:updatePeriodMillis="1000000" >
</appwidget-provider>

AppWidgetProviderのサブクラスを作成する

AppWidgetProviderを継承したカスタムクラスを作成します。今回はSampleWidgetProviderとして以下を作成します。

class SampleWidgetProvider : AppWidgetProvider() {

  override fun onUpdate(
    context: Context?,
    appWidgetManager: AppWidgetManager?,
    appWidgetIds: IntArray?
  ) {
    context ?: return
    val remoteViews = RemoteViews(context.packageName, R.layout.widget_sample_view)

    val widget = ComponentName(context, SampleWidgetProvider::class.java)
    appWidgetManager?.updateAppWidget(widget, remoteViews)
  }

}

AndroidManifest.xmlに追記する

AndroidManifest.xmlに前項までに追加した設定ファイルとクラスを追記します。receivertタグでSampleWidgetProviderを追加し、Widgetのアップデート通知を受け取るためのintent-filter、前項で作成した設定ファイルをmeta-dataとしてタグ内に設定します。

  <application
      ...>
      
      <receiver android:name=".SampleWidgetProvider"
          android:exported="true">
          <intent-filter>
            <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
          </intent-filter>

          <meta-data
            android:name="android.appwidget.provider"
            android:resource="@xml/widget_provider" />
      </receiver>

  </application>

ここまで実装すれば、実装したウィジェットをホーム画面に配置することができます。

補足

ウィジェット内のViewにクリックリスナーを設定したい

ウィジェット内にクリックリスナーを設定する場合、通常のクリックリスナーと異なり実装できることはIntentを発火させるだけになります。このIntentをActivityやService、BroadcastReceiverで受け取り、必要な処理をそちらで実施します。画面を表示したいならActivity、画面を表示せず必要な情報を更新したいなどであればService、BroadcastReceiverが通知先になります。

以下の例は、SampleActivityを起動する場合（何らかの画面を表示するケース）です。RemoteViews.setPendingIntentを使って、クリックリスナーを設定したいViewのidと、そのViewがタップされたときに発火するIntent（PendingIntent）を渡します。

class SampleWidgetProvider : AppWidgetProvider() {

  override fun onUpdate(
    context: Context?,
    appWidgetManager: AppWidgetManager?,
    appWidgetIds: IntArray?
  ) {
    context ?: return
    val remoteViews = RemoteViews(context.packageName, R.layout.widget_sample_view)

    // ボタンがタップされた時のintent(PendingIntent)を設定
    remoteViews.setOnClickPendingIntent(R.id.button, createPendingIntent(context))
    val widget = ComponentName(context, SampleWidgetProvider::class.java)
    appWidgetManager?.updateAppWidget(widget, remoteViews)
  }

  private fun createPendingIntent(context: Context): PendingIntent {
    // SampleActivityを通知先として指定
    val intent = Intent(context, SampleActivity::class.java)  
    // 通知先がActivityなので、PendingIntent.getActivityでPendingIntentを生成。
    // requestCodeやflagは任意の値
    return PendingIntent.getActivity(context, 100, intent, PendingIntent.FLAG_IMMUTABLE)
  }
}

まとめ

今回はAndroidのウィジェット機能の実装方法について解説しました。開発したアプリを利用してもらうための導線としてもウィジェットは機能するので、利用する際は参考にしていただけると幸いです。

参考

• シンプルなウィジェットを作成する  |  Views  |  Android Developers
• RemoteViews  |  API reference  |  Android Developers
• Androidでの簡易なWidget作り方 #Android - Qiita

Android そういえば Kotlin Coroutine ってどう使うのが良いの？

どうも。どっことです。今回はKotlinCoroutineのテーマです。

Kotlin Coroutine

Kotlin Coroutineは非同期処理などのコールバック地獄を解消してくれたり、可読性の高いコードを実装できるようになる便利な機能ですが、「実際のところ、どう使うのが良いの？」と考えました。今回はそんな使うと便利だけど実際どう使うかイマイチ分からない人向けに、ベストプラクティスのページの内容を簡単に紹介したいと思います。

TL;DR（結論）

ViewModelを実装してviewModelScope.launch／View側ではlifecycleScope.launchを使うのがよさそうです。

Google開発者サイトでコルーチンに関するベストプラクティスが紹介されています。コルーチンにフォーカスしたものだと、以下が挙げられています。

1. Dispatcherを外から注入できるようにする
2. ViewModelでコルーチンを作成する
3. GlobalScopeは使わない
4. コルーチンをキャンセルできるようにする

Dispatcherを外から注入できるようにする

withContextなどで引数に設定するDispatcher（どのスレッドで処理するかの指定）は、ハードコードせず外から注入できる形にした方が良いです。テストコードを実装するときにテストが容易にできるようになります。

// OK:処理するDispatcherを外から指定する
class SampleRepository(private val ioDispatcher: CoroutineDispatcher =  Dispatchers.IO) {
    suspend fun veryHeavyTask() = withContext(ioDispatcher) {
        // very heavy task
    }
}

class SampleRepository() {
    // NG: Dispatcherをハードコード（直接指定）しない
    suspend fun veryHeavyTask() = withContext(Dispatchers.IO) {
        // very heavy task
    }
}

ViewModelでコルーチンを作成する

ViewModelを作成し、そこでコルーチンを作成→非同期処理を実装するのがよいとのことです。

そして画面側に非同期処理が必要なことを意識させることがないよう、suspend関数として公開しないよう実装するのが良いとのことです。

class SampleViewModel(): ViewModel() {
    private val repository = SomeRepository()

    // NG:UI側にsuspend関数（=非同期処理）として公開しない
    suspend fun badSample() = repository.veryHeavyTask()

    // OK:ViewModel内でコルーチンを生成し非同期処理を実行する
    fun sample() {
        viewModelScope.launch {
            repository.veryHeavyTask()
        }
    }
}

GlobalScopeを使わない

テストコードの実装しにくさ、GlobalScopeをハードコードしていることによりDispatcherもハードコードされやすくなる点などから、GlobalScopeを利用しないことを推奨しています。

class SampleRepository() {
    fun veryHeavyTask() {
        // NG：GlobalScopeをハードコードしない
        GlobalScope.launch {
            // very heavy task
        }
    }
}

GlobalScopeの利用が正当であるケースはかなり稀で、アプリが生存期間中にアクティブな状態を維持しなければいけない状態とのことです。また、現在のスコープより長い生存期間が必要な処理であれば、CoroutineScopeを外部から指定するような構成とすることを検討すべきとのことです。

コルーチンをキャンセル可能にする

コルーチンはキャンセル可能ですが、実際コルーチン内でキャンセルされたか確認したり、停止したりするまではコルーチンはキャンセルされないとのことです。ensureActiveを使用することでキャンセルの確認ができます。

class SampleViewModel(): ViewModel() {
    private val repository = SampleRepository()

    fun sample(value: Int) {
        viewModelScope.launch { 
            val result = repository.validateValue(value)
            // キャンセルできるタイミングでアクティブか確認
            ensureActive()
            if (result) {
                repository.submit(value)
            }
        }
    }
}

まとめ

今回はKotlinCoroutineのベストプラクティスについて紹介しました。より詳しい内容は参考に記載したGoogleのベストプラクティスの記事からさまざまなページにアクセスできるので、ぜひ参考にしてください。

参考

• Android での Kotlin コルーチン  |  Android Developers
• Android でのコルーチンに関するベスト プラクティス  |  Kotlin  |  Android Developers
• Kotlin コルーチン 1.5: GlobalScope がデリケート扱いに、チャンネル API の改善など | The Kotlin Blog

Android BottomSheetDialogFragmentの実装方法を解説

どうも。どっことです。今回はBottomSheetDialogFragmentについて解説します。

BottomSheetDialogFragmentについて解説

BottomSheetDialogFragmentは通常のダイアログから派生したクラスで、下からスライドインで生えてくるような見え方が印象的です。最初に表示するダイアログの高さや、スクロールの制御もでき、通常のダイアログよりカスタマイズ性が高い点も特徴的です。

実装

最小構成で実装する場合は以下の手順です。

1. BottomSheetDialogFragment用のstyleを追加する。
2. BottomSheetDialogFragmentのサブクラスを実装する。

順番に解説していきます。

styleを追加する

<style name="BottomSheetDialogTheme" parent="@style/Theme.Design.Light.BottomSheetDialog"/>

BottomSheetDialogThemeというstyleを追加します。

サブクラスを実装する

BottomSheetDialogFragmentを継承したCustomBottomSheetDialogFragmentクラスを追加します。

class CustomBottomSheetDialogFragment :
    BottomSheetDialogFragment(R.layout.fragment_bottom_sheet_dialog) {

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        return BottomSheetDialog(requireContext(), R.style.BottomSheetDialogTheme)
    }
}

ダイアログ内で表示するためのコンテンツもレイアウトファイル(fragment_bottom_sheet_dialog.xml)として追加しておきましょう。

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:gravity="center"
        android:padding="16dp"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text="hello_world!!"/>

</FrameLayout>

これだけ実装すれば、BottomSheetDialogFragmentを表示することができます。

class MainActivity : AppCompatActivity() {
  
  ...
  
  fun showDialog() {
   val dialog = CustomBottomSheetDialogFragment()
   dialog.show(supportFragmentManager, null)
  }
}

実際に表示すると、以下のようになります。

その他

ナビゲーションバーの表示を格好良くしたい

styleをカスタマイズします。

<style name="BottomSheetDialogTheme" parent="@style/Theme.Design.Light.BottomSheetDialog">
  <item name="android:windowIsFloating">false</item>
</style>

windowIsFloating:falseを設定することで、以下のようにナビゲーションバーの表示が不透明になり比較的自然な表示になります。

さらにダイアログとナビゲーションバーの表示を同じにしたい場合は、以下のようにBottomSheetというスタイルを追加し、BottomSheetDialogThemeのスタイルに追加してください。

<style name="BottomSheet" parent="@style/Widget.Design.BottomSheet.Modal">
    <item name="android:background">@android:color/darker_gray</item>
</style>

<style name="BottomSheetDialogTheme" parent="@style/Theme.Design.Light.BottomSheetDialog">
    <item name="android:windowIsFloating">false</item>
    <item name="android:navigationBarColor">@android:color/darker_gray</item>
    <item name="bottomSheetStyle">@style/BottomSheet</item>
</style>

ダイアログの背景色を指定したい場合は BottomSheet スタイルの 背景色(background)を変更して下さい。このときBottomSheetDialogThemeのnavigationBarColorを同じ色になるように注意してください。

最初に表示される高さを調整したい

いくつか注意が必要です。

まず、BottomSheetDialogFragmentの呼び出し元のレイアウトがCoordinatorLayoutである必要があります。これは、高さ調整をするためのBottomSheetBehaviorクラスの制約となります。

ここではActivityがダイアログを表示するサンプルなので、Activityのレイアウトを調整します。

<androidx.coordinatorlayout.widget.CoordinatorLayout 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/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ダイアログを表示"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>


</androidx.coordinatorlayout.widget.CoordinatorLayout>

次に、ダイアログが表示されるタイミングでBottomSheetBehaviorを生成しますが、この時に渡すViewをcom.google.android.material.R.id.design_bottom_sheetでfindViewByIdで参照する必要があります。これもBottomSheetBehaviorクラスの制約です。

class CustomBottomSheetDialogFragment :
    BottomSheetDialogFragment(R.layout.fragment_bottom_sheet_dialog) {

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        return BottomSheetDialog(requireContext(), R.style.BottomSheetDialogTheme)
            .also { dialog ->
                dialog.setOnShowListener {
                    dialog.findViewById<View>(com.google.android.material.R.id.design_bottom_sheet)
                        ?.let {
                            BottomSheetBehavior.from(it).also {
                                // 後述
                            }
                        }
                }
            }
    }
}

Viewを参照するIDがSDK側のものなので、正直あまりいい実装とは言えないという所感です。より適切な実装がみつかりましたら、この記事を更新しようと思います。

ここまでを調整した上で、生成するBottomSheetBehaviorに対してpeekHeightやstateを設定することで、最初に表示されるダイアログの高さを調整することができます。

class CustomBottomSheetDialogFragment :
    BottomSheetDialogFragment(R.layout.fragment_bottom_sheet_dialog) {

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        return BottomSheetDialog(requireContext(), R.style.BottomSheetDialogTheme)
            .also { dialog ->
                dialog.setOnShowListener {
                    dialog.findViewById<View>(com.google.android.material.R.id.design_bottom_sheet)
                        ?.let {
                            BottomSheetBehavior.from(it).also {
                                it.peekHeight =
                                    resources.getDimensionPixelSize(R.dimen.bottom_sheet_dialog_initial_height)
                                it.state = BottomSheetBehavior.STATE_COLLAPSED
                            }
                        }
                }
            }
    }
}

peekHeightには最初に表示する高さを、stateにはBottomSheetBehavior.STATE_COLLAPSEDを指定してください。

まとめ

今回はBottomSheetDialogFragmentについて解説しました。通常のDialogFragmentより実装が必要なポイントが多いですが、見せ方のカスタマイズできる点や元の画面表示の邪魔をしない点では、ユーザに優しい表示方法の一つと言えます。使い所を意識して使いこなせるようになりたいですね。

参考

• 【Kotlin】BottomSheetDialogを触ってみた - コトリンとぽっぽ
• 【Android】BottomSheetDialogFragmentで少しハマったっていう思い出話と解決策 - ぐみおじさんのAndroid旅
• BottomSheetBehaviorを使う #Android - Qiita
• 
  

Android CustomTab(ChromeCustomTab)の使い方を紹介

どうも。どっことです。今回はCustomTab(ChromeCustomTab)の使い方を紹介します。

CustomTabについて

CustomTabはアプリ内で利用できるブラウザ機能です。CustomTabが登場する前はWebViewという機能がアプリでのブラウザとしての役目を果たしておりましたが、セキュリティや表示速度などの観点から現在はCustomTabを使うことが推奨されています。

実装

実装手順は以下の通りです。

1. app/build.gradleに依存関係を追加する。
2. CustomTabIntent.Builderを使ってCustomTabIntentを生成する。
3. CustomTabIntent.launchUrlを実行する。

順番に解説していきます。

app/build.gradleを実装する

まずはapp/build.gradleに依存関係を追加します。

dependencies {
    // 既存にある dependencies に以下を追加する
    implementation "androidx.browser:browser:1.8.0"
}

CustomTabIntent.Builderを生成する

次にCustomTabIntent.Builderを使ってCustomTabIntentを生成します。

val builder = CustomTabsIntent.Builder()
val customTabIntent = builder.build()

CustomTabIntent.launchUrlを実装する

最後にCustomTabIntentにあるlaunchUrl関数を使って、アクセスしたいWebページを表示します。

customTabIntent.launchUrl(this@MainActivity, Uri.parse("https://www.google.co.jp/"))

その他

CustamTabの表示をカスタマイズしたい

CustomTabIntent.Builderに対して、パラメータを設定することでカスタマイズすることができます。今回は参考欄に詳細の項目のページを記載する程度で割愛。

認証に利用したい

現在2025/4時点ではまだalpha版ですが、AuthTabIntentが将来的に利用できるようです。

良くある認証フローでは、認証が完了したタイミングでアプリに戻るためのリダイレクトURLを発火してもらうことが一般的ですが、そのハンドリングの一部をAuthTabIntentで制御してくれるようです。

• [認証] タブを使用して認証を簡素化する  |  Web on Android  |  Chrome for Developers

ChromeCustomTabから戻ってきたことを検知したい

activityResultLauncherを利用すれば実現できます。参考はこちら。

ただ前述したように、CustomTabIntentにlaunchUrlのインターフェースが実装されている点から、これは推奨される利用方法ではない印象です。

val intent = customTabIntent.intent.also {
    it.setData(Uri.parse("https://www.google.co.jp/"))
}
// registerForActivityResult で生成したactivityResultLauncherを使って呼び出し
launcher.launch(intent) 

まとめ

今回はCustomTabについて解説しました。WebViewよりも優れている点が多く、シンプルに使う分には簡単に実装できるためぜひ活用してみてください。

参考

• Android カスタムタブの概要  |  Web on Android  |  Chrome for Developers
• Chrome Custom Tabsを使いこなす | TechBooster
• android - Chrome custom tabs activity result - Stack Overflow

Android Admobのためのライブラリ UMPの実装方法を解説

どうも。どっことです。今回はAdmobを利用するためのUMP（UserMessagingPlatform）ライブラリについて解説します。

UMPライブラリ

Androidアプリ内に広告を表示するためには、Admobライブラリを使って広告表示用のViewを組み込む必要がありますが、それと合わせてユーザに許諾を得る処理も必要です。

今回はユーザに許諾を得るためのUMP（UserMessagingPlatform）ライブラリの使い方について解説します。

実装概要

実装の手順は以下の通りです。

1. app/build.gradleのdependenciesに依存関係を追加
2. AndroidManifest.xmlにmeta-dataを追加
3. ユーザから許諾を得る処理を実装

順番に解説していきます。

依存関係の追加

app/build.gradleのdependenciesに依存関係を追加します。

dependencies { 
    ... 
    // 既存のdependenciesスコープに以下を追加
    implementation("com.google.android.ump:user-messaging-platform:2.0.0")
}

meta-dataの追加

AndroidManifest.xmlにmeta-dataを追加します。valueに設定する値はAdmobのページから取得してください。

<!--Sample app ID: ca-app-pub-3940256099942544~3347511713-->
<meta-data android:name="com.google.android.gms.ads.APPLICATION_ID"
           android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>

ユーザから許諾を得る処理を実装

ここからは広告を表示するにあたってユーザから許諾を得るための処理を実装します。

同意情報のオブジェクトを取得し更新する

UserMessagingPlatform.getConsentInformationでconsentInformationを取得します。

取得したconsentInformationに対して同意情報を更新します。その後、処理終了が非同期に通知されます。

val params = ConsentRequestParameters.Builder()
    .setTagForUnderAgeOfConsent(false)
    .build()
val consentInformation = UserMessagingPlatform.getConsentInformation(activity)
consentInformation.requestConsentInfoUpdate(activity, params, {
    // 処理終了。後述。
}, { error ->
    // Handle the error.
})

表示が必要なフォーム（許諾情報）があるかチェックし、更新する

処理終了の通知を受けてフォームの利用可否をチェックし、可能であればフォーム更新処理に進みます。

val params = ConsentRequestParameters.Builder()
    .setTagForUnderAgeOfConsent(false)
    .build()
val consentInformation = UserMessagingPlatform.getConsentInformation(activity)
consentInformation.requestConsentInfoUpdate(activity, params, {
    // 処理終了。
    if (consentInformation.isConsentFormAvailable) {
        // 同意フォーム利用可能。
        // 更新処理へ。後述。
        loadForm(activity, consentInformation)
    } else {
        // 同意フォーム利用不可。
        // 設定、フォーム更新中など。
        // 再更新を促すのが無難。
    }
}, { error ->
    // Handle the error.
})

同意フォームを更新し、同意フォームを表示、ユーザに許諾を得る

UserMessagingPlatform.loadConsentFormで同意フォームを更新します。これはメインスレッドで実施するよう、サンプルにコメントされています。

更新処理が終了すると非同期に通知されるので、それを契機に許諾状態を確認しましょう。その結果、未許諾（REQUIRED）であればフォームオブジェクトに表示を依頼します。これにより、ユーザに同意フォームが表示されるはずです。

ユーザ操作を契機にフォームが非表示になったことがアプリに通知されますので、これを契機に許諾状態を再度取得してください。これでユーザに許諾してもらえていれば、晴れてアプリ内で広告表示可能という状態になります。

private fun loadForm(consentInformation: ConsentInformation) {
  // Loads a consent form. Must be called on the main thread.
  UserMessagingPlatform.loadConsentForm(activity, { consentForm ->
    if (consentInformation.consentStatus == ConsentInformation.ConsentStatus.REQUIRED) {
      // 同意フォームを表示しユーザに許諾を得る。
      consentForm.show(activity) {
        if (consentInformation.consentStatus == ConsentInformation.ConsentStatus.OBTAINED) {
          // 無事にユーザから許諾を得られた！
        } else {
          // 同意を得られなかった...
          // 同意をもらえなかったことによる制御へ
        }
      }
    }
  }, { error ->
    // Handle the error.
  })
}

まとめ

今回はAdmobを利用するための UMPライブラリについて解説しました。広告をアプリ内に組み込むためにはAdmobによる広告表示処理と合わせてユーザに同意を得る処理も必要不可欠ですので、参考にしていただけると幸いです。

参考

• AdMob  |  Google for Developers
• 使ってみる  |  Android  |  Google for Developers