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.

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

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)
    }
}

Features

Usage

Create a Fragment

AmityMyCommunityPreviewFragment.newInstance().build()

Components

• My Community

• Global feed

Usage

Create a Fragment

AmityNewsFeedFragment.newInstance().build()

Components

• Recommended Community

• Top trending

• Categories

Usage

Create a Fragment

AmityExploreFragment.newInstance().build()

Features

Usage

Start an Activity

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

Create a Fragment

AmityCategoryListFragment.newInstance().build(activity)

Features

Usage

Create a Fragment

AmityRecommendedCommunityFragment.newInstance().build()

Components

Usage

Create a Fragment

Features

Usage

Create a Fragment

Feature and Component

Usage

Start an Activity

Create a Fragment

Features

Usage

Create a Fragment

Features

Usage

Create a Fragment

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.

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

Playback

When the playback video is already available for viewing, a RECORDED indicator is shown on the video 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.

Features

Features

Usage

Create a Fragment

Features

Usage

Features

Usage

Start an Activity

Create a Fragment

Types of Post Creations:

Text

Text and Images

User can select images from 2 sources.

Device Camera

Device Image Gallery

Text and Files

Text and Videos

Polls

Livestream

Features

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

Create a post on user's own feed

Features

Usage

Create a Fragment

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

Features

Usage

Create a Fragment

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

Features

How to use

AmityCommunityMemberSettingsFragment
          .newInstance(communutyId)
          .build()

User Profile Behavior

User's own profile

Other user's profile

Components

• User feed

Features

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.

Components

Features

Usage

Create a Fragment

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

Usage

Create a Fragment

Features

Features

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.

   Copy

   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.

   Copy

   let viewController = AmityGlobalFeedViewController.makeCustomPostRanking()

Features

Features

Usage

Create a Fragment

Features

Usage

Start an activity

Create Fragment

With UIKit you can customise some parts of the component

• Using your own navigation bar

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)
            }
        }

UIKIT allows the default behaviour to be overridden by custom logic

User's Own Profile Setting Page

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

If user is not connected with the target 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()

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

Features

Usage

Create a Fragment

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

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.

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.

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 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 Private setting is Public

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

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

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

Components

• User feed (2.2)

You can get this view by using this block of code

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

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

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

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

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.

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

Features

Usage

Start an Activity

Create a Fragment

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