Skip to main content

[Make-A] Simple Chat Application using Cloud Firestore Part 4 – Adding a FAB

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!
As a user,
I want to be able to create a room
  • Display something that the user can press to create a new room

 

1. Icon for our Floating Action Button (FAB)

1. Head over to https://material.io/icons

2. Look for the Content section

3. Select the add icon (You can always choose any icon that you want if you found something that you like)

4. Select a white or black color.

5. Click PNGS to download the icons.

6. Extract the .zip file.

7. Copy all the folders.

8. Paste it under your res/ folder.

9. Click OK and you should see the icons under your res/ folder.

Now that we have an icon that we will use to tell the user to “Click this” to create a room. Let’s use it!

2. Display our Floating Action Button (FAB)

1. In your activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    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/rooms"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/create_room"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"
        android:src="@drawable/ic_add_white_24dp" />

</android.support.design.widget.CoordinatorLayout>

We will use our RecyclerView for later when we will display all chat rooms. For now, let’s make our Floating Action Button functional first.

Note: If Android Studio doesn’t automatically add the dependency when you use CoordinatorLayout and FloatingActionButton, it will cause some errors. Just add this in your build.gradle under your app/ folder.

dependencies {
    ...
    // As of this writing this is my latest version.
    // Please use the latest version always.
    implementation 'com.android.support:design:26.1.0'
}

2. In your MainActivity.class

public class MainActivity extends AppCompatActivity {

    ...

    private FloatingActionButton createRoom;

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

        authentication = new AuthenticationRepository(FirebaseFirestore.getInstance());

        createRoom = findViewById(R.id.create_room);

        initUI();

        authenticate();
    }

    private void initUI() {
        createRoom.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.d("MainActivity", "Launch create a room screen");
            }
        });
    }

    ...
}
  • initUI() – We added an View.OnClickListener() on our FAB that we will use to launch a screen where we will handle creation of our chat room. For now, we just logged a text to know if the FAB really works.

3. Check logs if our create room button really works.

3. Review

As a user,
I want to be able to create a room
  • Display something that the user can press to create a new room

Display something that the user can press to create a new room

You can also implement this differently by going the Menu route and add your create room icon in there.

Now that our FAB is ready it’s time to create our create a chat room activity.