Configuration of the Antivirus UI for Android

View product v1.0.2

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

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

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

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

Skip initial imports such as:

apply plugin: "com.android.application"
apply plugin: "com.facebook.react"

and add the following line:

apply from: "../../node_modules/react-native-malwarelytics/android/malwarelytics.gradle"

Alter defaultConfig section in android and add the following line:

android {
     defaultConfig {
         // Apply custom SmartProtection's UI configuration
         configureMalwarelyticsUI owner, "R.style.CustomAppTheme"
     }
}

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:

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.

Configuration of the Antivirus UI for Android

Styling Threat Screen

Applying Theme

Additional configurations

Read Next