Blog para desarrollo de aplicaciones en Android, aprende paso a paso como crear aplicaciones.

Usamos cookies propias y de terceros que entre otras cosas recogen datos sobre sus hábitos de navegación para mostrarle publicidad personalizada y realizar análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. OK Más información | Y más

Como crear una aplicación de Chat para Android utilizando Firebase

Android Studio - Chat Message Firebase


Hola amigos en esta ocasión les tenemos preparado este tutorial para crear un chat de mensajes utilizando Firebase.
Android Studio - Chat Message Firebase

Crear Proyecto Messaging Chat Firebase Tutorial (Aquí)

Vamos a crear nuestro proyecto para desarrollar este ejemplo de un chat de mensajes utilizando Firebase.
Android Studio - Message Chat Firebase

Firebase


Abriremos nuestro consola del Firebase para registrar nuestro proyecto.
Android Studio - Message Chat Firebase
Esperamos a que se genere el proyecto.
Android Studio - Message Chat Firebase
Nos mostrara la pantalla principal y vamos a crear nuestro Proyecto de Android utilizando Firebase.
Android Studio - Message Chat Firebase
Ahora añadiremos lo siguiente en nuestro proyecto nuevo.
Android Studio - Message Chat Firebase
Obtendremos el SHA1 en la siguiente forma
Android Studio - Message Chat Firebase
Presionaremos signigReport para que se genere nuestra clave SHA1
Android Studio - Message Chat Firebase
Y listo tendremos nuestro SHA1.
Android Studio - Message Chat Firebase
Presionaremos siguietne y nos mostrara el arcivo google.services.json
Android Studio - Message Chat Firebase
Añadiremos lo siguiente  a nuestro proyecto.
Android Studio - Message Chat Firebase
De la siguiente forma. en el archivo build.gradle( Project)

classpath 'com.google.gms:google-services:3.0.0'
Ahora añadiremos a nuestro archivo build.gradle (Module:app)
En las dependencias.


implementation 'com.google.firebase:firebase-storage:10.2.0'
implementation 'com.google.firebase:firebase-auth:10.2.0'
implementation 'com.google.firebase:firebase-database:10.2.0'
implementation 'com.firebase:firebase-client-android:2.5.2+'

Y fuera de las dependencias al final o al inicio agregamos.

apply plugin: 'com.google.gms.google-services'
y luego presionamos Sync.

Añadiremos el archivo google-services.json
Android Studio - Message Chat Firebase
 Ahora volvemos a nuestra consola en Firebase.
Android Studio - Message Chat Firebase
Ahora comenzaremos a desarrollar el diseño.

Design Chat Message Firebase Tutorial


Comenzaremos a crear el diseño de nuestro Chat de mensajes utilizando Firebase.
Agregaremos nuestra activity de Login y el diseño seria de la siguiente manera.

<?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: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=".Login"
    android:orientation="vertical"
    android:gravity="center">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Login"
        android:textSize="30dp"
        android:gravity="center"
        android:layout_marginBottom="20dp"/>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/username"
        android:inputType="text"
        android:maxLines="1"
        android:hint="Usuario"
        android:layout_marginBottom="10dp"/>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/password"
        android:inputType="textPassword"
        android:maxLines="1"
        android:hint="Contraseña"
        android:layout_marginBottom="10dp"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Aceptar"
        android:id="@+id/loginButton"
        android:layout_marginBottom="20dp"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Registrate"
        android:textSize="20dp"
        android:gravity="center"
        android:id="@+id/register"/>
</LinearLayout>
Ahora añadiremos el Activity Registrar para nuestra aplicación.  Y los controles quedarían de la siguiente forma.

<?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: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=".Register"
    android:orientation="vertical"
    android:gravity="center">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Register"
        android:textSize="30dp"
        android:gravity="center"
        android:layout_marginBottom="20dp"/>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/username"
        android:inputType="text"
        android:maxLines="1"
        android:hint="enter username"
        android:layout_marginBottom="10dp"/>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/password"
        android:inputType="textPassword"
        android:maxLines="1"
        android:hint="enter password"
        android:layout_marginBottom="10dp"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Register"
        android:id="@+id/registerButton"
        android:layout_marginBottom="20dp"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Click here to login"
        android:textSize="20dp"
        android:gravity="center"
        android:id="@+id/login"/>
</LinearLayout>
Android Studio - Chat Message Firebase
Ahora añadiremos el Menu Principal donde se verán los Usuarios que están conectados.

<?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: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=".Users"
    android:orientation="vertical">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="No users found!"
        android:id="@+id/noUsersText"
        android:visibility="gone"/>
    <ListView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/usersList"/>
</LinearLayout>

Android Studio - Chat Message Firebase
Y ahora añadiremos el Chat  de nuestra aplicación.

<?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:background="#ffffff"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context=".Chat">
    <ScrollView
        android:layout_width="match_parent"
        android:layout_weight="20"
        android:layout_height="wrap_content"
        android:id="@+id/scrollView">
        <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/layout2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_marginBottom="10dp"
                android:id="@+id/layout1">
            </LinearLayout>
        </RelativeLayout>
    </ScrollView>
    <include
        layout="@layout/message_area"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="bottom"
        android:layout_marginTop="5dp"/>
</LinearLayout>

Android Studio - Chat Message Firebase

Y para mostrar el diseño de nuestro Chat agregaremos el siguiente XML que servirá para el área de nuestro EditText donde escribiremos los mensajes que enviaremos a los demás usuarios.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="bottom"
    android:orientation="horizontal">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/border"
        android:orientation="horizontal">
        <EditText
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:textColorHint="#CFD8DC"
            android:gravity="center"
            android:background="@android:color/transparent"
            android:hint="Type a message..."
            android:id="@+id/messageArea"
            android:maxHeight="80dp"
            />
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="4"
            android:padding="4dp"
            android:background="@color/colorPrimary"
            android:src="@android:drawable/ic_menu_send"
            android:id="@+id/sendButton"/>
    </LinearLayout>
</LinearLayout>

El siguiente archivo servirá para darle un borde a nuestro EditText de mensajes.

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:radius="0dp"
        />
    <stroke
        android:width="1dip"
        android:color="#555555" />
</shape>
El siguiente archivo XML funciona para los mensajes de nuestro Chat.

<?xml version="1.0" encoding="utf-8"?>
<layer-list>
    <item  xmlns:android="http://schemas.android.com/apk/res/android"
        android:top="1dp"
        android:bottom="1dp">
        <shape
            android:shape="rectangle" >
            <solid android:color="#EEEEEE"/>
            <stroke
                android:width="2dip"
                android:color="#EEEEEE" />
            <corners
                android:bottomLeftRadius="20dp"
                android:bottomRightRadius="20dp"
                android:topLeftRadius="20dp"
                android:topRightRadius="20dp" />
            <!-- If you want to add some padding -->
            <padding
                android:left="15dp"
                android:top="5dp"
                android:right="15dp"
                android:bottom="7dp"    >
            </padding>
        </shape>
    </item>
</layer-list>
Añadiremos el siguiente XML para los mensajes de nuestro chat.

<?xml version="1.0" encoding="utf-8"?>
<layer-list>
    <item  xmlns:android="http://schemas.android.com/apk/res/android"
        android:top="2dp"
        android:bottom="2dp">
        <shape
            android:shape="rectangle" >
            <solid android:color="#2196F3" />
            <stroke
                android:width="2dip"
                android:color="#2196F3" />
            <corners
                android:bottomLeftRadius="20dp"
                android:bottomRightRadius="20dp"
                android:topLeftRadius="20dp"
                android:topRightRadius="20dp" />
            <!-- If you want to add some padding -->
            <padding
                android:left="15dp"
                android:top="5dp"
                android:right="15dp"
                android:bottom="7dp"    >
            </padding>
        </shape>
    </item>
</layer-list>

 Código Chat Message Firebase Tutorial



Ahora añadiremos el código de nuestra aplicación y abriremos las siguientes clases. En la clase Users.


import android.app.ProgressDialog;

import android.content.Intent;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.View;

import android.widget.AdapterView;

import android.widget.ArrayAdapter;

import android.widget.ListView;

import android.widget.TextView;

import com.android.volley.Request;

import com.android.volley.RequestQueue;

import com.android.volley.Response;

import com.android.volley.VolleyError;

import com.android.volley.toolbox.StringRequest;

import com.android.volley.toolbox.Volley;

import org.json.JSONException;

import org.json.JSONObject;

import java.util.ArrayList;

import java.util.Iterator;



public class Users extends AppCompatActivity {

    // Declarar variables

    ListView usersList;

    TextView noUsersText;

    ArrayList al = new ArrayList<>();

    int totalUsers = 0;

    ProgressDialog pd;

    // Variable del servicio Firebase

    String URL_FIREBASE = "https://chatmessagefirebase-c2ccc.firebaseio.com";

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_user);

        // Obtener referencia de los objetos en las variables

        usersList = (ListView)findViewById(R.id.usersList);

        noUsersText = (TextView)findViewById(R.id.noUsersText);

        // Iniciar progressDialog

        pd = new ProgressDialog(Users.this);

        pd.setMessage("Cargando...");

        pd.show();

        // Variable para hacer referencia al archivo JSON del servicio Firebase

        String url = URL_FIREBASE + "/users.json";

        StringRequest request = new StringRequest(Request.Method.GET, url, new Response.Listener(){

            @Override

            public void onResponse(String s) {

                // Funcion para obtener los nombre de los usuarios Loggueados

                doOnSuccess(s);

            }

        },new Response.ErrorListener(){

            @Override

            public void onErrorResponse(VolleyError volleyError) {

                System.out.println("" + volleyError);

            }

        });



        RequestQueue rQueue = Volley.newRequestQueue(Users.this);

        rQueue.add(request);

        usersList.setOnItemClickListener(new AdapterView.OnItemClickListener() {

            @Override

            public void onItemClick(AdapterView parent, View view, int position, long id) {

                UserDetails.chatWith = al.get(position);

                startActivity(new Intent(Users.this, Chat.class));

            }

        });

    }

    // Funcion para obtener Nombres usuarios

    public void doOnSuccess(String s){

        try {

            JSONObject obj = new JSONObject(s);

            // Obtiene los nombres de la devolucion del request JSON

            Iterator i = obj.keys();

            String key = "";

            // Añadir los nombres a la variable ArrayList

            while(i.hasNext()){

                key = i.next().toString();

                if(!key.equals(UserDetails.username)) {

                    al.add(key);

                }

                totalUsers++;

            }

        } catch (JSONException e) {

            e.printStackTrace();

        }

        // Si la cantidad de usuarios es menor a 0 mostrara el mensaje de que no hay usuarios

        if(totalUsers <=1){

            // Mostrar TextView y Ocultar ListView

            noUsersText.setVisibility(View.VISIBLE);

            usersList.setVisibility(View.GONE);

        }

        else{

            // Ocultar TextView y Mostrar ListView

            noUsersText.setVisibility(View.GONE);

            usersList.setVisibility(View.VISIBLE);

            // Añadir usuarios al ListView

            usersList.setAdapter(new ArrayAdapter(this, android.R.layout.simple_list_item_1, al));

        }

        // Finalizar el progressDialog

        pd.dismiss();

    }

}
Crearemos una clase para los detalles del usuario UserDetails

public class UserDetails {

    // Variables de usuario

    static String username = "";

    static String password = "";

    static String chatWith = "";

}

Ahora Login añadiremos el siguiente código.


import android.app.ProgressDialog;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;

import com.android.volley.Request;
import com.android.volley.RequestQueue;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.StringRequest;
import com.android.volley.toolbox.Volley;

import org.json.JSONException;
import org.json.JSONObject;

public class Login extends AppCompatActivity {
    // Declaramos las variables
    TextView registerUser;
    EditText username, password;
    Button loginButton;
    String user, pass;
    // URL del servicio firebase
    String URL_FIREBASE = "https://chatmessagefirebase-c2ccc.firebaseio.com/";
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);
        // Obtenemos las referencias de los objetos
        registerUser = (TextView)findViewById(R.id.register);
        username = (EditText)findViewById(R.id.username);
        password = (EditText)findViewById(R.id.password);
        loginButton = (Button)findViewById(R.id.loginButton);
        // Boton para redirigir a la actividad Registrar
        registerUser.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startActivity(new Intent(Login.this, Register.class));
            }
        });
        // Boton para acceder al MainActivity principal
        loginButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // Obtener valores de los controles
                user = username.getText().toString();
                pass = password.getText().toString();
                // Validar si el valor es nulo
                if(user.equals("")){
                    username.setError("No puede estar en blanco");
                } // Validar si el valor es nulo
                else if(pass.equals("")){
                    password.setError("No puede estar en blanco");
                }
                else{
                    // URL del servicio Firebase
                    String url = URL_FIREBASE+"/users.json";
                    // ProgressDialog que se mostrara en espera del servicio
                    final ProgressDialog pd = new ProgressDialog(Login.this);
                    pd.setMessage("Cargando...");
                    pd.show();
                    // Variable request del servicio
                    StringRequest request = new StringRequest(Request.Method.GET, url, new Response.Listener(){
                        @Override
                        public void onResponse(String s) {
                            // Validar si el request es nullo
                            if(s.equals("null")){
                                Toast.makeText(Login.this, "Usuario no encontrado!", Toast.LENGTH_LONG).show();
                            }
                            else{
                                try {
                                    JSONObject obj = new JSONObject(s);
                                    // Validar si el usuario fue encontrado
                                    if(!obj.has(user)){
                                        Toast.makeText(Login.this, "Usuario no encontrado!", Toast.LENGTH_LONG).show();
                                    } // Validar si la contraseña es valida
                                    else if(obj.getJSONObject(user).getString("password").equals(pass)){
                                        // Asignar los valores a variables globales
                                        UserDetails.username = user;
                                        UserDetails.password = pass;
                                        // Redirigir al activity
                                        startActivity(new Intent(Login.this, Users.class));
                                    }
                                    else {
                                        // La contraseña es incorrecta
                                        Toast.makeText(Login.this, "Contraseña incorrecta!", Toast.LENGTH_LONG).show();
                                    }
                                } catch (JSONException e) {
                                    e.printStackTrace();
                                }
                            }
                            // Finalizar el progressbar
                            pd.dismiss();
                        }
                    },new Response.ErrorListener(){
                        @Override
                        public void onErrorResponse(VolleyError volleyError) {
                            System.out.println("" + volleyError);
                            pd.dismiss();
                        }
                    });
                    // Variables request utilizando la libreria Volley
                    RequestQueue rQueue = Volley.newRequestQueue(Login.this);
                    rQueue.add(request);
                }
            }
        });
    }
}

En nuestra clase de Registro de usario añadiremos el siguiente código.

import android.app.ProgressDialog;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;

import com.android.volley.Request;
import com.android.volley.RequestQueue;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.StringRequest;
import com.android.volley.toolbox.Volley;
import com.firebase.client.Firebase;

import org.json.JSONException;
import org.json.JSONObject;

public class Register extends AppCompatActivity {
    // Declarar variables
    EditText username, password;
    Button registerButton;
    String user, pass;
    TextView login;
    // URL del servicio firebase
    String URL_FIREBASE = "https://chatmessagefirebase-c2ccc.firebaseio.com/";
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_register);
        // Obtener referencia de los controles
        username = (EditText)findViewById(R.id.username);
        password = (EditText)findViewById(R.id.password);
        registerButton = (Button)findViewById(R.id.registerButton);
        login = (TextView)findViewById(R.id.login);
        // Aplicar el contecto a Firebase
        Firebase.setAndroidContext(this);
        // Direccionar al Login Activity
        login.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startActivity(new Intent(Register.this, Login.class));
            }
        });
        // Registrar usuario
        registerButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // Obtener valores de los EditText
                user = username.getText().toString();
                pass = password.getText().toString();
                // Validar si el User fue ingresado
                if(user.equals("")){
                    username.setError("No puede estar en blanco");
                } // Validar si la contraseña fue ingresada
                else if(pass.equals("")){
                    password.setError("No puede estar en blanco");
                }
                else if(!user.matches("[A-Za-z0-9]+")){
                    username.setError("Solo alfabeto o números permitidos");
                }
                else if(user.length()<5 5="" argando...="" caracteres="" de="" direccion="" egister.this="" el="" else="" equest.method.get="" final="" if="" l="" largo="" los="" menos="" mostrar="" new="" pass.length="" password.seterror="" pd.setmessage="" pd.show="" pd="new" progressbar="" progressdialog="" que="" recibe="" request="new" response.listener="" string="" stringrequest="" tring="" un="" url="" username.seterror="" users.json="" usuarios="" variable="">(){
                        @Override
                        public void onResponse(String s) {
                            // Obtener referencia del archivo JSON Users
                            Firebase reference = new Firebase(URL_FIREBASE + "/users");
                            // Verificar response es null
                            if(s.equals("null")) {
                                // Mostrar mensaje de que el registro es Exitoso!
                                reference.child(user).child("password").setValue(pass);
                                Toast.makeText(Register.this, "Registro exitoso!", Toast.LENGTH_LONG).show();
                            }
                            else {
                                try {
                                    JSONObject obj = new JSONObject(s);
                                    // Validar si el usuario existe
                                    if (!obj.has(user)) {
                                        // Mostrar mensaje de registro exitoso! Y direccionar al activity Login
                                        reference.child(user).child("password").setValue(pass);
                                        Toast.makeText(Register.this, "Registro exitoso!", Toast.LENGTH_LONG).show();
                                        Intent i = new Intent(Register.this, Login.class);
                                        startActivity(i);
                                    } else {
                                        // Mostrar mensaje que el usuario ya existe!
                                        Toast.makeText(Register.this, "Nombre de usuario ya existe!", Toast.LENGTH_LONG).show();
                                    }
                                } catch (JSONException e) {
                                    e.printStackTrace();
                                }
                            }
                            // Terminar progreess dialog
                            pd.dismiss();
                        }
                    },new Response.ErrorListener(){
                        @Override
                        public void onErrorResponse(VolleyError volleyError) {
                            System.out.println("" + volleyError );
                            pd.dismiss();
                        }
                    });
                    // Procesar el request
                    RequestQueue rQueue = Volley.newRequestQueue(Register.this);
                    rQueue.add(request);
                }
            }
        });
    }
}
Chat añadiremos lo siguiente.

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.ScrollView;
import android.widget.TextView;
import com.firebase.client.ChildEventListener;
import com.firebase.client.DataSnapshot;
import com.firebase.client.Firebase;
import com.firebase.client.FirebaseError;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;

public class Chat extends AppCompatActivity {
    // Declarar variables
    LinearLayout layout;
    RelativeLayout layout_2;
    ImageView sendButton;
    EditText messageArea;
    ScrollView scrollView;
    Firebase reference1, reference2;
    SimpleDateFormat sdf;
    // URL del servicio firebase
    String URL_FIREBASE = "https://chatmessagefirebase-c2ccc.firebaseio.com/";
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activit_chat);
        // Crear formato de fecha y hora
        sdf = new SimpleDateFormat("EEE, MMM d 'AT' HH:mm a");
        // Obtener referencia de controles
        layout = (LinearLayout) findViewById(R.id.layout1);
        layout_2 = (RelativeLayout)findViewById(R.id.layout2);
        sendButton = (ImageView)findViewById(R.id.sendButton);
        messageArea = (EditText)findViewById(R.id.messageArea);
        scrollView = (ScrollView)findViewById(R.id.scrollView);
        scrollView.fullScroll(View.FOCUS_DOWN);
        // ASiganar context a la variable Firebase
        Firebase.setAndroidContext(this);
        // Asignar ruta de las URL
        reference1 = new Firebase(URL_FIREBASE + "/messages/" + UserDetails.username + "_" + UserDetails.chatWith);
        reference2 = new Firebase(URL_FIREBASE + "/messages/" + UserDetails.chatWith + "_" + UserDetails.username);
        sendButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // Obtener Mensaje del EditText
                String messageText = messageArea.getText().toString();
                // Validar que el mensaje no sea nullo
                if(!messageText.equals("")){
                    Map map = new HashMap();
                    String currentDateandTime = sdf.format(new Date());
                    map.put("message", messageText);
                    map.put("user", UserDetails.username);
                    map.put("time", currentDateandTime);
                    // Enviar mensajes
                    reference1.push().setValue(map);
                    reference2.push().setValue(map);
                    messageArea.setText("");
                }
            }
        });
        // Referencia en espera de recibir nuevos mensajes
        reference1.addChildEventListener(new ChildEventListener() {
            @Override
            public void onChildAdded(DataSnapshot dataSnapshot, String s) {
                // Obtener mensajes
                Map map = dataSnapshot.getValue(Map.class);
                // Asignar mensajes a las variables
                String message = map.get("message").toString();
                String userName = map.get("user").toString();
                String time = map.get("time").toString();
                // Si el usuario es igual al usuario logeado añadira la etiqueta "You"
                if(userName.equals(UserDetails.username)){
                    addMessageBox("You " , message,time, 1);
                }
                else{
                    addMessageBox(UserDetails.chatWith , message,time, 2);
                }
            }

            @Override
            public void onChildChanged(DataSnapshot dataSnapshot, String s) {

            }

            @Override
            public void onChildRemoved(DataSnapshot dataSnapshot) {

            }

            @Override
            public void onChildMoved(DataSnapshot dataSnapshot, String s) {

            }

            @Override
            public void onCancelled(FirebaseError firebaseError) {

            }
        });
    }
    // Añadir mensajes
    public void addMessageBox(String name,String message,String time, int type){
        // Crear controles de forma dinamica
        TextView textmsg = new TextView(Chat.this);
        TextView textname = new TextView(Chat.this);
        TextView texttime = new TextView(Chat.this);
        //  Añadire valores a los TextView
        textname.setText(name);
        textname.setTextSize(TypedValue.COMPLEX_UNIT_SP, 11);
        textmsg.setText(message);
        texttime.setText(time);
        texttime.setTextSize(TypedValue.COMPLEX_UNIT_SP, 11);
        // Crear controles LinearLayout
        LinearLayout.LayoutParams lp1 = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        LinearLayout.LayoutParams lp2 = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        LinearLayout.LayoutParams lp3 = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        lp2.weight = 1.0f;
        // Tipo de mensaje
        if(type == 1) {
            // Alinear a la derecha
            lp1.gravity = Gravity.RIGHT;
            lp2.gravity = Gravity.RIGHT;
            lp3.gravity = Gravity.RIGHT;
            // Añadir textview derecha
            textmsg.setBackgroundResource(R.drawable.text_in);
        } else{
            // Alinear el mensaje a la izquierda
            lp1.gravity = Gravity.LEFT;
            lp2.gravity = Gravity.LEFT;
            lp3.gravity = Gravity.LEFT;
            // Añadir textview izquierda
            textmsg.setBackgroundResource(R.drawable.text_out);
        }
        // Añadir parametros
        textname.setLayoutParams(lp1);
        textmsg.setLayoutParams(lp2);
        texttime.setLayoutParams(lp3);
        // Añadir controles al Layaout
        layout.addView(textname);
        layout.addView(textmsg);
        layout.addView(texttime);
        scrollView.fullScroll(View.FOCUS_DOWN);
    }
}
Y nuestro archivo AndroidManifest quedaría de la siguiente manera.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.hn.universoandroid.androidchatfirebase">
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".Login">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".Register" />
        <activity android:name=".Users" />
        <activity android:name=".Chat" />
    </application>

</manifest>

Crear Emulador AVD (Aquí)


Para terminar vamos a ejecutar nuestra aplicación para ver el resultado de nuestro ejemplo.

Android Studio - Chat Message Firebase

Android Studio - Chat Message Firebase

Android Studio - Chat Message Firebase

Android Studio - Chat Message Firebase

Android Studio - Chat Message Firebase

Si tienes alguna duda dejanos tu comentario con gusto te responderemos. Gracias.

Curso Kotlin Español

No hay comentarios:

Publicar un comentario

x

Registrate!

Curso Android Español

Curso Kotlin Español

eBook Free Android Studio

Noticias y Eventos

¡Directamente a tu INBOX!

Le enviaremos nuestros recursos gratis. Para obtener nuestro contenido nuevo, únase a nuestra comunidad. No te molestaremos enviando información inútil. ¡No te pierdas ninguna actualización, mantente conectado! Recuerda verificar tu correo electronico.

Ingrese su dirección de correo electrónico:

Entregado por FeedBurner