Why is Yalla so popular and How to Build a Chat Room App like Yalla?

What is a voice chat app

A voice chat room is an online community where you can talk with other users in a private setting. This type of room can be used for a variety of purposes, such as meeting with clients, or resolving issues with business partners. Many online communities have voice rooms where users can communicate about anything from scheduling meetings or seminars, to discussing product and service updates and news.

What is the Yalla voice chat app

Yalla Voice Chat App is an app that aims to connect groups of users, providing a source of connection for those who want to make friends from different corners of the world, have fun voice calls, play games!

Why is Yalla so popular

Reviewing the growth and development of Yalla, the company was established in 2016 and launched its first voice group chat product named after itself in the same year. As the first pure voice social product in the Middle East and North Africa, Yalla quickly established a foothold in the Middle Eastern voice chat market with highly localized content and product design. Products like Yalla Chat also rapidly gained market recognition in a short period.

After acquiring a substantial user base through social products, Yalla began to venture into lightweight games. Launched in 2018, "Yalla Ludo" marked the beginning of Yalla's gaming business and was the first Ludo game to integrate voice chat room functionality. To date, this product still generates over $9 million in monthly global revenue, firmly becoming the core revenue generator for Yalla's gaming business.

Seeing the immense potential brought by the combination of Ludo and voice chat rooms, Yalla subsequently launched other products such as "Yalla Parchis" in South America, "Yalla Baloot" in Saudi Arabia, and "101 Okey Yalla" in Turkey, which integrate voice chat rooms with local games. However, in terms of revenue and product performance, these products have not reached the heights of "Yalla Ludo."

From left to right: Yalla Parchis, Yalla Baloot, 101 Okey Yalla

"Merge Kingdoms" is the first SLG game to incorporate a voice chat room system.

In fact, for hardcore SLG players, real-time communication is a significant service requirement. During alliance battles, there is often a need for long and intensive communication, and players might typically use third-party apps like Discord or TT for real-time communication. However, running multiple apps can sometimes affect stability. Integrating a built-in voice room is arguably the most "direct" approach.

Merge Kingdoms Voice Chat Room

Starting with the gameplay of "Merge Kingdoms," newcomers are first introduced through a tutorial lasting about 5-10 minutes. The game adopts the mainstream COK-Like gameplay of the Middle East and has been significantly simplified to suit the preferences of big spenders in the region.

Specifically, "Merge Kingdoms" shares similar gameplay mechanics with "Top War" (Pocket Soldiers), utilizing a sliding synthesis gameplay style. It eliminates the tedious steps of collecting resources, upgrading buildings, and troops, and includes features like "2x speed battle" and "skip," allowing players to simply click on buildings to gather resources, drag to merge, and enter battles.

Beyond the COK gameplay, "Merge Kingdoms" also incorporates a hero development system. In battles, heroes attack before soldiers, and higher-level and higher-grade heroes can inflict more damage, further shortening battle durations.

Looking solely at the gameplay design, "Merge Kingdoms" is indeed lightweight and extremely easy for newcomers, fitting well with players' expectations for SLG games. However, it's undeniable that overly simplified gameplay might reduce player retention in the later stages. Nevertheless, the addition of voice chat rooms effectively helps counter potential fatigue.

By clicking the small house icon on the bottom left of the main interface, players can enter the voice chat room. Besides the first "Alliance Room," players are free to enter any other chat room.

In addition to individual voice chat rooms, Yalla has also integrated a gifting system, leaderboards, mini-games, and music playback into the voice chat rooms—common features in live streaming. In the voice chat rooms, if you're interested in a topic, you can instantly become a "room host" to start the discussion, and other users can join the conversation and express their feelings through gifts. If you prefer to play the game while chatting, you can use the "hang up" feature, and the voice chat room will appear as a small widget on the side of the main interface.

With its comprehensive features, even users who prefer chatting and social interactions can use the voice chat room of "Merge Kingdoms" as a standalone app, adding the game as another topic of discussion. During the experience, the chat content in multiple rooms is very diverse, covering game strategies, daily life, and other topics.

The game itself acts more like a tool to attract users, while the voice chat room is the core point for converting target users. In the course of the game, users enter the voice chat room for purposes such as making friends or seeking game strategies. Through interaction, they gradually develop more social needs. Ultimately, most users who prefer social interaction may return to the functionality of the voice chat room, while gaming users are likely to use the voice chat room as a voice device during alliance battles.

How to Build Your Own Real-time Chat App: step-by-step

If you want to build your own Voice Chat App, you can complete several key steps within an hour and get an App with a complete UI interface and voice room function.

The following content takes Android integration as an example. If you want to install Voice Chat Room on iOS devices, please refer to here.

Environment Preparations

Android 5.0 (SDK API level 21) or above.

Android Studio 4.2.1 or above.

Devices with Android 5.0 or above.

Step 1. Activate the service

Before using the Audio and Video Services provided by Tencent Cloud, you need to go to the Console and activate the service for your application. For detailed steps, refer to Activate the service.

Step 2: Download TUILiveKit component

Clone/download the code in Github, and then copy the tuilivekit subdirectory in the Android directory to the same level directory as the app in your current project.

Step 3: Project configuration

Add jitpack repository dependencies to your project (Download the three-party library SVGAPlayer that plays gift svg animation):

Gradle 7.0 or earlier

Add the address of the jitpack repository to the build.gradle file in the root directory of the project:

allprojects {
    repositories {
        google()
        mavenCentral()
        // add jitpack repository
        maven { url 'https://jitpack.io' }
    }
}

2. Find the settings.gradle file in the project root directory and add the following code to it. Its function is to import the tuilivekit component downloaded in Step2 into your current project:

include ':tuilivekit'

3. Find the build.gradle file in the app directory and add the following code to it. Its function is to declare the dependence of the current app on the newly added tuilivekit component:

api project(':tuilivekit')

4. Since we use the reflection feature of Java inside the SDK, we need to add some classes in the SDK to the unobfuscated list, so you need to add the following code to the proguard-rules.pro file:

-keep class com.tencent.** { *; }

5. In AndroidManifest.xml, set a Theme.AppCompat Theme to the android:theme attribute of application:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android='httpschemasandroidcomapkresandroid'"
    xmlns:tools="http://schemas.android.com/tools">
    <application android:theme="@style/Theme.AppCompat.DayNight.NoActionBar">
        ...
    </application>
</manifest>

Step 4. Log in

Before invoking the functions of the TUILiveKit component, you need to perform the login of the TUI component. In your project, it is recommended to add the following login code in your business login scenario or in the first startup activity of the app, which is used to complete the login of the TUI component by calling the relevant APIs in TUICore. This step is very important, because you can use all functions of TUILiveKit only after the login is successful. Therefore, please patiently check whether the relevant parameters are correctly configured.

import TUICore

TUILogin.login(context, 
    1400000001,     // Replace it with the SDKAppID obtained in Step 1
    "denny",        // Please replace it with your UserID
    "xxxxxxxxxxx",  // You can calculate a UserSig in the console and fill it in
    new TUICallback() {
    @Override
    public void onSuccess() {
        Log.i(TAG, "login success");
    }

    @Override
    public void onError(int errorCode, String errorMessage) {
        Log.e(TAG, "login failed, errorCode: " + errorCode + " msg:" + errorMessage);
    }
});

Parameter description: The key parameters used by the login function are as detailed below:

SDKAppID: Obtained in the last step in Step1 and not detailed here.

UserID: The ID of the current user, which is a string that can contain only letters (a–z and A–Z), digits (0–9), hyphens (-), or underscores (_).

UserSig: The authentication credential used by Tencent Cloud to verify whether the current user is allowed to use the TRTC service. You can get it by using the SDKSecretKey to encrypt the information such as SDKAppID and UserID. You can generate a temporary UserSig by clicking the User Generate button in the console.

Step 5. Enter the live preview screen

1. Create a new file named app_activity_anchor.xml (Default path: app/src/main/res/layout/app_activity_anchor.xml).

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android='httpschemasandroidcomapkresandroid'"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id='idfl_container'"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

1. Create a new file named AnchorActivity.java and register in the AndroidManifest.xml. By loading TUILiveKit TUIVoiceRoomFragment page, you can pull up preview screen.

public class AnchorActivity extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.app_activity_anchor);

        //RoomId can be customized
        String roomId = "123666";

        TUIVoiceRoomFragment.RoomParams params = new TUIVoiceRoomFragment.RoomParams();
        //The default value is the maximum number of seat supported by the package
        params.maxSeatCount = 0;
        params.seatMode = TUIRoomDefine.SeatMode.APPLY_TO_TAKE;

        FragmentManager fragmentManager = getSupportFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        TUIVoiceRoomFragment fragment = new TUIVoiceRoomFragment(roomId, 
        TUIVoiceRoomFragment.RoomBehavior.PREPARE_CREATE, params);
        fragmentTransaction.add(R.id.fl_container, fragment);
        fragmentTransaction.commit();
    }
}

Register AnchorActivity in AndroidManifest.xml of the app Project (please use the actual package name of your AnchorActivity):

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android='httpschemasandroidcomapkresandroid'"
    xmlns:tools="http://schemas.android.com/tools">
    <application>
        ...
        <!-- Example: To register AnchorActivity, please use your actual package name -->
        <activity android:name="com.trtc.uikit.livekit.example.main.AnchorActivity"
                  android:theme="@style/Theme.AppCompat.DayNight.NoActionBar"/>
        ...
    </application>
</manifest>

Where you need to start live streaming (depending on your business, it can be executed in a click event in MainActivity by default), perform the following operations to pull up the host start page:

Intent intent = new Intent(context, AnchorActivity.class);
startActivity(intent);

Step 6: Pull Room List

1, Create a new file app_activity_main.xml (default path: app/src/main/res/layout/app_activity_main.xml).

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android='httpschemasandroidcomapkresandroid'"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id='idfl_live_list'"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

1. Create MainActivity.java, register it inAndroidManifest.xml, and by loading the TUILiveKit page of TUILiveListFragment , you can display the room list.

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.app_activity_main);

        FragmentManager fragmentManager = getSupportFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        TUILiveListFragment listFragment = new TUILiveListFragment();
        fragmentTransaction.add(R.id.fl_live_list, listFragment);
        fragmentTransaction.commit();
    }
}

Register MainActivity in the app's AndroidManifest.xml (use your actual package name for MainActivity):

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android='httpschemasandroidcomapkresandroid'"
    xmlns:tools="http://schemas.android.com/tools">
    <application>
        ...
        <!-- Example: Register MainActivity, please use your actual package name -->
        <activity 
            android:name="com.trtc.uikit.livekit.example.view.main.MainActivity" 
            android:theme="@style/Theme.AppCompat.DayNight.NoActionBar"/>
        ...
    </application>
</manifest>

Step 7. The audience enters the studio

Create a new file named app_activity_audience.xml (Default path: app/src/main/res/layout/app_activity_audience.xml).

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android='httpschemasandroidcomapkresandroid'"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id='idfl_container'"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

Create a new file named AudienceActivity.java and register in the AndroidManifest.xml. By loading TUILiveKit TUILiveRoomAudienceFragment page, you can enter room.

public class AudienceActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.app_activity_audience);
        //RoomId can be customized
        String roomId = "123666";

        FragmentManager fragmentManager = getSupportFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        TUIVoiceRoomFragment fragment = new TUIVoiceRoomFragment(roomId, 
                TUIVoiceRoomFragment.RoomBehavior.JOIN, null);
        fragmentTransaction.add(R.id.fl_container, fragment);
        fragmentTransaction.commit();
    }
}

Register AudienceActivity in AndroidManifest.xml of the app Project (please use the actual package name of your AudienceActivity):

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android='httpschemasandroidcomapkresandroid'"
    xmlns:tools="http://schemas.android.com/tools">
    <application>
        ...
        <!-- Example: To register AudienceActivity, please use your actual package name -->
        <activity android:name="com.trtc.uikit.livekit.example.main.AudienceActivity"
                  android:theme="@style/Theme.AppCompat.DayNight.NoActionBar"/>
        ...
    </application>
</manifest>

Where you need the audience to enter the room (depending on your business, it can be executed in a click event in MainActivity by default), do the following to pull up the audience entry page:

Intent intent = new Intent(context, AudienceActivity.class);
startActivity(intent);

Key Features of Yalla Group Voice Chat Room App

● Multi-user Voice Rooms: Yalla allows users to create or join voice chat rooms where multiple people can talk simultaneously, making it ideal for group discussions and social gatherings.

● Global Connectivity: Connect with people from different parts of the world, making it a fantastic platform for cultural exchange and making international friends.

● Interactive Games: Integrated within the app are various interactive games that users can play while engaging in voice chats, adding an element of fun and competition to the experience.

● Live Entertainment: Yalla hosts live sessions where users can listen to music, watch performances, and participate in live discussions, providing entertainment and engagement.

● User Profiles and Customization: Users can create and customize their profiles with avatars, status updates, and more, allowing for a personalized experience and identity within the community.

5 Best Alternatives to Yalla Chat Room App

Discord

Popular among gamers, Discord offers excellent voice chat capabilities, along with text and video options, making it suitable for both casual and professional interactions.

Clubhouse

This app focuses on live voice conversations in rooms that can host discussions on a wide range of topics, from technology to personal development.

Viber

Known for its secure messaging, Viber also offers voice and video call options, including group voice chats, with added features like stickers and GIFs for a lively chat experience.

Telegram

While primarily a messaging app, Telegram supports large group voice chats known as Voice Chats 2.0, suitable for hosting live events or large group discussions.

Zello

This app works like a walkie-talkie, allowing real-time voice communication with a simple push-to-talk feature, ideal for quick and efficient voice chats.

FAQs

How do I join a voice chat room in Yalla?

To join a voice chat room in Yalla, simply open the app, browse through the list of available rooms or use the search feature to find a specific room, and then tap to join.

Can I create my own chat room in Yalla?

Yes, Yalla allows users to create their own chat rooms. You can set the topic, decide whether it's public or private, and invite friends or let anyone join.

Is Yalla safe to use?

Yalla prioritizes user safety with various moderation tools and guidelines to ensure a respectful and safe environment. However, as with any online platform, it's important to use discretion and protect personal information.

Does Yalla support multiple languages?

Yes, Yalla supports multiple languages, making it accessible to a global audience and enhancing the user experience for non-English speakers.

Are there any fees associated with using Yalla?

Yalla is free to download and use, but it also offers in-app purchases and subscriptions for access to premium features and content.

If you have any questions or need assistance online, our support team is always ready to help. Please feel free to Contact us or join us on Telegram or Discord.