Configuration of the Antivirus UI for Android

View product develop

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

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

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.

Configuration of the Antivirus UI for Android

Styling Threat Screen

Applying Theme

Additional configurations

Read Next