カスタムスタイル

このリファレンス記事では、Android または FireOS アプリケーションにカスタムニュースフィードスタイルを追加する方法について説明します。

Braze の UI 要素は、Android 標準の UI ガイドラインにマッチしたデフォルトのルックアンドフィールで提供され、シームレスな体験を提供します。これらのデフォルトのスタイルは、Braze SDK ディストリビューション内の res/values/style.xml ファイルで確認できます。

1
2
3
4
5
6
7
8
9
10
11
12
13
  <style name="Braze"/>
  <!-- Feed -->
  <style name="Braze.Feed"/>
  <style name="Braze.Feed.List">
    <item name="android:background">@android:color/transparent</item>
    <item name="android:divider">@android:color/transparent</item>
    <item name="android:dividerHeight">16.0dp</item>
    <item name="android:paddingLeft">12.5dp</item>
    <item name="android:paddingRight">5.0dp</item>
    <item name="android:scrollbarStyle">outsideInset</item>
  </style>
  ...
  </style>

必要に応じて、これらのスタイルをオーバーライドし、アプリにより適したルックアンドフィールを作成することができます。スタイルをオーバーライドするには、スタイル全体をプロジェクトの styles.xml ファイルにコピーし、変更を加えます。すべての属性が正しく設定されるようにするには、スタイル全体をローカルの styles.xml にコピーする必要があります。

• 正しいスタイルのオーバーライド
• スタイルのオーバーライドが正しくない

1
2
3
4
5
6
7
8
9
<style name="Braze.Feed.List">
  <item name="android:background">@color/mint</item>
  <item name="android:cacheColorHint">@color/mint</item>
  <item name="android:divider">@android:color/transparent</item>
  <item name="android:dividerHeight">16.0dp</item>
  <item name="android:paddingLeft">12.5dp</item>
  <item name="android:paddingRight">5.0dp</item>
  <item name="android:scrollbarStyle">outsideInset</item>
</style>

1
2
3
4
<style name="Braze.Feed.List">
  <item name="android:background">@color/mint</item>
  <item name="android:cacheColorHint">@color/mint</item>
</style>

フィードのスタイル要素

以下は、テーマ化可能な Braze UI 要素と、スタイル設定を目的としたその名前の説明です。

カスタムフォントの設定

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

たとえば、短いニュースカードのすべてのタイトルのフォントを更新するには、Braze.Cards.ShortNews.Title スタイルをオーバーライドし、カスタムフォントファミリを参照します。属性値は、res/fontディレクトリのフォントファミリを指す必要があります。

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

1
2
3
4
5
6
<style name="Braze.Cards.ShortNews.Title">
  <item name="android:layout_height">wrap_content</item>
  ...
  <item name="android:fontFamily">@font/my_custom_font_family</item>
  <item name="fontFamily">@font/my_custom_font_family</item>
</style>