Fix notification background image layouts to render text RTL based on the device's language setting

[jkasten2]

Description

One Line Summary

Fix notification background image layouts to render RTL text based on the device's language setting.

Details

Motivation

Setting a custom background image for notifications is a supported feature only through the REST API, is limited in features, and Android 12 has limited customizability. However OneSignal currently supports this feature and it should remind free of common/high impact bugs.

Scope

Only affects the display of notifications when the following is true:

• Sent through the OneSignal REST API
• Includes android_background_layout in the payload.
• The AndroidManifest.xml has android:supportsRtl="true"
• The device has set a RTL language
  • Or Dev options > Drawing > "Force RTL layout direction" is enabled

This PR only affects the text rendering on background image notification layout.

Out of scope:

• Android 7-11, padding / styling. Known to not match other notifications on the device.
  • The background image layout assumes you are still conforming to the app icon / large icon being on the left which is Android 5-6 style layout. Not changing as this would be a breaking change since customers images are designed around that.
• Android 12 Rending - Android 12's layout changed dramatically, so omitting it from this scope.
• Android 4.1 (API 16), since android:textDirection was introduced in Android API level 17.
  • This might be ok, as this issue may not have existed on this version of android anyway.

What was the bug?

When the notification background image is set and the RTL conditions are meet, the notification text renders on the left side instead of the right side. It also renders over the left safe area (where the app icon is).

NOTE: Background image used in this example isn't the best example, an app icon should be backed into the background image, on left side.

On LTR devices notifications looks like this :

On RTL devices notifications looks like this:

Why the bug was happening?

The text elements on the notification layout had RTL disabled with tools:ignore="RtlCompat", and didn't account for the different padding location.

How the bug was fixed?

Added android:textDirection="locale" on the layout used for the both the title and body so it's influenced by the language direction. Also corrected title and body padding to support RTL.

Testing

Unit testing

N/A, only a visual layout change.

Manual testing

Tested the Example app included in this repo (it has android:supportsRtl="true") and set "Force RTL layout direction" on the device. Also tested w/o "Force RTL layout direction", to make sure it remained working.
Test on:

• Android 10 Emulator

Screenshot after fix

Android 10 Emulator with English with "Force RTL layout direction" enabled:

• Odd resize of 2nd notification was indented, just tested different image sizes

Affected code checklist

• Notifications
  • Display
  • Open
  • Push Processing
  • Confirm Deliveries
• Outcomes
• Sessions
• In-App Messaging
• REST API requests
• Public API changes

Checklist

Overview

• I have filled out all REQUIRED sections above
• PR does one thing
  • If it is hard to explain how any codes changes are related to each other then it most likely needs to be more than one PR
• Any Public API changes are explained in the PR details and conform to existing APIs

Testing

• I have included test coverage for these changes, or explained why they are not needed
• All automated tests pass, or I explained why that is not possible
• I have personally tested this on my device, or explained why that is not possible

Final pass

• Code is as readable as possible.
  • Simplify with less code, followed by splitting up code into well named functions and variables, followed by adding comments to the code.
• I have reviewed this PR myself, ensuring it meets each checklist item
  • WIP (Work In Progress) is ok, but explain what is still in progress and what you would like feedback on. Start the PR title with "WIP" to indicate this.

---

This change is 

[nan-li]

Just to clarify, the second notification image has a gap on the right side - this is correct behavior right? It is because the image itself is a smaller size, creating that gap?

[jkasten2]

@nan-li yes, the gap on the right is expected since the image on the 2nd notification is not very wide. Sorry it was a bad example that looks confusing.