Skip to main content

[Make-A] Simple Chat Application using Cloud Firestore Part 6 – Entering The Chat Room

As a user,
After I created a new room,
I want to enter to the room that I created right away
  • Display room name

Now that we can create a chat room, we don’t want them to go back to the chat rooms screen right? A great user experience would be is to let them enter the chat room right away since the user is the one who created it.

 Table of Contents

  1. Part 1 – Specs and Introduction
  2. Part 2 – Setting up Firebase Cloud Firestore
  3. Part 3 – Adding a Simple Authentication
  4. Part 4 – Adding a FloatingActionButton (FAB)
  5. Part 5 – Creating a Chat Room
  6. Part 6 – Entering The Chat Room
  7. Part 7 – Displaying The Chat Rooms
  8. Part 8 – Chat
  9. 10 Exercises and Thanks!

1. Creating our ChatRoomActivity

1. Create a new activity by right-clicking your package name New > Activity > Empty Activity.

2. I’ll name it ChatRoomActivity. You can name it however you want.

3. In your activity_chat_room.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/chats"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

We will use this RecyclerView for later.

4. In your ChatRoomActivity.class, let’s declare our keys for accessing the Bundle inside the Intent that we receive.

public class ChatRoomActivity extends AppCompatActivity {

    public static final String CHAT_ROOM_ID = "CHAT_ROOM_ID";
    public static final String CHAT_ROOM_NAME = "CHAT_ROOM_NAME";

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

Now that we created our ChatRoomActivity, let’s start it after creating a room.

2. Starting our ChatRoomActivity after creating a room

1. Open your CreateRoomActivity.class.

2. In your createRoom() method, create an Intent that starts ChatRoomActivity.

private void createRoom() {
    chatRoomRepository.createRoom(
            roomName.getText().toString(),
            new OnSuccessListener<DocumentReference>() {
                @Override
                public void onSuccess(DocumentReference documentReference) {
                    Intent intent = new Intent(CreateRoomActivity.this, ChatRoomActivity.class);
                    intent.putExtra(ChatRoomActivity.CHAT_ROOM_ID, documentReference.getId());
                    intent.putExtra(ChatRoomActivity.CHAT_ROOM_NAME, roomName.getText().toString());
                    startActivity(intent);
                    finish();
                }
            },
            ...
    );
}

3. Displaying the room name

1. Open your ChatRoomActivity.class.

2. Let’s access the extras passed in our Intent and display the room name.

public class ChatRoomActivity extends AppCompatActivity {

    public static final String CHAT_ROOM_ID = "CHAT_ROOM_ID";
    public static final String CHAT_ROOM_NAME = "CHAT_ROOM_NAME";

    private String roomId = "";
    private String roomName = "";

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

        Bundle extras = getIntent().getExtras();
        if (extras != null) {
            roomId = extras.getString(CHAT_ROOM_ID, "");
            roomName = extras.getString(CHAT_ROOM_NAME, "");
        }

        if (getSupportActionBar() != null) {
            setTitle(roomName);
        }
    }
}

4. Let’s test it out

1. Launch your app.

2. Create a new room and enter a room name.

3. Click done.

4. You should see a screen that shows the room name that you entered similar to this one.

 

5. Review

As a user,
After I created a new room,
I want to enter to the room that I created right away
  • Display room name

✓ Display room name

 

Now that we can create a room and enter the chat room that we’ve created right away, it’s time display all chat rooms that we’ve created in Cloud Firestore.