Android

Chat Application

Posted on Posted in Android, Tutorials

How to develop a simple Chat Application.

Welcome to Eloneth Android App Development Tutorials for beginners. Part 5:

 

chat-app-full

This tutorial demonstrate how to create a simple chat UI interface.

You can find the source code for this tutorial below the video. It shows the steps  for developing the app.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Video Tutorial

 

 

Step 1:

Create a project in android studio with the following details:

Project Name: FacebookMsg

 MinImum SDK: API 19: Android  4.4 kitkat.

Package name: com.eloneth.  You can use any package name of your choice.

Click next, select empty activity, click next and click finish.

 

 

Step 2:

After creating the new project, open the activity_main.xml file and delete the codes that are inside.  Paste in the below codes.

Note: If you used a different package name, don’t forget to change com.eloneth to your package name,
example <Linearlayout, i.e tools:context=”com.eloneth.facebookui.MainActivity”> should be eloneth.com.your package name.MainActivity

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.eloneth.helloworld.MainActivity">


  <ImageView
      android:id="@+id/profileIcon"
      android:src="@drawable/profile"
      android:layout_width="50dp"
      android:layout_height="50dp"
      android:layout_alignParentTop="true"
      android:layout_alignParentLeft="true"
      />
    
    <ImageView
        android:id="@+id/sendIcon"
        android:src="@drawable/send"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"/>


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30dp"
        android:layout_marginLeft="10dp"
        android:layout_toRightOf="@+id/profileIcon"
        android:text="Contact Name"/>


    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="25dp"
        android:layout_alignParentBottom="true"
        android:layout_toLeftOf="@+id/sendIcon"
        android:hint="Enter Message"/>
</RelativeLayout>

 

 

Step 3:

This is the MainActivity.java class code.
We will leave the MainActivity the way it is for now.

 

package com.eloneth.helloworld;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

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




If you run your app on an emulator or a real device, you should see the above facebook like messenger app.

 

If you find this tutorial useful, Please don’t forget to subscribe to my  newsletter to receive notification whenever I release new tutorials. You can also  share the video, like my page and leave a comment. Thanks for watching.

Watch more tutorials.

How to install android studio development environment (Article).Part 1. 

How to create your first android application, Part 2.

Describing some Folders and Components in Android Studio. Part 3.

How to Create an Emulator for Testing our App. Part 4.

How to develop a simple Facebook-liked-Messenger. Part 6. 

How to develop a copy and paste App. Part 7

Leave a Reply

Your email address will not be published.