How to build your own Reddit style app on Android

The recent Reddit Blackout incident stirred quite a commotion. Briefly, Reddit started charging 3rd party applications for API usage, causing over 7,000 communities and 30 million subscribers to protest and quit using the platform. Reddit is now charging third-party apps $0.24 for every 1,000 API calls, resulting in the unexpected shutdown of popular third-party apps, such as Apollo and Sync, due to unsustainable costs.

At Amity, we value your autonomy.

We stand firm in the belief that brand owners should have the absolute rights to cultivate meaningful relationships within their user groups.
With our innovative Social SDK platform, you can create a personalized social experience in your application, independent of any social media networks like Reddit or Facebook. This gives you the leverage to secure your future without being tethered to another platform.

In this tutorial, we will show you how to construct a Reddit-like application on Android in mere minutes. Our powerful SDK and UI Kit allow for easy plug-and-play, and you are ready to roll!

Prerequisites

Network Setup

If you haven’t registered for an Amity account yet, please follow our comprehensive step by step guide to create a new network in the Amity Portal.

Tools & IDE

Download Android Studio Flamingo from the official Android Studio page. This IDE is equipped with an advanced code editor and app templates, alongside other development, debugging, testing, and performance tools. Android Studio accelerates app development, offers various preconfigured emulators for testing, and even enables you to build and publish apps on the Google Play store. Android Studio is compatible with Windows, Linux, and macOS operating systems, and comes bundled with OpenJDK (Java Development Kit).

Environment Setup

Create a new Android app

To start, you will need to create an application in Android Studio:

Launch Android Studio.
In the welcoming dialog, select ‘Start a new Android Studio project’.
Opt for the “No Activity” option and click ‘Next’.
Name your application, define the package name, and set the minimum SDK as API 21.

Create a Community App in Android Studio

Amity’s UI Kit Import

With your application ready, let’s proceed to integrate our visually appealing UI Kit.

Clone or download source code from our open-source Github repository at Amity Social Cloud UI Kit Android OpenSource.

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

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

3. Ensure you import the :chat, :common, :social, and :amity-uikit modules as illustrated in the screenshot. The :sample module is optional and solely contains examples of UIKit Fragments and Activities.

4. Navigate to the root project’s settings.gradle file after successfully importing the modules. Android Studio might generate a dependency path from the UI Kit source code directory you specified. If it doesn’t, or if it generates an incorrect path, please verify and adjust it manually.

5. Also, in the root project’s settings.gradle, declare the jitpack.io repository destination by adding maven { url 'https://jitpack.io' } to dependencyResolutionManagement > repositories.

6. Link the imported module to the application’s gradle file by adding: implementation project(path: ':amity-uikit').

7. Exclude the following META-INF from the packaging options in the application’s gradle:

‍

8. apply this in the project-level build.gradle file. apply from: "../Amity-Social-Cloud-UIKit-Android/buildsystem/dependencies.gradle"

9. Set your settings android.nonTransitiveRClass=false in gradle.properties file.

That’s it! You’re all set to delve into and customize our UI Kit within your application project. Next, we’ll examine the SDK Initialization.

Amity SDK Initialization

Before using the Social SDK, you need to initialize a new SDK instance with your API key, which can be found in the Amity Social Cloud Console. After logging into the Console:

Click ‘Settings’ to expand the menu.
Select ‘Security’.
In the ‘Security’ page, you can find your API key in the ‘Keys’ section.

Now, attach the API key and AmityEndpoint to the application class you created. Remember to declare this class in the AndroidManifest.xml file as well.

‍

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

Login Page

Before we integrate the UI Kit pages, we need to construct a simple login page with Jetpack Compose. We’ll break this down into two key components: the Activity and the ViewModel.

The ViewModel will connect and authenticate to the Amity SDK. For the sake of simplicity, we’ll incorporate Amity’s login function here.

‍

As for the Activity, we’ll create a straightforward user interface featuring userId and display name text fields, complemented by a login button. Upon clicking the login button, the system will fetch the userId and display name from the text fields and relay them to the ViewModel. If the ViewModel reports a successful result, the system will redirect the user to the next page — our Reddit-style home page.

‍

Ta da! With our login screen set up and ready to steer users to our home page, we’re one step closer to our unique Reddit-like social experience. Here’s a glimpse of what the login screen could look like.

Please note that the above code is a simplified illustration of how the login mechanism works. The actual implementation could be more complex, depending on the error handling, UI/UX designs, and additional features you may want to incorporate.

Home Page

While our UI Kit doesn’t yet support composable components, we can work around this by creating an XML file for our home page screen. This home page will only require a fragment container which will later serve as the housing space for Amity’s UI Kit page.

The power of our UI Kit allows you to effortlessly integrate our provided fragment into the prepared container. To achieve this, we’ll need to establish an Activity to manage this fragment.

Here is an example of what your XML file could look like:

‍

Now with the power of our UI Kit you can simply put our provided fragment to the container that we prepared. We will have to create the Activity that holds this fragment.

‍

And that’s all it takes! You now have a Reddit-style social platform at your fingertips. Believe it or not, that’s really all it takes! To further explore the extensive capabilities of our SDK and UI Kit, please visit Amity UI Kit Android. Here are the sample screens that how your application would look like:

Replicating Reddit’s Social Interactions

Emulating Reddit’s unique interaction style is possible with our UI Kit and SDK. Notably, you can leverage its functionality from our SDK to add or remove reactions, tailoring them according to your application’s requirements. You may choose from various reaction types, such as “Love”, “Like”, or “Angry”. For a more Reddit-like ambiance, consider using “upvote” and “downvote” reactions.

You can make these modifications in the PostViewModel class, specifically within the addPostReaction and removePostReaction functions. This is where you handle the logic behind adding and removing reactions, like so:

Remember to replace reactionName with your specific reaction (e.g., "upvote" or "downvote").

Regarding the user interface, the default configuration presents a like button. However, you can customize this element to reflect upvote and downvote buttons. To do this, go to the AmityPostFooterAdapter class and update the button appearance.

Congratulations on successfully creating your very own Reddit-like application! The future of social experiences is now at your command, thanks to the power of Amity’s platform. Happy exploring!