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 components 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

The threat screen can be styled by setting a 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:

- The delete icon serves as a button requesting app uninstall (for apps that can be uninstalled).
- Settings icon serves as a button opening the app's details in system settings (for apps that cannot be uninstalled) where the 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 a couple of extra attributes defined by the AV SDK.

We recommend deriving the theme from AppCompat themes. The usage of ActionBar on the screen is derived from the theme. Use the `NoActionBar` version of the theme for design without the ActionBar (which 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 the `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 the `owner` variable.
- `theme` is an optional theme resource ID for Antivirus UI, for example `"R.style.CustomAppTheme"`
- `notificationSmallIcon` is an optional resource ID for the notification icon, for example `"R.drawable.av_notification_icon"`
- `notificationChannelId` is an optional string with channel ID for notification
- `deleteIcon` is an optional resource ID for delete icon, for example `"R.drawable.av_delete_icon"`
- `settingsIcon` is an optional resource ID for the settings icon, for example `"R.drawable.av_settings_icon"`

You have to use `"null"` for each parameter that must be skipped, 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 a theme, delete, and settings icons, but skips the notification icon and channel ID.


## Read Next

- [Usage](Usage.md)