All pages
Powered by GitBook
1 of 59

Android (Deprecated)

Social Plus modules are ready-to-use — the only things left to do for our customers are integration and front-end. Going the extra mile, we've created a UIKit with endless customizations.

Introduction

Our Chat UIKit and Social UIKit for Social Plus is a development kit with a user interface to enable fast integration of standard Social Plus Chat and Social Plus features into new or existing applications. Themes allow you to apply your style through colors and fonts.

We have now open-sourced Social Plus UIKit so you will have complete control of the visual style of your Chat and Social application with endless customizations. Social Plus UIKit open source is now available in our GitHub repository.

To customize Social Plus UIKit open source, download the source code and apply the customizations in the forked source code. Once you fork our UIKit source code separately, you basically own the product so you are free to customize and build it for your specific use cases.

We recommend that you use Social Plus UIKit open source when:

  1. The standard UIKit is not applicable to your use case.

  2. You want to use a Social Plus Chat or Social SDK feature which is not yet supported in our standard UIKit.

Please note that we will extend only limited support once you customize our UIKit open source since we won’t be able to fully know your code once you fork it.

Documentation

We are using the Social Plus UIKit open-source wiki for any documentation related to Social Plus UIKit open-source.

For our standard UIKit, you can refer to the documentation here.

Community Guidelines

If you would like to suggest improvements to the source code, you can submit a pull request. If you find bugs or would like to request features, you can create an issue. Please note that not all changes and requests will be approved but they will be assessed in due course.

For more information on these guidelines, you may refer to the Social Plus UIKit open-source wiki or you may go directly to these related pages:

  • Customizing Social Plus UIKit Open Source

  • Contributing to Social Plus UIKit Open Source

  • Submitting fixes and feature requests

Benefits

  • Easy Installation.

  • Fully-featured chat experience with minimal coding.

  • Customize targeted UX flows, and specific views and respond to user interactions to tailor a user experience for just your application.

Overview

Requirements

  • Android 5.0 (API level 21 or higher)

  • Java 8

  • AndroidX

  • Material components

  • Gradle 3.4.0 or higher

Implementation Strategies

The UIKit API provides several strategies to integrate with your application.

Page Presentation

  • Use the UIKit, ready to use out of the box

  • Integrate the Chat experience in the least amount of effort.

Page Presentation (Custom)

  • Add a custom theme to the default implementation of the UIKit.

  • Complete control of the visual style of Chat UI by implementing declarative styles (fonts and colors) for your user interface.

Page Integration

  • Use key components from the UIKit SDK and integrate them directly into your application.

  • Add the Chat UI to your existing design.

Key Concepts

Architecture

The UIKit is built on the foundation of the Social Plus API. We add a UI layer to speed product development efforts of your application. At the core, it is leveraging the same Channel, Messaging concepts, subscribing to live objects whilst adding a UIKit to accelerate product delivery and UI that delivers great user experience for companies wanting to deploy messaging and other functionality.

In the current state, there are two modules that can be used. You can follow the steps below. These two modules can be integrated into your application with ease using this documentation.

Module

Description

​Community (Group) Module​

A feature for Social media. User can create community, create post content and view new content generated via Feed.

​Chat Module​

A feature that allows user to create chat groups, sending a variety of message type such as text, image, etc.

Android UIKit Installation Guide

Social Plus Android UIKit Installation Guide

To allow for more customization, we have now open sourced our UI Kits and deprecated the packaged UI Kit version that was previously available.

With open source, developers have more flexibility and greater customization options, allowing you to have complete control over the visual style. Open sourcing allows for more transparency and visibility, and enables contributions from a greater developer community in terms of good design, implementation, code improvement, and fixes, translating into a better product and development experience.

To ensure that you continue to receive the latest features and updates, we encourage you to migrate over to the open source version. This guide will help you:

  • Migrate Android Open Source UI Kit with an existing project

  • Modify Open Source UI Kit to customize the visual style

  • Get latest Open Source UI Kit updates

Migrate Android Open Source UI Kit with Existing Project

Remove existing gradle dependency

If you've never used UI Kit from a gradle dependency before, you may skip this step and proceed to the next step. If you are migrating the UIKit with an existing gradle dependency, you will need to remove it from the gradle at the application level.

implementation 'com.github.AmityCo.Amity-Social-Cloud-UIKit-Android:amity-uikit:x.y.z'

Import UI Kit module to your existing project

  • Clone or download source code from an open-source Github repository. https://github.com/AmityCo/Amity-Social-Cloud-UIKit-Android-OpenSource

  • Navigate to your current application in Android Studio, then at the top navigation bar go to File > New > Import Module...

  • Choose the source directory where you downloaded/cloned UI Kit source code.

  • Make sure that you import :chat , :common, :social, and :amity-uikit module as per the screenshot described. The :sample module is optional and solely contains examples of UIKit Fragments and Activities.

  • Navigate to the root project's settings.gradle file once the modules have been successfully imported. You may see that Android Studio generated a dependency path from the UI Kit source code directory you specified initially. However, there's a chance that Android Studio won't do so or may generate the incorrect path. Please double-check that the path is accurate.

  • Additionally, in the root project's settings.gradle it's also mandatory to declare jitpack.io repository destination by adding maven { url https://jitpack.io } to dependencyResolutionManagement > repositories.

  • Add the imported module to application's gradle file by adding:

implementation project(path: ':amity-uikit')
  • Exclude these META-INF from the packaging options in application's gradle

 packagingOptions {
        exclude 'META-INF/INDEX.LIST'
        exclude 'META-INF/io.netty.versions.properties'
    }
  • Lastly, apply this in the project-level build.gradle file. apply from: "../Amity-Social-Cloud-UIKit-Android/buildsystem/dependencies.gradle"

Also make sure that your settings android.nonTransitiveRClass=false in gradle.properties file.

Woohoo! All set now you're ready to explore and modify our UI Kit in your application project.

Modifying Android Open Source UI Kit

You can modify the Android open-source UI Kit to customize behaviors to fit your needs. To modify the code, simply copy and paste it into your local machine.

We recommend that you first fork the repository before starting any customization work so that it will be easier to merge the code with the next version update that we provide from the main repository.

Reference on forking: https://docs.github.com/en/get-started/quickstart/fork-a-repo

Get Latest Open Source UI Kit Updates

To update to the latest version of the UI Kit, you can pull the latest commit of the git submodule.

cd Amity-Social-Cloud-UIKit-Android-OpenSource
git pull origin master
cd ..
git add .
git commit -m “Update android uikit opensource submodule”
git push origin branch_name

Installing UIKit (deprecated)

The Android SDK is delivered via Jitpack repository.

To provide greater customization options, we have open-sourced our UIKit and deprecated the managed UIKit version previously available. For the best quality and access to the latest features, we strongly recommend integrating our UIKit with the open-source version. For more details Please refer to Android UIKit Installation Guide section.

Prerequisite

SDK supports Android 5.0 (API Level 21) and above

android {
    ...
    defaultConfig {
        minSDKVersion 21 // at least 21
    }
}

Installation

Add the Jitpack repository in your project level build.grade at the end of repositories:

allprojects {
  repositories {
    ...
    maven { url 'https://jitpack.io' }
  }
}

Add the dependency in your module level build.grade. Find latest UIKit version at Changelog.

// add buildFeatures, compileOptions and kotlinOptions in android tag
android {

    buildFeatures {
        dataBinding = true
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = JavaVersion.VERSION_1_8
    }
    
}
    
dependency {
implementation 'com.github.AmityCo.Amity-Social-Cloud-UIKit-Android:amity-uikit:x.y.z'
}

AmityUIKit already includes our SDK. Don’t install AmitySDK separately if you have already installed the UIKit.

From the version 3.x. please install the UIKit with the open source guideline here Android UIKit Installation Guide

Managing Conflicting File Generation

In your app module's build.gradle , add the following packaging options.

android {
    ...
    packagingOptions {
        exclude 'META-INF/INDEX.LIST'
        exclude 'META-INF/io.netty.versions.properties'
    }
}

Code Obfuscation

By using our SDK, you can use the Android ProGuard tool to obfuscate, shrink, and optimize your code. Obfuscated code can be more difficult for other people to reverse engineer. ProGuard renames classes, fields, and methods with semantically obscure names and removes unused code. However, you need to add these configurations to your ProGuard rules when using our SDK.

-keep class com.ekoapp.ekosdk.** { *; }
-keep interface com.ekoapp.ekosdk.** { *; }
-keep enum com.ekoapp.ekosdk.** { *; }
-keep class com.amity.socialcloud.** { *; }
-keep interface com.amity.socialcloud.** { *; }
-keep enum com.amity.socialcloud.** { *; }

Setup & Authentication

Compatibility

We are always working to enhance our existing UIKit. As a result, the minimum compatibility may vary for our previous version releases. Below is the compatibility list for our latest release. For a complete compatibility history of any given UIKit version, you may refer to our changelogs.

  • Glide - 4.12.0

  • OKHTTP3 - 4.9.02

  • Retrofit2 - 2.9.1

  • Android Paging Data Library - 3.1.1

  • Room - 2.5.1

  • RxJava3 - 3.1.5

  • Gson - 2.8.10

  • Kotlin-std-lib - 1.7.20

  • Kotlin-coroutines - 1.5.0

  • Media 3 - 1.1.0

  • HiveMQ mqtt client - 1.3.1

Initialize the SDK

Before using the SDK, you need to initialize the SDK with your API key. Please find your account API key in Social Plus Cloud Console.

After logging in Console:

  1. Click Settings to expand the menu.

  2. Select Security.

  3. On the Security page, you can find the API key in the Keys section.

API key in Security page

You can specify endpoints manually via optional parameters. API endpoints for each data center are different so you need to adjust the endpoint accordingly.

We currently support multi-data center capabilities for the following regions:

Region

Endpoint

Endpoint URL

Europe

AmityRegionalEndpoint.EU

api.eu.amity.co

Singapore

AmityRegionalEndpoint.SG

api.sg.amity.co

United States

AmityRegionalEndpoint.US

api.us.amity.co

Authentication

You must first register the current device with a userId. A device registered with a userId will be permanently tied to that userId until you deliberately unregister the device, or until the device has been inactive for more than 90 days. A device registered with a specific userId will receive all messages belonging to that user.

Using Themes

Using the default theme

UIKit uses the default theme as part of the design language.

Theme customization

The UIKit looks great without any customizations, though you can also edit the colors and fronts in the themes to suit your preferences all the same. However, if you wish to customize the theme, you can declare changes to both colors and typography.

Colors

UIKit uses a small set of declared colors to simplify the design task for developers. These colors are automatically rendered at appropriate shades to communicate states and interaction to the users.

Color

Description

Default

Primary

Used for buttons and primary call to actions

#1054DE

Secondary

Used in secondary UI elements

#292B32

Alert

Used when informing users of errors or information that requires an attention.

#FA4D30

Highlight

Used for hyperlink text

#1054DE

Base

Text presented on light background

#292B32

Base Inverse

Text presented on dark background

#FFFFFF

Message Bubble

Background color of message bubble sent by the user

#1054DE

Message Bubble Inverse

Background color of message bubble sent to the user

#EBECEF

Usage

Customize color theme by declaring color code to the specific color key.

colors.xml

<resources>
    <color name="amityColorPrimary">#1054DE</color>
    <color name="amityColorSecondary">#292B32</color>
    <color name="amityColorAlert">#FA4D30</color>
    <color name="amityColorHighlight">#1054DE</color>
    <color name="amityColorBase">#292B32</color>
    <color name="amityColorBaseInverse">#FFFFFF</color>
    <color name="amityMessageBubble">#1054DE</color>
    <color name="amityMessageBubbleInverse">#EBECEF</color>
</resources>

Overriding the default UIKit theme

When you integrate UIKit to your application, it applies the our customized theme to UIKit by default. This Amity.Base.Theme.AmityApp style extends a theme from our material based theme and includes overrides for styling attributes that are used by key UI elements. So you can quickly customize UIkit style by overriding the provided theme file and its attributes. Please note that all following attributes must be overriden.

For example, your styles.xml file should look similar to this:

    <!--     Override Amity UIKIT Theme, all of these attributes are mandatory. You could override them , but please don't remove any. Otherwise ui theme may be strange-->
    <style name="Amity.Base.Theme.AmityApp" parent="Amity.Base.Theme.MaterialThemeBuilder">
        <!--        Color of status bar-->
        <item name="android:statusBarColor">#000000</item>
        <!--        Light/dark theme of status bar-->
        <item name="android:windowLightStatusBar" tools:targetApi="23">false</item>
        <!--        Navigation bar color-->
        <item name="android:navigationBarColor">#000000</item>
        <!--        Global toolbar style-->
        <item name="toolbarStyle">@style/MyToolbarStyle</item>

        <!--        Primary accent color-->
        <item name="colorPrimary">@color/amityColorPrimary</item>
        <!--        Secondary accent color-->
        <item name="colorSecondary">@color/amityColorSecondary</item>
        <!--        Global background color-->
        <item name="android:colorBackground">@color/amityColorWhite</item>
        <item name="colorSurface">@color/amityColorWhite</item>

        <item name="colorError">@color/amityColorAlert</item>
        <item name="colorOnError">@color/amityColorWhite</item>
        <item name="android:actionMenuTextColor">@color/amityColorHighlight</item>

        <item name="materialAlertDialogTheme">@style/AmityAlertDialogTheme</item>
        <!--        Snackbar style-->
        <item name="snackbarStyle">@style/AmitySnackBarStyle</item>
        <!--        Search view style-->
        <item name="searchViewStyle">@style/AmitySearchViewStyle</item>

        <item name="shapeAppearanceSmallComponent">@style/Amity.ShapeAppearance.Theme.SmallComponent
        </item>
        <item name="shapeAppearanceMediumComponent">
            @style/Amity.ShapeAppearance.Theme.MediumComponent
        </item>
        <item name="shapeAppearanceLargeComponent">@style/Amity.ShapeAppearance.Theme.LargeComponent
        </item>
        <item name="bottomSheetDialogTheme">@style/Amity.ThemeOverlay.Theme.BottomSheetDialog</item>
    </style>

    <!--       Example of custom toolbar style, color is the only option can be customised here-->
    <style name="MyToolbarStyle" parent="Widget.MaterialComponents.Toolbar">
        <!--       Color of toolbar-->
        <item name="android:background">#3A3A3A</item>
    </style>

    <!--     Override Amity UIKIT text style in toolbar, all of these attributes are mandatory.
              You could override them but please don't remove any. Otherwise ui theme may be strange-->
    <style name="ToolBarLeftTextStyle">
        <!--     Please don't change width and height-->
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">wrap_content</item>
        <!--     Text size of the toolbar title text-->
        <item name="android:textSize">@dimen/amity_text_size_title</item>
        <!--     Style of the toolbar title text-->
        <item name="android:textStyle">bold</item>
        <!--     Margin of the toolbar title text-->
        <item name="android:layout_marginStart">@dimen/amity_padding_m1</item>
        <!--     Text color of the toolbar title text-->
        <item name="android:textColor">#FFFF</item>
        <item name="android:maxLines">1</item>
        <item name="android:ellipsize">end</item>
        <item name="android:layout_marginEnd">@dimen/amity_padding_m1</item>
    </style>

    <!--     Override Amity UIKIT left icon in toolbar, all of these attributes are mandatory.
          You could override them but please don't remove any. Otherwise ui theme may be strange-->
    <style name="ToolBarLeftDrawableStyle">
        <!--     Please don't change width and height-->
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <!--     Color of the toolbar icon-->
        <item name="android:tint">#FFFF</item>
        <item name="android:layout_marginStart">@dimen/amity_padding_m2</item>
    </style>

Social UIKit

Our community group functionality within UIKit allows you to explore social features and see how they will look in your app.

Using as a whole feature with the default settings

This is the quickest way to start using the Community feature. All the default logic and navigations have already been defined.

Usage

Start an Activity

val intent = Intent(this, AmityCommunityHomePageActivity::class.java)
startActivity(intent)

Create a Fragment

class MyCommunityHomeActivity: AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_my_community_home)
        if(savedInstanceState == null) {
            val fragmentManager = supportFragmentManager
            val fragmentTransaction = fragmentManager.beginTransaction()
            val fragment = createCommunityHomeFragment()
            fragmentTransaction.replace(R.id.fragmentContainer, fragment)
            fragmentTransaction.commit()
        }
    }

    private fun createCommunityHomeFragment(): Fragment {
        return AmityCommunityHomePageFragment.Builder().build(activity)
    }
}

Our Components

There are many components that you can use and integrate into your existing application.

Limitation

UIKit provides already built UI elements in one page. You can change the appearances, such as color and typography in the global settings. However, UIKit does not allow you to replace these small components with other views. And you cannot modify the view hierarchy inside the page.

Community Home Page

This page consists of two components represented in tabs.

Empty state of community home page

Components

  • Explore

  • Newsfeed

Usage

Create a Fragment

AmityCommunityHomePageFragment
           .newInstance()
           .build()

Newsfeed

This page consists of two components - My community and Global feed.

News feed tab in empty state
News feed tab with My Community component and global feed active

Components

  • My Community

  • Global feed

Usage

Create a Fragment

AmityNewsFeedFragment.newInstance().build()

Global Feed

This component shows the global feed.

Features

Feature

Description

Global feed

Scroll vertically to see a list of posts from the global feed.

Usage

Create a Fragment

You can use either of these two methods:

  1. build - the posts will be ranked in chronological order. Below is the sample code.

    AmityGlobalFeedFragment.newInstance().build()

  2. <newCustomPostRankingmethod> - the posts will be ranked according to a score-sorting mechanism. Refer to Custom Post Ranking for more information about this feature. You can retrieve your global feed sorted by ranking score with this code.

    let viewController = AmityGlobalFeedViewController.makeCustomPostRanking()

My Community Preview

This component shows a preview of the communities that the user has joined.

Features

Feature

Description

My Community list

User can scroll horizontally to see a list of up to eight communities that the user has joined sorted in alphabetical order.

Navigation to Community profile page

When a user selects a community item, the user is navigated to Community Profile page.

Navigation to My community page

When a user selects the arrow, the user is navigated to the My community page.

Usage

Create a Fragment

AmityMyCommunityPreviewFragment.newInstance().build()

Explore Tab

This component consists of three components - Recommend community, Top trending community, and Categories components.

Components

  • Recommended Community

  • Top trending

  • Categories

Usage

Create a Fragment

AmityExploreFragment.newInstance().build()

Recommended Community

This component shows a list of recommended communities.

Features

Feature

Description

Recommended

Community list

User can scroll horizontally to see up to four recommended communities.

Navigation to Community profile

When a user selects a community item, the user is navigated to the Community Profile page.

Usage

Create a Fragment

AmityRecommendedCommunityFragment.newInstance().build()

Top Trending Community

This component shows up to five top trending communities.

Features

Feature

Description

Top trending

Community list

User can see up to five top trending communities.

Navigation to Community profile

When a user selects a community item , the user is navigated to the Community Profile page.

Usage

Create a Fragment

AmityTrendingCommunityFragment.newInstance().build()

Categories

This component shows a list of up to eight categories in alphabetical order.

Features

Feature

Description

Category list

User can see up to eight categories sorted in alphabetical order.

Navigation to Category detail page

When a user clicks on a category item, the user is navigated to Category detail page.

Navigation to Category list

When a user selects the arrow, the user is navigated to Category list page.

Usage

Create a Fragment

AmityCategoryPreviewFragment.newInstance().build()

My Community Page

This page shows a list of all communities that a user has joined, sorted in alphabetical order.

My community search view

Features

Feature

Description

My community list

User can scroll vertically to see a list of communities that the user has joined sorted in alphabetical order.

Community search

User can search for a community using the Community name.

Community creation

User can click on + button, to open Community Creation page.

Usage

AmityMyCommunityFragment
    .newInstance()
    .enableSearch(true) // seach view to search community
    .showOptionsMenu(true) // option menu to create community in toolbar
    .build()

Category List Page

This page shows a list of all categories sorted in alphabetical order.

Features

Feature

Description

Category list

User can see a list of all categories sorted in alphabetical order.

Navigation to Category detail page

When a user selects a category item, the user is navigated to the Category detail page.

Usage

Start an Activity

val intent = Intent(this, AmityCategoryListActivity::class.java)
startActivity(intent)

Create a Fragment

AmityCategoryListFragment.newInstance().build(activity)

Community List By Category Page

This page shows a list of all communities that belong to a category sorted in alphabetical order.

Features

Feature

Description

Community list by category

User can see a list of all communities that belong to a category sorted in alphabetical order.

Navigation to Community Profile page

When a user selects a community item, the user is navigated to Community Profile page.

Usage

Start an Activity

val intent = AmityCategoryCommunityListActivity.newIntent( this, category)
startActivity(intent)

Create a Fragment

AmityCategoryCommunityListFragment
            .newInstance()
            .category(category)
            .build()

Community Creation Page

This page provides a form for community creation.

Default state of community creation page

Feature and Component

Feature

Description

Community creation

User can create a community by filling the required fields and tapping + Create community.

Usage

Start an Activity

val intent =  Intent(this, AmityCommunityCreatorActivity::class.java)
startActivity(intent)

Create a Fragment

AmityCommunityCreatorFragment.newInstance().build()

Community Profile Edit Page

This page provides a form for community profile update.

Features

Feature

Description

Community profile update

User can update the information such as avatar, community name, description, categories, etc for this community. Profile will be updated upon tapping SAVE.

Usage

Create a Fragment

AmityCommunityEditorFragment
    .newInstance(community or communityId)
    .build(activity)

Post Creation Page

This page provides a form for post creation.

The default state of post creation

Types of Post Creations:

Text

example of text post
Mention users in a post
Example of hyperlink generated from URL input

Text and Images

User can select images from 2 sources.

Device Camera

System will launch the device camera view

Device Image Gallery

Text and Files

Text and Videos

Polls

Poll post
Mention users in a poll post

Livestream

To create a live stream post and for a detailed discussion on the live stream features, refer to Livestream post documentation.

Mention users in a livestream post

Features

Feature

Description

Post creation

User can create post by adding content such as text, images, videos and files.

Mention in post

Mention users in post by typing @ to activate mention suggestion and selecting their names in the suggestion list. Up to 30 users can be mentioned per post.

An alert will be shown if character count is greater than 50000 or mentions count is greater than 30.

Usage

Create a Fragment

User can create a post either on a community feed or user's own feed.

Attachment options

We currently support three types of attachment option when creating a post. These are:

  1. AmityPostAttachmentItem.PHOTO

  2. AmityPostAttachmentItem.VIDEO

  3. AmityPostAttachmentItem.FILE .

You can optionally choose to allow these attachment options by using the method allowPostAttchments. By default the fragment includes all attachment options.

Create a post on community feed

//for text, image, file, video post
AmityPostCreatorFragment.newInstance()
    .onCommunityFeed(community or communityId)
     //optional
     .allowPostAttachments(
           listOf(
                   AmityPostAttachmentOptionItem.PHOTO,
                   AmityPostAttachmentOptionItem.VIDEO,
                   AmityPostAttachmentOptionItem.FILE
               )
           )
    .build()
    
//for poll post    
AmityPollPostCreatorFragment.newInstance()
    .onCommunityFeed(community or communityId)
    .build()

Create a post on user's own feed

//for text, image, file, video post
AmityPostCreatorFragment.newInstance()
     .onMyFeed()
     //optional
     .allowPostAttachments(
           listOf(
                   AmityPostAttachmentOptionItem.PHOTO,
                   AmityPostAttachmentOptionItem.VIDEO,
                   AmityPostAttachmentOptionItem.FILE
               )
           )
     .build()
   
//for poll post      
AmityPollPostCreatorFragment.newInstance()
     .onMyFeed()
     .build()

Livestream Post

Host your events virtually and see community interaction as it happens.

Our UIKit provides the livestream recording feature that allows you to record livestreams and broadcast simultaneously in real-time. You can also play historical streams when the livestream ends.

This section describes the livestream recording feature in detail.

A livestream post can be viewed in the following feeds:

  • Community feed

  • User feed

  • Global feed

  • Content feed

You will be able to see the livestream post and interact with it as soon as the livestreamer starts streaming.

Creating a livestream post

To create a livestream post, follow these steps:

  1. Create a livestream post by selecting Livestream from the pop-up and selecting a location where you want to post the stream.

  2. Provide a title and description for your livestream. The title and description will be blank if you will not provide any.

  3. Add a cover thumbnail from your media gallery for the livestream post and preview the cover image. This step however is optional. You may also update and delete the cover thumbnail.

  4. Tap Go live to start streaming.

  5. There will be a time indicator on the upper left. It will indicate how long it has been since the livestream started.

  6. The livestream post will then show in the feed.

  7. Tap Finish to end livestreaming. It will then show Ending livestream once the livestream has ended.

    Note: You have the option to edit or delete the post from the feed.

Viewing a livestream post

Live

Other viewers can watch your livestreaming while you are simultaneously recording it. They will see a LIVE indicator on the video.

Tapping the play button in the livestream post will play the video in a full screen mode.

Livestream in full screen

Livestream ended

After ending your livestreaming, the playback video may not be available instantly for viewers to see while it is still in the process of producing the playback video. The viewers will see a message that the playback will be available for watching shortly.

The livestream has ended but the playback is still transcoding

Playback

When the playback video is already available for viewing, a RECORDED indicator is shown on the video post.

Playing a recorded stream and an option to report the post

Idle state

The livestream may be in idle state. This happens when you delete the livestream in console or or other issues that will not enable the livestreaming to start. The viewer will see a message that the stream is currently unavailable.

Read-only mode

A livestream post will have the same privacy and access controls as with the other posts. This means that users without the permission, such as those who are not members of the community, won’t be able to view the livestreaming/playback video in a private community. If the community is public, non-members can view the post as read only so they won't be able to interact with it.

Permissions

If it's your first time creating a livestream, your device will prompt to allow access to your device's camera and microphone.

You need to allow access to be able to start a livestream. The pop-up below will not show once you allow access to your camera and microphone.

Post Details Page

This page shows content of a post including reactions and comments.

Reply feature is coming soon.

Features

Feature

Description

Post content

User can view content of the post including reactions and comments.

Comment creation

User can create a comment by adding text to the compose bar and tapping Post.

Usage

Create a Fragment

AmityPostDetailFragment
         .newInstance(postId)
         .build()

Link Preview in Post

The Link Preview feature in posts is designed to enrich user experience by providing a visual and informative preview of external links. This feature enhances content sharing, making it more interactive and engaging. This feature significantly improves the user's posting experience. It allows for a preliminary check of the link's accuracy and relevance, adding visual appeal to the post with an informative preview.

When a user includes a link in a post, the feature automatically extracts and displays key information: the title, main image, and a short description, creating an informative preview of the linked content. If the link is unavailable, it will show a empty placeholder or error view instead.

Editing Capability

Users can edit the link preview even after the post is created. This flexibility ensures that the information remains up-to-date and accurate, enhancing the overall quality of the post.

Limitations and Use Cases

The preview feature is designed to only display images, titles, and descriptions after a post is created. This ensures clarity and relevance in the shared content.

Post Edit Page

This page provides a form to edit post content.

Post edit page
Edit mentioned users in a post

Limitation: Images and files can only be removed from a post. New images or files cannot be added.

Features

Feature

Description

Text editing

User can edit text content

Image removal

User can remove images

File removal

User can remove files

Usage

Create a Fragment

AmityPostEditorFragment()
        .newInstance(postId)
        .build()

Comment Creation

Comment creation
Mention users in a comment

Features

Feature
Description

Comment creation

Add comments to post.

Mention in comment

Mention users in comments by typing @ to activat mention suggestion and selecting their names in the suggestion list. Up to 30 users can be mentioned per post.

An alert will be shown if character count is greate than 50000 or mentions count is greater than 30.

Comment Edit Page

Edit mentioned users in a comment

Features

Feature

Description

Comment editing

Edit comment content and tap Save to submit changes.

Mention in comment

Mention users in comments by typing @ to activat mention suggestion and selecting their names in the suggestion list. Up to 30 users can be mentioned per post.

An alert will be shown if character count is greate than 50000 or mentions count is greater than 30.

Community Profile Page (2.5)

This page shows profile of a community including its own feed.

Non-member view
Community member view
Community creator view

Components

  • Community feed

Features

Feature

Description

Becoming a member

User can tap Join button to join a community.

Post creation

User can tap the floating action button to open Post creation page.

Community profile update

Creator can tap Edit profile button to open Community profile edit page.

Usage

Create a Fragment

AmityCommunityPageFragment()
          .newInstance(communityId)
          .build(activity)

Community Feed (2.5)

This component shows a list of posts from a community feed.

Features

Feature

Description

Community feed

User can scroll vertically to see a list of posts from a community feed.

Usage

Create a Fragment


AmityCommunityFeedFragment
         .newInstance(community or communityId)
         .feedType(AmityFeedType.PUBLISHED) // optional, available from version 2.4
         .build(appcompatActivity)
                

Media Gallery

This component shows a collection of images and videos posted in the community feed.

Gallery filtered to show photos only
Gallery filtered to show videos only

Features

Feature

Description

Gallery

Scroll vertically to see images and videos from posts in a community feed.

Media Filter

Filters according to media type (Photos and Videos). Tap the corresponding tabs to see the filtered posts.

Community Member Page

This page displays the list of members for a given community.

A community member page

Note: In the current version, we do not support searching of members and a visual display of the moderator list.

Features

Feature

Description

Navigation to user profile page

User can view profile page by tapping on member list item.

Report user

User can report members present in community.

How to use

AmityCommunityMemberSettingsFragment
          .newInstance(communutyId)
          .build()

User Profile Page

This page shows user profile information as well as user feed.

User Profile Behavior

User's own profile

A community member page

Other user's profile

Components

  • User feed

Features

Feature

Description

User Profile

User can view display name and description.

Post creation

User can tap the floating action button to open Post creation page to create a post on user's own page.

User profile update

User can tap Edit profile to open User profile edit page to update user's own profile.

Usage

Create a Fragment

AmityUserProfilePageFragment
          .newInstnce(user or userId)
          .build(activity)

Customise components with Fragment builder

A delegate can be passed to customise the components.

Method

Description

feedFragmentDelegate

Fragment delegation for AmityFeedFragment

User Feed

This component shows a user feed of a specific user.

Features

Feature

Description

User feed

User can scroll vertically to see a list of posts from a user feed.

Usage

Create a Fragment


AmityUserFeedFragment
                .newInstance(user or userId)
                .build(activity)
                

User Profile Page (2.3)

There are two views for the user profile page.

1. User's own profile

This view allows the user to see his own user profile detail and his own user feed. There are two states user can see.

Default state : Allows user to see his own following user counter and Follower user counter.

Request pending state : Allows user to see his own following user counter, Follower user counter, and also the follow request he received.

Feature

Description

Follower counter

Shows the total count of followers. It will redirect to Following / Follower user list page when clicked.

Following counter

Shows the total count of users that you're following. It will redirect to Following / Follower user list page when clicked.

Pending follow request section

If you have pending follow requests from other users, you will see the pending request section. It will redirect to Follow request page when clicked.

Edit user profile

It will redirect to User profile edit page when clicked.

3 dot button

It will redirect to User setting page (2.2) when clicked.

Components

  • User feed (2.2)

You can get this view by using this code:

//Use as activity
val intent = AmityUserProfileActivity.newIntent(context, userId)
startActivity(intent)

//Use as fragment
AmityUserProfilePageFragment.newInstance(userId).build(context)

2. Other user's profile

This view allows the user to see other user's profile detail and their user feed. There are two states user can see.

In the other user view, UIKIT has two main views that support the Follow user connection and the User privacy view.

Default state: Allows the user to see the connection between the current user and the target user profile.

If the current user is NOT connected to the viewing user and the Private setting is Public

If the current user is connected to the viewing user and the Private setting is Public

If the current user is NOT connected to the viewing user and the Private setting is Private

If the current user has send request to the viewing user and the Private setting is Private

Feature

Description

Follow button

When clicked, the system will make a connection with the User.

If the Connection method = with request, system will change to cancel pending state.

Cancel request button

When clicked, follow request will be canceled.

Follower counter

Showing the total count of followers. It will redirect to Following / Follower user list page when clicked.

Following counter

Shows the total count of users that you're following. It will redirect to to Following / Follower user list page when clicked.

Pending follow request section

If you have pending follow requests from other users, you will see the pending request section. It will redirect to Follow request page when clicked.

Edit user profile

It will redirect to User profile page when clicked.

User feed (Private view)

If a connection was not established, the user profile and the Private setting is Private.

3 dot button

It will redirect to User setting page (2.2) when clicked.

Components

  • User feed (2.2)

You can get this view by using this block of code below.

//Use as activity
val intent = AmityUserProfileActivity.newIntent(context, userId)
startActivity(intent)

//Use as fragment
AmityUserProfilePageFragment.newInstance(userId).build(context)

User Feed (2.3)

Default User Feed

This view allows user to view and interact with the feed content normally. This also applies when the Privacy setting is Public.

Private User Feed

This view block any user to see the target user feed content. This view only exist if the Private setting is Private.

Features

Feature

Description

User feed

User can scroll vertically to see a list of posts from a user feed.

Private feed

User can not see the feed content if user is not connected and the Privacy setting is Private.

Usage

Create a Fragment

AmityUserFeedFragment
                .newInstance(user or userId)
                .build(activity)

User Setting Page (2.3)

This page allows user to interact with the user profile.

User's Own Profile Setting Page

Feature

Description

Edit profile

Will redirect to User profile edit page when clicked

Other User's profile setting page

There are 2 main state based on the user connection:

If user is already connect with the target user

In version 2.2, we do not have the User notification setting in the menu.

If user is not connected with the target user

Feature

Description

Report / unreport

User can report or unreport user in this user setting page.

Unfollow

User can unfollow other user.

You can try these codes:

//Use as activity
val intent = AmityUserSettingsActivity.newIntent(context, AmityUser)
startActivity(intent)

//Use as fragment
AmityUserSettingsFragment.newInstance(AmityUser).build(context)

Report User

user
.report()
.flag()
.subscribeOn(Schedulers.io())
.observeOn(AndroidSchedulers.mainThread())
.doOnComplete { //success }
.doOnError { //error }
.susbscribe()

UnReportUser

user
.report()
.unflag()
.subscribeOn(Schedulers.io())
.observeOn(AndroidSchedulers.mainThread())
.doOnComplete { //success }
.doOnError { //error }
.susbscribe()

UnFollow User

AmityCoreClient
.newUserRepository()
.relationship()
.me()
.unfollow(userId)
.subscribeOn(Schedulers.io())
.observeOn(AndroidSchedulers.mainThread())
.doOnComplete { //success }
.doOnError { //error }
.susbscribe()

Following and Follower User List Page(2.3)

In the FOLLOWING page, you will see the list of other users that you're following. In the FOLLOWERS page, you will see a list of users who are following you.

List of users following Jackie

In the current state , NO search in Following and Follower list.

User can remove followers from the list

Feature

Description

Current user profile

If current user will access other users' Following and Follower list, he will see his own profile on top of the list.

Report/undo report user

User can send report or undo report in this page via the action menu UIKIT included in this page.

Remove user from follower list

If current user will access his own follower list , he can remove followers via the three dots button and action menu.

Redirect user to user profile page

If user taps on the user item list, he will be redirected to user profile page of that user.

Follow Request Page (2.3)

In this page, user can see all the follow request he has received. He can either accept or decline the request as well.

If user can accept or decline successfully, system shows popup and removes the request
If the request is not available or has server connection issues, a system error will show

The user sorting will be based on the server provide.

The follow request will not automatically update. User needs to accept or decline first and if the follow request is not available, system will remove the request from list and prompt that the request is unavailable.

Feature

Description

Accept Follow request

If user accepts the follow request , system will create a relationship with the request sender and the request item will be removed from the list.

Decline Follow request

If user declines the follow request, system will invalidate the follow request.

User Profile Edit Page

This page allows a user to edit user's own profile information.

Features

Feature

Description

User profile update

User can update the information such as avatar, display name, and description. Profile will be updated upon tapping Save.

Usage

Start an Activity

val intent = AmityEditUserProfileActivity.newIntent(this)
startActivity(intent)

Create a Fragment

AmityUserProfileEditorFragment.newInstance().build()

Member Selection Page

This page provides a user picker.

User selection flow
Search flow

Features

Feature

Description

Member Selection

User can select a list of users.

Usage

Create a Fragment

AmityMemberPickerFragment
            .newInstance()
            .selectedMembers(memberList)
            .build()

Post Target Selection Page

This page provides a list of feed that user can create a post on

Features

Feature

Description

Post creation on user's own feed

When a user selects My Timeline, UIKit will open Post Creation page with the user's own feed as the target.

Post creation on community feed

When a user selects a community, UIKit will open Post Creation page with the selected community.

Usage

Start an activity

val intent = Intent(this, AmityPostTargetPickerActivity::class.java)
startActivity(intent)

Create Fragment

AmityPostTargetPickerFragment.newInstance().build(postCreationType: String)

Using Your Own Components

With UIKit you can customise some parts of the component

  • Using your own navigation bar

Using Your Own Navigation Bar

Usage

  1. Create your own activity.

  2. Use any component from UIKit as a fragment.

UIKit will insert the default option menus of the component if a toolbar is available in your activity

Overriding UIKit Behaviour

UIKIT allows the default behaviour to be overridden by custom logic

Overriding Global Behaviour

Feed UI Settings

Post Sharing

Post sharing functionality is currently not available from the system. However, UIKit provides a ready made "share" button with an interface for users to specify their own post sharing behaviours.

Post sharing settings

These settings allow you to control the "share" button visibility. The button appearance is based on the post origin and the destination that it can be shared to.

The are five possible targets that a post can be shared to

My feed - The post can be shared to my feed. This option will enable "Share to my timeline" menu when user clicks share button.

Public community - The post can be shared to any public community. This option will enable "Share to group" menu when user clicks share button.

Private community - The post can be shared to any private community. This option will enable "Share to group" menu when user clicks share button.

External - The post can be shared externally. This option will enable "More options" menu when user clicks share button.

Origin - The post can be shared within the community feed that it was created. If the post was created in either public or private community, this option will enable "Share to group" menu when user clicks share button.

There are four possible origins

My feed post - Posts that were created on my feed. By default, possible sharing targets are My feed, Public community, and Private community.

User feed post - Posts that were created on any other users' feed. By default, possible sharing targets are My feed, Public community, and Private community.

Public community feed post - Posts that were created on any public community. By default, possible sharing targets are My feed, Public community, and Private community.

Private community feed post - Posts that were created on any private community. By default, possible sharing target is Origin.

Usage

You can select a set of targets for each post origin.

// In your Application class

val mySharingSettings = AmityPostSharingSettings()


// Allow post created by logged-in user to be shared anywhere
mySharingSettings.myFeedPostSharingTarget 
        = listOf(AmityPostSharingSettings.values())
        
// Allow post created by any other user to be shared anywhere
mySharingSettings.userFeedPostSharingTarget 
        = listOf(AmityPostSharingSettings.values())  
        
// Allow post created by any other user to be shared anywhere
mySharingSettings.publicCommunityPostSharingTarget 
        = listOf(AmityPostSharingSettings.values())                  

// Ensure post created in private community cannot be shared elsewhere
mySharingSettings.privateCommunityPostSharingTarget 
        = listOf(AmityPostSharingSettings.originFeed)


AmityUIKitClient.socialUISettings.postSharingSettings = mySharingSettings
        

Post sharing events

Based on Post sharing settings, there are up to three post sharing events that can be emitted by UIKit.

Share to my timeline - an event emitted when a user clicks on "Share to my timeline" button.

Share to group - an event emitted when a user clicks on "Share to group" button.

Share externally - an event emitted when a user clicks "More options" button.

Usage

You can choose to intercept one or all of the events and apply your custom behaviors.

// In your Application class

// Ex. launch a share intent with post data
AmityUIKitClient.socialUISettings.feedEventHandler 
    = object : AmityPostShareClickListener {
            override fun shareToExternal(context: Context, post: EkoPost) {
                // generate a link 
                val sharingPost = "https://www.upstra.co/post?id=" + post.getPostId()
                // lauch an intent with the generated link
                val share = Intent.createChooser(Intent().apply {
                      action = Intent.ACTION_SEND
                      putExtra(Intent.EXTRA_TEXT, sharingPost)

                }, null)
                startActivity(share)
            }
        }

Post Rendering

Custom Post Rendering

UIKit provides default renderers for the core data types, text, image, and file. For custom post rendering, a map of data type and renderer can be registered and UIKit will refer to this map while rendering post component.

Usage

// To provide a custom renderer, implement an AmityPostRenderer
val customViewHolder = object : AmityPostRenderer {

    // Specify the dataType to be rendered by this renderer
    override fun getDataType(): String = "myapp.customtype"

    // Provide a layout of your viewHolder
    override fun getLayoutId(): Int = R.layout.custom_post

    // Provide a viewHolder that is subclassed from AmityPostContentViewHolder
    override fun createViewHolder(
        view: View
    ): AmityPostContentViewHolder {
        return MyCustomViewHolder(view)
    }

    // Choose whether to have a post header
    override fun enableHeader(): Boolean {
        return true 
    }

    // Choose whether to have a post footer 
    override fun enableFooter(): Boolean {
        return false
    }
}
    
 // Register the custom renderer    
AmityUIKitClient.socialUISettings.registerPostRenderers(listOf(customViewHolder))   

Event Handling

Custom Event Handler

UIKit emits events that can be intercepted and processed by custom logic.

For example, you might want to know when a user taps a user avatar. You can intercept onClickUserAvatarevent and define your desired behavior.

Supported events

Event

Parameter

Condition

onClickUserAvatar

user: AmityUser

community avatar or community display name is tapped

onClickMessage

community: AmityCommunity

message button on community page is tapped

onClickEditProfile

community: AmityCommunity

edit profile button on community page is tapped

onClickEditUserProfile

userId: String

edit user profile button on user profile page is tapped

Example

When a user clicks on the user profile avatar at the post creator area, UIKit will open User profile page

When user clicks on this area, system will open user profile page

However, you can intercept the event and define your own logic following the example below.

Usage

When you create a Fragment via a Builder, you can add your own logic via onClickUserAvatar method.

EkoGlobalFeedFragment
        .Builder()
        .onClickUserAvatar(object : IAvatarClickListener {
            override fun onClickUserAvatar(user: EkoUser) {
                // your custom logic
            }
        })
        .build(this)

Chat UIKit

With our chat functionality in UIKit, you can find out how best to integrate and design messaging features and what they will look like in your app.

Using as a whole feature with the default settings

This is the quickest way to start using the Chat feature , all the default logic and navigations have already been defined.

Usage

Chat home page

Chat home page shows a list of the most recent chats.

Start an Activity

val chatIntent  = Intent(this, AmityChatHomePageActivity::class.java)
startActivity(chatIntent)

Create a Fragment

class MainActivity : AppCompatActivity(), IRecentChatItemClickListener {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)

       val chatHomeFragment = AmityChatHomePageFragment.Builder()
       /**
         * set the listener to override recentItem click event
         * No Need to implement [IRecentChatClickListener] if you don't want to override click event
         */
       .recentChatItemClickListener(this)
       .build(this)
       
        val transaction = supportFragmentManager.beginTransaction()
        transaction.replace(R.id.fragmentContainer, chatHomeFragment)
        transaction.addToBackStack(null)
        transaction.commit()
   }
}

Using Only Some Components

There are many components that you can use and integrate into your existing application.

Limitation

UIKit provides already built UI elements in one page. You can change the appearances, such as color and typography in the global settings. However, UIKit does not allow you to replace these small components with other views. And you cannot modify the view hierarchy inside the page.

Chat Home Page

This page consists of one component in a single tab.

Components

  • Recent chat

Usage

Create a Fragment

AmityChatHomePageFragment
           .newInstance()
           .build(activity)

Customize Components with Fragment Builder

A delegate can be passed to customize the components.

Method

Description

recentChatFragmentDelegate

Fragment delegation for AmityRecentChatFragment

Recent Chat

This page shows a list of the most recent chats.

Features

Feature

Description

Recent chat list

User can see a list of the most recent chats.

Navigation to Message list

When a user clicks a chat, UIKit opens a chatroom page.

Usage

Create a Fragment

class MainActivity : AppCompatActivity(), IRecentChatItemClickListener {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)

      val recentChatFragment = AmityRecentChatFragment.newInstance()
      /**
         * set the listener to override recentItem click event
         * No Need to implement [IRecentChatClickListener] if you don't want to override click event
         */
      .recentChatItemClickListener(this)
      .build(this)
        val transaction = supportFragmentManager.beginTransaction()
        transaction.replace(R.id.fragmentContainer, recentChatFragment)
        transaction.addToBackStack(null)
        transaction.commit()
   }
}

Chatroom Page

This page is a chatroom.

Message List Page Header

Feature

Description

User avartar

If the user has no avatar, the system will show the default avatar.

User Display name

If the user has no display name, the default display name will be 'anonymous'.

Back button

Redirects user back to the previous page.

Message List

Feature

Description

Show list of message

The latest message bubble will be on the bottom of the screen, and the user can scroll up to see all messages.

Date label

Grouping messages by the sent date.

Message bubble - Text message bubble

Feature

Description

Read more mode.

When the text is more than 13 lines, the system show read more mode. Once it is clicked on the read more button, it expands text to the full size.

Long press to delete

If the long click event occurs, the system will show the delete option.

Long press to edit

If the long click event occurs, the system will show the edit option. When click the edit option, the system will redirect the user to the edit message page.

Error to send message indicator

If the message can not be sent, the system will show the error indicator in front of the message bubble.

Sent time stamp

Show as time stamp HH :MM.

Edited label

If the message is edited , the edited label will be shown.

Deleted message

If the message is deleted , the deleted view will be shown.

Message bubble - Image message bubble

Feature

Description

Image thumbnails

The system shows the image base on the image ratio. Once it is clicked, it will redirect the user to the edit message page.

Image upload state

The system will show the image uploading indicator while the image is being uploaded.

Image Preview Page

Feature

Description

Pinch zoom gesture

The user can pinch the screen to zoom in or out the image.

back

Redirect user back to the previous page.

Message Bubble - Audio Message Bubble

Feature

Description

Click to play

If the user clicks on the voice message , the system will play the audio.

Click to stop

If the user clicks on the playing voice message or play another voice message, the system will stop playing the playing audio.

Audio message recorder

Feature

Description

Hold to record

The user can hold to record an audio message for up to 60 seconds. Once the user releases the finger, the system will send the audio message.

Discard the record

The user can drag the finger to the bin button to discard the current recording session.

Edit Text Message Page

Feature

Description

Add text

The user can update the text from the original input.

Save

The user can click save button to save the changes he made.

Discard change

The user can click 'x' to discard all changes before the user clicks save.

Usage

Start an Activity

If you don’t need to do any customisation other than global theme customisation, you can use our AmityMessageListActivity. Use the intent to move from one activity to the AmityChatHomePageActivity as follows:

//replace "channelId" with actual channelID
val messageIntent = AmityMessageListActivity.newIntent(this, "channelId")
startActivity(messageIntent)

Create a Fragment

If you need to customize the user interface, you can use our AmityChatRoomFragment.

class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)

        val chatRoomFragment = AmityChatRoomFragment
                                .newInstance("channelId")
                                .composeBar(AmityChatRoomComposeBar.TEXT)
                                .enableChatToolbar(boolean)
                                .enableConnectionBar(boolean)
                                .build(activity)
       
        val transaction = supportFragmentManager.beginTransaction()
        transaction.replace(R.id.fragmentContainer, chatRoomFragment)
        transaction.addToBackStack(null)
        transaction.commit()
   }
}

Toolbar Option

We provide an ability to enable or disable Chatroom's toolbar by using enableChatToolbar(boolean) when initializing a fragment instance.

By default the UIKit comes with toolbar enabled.

AmityChatRoomFragment.newInstance(channelId)
            .enableChatToolbar(boolean)
            .build(this)

Connection Bar Option

We provide an ability to enable or disable Chatroom's connection bar by using enableConnectionBar(boolean) when initializing a fragment instance.

By default the UIKit comes with connection bar enabled.

AmityChatRoomFragment.newInstance(channelId)
            .enableConnectionBar(boolean)
            .build(this)

Compose bar Option

There are two compose bar options avaialble in the UIKit.

  1. AmityChatRoomComposeBar.DEFAULT - has full functionalities including text, audio, and image message sending

  2. AmityChatRoomComposeBar.TEXT - has simple functionalities which are only limited to text message sending

By default the UIKit comes with AmityChatRoomComposeBar.DEFAULT.

AmityChatRoomFragment.newInstance(channelId)
            .composeBar(AmityChatRoomComposeBar.TEXT)
            .build(this)

Using Your Own Component

UIKIT allows some parts of the component to be customized.

Message Bubble

UIKit allows all types of message bubble to be replaced.

Text Message Bubble

Image Massage Bubble

Audio Message Bubble

Usage

To customize message bubble, implement AmityMessageListAdapter.CustomViewHolder and pass a custom ViewHolder for the corresponding message type.

class MainActivity : AppCompatActivity(), AmityMessageListAdapter.CustomViewHolder {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)
       
        /**
         * Implement [AmityMessageListAdapter.CustomViewHolder] if customization is required for messageViews
         * set the customView listener using [AmityChatRoomFragment] instance
         */
       val chatRoomFragment = AmityChatRoomFragment
                                .newInstance("channelId")
                                .enableChatToolbar(boolean)
                                .customViewHolder(this)
                                .build(this)
        
        val transaction = supportFragmentManager.beginTransaction()
        transaction.replace(R.id.fragmentContainer, messageListFragment)
        transaction.addToBackStack(null)
        transaction.commit()
   }
}

Override method getViewHolder() to pass a custom ViewHolder

override fun getViewHolder(
        inflater: LayoutInflater,
        parent: ViewGroup,
        viewType: Int
    ): AmityChatMessageBaseViewHolder? {
        return when(viewType) {
            MessageType.MESSAGE_ID_TEXT_RECEIVER -> TextReceiverViewHolder(
                inflater.inflate(R.layout.custom_item_text_receiver, parent, false), EkoChatMessageBaseViewModel())
            MessageType.MESSAGE_ID_TEXT_SENDER -> TextSenderViewHolder(
                inflater.inflate(R.layout.custom_item_text_sender, parent, false), EkoChatMessageBaseViewModel()
            )
            //pass null for all the types where no customisation is required
            //Default UIKIT Ui will be rendered for all those types
            else -> null
        }
    }