Skip to content

Support UI Module

NarendraPrabhu edited this page May 30, 2018 · 2 revisions

The lia-ui module is an optional UI support library that includes a support-focused Community workflow. It includes a set of Activities and Fragments supporting message lists, message posting, community browsing and navigation, and keyword search. The module depends on lia-core.

See Community Android SDK UI components for descriptions of the activities and fragments.

Get the Support UI package

The easiest way to to use the lia-ui library is to include it as a dependency in your project.

  compile 'com.lithium.community.android:lia-ui:1.3.0'

Getting Started with the Support UI

Please go through the following sections before continuing

Once the SDK is initialized and a user is logged in the SDK broadcasts the login success message. Register to this broadcast event using a BroadcastReceiver and in the callback start the LiSupportHomeActivity

    private BroadcastReceiver receiver = new BroadcastReceiver() {
        @Override
        public void onReceive(Context context, Intent intent) {
            boolean result = intent.getBooleanExtra(LiCoreSDKConstants.LOGIN_RESULT, false);
            if (result) {
                if (LiSDKManager.isInitialized()) {
                    Intent intent = new Intent(this, LiSupportHomeActivity.class);
                    intent.putExtra(LiSupportHomeActivity.EXTRA_PARAM_TITLE, getString(R.string.app_name));
                    this.startActivity(intent);
                } else {
                    ToastUtils.notInitialized(this);
                }
            } else {
                Toast.makeText(context, "Login failed", Toast.LENGTH_LONG).show();
            }
        }
    };

For a complete reference implementation please checkout LoginActivity of the demo app

Note: This example uses Lithium Registration.

Add required elements to your theme

In order to customize and theme the Support UI, you must define these style attributes in the app's style.xml. Add the following to /res/values/styles.xml:

<resources>
 
    <!-- Base application theme. Creates the base theme. Used by SDK UI and Core-->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
 
        <!--Attributes for Lithium CoreSDK-->
        <item name="li_theme_popupOverlay">@style/AppTheme.PopupOverlay</item>
        <item name="li_theme_appBarOverlay">@style/AppTheme.AppBarOverlay</item>
 
        <!--Attributes for Lithium SDK UI Components-->
        <item name="li_theme_articleConversationStyleIcon">@drawable/ic_forum_black</item>
        <item name="li_theme_articleDoneIcon">@drawable/ic_done_black</item>
        <item name="li_theme_articlePinnedIcon">@drawable/ic_thumb_tack</item>
        <item name="li_theme_askQuestBubbleIcon">@drawable/ic_chat_bubble_black</item>
        <item name="li_theme_uploadPhotoIcon">@android:drawable/ic_menu_camera</item>
        <item name="li_theme_shareMessageIcon">@android:drawable/ic_menu_share</item>
        <item name="li_theme_browseListCategoryIcon">@drawable/ic_folder_black</item>
        <item name="li_theme_browseListBoardIcon">@drawable/ic_forum_black</item>
        <item name="li_theme_browseHeaderArrow">@drawable/ic_keyboard_arrow_right_black</item>
        <item name="li_theme_messageKudoBtnIcon">@drawable/ic_thumb_up_black</item>
        <item name="li_theme_messageReplyBtnIcon">@drawable/ic_reply_black</item>
        <item name="li_theme_messageAcceptBtnIcon">@drawable/ic_done_black</item>
        <item name="li_theme_newReplyTxtColor">@color/li_theme_newReplyTxtColor</item>
        <item name="li_theme_newReplyTxtSize">@dimen/li_theme_articleList_newReplyFontSize</item>
        <item name="li_theme_messageUserAvatarIcon">@drawable/ic_person_black</item>
        <item name="li_theme_askQSelectedImageRemoveIcon">@drawable/ic_remove_circle_black</item>
        <item name="li_theme_messageUnAcceptBtnIcon">@drawable/ic_clear_black</item>
        <item name="li_theme_askQPostQuestionBtn">@drawable/ic_send_white</item>
        <item name="li_theme_askQuestSelectedBoardColor">@color/li_theme_askQuestSelectedBoardColor</item>
        <item name="li_theme_errorLoginBtnTextColor">@color/li_theme_errorLoginBtnTextColor</item>
        <item name="li_theme_articleListPinnedTxtColor">@color/li_theme_articleListPinnedTxtColor</item>
        <item name="li_theme_articleListResolvedTxtColor">@color/li_theme_articleListResolvedTxtColor</item>
        <item name="li_theme_articleListDetailsTxtSize">@dimen/li_theme_articleListDetailsTxtSize</item>
        <item name="li_theme_background">@android:color/secondary_text_dark</item>
        <item name="li_theme_backbutton">@drawable/ic_arrow_back_black</item>
        <item name="li_theme_search_text_hint_color">@color/text_hint_color</item>
        <item name="li_theme_search_text_color">@android:color/white</item>   
    </style>
 
    <!-- Do not use the default Android Action Bar or Default title -->
    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>
 
    <!--  -->
    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
 
    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
 
</resources>

Next Steps

At this point, you can build and run your app.

The Help and Support button on screen launches a flow to browse the community, post messages, search for content, and view your activity.

See Community Android SDK UI components for descriptions of our activities and fragments.

Clone this wiki locally