Android

Facebook-msg

Posted on Posted in Android, Tutorials

How to develop a simple Facebook-liked-Messenger App.

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

fb-hot

This video tutorial demonstrates how to create this simple facebook-liked-messenger UI interface.

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Video Tutorial

 

 

 

 

Source Code

If you prefer to develop the app through the below  method rather than the video, you can go through the steps. If you are new to programming, I will recommend that you take your time to type out the codes instead of doing copy  and paste. In my opinion, you will learn faster and understand the code.

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.


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    android:background="#25c"
    tools:context="com.eloneth.facebookmsg.MainActivity"
    android:weightSum="1">


    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Facebook"
        android:textColor="#fff"
        android:layout_marginTop="10dp"
        android:textStyle="bold"
        android:textAlignment="center"
        android:id="@+id/textView"
        android:layout_weight="0.09"
        android:textSize="30sp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Email"
        android:layout_marginLeft="10dp"
        android:textStyle="bold"
        android:textColor="#fff"
        android:textSize="20sp"
        android:id="@+id/textView2"
         />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="#fff"
        android:id="@+id/editText"
         />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="#fff"
        android:text="Password"
        android:layout_margin="10dp"
        android:textStyle="bold"
        android:textSize="20sp"
        android:id="@+id/textView3"
         />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:inputType="textPassword"
        android:background="#fff"
        android:id="@+id/editText2"
         />

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Save Login "
        android:textColor="#fff"
        android:textStyle="bold"
        android:id="@+id/checkBox"
        android:textSize="20sp"
        android:checked="false" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#fff"
        android:textStyle="bold"
        android:text="Need an account? Sign up using your phone"
        android:id="@+id/textView4"
        android:layout_marginTop="50dp"
        android:textSize="20sp"
        android:layout_marginLeft="10dp"
        android:layout_gravity="center_horizontal"
         />
</LinearLayout>



Step 3:

Note: If you used a different package name, do not forget to change com.eloneth to your package name in
the <Linearlayout, i.e tools:context=”com.eloneth.facebookui.MainActivity”>.

 

Step 4:
This is the MainActivity.java class code.

We will leave the MainActivity the way it is for now.

 

package com.eloneth.facebookmsg;

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

 

Leave a Reply

Your email address will not be published.