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.

UI Layout redesign

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:

• Customizing Growth Hack Screen
• Customizing Welcome Screen
• Customizing Popup
• Customizing Mini Notification

Customizing Growth Hack Screen

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>

Referral Screen Attributes

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

AppViralityTheme style attributes - ELABORATED

You can use the following AppViralityTheme style attributes to customize the growth hack screen:

Attributes

Label	Attribute Name	Description
1	colorPrimary color	To set the color of toolbar.
2	actionBarSize int	To set the height of toolbar.
3	tabBackground color	To set the tab background color.
4	tabIndicatorColor color	To set the color of selected tab indicator line.
5	tabIndicatorHeight int	To set the height of selected tab indicator line.
6	tabSelectedTextColor color	To set the color of selected tab text.
7	tabTextColor color	To set the tab text color.
8	av_refer_label_text_color color	To set the color of Your, Share Via, Referral Link labels and social actions’ name.
9	av_earnings_bar_color color	To set the color of expandable bars on Earnings screen.
10	av_show_coupon_pools_bar yes / no	To set the visibility of coupon pools bar on Earnings screen.
11	av_show_custom_ref_code_bar yes / no	To set the visibility of customize referral code bar on Earnings screen.
12	av_show_friends_bar yes / no	To set the visibility of friends bar on Earnings screen.
13	av_show_coupons_bar yes / no	To set the visibility of coupons bar on Earnings screen.
14	av_invite_contacts_action sms / email / both	To set how to implement Invite Contacts feature, either via Only SMS, Only EMAIL or BOTH.

Note

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

Customizing 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.

Customizing Popup to launch growth hack

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

Customizing Mini Notification to launch growth hack

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