カスタムスタイリング

Braze の UI 要素は、Android 標準の UI ガイドラインにマッチしたデフォルトのルックアンドフィールで提供され、シームレスな体験を提供します。このリファレンス記事では、Android または FireOS アプリケーションのアプリ内メッセージングのカスタムスタイリングについて説明します。

デフォルトのスタイルは、Braze SDK のstyles.xmlファイルで確認できます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <style name="Braze"/>
  <style name="Braze.InAppMessage"/>
  <style name="Braze.InAppMessage.Header">
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_width">match_parent</item>
    <item name="android:padding">0.0dp</item>
    <item name="android:background">@android:color/transparent</item>
    <item name="android:textColor">@color/com_braze_inappmessage_header_text</item>
    <item name="android:textSize">20.0sp</item>
    <item name="android:lineSpacingMultiplier">1.3</item>
    <item name="android:gravity">center</item>
    <item name="android:textStyle">bold</item>
    <item name="android:layout_centerHorizontal">true</item>
  </style>

必要に応じて、これらのスタイルをオーバーライドし、アプリにより適したルックアンドフィールを作成することができます。

スタイルを上書きするには、スタイル全体をプロジェクトのstyles.xmlファイルにコピーし、変更を加えます。すべての属性が正しく設定されるようにするには、スタイル全体をローカルのstyles.xmlにコピーする必要があります。これらのカスタムスタイルは、個々の UI 要素を変更するためのものであり、レイアウトを全面的に変更するものではないことに注意してください。レイアウトレベルの変更はカスタムビューで処理する必要があります。

カスタムフォント

Braze では、フォントファミリガイドを使用してカスタムフォントを設定することができます。使用するには、メッセージテキスト、ヘッダー、ボタンテキストのスタイルをオーバーライドし、fontFamily属性を使用して、Braze にカスタムフォントファミリを使用するように指示します。

例えば、アプリ内メッセージボタンテキストのフォントを更新するには、Braze.InAppMessage.Buttonスタイルをオーバーライドし、カスタムフォントファミリを参照します。属性値は、res/fontディレクトリのフォントファミリを指す必要があります。

以下は、最後の行でカスタムフォントファミリ my_custom_font_family が参照されている部分的なコード例です。

1
2
3
4
5
6
7
  <style name="Braze.InAppMessage.Button">
    <item name="android:layout_height">wrap_content</item>
    ...
    <item name="android:paddingBottom">15.0dp</item>
    <item name="android:fontFamily">@font/my_custom_font_family</item>
    <item name="fontFamily">@font/my_custom_font_family</item>
  </style>

ボタンテキストのBraze.InAppMessage.Buttonスタイルは別として、メッセージテキストのスタイルはBraze.InAppMessage.Message、メッセージヘッダーのスタイルはBraze.InAppMessage.Headerです。アプリ内メッセージの全テキストにカスタムフォントファミリを使用する場合は、Braze.InAppMessageスタイルにフォントファミリを設定することができます。このスタイルは、すべてのアプリ内メッセージの親スタイルとなります。

方向を固定する

アプリ内メッセージに固定方向を設定するには、最初にカスタムのアプリ内メッセージマネージャーリスナーを設定します。次に、beforeInAppMessageDisplayed()デリゲートメソッドでIInAppMessageオブジェクトに対してsetOrientation()を呼び出します。

• java
• kotlin

1
2
3
4
5
public InAppMessageOperation beforeInAppMessageDisplayed(IInAppMessage inAppMessage) {
  // Set the orientation to portrait
  inAppMessage.setOrientation(Orientation.PORTRAIT);
  return InAppMessageOperation.DISPLAY_NOW;
}

1
2
3
4
5
override fun beforeInAppMessageDisplayed(inAppMessage: IInAppMessage): InAppMessageOperation {
  // Set the orientation to portrait
  inAppMessage.orientation = Orientation.PORTRAIT
  return InAppMessageOperation.DISPLAY_NOW
}

タブレット端末の場合、アプリ内メッセージは、実際の画面の向きに関係なく、ユーザーが希望する向きのスタイルで表示されます。