How to build an Android Chat App - Hive Programmers

Greetings to my favorite science community online, StemSocial.

It's @skyehi and I'm very happy to be back to continue my series on Android App development tutorials for beginners.

Today's tutorial episode is a really special one because I'll be introducing you to the world of social media and Instant messaging.

Messenger Apps like Facebook messenger, WhatsApp, Telegram and Viber to mention a few are the most used Apps on any smart phone.

Original Image Source by lmonk72 from Pixabay

People spend a lot of their time using their smartphones and the main thing they really do is to send messages. Instant Messengers are how we stay in touch with friends and family that are not close to us in person.

When you go to any of the popular App stores like Google Play Store or Apple App Store, messenger apps dominate in terms of number of downloads.

Instant Messengers are really useful apps for communication and I'm super excited about introducing my readers and followers to this episode of the series.

Prerequisites

Alright guys, I'll start by listing a few required softwares you would need to be able to go through with building the Chat App.

• Install Android Studio on your machine. Those that have been following the tutorials series and have been building Apps with me already have this stage checked out. You would need Android Studio which is the IDE or platform on which we'll be building all our Android Apps.

• Java Development Kit, JDK. Now since we'll be writing codes in Java programming language, you would need to have JDK successfully installed on your PC. The JDK installation is necessary for your computer to be able to execute Java codes.

I'll assume that my followers have successfully installed Android Studio and JDK. We can now move to the next stage where we create a new Android Studio App project for our Chat App.

Creating a New Project

So guys, start by opening Android Studio and clicking on "create a new Android project". This would send you to another page to choose the package name, App name and Java as the programming language for the project.

As we usually do, we would select an empty activity as template of the App project. When you're satisfied with the configuration of your project, click on the finish button and Android Studio will create your new App Project.

Designing our User Interface

Alright guys, now that we're through with the setting of our App project, we'll start with my favorite part, the frontend design. This is still a tutorial for beginners so I wouldn't want to make too complex an interface.

In our Chat App, we would need three main elements. During a conversation on any messenger or chat App, there's usually a scrollable list of messages for the one sending a text and the one receiving a text.

We may not design a complex bubble for the messages but in this project, a simple RecyclerView will be used to display messages.

We would need an EditText element for typing messages. And lastly we would need a button that would send the message after typing.

The entire frontend design will be worked on inside the res/layout/activity_main.xml file.

Here's how your code should look like guys

(html comment removed:  res/layout/activity_main.xml )
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/messageEditText"
        android:padding="16dp"/>

    <EditText
        android:id="@+id/messageEditText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:hint="Type a message"/>

    <Button
        android:id="@+id/sendButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:text="Send"/>
</RelativeLayout>

Creating a Message Model

I don't know if you remember the tutorial I shared about how to build a Periodic Table App. We created a Model class to represent each element on the periodic table. This is going to be the exact same thing.

We'll be creating a message model class that would represent each chat message with properties like sender, message, and timestamp.

So guys, create a Java class and name it as Message.java. we'll create three different strings for the three properties of each message.

Here's how your code should look like guys

// Message.java
public class Message {
    private String sender;
    private String message;
    private long timestamp;

    // Constructors, getters, and setters
}

Implementing RecyclerView Adapter

So since we want to fill the Recycleview with messages, we would definitely need to have a RecyclerView Adapter. So that means we're going to create another Java class that would be our Adapter.

We would have to create another Java class and name it MessageAdapter.java.

Here's how your Adapter class code should look like

// MessageAdapter.java
public class MessageAdapter extends RecyclerView.Adapter<MessageAdapter.ViewHolder> {

    // ViewHolder implementation

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        Message message = messages.get(position);
        holder.bind(message);
    }

    // Other necessary methods
}

Setting Up Firebase

Now guys, there's not necessarily an inbuilt API or service in Android Studio for storing messages on a database. This is why we would need to use an external cloud database service and the best I would recommend is Firebase from Google itself.

Firebase Realtime Database is a great option to use for storing and retrieving messages in our chat App.

Although, if you are planning on building a chat App for commercial use, you should consider the fact that more database storage demand will incure some kind of cost on your Firebase account.

To implement firebase database services in the Chat App, you would need to go to the main Firebase website and follow their documentation to set up your project and add the necessary dependencies to your Gradle.

I would be making a separate blog on firebase in the near future. However just in case you're having troubles getting to the website or adding the dependencies, please let me know in the comments.

Below is the link to the official Firebase Website

Google Firebase Website

Implement Sending Messages

Now guys, at this point I'll assume you're through with setting up your Firebase account and adding the necessary dependencies. It's time to write the main logic of our App.

We'll be writing the logic code inside the MainActivity.java file. The main objective for our logic is to handle sending messages. The messages, after pressing the send button will be sent to your Firebase console, and shared with the recipient of the message (the one you're messaging).

We'll first initialize the elements we created inside res/layout/activity_main.xml. This would include the Button, EditText and RecyclerView elements. Then afterwards we'll handle click functions.

Here's how your code should look like.

// MainActivity.java
public class MainActivity extends AppCompatActivity {

    // Firebase Database reference

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Initialize UI components and Firebase
        RecyclerView recyclerView = findViewById(R.id.recyclerView);
        EditText messageEditText = findViewById(R.id.messageEditText);
        Button sendButton = findViewById(R.id.sendButton);

        // Set up RecyclerView and Adapter

        // Set up click listener for the send button to send messages
        sendButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // Handle sending messages
            }
        });
    }

    // Other necessary methods
}

Now guys you may have noticed that in my code snippet, I left out the details of the adapter and the onClick mehtod. The reason is that this is a very basic example of how to build a Chat App and I wouldn't want expose the beginners to too many complex codes.

This is a basic model of how to build an instant messenger App

When you Run the App at this point, you can click on the editText element and that would bring up your keypad to type a message and when you click send, the message should be received on your Firebase console if you successfully implemented the firebase service and API.

You can run the app on an emulator or a physical Android device to test the chat functionality.

I would like to congratulate you for successfully building your first chat app. Wow, I almost forgot to mention that you would need to request internet Permission inside the manifest file for your Chat App to be able to work.

Here's how the internet permission request code should look like.

(html comment removed:  AndroidManifest.xml )
<uses-permission android:name="android.permission.INTERNET" />

This permission is really needed for your app to establish network connections and send/receive data over the internet.

That's all for now guys. In future updates we'll improve the app by adding features like user authentication, image/video sharing, and real-time updates.

Thank you so much for taking the time to read today's blog. I hope you enjoyed this tutorial guys.

Have a lovely day and catch you next time on StemSocial. Goodbye 👨‍💻

You Can Follow Me @skyehi For More Like This And Others