HomeAppVirality DocsAndroid SDK IntegrationUI Customization

UI Customization

Every app’s design needs for itself to stand out from the tribe. This means you would have your own design schema for the app. It only makes sense to expect that the AppVirality SDK 2.0 and its accompanied resources should allow you enough scope for customization.

Please keep in mind that there are two aspects to customizing your Referral Screen UI.

  • Create/Edit Campaign settings : This allows you to make high-level changes like campaign image, background color, text color, etc.
  • UI Layout redesign : This allows you to completely redesign the schema of the provided AppVirality UI library project, to enhance, hide/highlight, etc. the fields given as a part of the default UI skin by AppVirality.

You must understand that the redesign of UI Layout, is an intensive process – mostly done during the Integration phase. Changes on UI level would always call for an App Update in the end from your side.

However, the Edit Campaign settings are available always at your disposal, to make adhoc high level changes that could impact your Referral’s perception & info communication to the end user. Changes done on this are instant, and get reflected on the app with immediate effect.

Let’s explore how one can customize the UI Layout for their app.

 

AppVirality provides a UI library that can be used as the default UI skin for your Referral screen. You can choose to ignore this, and set up your own Referral screen design. Even if you are using the AppVirality’s default UI, you can still customize it as per your choice.

To go ahead with the default UI, download the AppVirality UI library project and then edit the XML layouts as described down under.

The method described here will help in UI customization, even if you are not using the AppVirality UI library project. For your guidance on what it takes to map your designs with the right fields/parameters, this tutorial is necessary.

We’ve broken down the UI Layout redesign process into 4 easy to recall steps:

You must use AppViralityTheme as the theme for GrowthHackActivity, while declaring it as an activity in your manifest.

Default Theme

 
 <activity
    android:name="com.appvirality.appviralityui.activities.GrowthHackActivity"
    android:theme="@style/AppViralityTheme" />

 OR

Create a new style extending AppViralityTheme as its parent, modifying the style attributes values as per your requirements and then use this theme for the GrowthHackActivity.
New Style with AppViralityTheme as its parent

 
<activity
    android:name="com.appvirality.appviralityui.activities.GrowthHackActivity"
    android:theme="@style/AVTheme" />
 
 <style name="AVTheme" parent="AppViralityTheme">
    <!--<item name="colorPrimary">@android:color/white</item>
        <item name="tabBackground">@android:color/white</item>
        <item name="tabIndicatorColor">#303d4e</item>
        <item name="tabIndicatorHeight">2dp</item>
        <item name="tabSelectedTextColor">@android:color/black</item>
        <item name="tabTextColor">#303d4e</item>
        <item name="av_refer_label_text_color">#8a000000</item>
        <item name="av_earnings_bar_color">#939ca5</item>
        <item name="av_show_coupon_pools_bar">no</item>
        <item name="av_show_custom_ref_code_bar">no</item>
        <item name="av_show_friends_bar">no</item>
        <item name="av_show_coupons_bar">no</item>
        <item name="av_invite_contacts_action">both</item>-->
 </style>

Here is a Visual Representation to the Attributes responsible for each element/parameter depicted in the Referral Screen

Referral Screen Attributes
Referral Screen Attributes
Earnings Screen Attributes
Earnings Screen Attributes
AppViralityTheme style attributes - ELABORATED

The above mentioned details should be sufficient for managing your customization of the Default UI.

BUT…

If you need a deeper level of customization, than what has been explained above – then the below mentioned resources are the right ones to begin with your tweaking:

Class Files: GrowthHackActivity.java, ReferFragment.java, EarningsFragment.java

Layout Files: activity_growth_hack.xml, fragment_refer.xml, fragment_earnings.xml

These would be available in the AppViralityUI project

Welcome Screen
Welcome Screen

Welcome Screen background color, title color, message color is the same as that of the Referral screen, so once you make changes to the Referral screen colors from dashboard, same would be applied to the welcome screen too. You can easily customize the welcome screen further using WelcomeScreenActivity.java class and activity_welcome_screen.xml layout file in the UI project.

 
Pop up
Pop Up Notification

To customize a Popup you need to modify the CustomPopUp.java class and launch_popup layout file in the UI project.

 
Mini Notification
Mini Notification

To customize a Mini Notification you need to modify the CustomPopUp.java class and launch_mini_notification layout file in the UI project.

 

Was this article helpful to you? Yes 2 No