react-native-malwarelytics/docs/Configuration-Antivirus-UI.md

Malwarelytics for React Native protects your banking or fintech app from a broad range of mobile security threats with an industry-leading mobile threat intelligence solution.

# Configuration of the Antivirus UI for Android

Antivirus component for the Android platform can display UI to alert the user about the threat. The UI can be styled so it fits the theme of your app. To properly customize the Malwarelytics Antivirus UI, you will need to alter Android resources and gradle scripts in your application.

## Styling Threat Screen

Threat screen can by styled by setting custom theme for the activity and by changing icons for the image buttons on the screen.

There are three icons. Notification, delete icon and settings icon:

- Delete icon serves for button requesting app uninstall (for apps that can be uninstalled).
- Settings icon serves for button opening app's detail in system settings (for apps that cannot be uninstalled) where user can disable the app. 
- Notification icon is displayed in the notification.

The theme for the screen should contain standard Android attributes and can contain couple of extra attributes defined by the AV SDK.

We recommend to derive the theme from AppCompat themes. The usage of ActionBar in the screen is derived from the theme. Use `NoActionBar` version of the theme for design without the ActionBar (contains the app name). Alternatively you can hide the ActionBar by adding

```xml
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
```
to your theme.

Following is an example of a theme using Wultra-defined attributes that you can put into your `android/app/src/main/res/values/malwarelytics.xml` file:

```xml
<resources>
    <color name="transparent">#0000</color>
    <color name="black">#000</color>
    <color name="blue">#07c</color>
    <color name="red">#d00</color>
    <color name="ti_m">#f00</color>
    <color name="ti_hd">#c00</color>
    <color name="ti_d">#900</color>
    <color name="ti_pup">#fa0</color>
    <color name="ti_wl">#0a0</color>
    <color name="ti_u">#aaa</color>

    <color name="customWhite">#ffff</color>
    <color name="customMain">#358dc6</color>
    <color name="dark_2">#222222</color>
    <color name="gray_dark">#333333</color>
    <color name="gray_medium">#777777</color>

    <dimen name="custom_button_radius">22dp</dimen>
    <dimen name="custom_text_size_normal">19.2sp</dimen>
    <dimen name="custom_text_size_small">16.8sp</dimen>

    <style name="CustomAppTheme" parent="Theme.AppCompat.NoActionBar">
        <item name="colorPrimary">@color/customMain</item>
        <item name="colorPrimaryDark">@color/dark_2</item>
        <item name="colorAccent">@color/customMain</item>

        <item name="titleTextColor">@android:color/black</item>

        <item name="buttonStyle">@style/CustomAppTheme.Button.Filled</item>
        <item name="imageButtonStyle">@style/CustomAppTheme.ImageButton.Borderless</item>

        <item name="wultra_av_threatTitleTextAppearance">@style/CustomAppTheme.TextAppearance.Title</item>
        <item name="wultra_av_threatTitleStyle">@style/CustomAppTheme.TextView.Title</item>
        <item name="wultra_av_threatDescriptionTextAppearance">@style/CustomAppTheme.TextAppearance.Description</item>
        <item name="wultra_av_threatDescriptionStyle">@style/CustomAppTheme.TextView.Description</item>
        <item name="wultra_av_threatProtipTextAppearance">@style/CustomAppTheme.TextAppearance.Description</item>
        <item name="wultra_av_threatProtipStyle">@style/CustomAppTheme.TextView.Description</item>
        <item name="wultra_av_threatPackageNameTextAppearance">@style/CustomAppTheme.TextAppearance.PackageName</item>
    </style>

    <style name="CustomAppTheme.TextAppearance.Button" parent="TextAppearance.AppCompat.Button">
        <item name="android:textColor">@color/black</item>
        <item name="android:textSize">@dimen/custom_text_size_normal</item>
        <item name="android:textStyle">bold</item>
    </style>

    <style name="CustomAppTheme.Button.Filled" parent="Widget.AppCompat.Button">
        <item name="android:textAppearance">@style/CustomAppTheme.TextAppearance.Button</item>
        <item name="android:textAllCaps">false</item>
        <item name="android:background">@drawable/custom_button_filled</item>
    </style>

    <style name="CustomAppTheme.ImageButton.Borderless" parent="Widget.AppCompat.ImageButton">
        <item name="android:background">@drawable/custom_button_borderless</item>
    </style>

    <style name="CustomAppTheme.TextAppearance.Title" parent="TextAppearance.AppCompat.Title">
        <item name="android:textColor">@color/customMain</item>
    </style>

    <style name="CustomAppTheme.TextView"/>

    <style name="CustomAppTheme.TextView.Title">
      <item name="android:gravity">center</item>
    </style>

    <style name="CustomAppTheme.TextView.Description">
      <item name="android:gravity">left</item>
    </style>

    <style name="CustomAppTheme.TextAppearance.Description" parent="TextAppearance.AppCompat.Medium">
        <item name="android:textColor">@color/customWhite</item>
        <item name="android:textSize">@dimen/custom_text_size_small</item>
    </style>

    <style name="CustomAppTheme.TextAppearance.PackageName" parent="TextAppearance.AppCompat.Title">
        <item name="android:textSize">@dimen/custom_text_size_small</item>
        <item name="android:textColor">@color/customWhite</item>
        <item name="android:fontFamily">sans-serif</item>
        <item name="fontFamily">sans-serif</item>
    </style>
</resources>
```

## Applying Theme

Once you create your custom theme, then you have to apply it via the custom gradle scripts from the Malwarelytics for React Native library:

1. Open `android/app/build.gradle` file and navigate to the top of the file

1. Skip initial imports such as:
   ```gradle
   apply plugin: "com.android.application"
   apply plugin: "com.facebook.react"
   ```
   and add the following line:
   ```gradle
   apply from: "../../node_modules/react-native-malwarelytics/android/malwarelytics.gradle"
   ```

1. Alter `defaultConfig` section in `android` and add the following line:
   ```gradle
   android {
        defaultConfig {
            // Apply custom SmartProtection's UI configuration
            configureMalwarelyticsUI owner, "R.style.CustomAppTheme"
        }
   }
   ```

1. Rebuild your application


### Additional configurations

The `configureMalwarelyticsUI` function has the following parameters:

- `buildFlavor` is required, you use `owner` variable.
- `theme` is optional theme resource ID for Antivirus UI, for example `"R.style.CustomAppTheme"`
- `notificationSmallIcon` is optional resource ID for notificaiton icon, for example `"R.drawable.av_notification_icon"`
- `notificationChannelId` is optional string with channel ID for notification
- `deleteIcon` is optional resource ID for delete icon, for example `"R.drawable.av_delete_icon"`
- `settingsIcon` is optional resource ID for settings icon, for example `"R.drawable.av_settings_icon"`

You have to use `"null"` for each parameter that must be skip, for example:

```gradle
android {
    defaultConfig {
        // Apply custom SmartProtection's UI configuration
        configureMalwarelyticsUI owner, "R.style.CustomAppTheme", null, null, "R.drawable.av_delete_icon", "R.drawable.av_settings_icon"
    }
}
```

The script above configure UI with theme, delete and settings icons, but and skip notification icon and channel ID.


## Read Next

- [Usage](Usage.md)