You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -83,18 +83,18 @@ In this step we'll create a project in Android Studio.
83
83
84
84
Before we can start writing code that interacts with our Firebase database, we'll need to make Android Studio aware that we'll be using Firebase. We need to do this in a few places: in the `gradle.build` script for our app and in its `AndroidManifest.xml`.
85
85
86
-
1. open Gradle Scripts > build.gradle (Module: app)
86
+
First, open Gradle Scripts > build.gradle (Module: app)
87
87
88
88
This file contains the steps that Android Studio uses to build our app. We'll add a reference to Firebase to it, so we can start using it.
89
89
90
-
2. add the following lines to the dependencies object at the bottom:
90
+
Then add the following lines to the dependencies object at the bottom:
This tells Gradle to include the Firebase SDK and the FirebaseUI library.
96
96
97
-
3.Add the following inside the `android` object:
97
+
Add the following inside the `android` object:
98
98
99
99
packagingOptions {
100
100
exclude 'META-INF/LICENSE'
@@ -106,38 +106,38 @@ Before we can start writing code that interacts with our Firebase database, we'l
106
106
107
107
108
108
109
-
4.At this stage you'll need to synchronize the project with the gradle files again. Either click the Sync Now link in the notification bar or the corresponding button in the toolbar: Sync Project with Gradle Files.
109
+
At this stage you'll need to synchronize the project with the gradle files again. Either click the Sync Now link in the notification bar or the corresponding button in the toolbar: Sync Project with Gradle Files.
110
110
111
111
112
112
113
113
Android Studio will parse the gradle files and pick up our changes.
114
114
115
-
5. Since Firebase is a hosted service, our app will need to be able to access the internet.
116
-
6. Open app > manifests > AndroidManifest.xml
117
-
7. Add this line inside the `manifest` element:
115
+
Since Firebase is a hosted service, our app will need to be able to access the internet. Open app > manifests > AndroidManifest.xml then add this line inside the `manifest` element:
124
122
125
-
8.Import Firebase at the top of your MainActivity by adding the following line:
123
+
Import Firebase at the top of your MainActivity by adding the following line:
126
124
127
125
```java
128
126
importcom.firebase.client.Firebase;
129
127
```
130
128
131
-
9.Now we can get to the Java code. The first step there is to set up initial connection between our code and its Firebase backend.
129
+
Now we can get to the Java code. The first step there is to set up initial connection between our code and its Firebase backend.
132
130
open `MainActivity.java` and add this code to the end of the `onCreate` method:
133
131
134
132
```java
135
133
Firebase.setAndroidContext(this);
136
134
```
137
135
138
-
This code allows the Firebase client to keep its context.
139
-
10. If Android Studio is having trouble finding the Firebase class, be sure that you've added dependencies and have synchronized the build file with the project.
140
-
11. We also want to create a connection to our database. We'll keep this connection in a member field:
136
+
This code allows the Firebase client to keep its context.
137
+
138
+
**If Android Studio is having trouble finding the Firebase class, be sure that you've added dependencies and have synchronized the build file with the project.**
139
+
140
+
We also want to create a connection to our database. We'll keep this connection in a member field:
Be sure to replace `<your-app>` with the name of the Firebase app you created in the first section.
152
+
**Be sure to replace `<your-app>` with the name of the Firebase app you created in the first section.**
153
153
154
154
155
155
@@ -161,7 +161,7 @@ Next we'll send data to Firebase! In this step we'll allow the user to enter a m
161
161
162
162
163
163
164
-
1.We'll first add the necessary views to activity_main.xml:
164
+
We'll first add the necessary views to activity_main.xml:
165
165
166
166
```xml
167
167
<LinearLayout
@@ -185,20 +185,20 @@ Next we'll send data to Firebase! In this step we'll allow the user to enter a m
185
185
</LinearLayout>
186
186
```
187
187
188
-
This layout puts a horizontal bar at the bottom that contains an `EditText`, where the user can enter their chat message, and a `Button` that they can click to send the message.
188
+
This layout puts a horizontal bar at the bottom that contains an `EditText`, where the user can enter their chat message, and a `Button` that they can click to send the message.
189
189
190
-
190
+
191
191
192
-
2.In our `MainActivity.java` we'll now add variables for the `EditText` and `Button` at the end of the onCreate method:
192
+
In our `MainActivity.java` we'll now add variables for the `EditText` and `Button` at the end of the onCreate method:
You will have to import the packages for some of these classes. Android Studio will tell you where to import them from.
217
+
You will have to import the packages for some of these classes. Android Studio will tell you where to import them from.
218
+
219
+
Here we grab the message from the EditText, add it to a Map, and send it off to Firebase. We'll look at a way to replace that Map with something more type-safe in the next section, but for now this will work.
218
220
219
-
Here we grab the message from the EditText, add it to a Map, and send it off to Firebase. We'll look at a way to replace that Map with something more type-safe in the next section, but for now this will work.
221
+
We hard-coded our user name for the moment. We'll use Firebase Authentication to make this dynamic in the last section of this code lab.
220
222
221
-
We hard-coded our user name for the moment. We'll use Firebase Authentication to make this dynamic in the last section of this code lab.
223
+
222
224
223
-
225
+
If you now run the application in the emulator, you will see an input field with a Send button that sends the message to Firebase. Open the URL of your Firebase database, and you'll see it light up green as you add new messages.
224
226
225
-
5. If you now run the application in the emulator, you will see an input field with a Send button that sends the message to Firebase. Open the URL of your Firebase database, and you'll see it light up green as you add new messages.
226
-
6. Open the Data tab in the Firebase Dashboard of your app. You'll see it light up green as you add new messages. Admit it, this is pretty cool!
227
+
Open the Data tab in the Firebase Dashboard of your app. You'll see it light up green as you add new messages. Admit it, this is pretty cool!
227
228
228
229
Now that we can send messages to Firebase, it is time for the next step: making the messages show up in our Android app in realtime.
229
230
230
231
## Show the (existing and new) messages
231
232
232
233
A chat app that doesn’t show existing messages is not very useful. So in this step we’ll add a list of the existing messages to our Android app. And since we're using Firebase, new chat messages will be added to this list automatically. At the end of this section we’ll have a fully functional chat app.
233
234
234
-
<imgalt="Chat messages Android app and new message"src="images/5_1.png"height="600">
235
+
235
236
236
237
Let's take this in chunks: first we'll create a Java class to represent each message, then we'll create an Adapter that gets each of the messages from Firebase and puts them into a ListView.
237
238
238
-
1. As you can see in the screenshot, each chat message has the same layout. Instead of creating a custom layout, we'll use one of the built-in layouts of Android: `android.R.layout.two_line_list_item`. We'll show the user name on the first line (in bold) and the message text on the second line.
239
-
2. Create a class `ChatMessage.java` that wraps the username and text message:
239
+
As you can see in the screenshot, each chat message has the same layout. Instead of creating a custom layout, we'll use one of the built-in layouts of Android: `android.R.layout.two_line_list_item`. We'll show the user name on the first line (in bold) and the message text on the second line.
240
+
241
+
Create a class `ChatMessage.java` that wraps the username and text message:
240
242
241
243
```java
242
244
publicclassChatMessage {
@@ -261,15 +263,15 @@ public class ChatMessage {
261
263
}
262
264
```
263
265
264
-
As you can see, this is plain-old Java object. But it’s a POJO with some special traits. First `ChatMessage` follows a JavaBean pattern for its property names. The `getName` method is a getter for a `name` property, while `getText()` is a getter for a `text` property. And second, those property names correspond to the ones we’ve been using when we sent messages to Firebase in our `OnClickListener`.
266
+
As you can see, this is plain-old Java object. But it’s a POJO with some special traits. First `ChatMessage` follows a JavaBean pattern for its property names. The `getName` method is a getter for a `name` property, while `getText()` is a getter for a `text` property. And second, those property names correspond to the ones we’ve been using when we sent messages to Firebase in our `OnClickListener`.
265
267
266
-
268
+
267
269
268
-
Warning: if you end up making this `ChatMessage` an inner class of another class, you must make it static: `public static class ChatMessage`.
270
+
Warning: if you end up making this `ChatMessage` an inner class of another class, you must make it static: `public static class ChatMessage`.
269
271
270
-
3.With the layout for the message specified and their structure defined in a class, we need to make a space for them in the `main_activity.xml`
272
+
With the layout for the message specified and their structure defined in a class, we need to make a space for them in the `main_activity.xml`
271
273
272
-
Add a ListView with `android:id="@android:id/list"`` above the LinearLayout:
274
+
Add a ListView with `android:id="@android:id/list"`` above the LinearLayout:
273
275
274
276
```xml
275
277
<ListView
@@ -279,29 +281,29 @@ public class ChatMessage {
279
281
android:layout_above="@+id/footer"/>
280
282
```
281
283
282
-
This is the container that all messages will be added to: one message_layout for each ChatMessage.
284
+
This is the container that all messages will be added to: one message_layout for each ChatMessage.
283
285
284
-
286
+
285
287
286
-
The `id` value is very important here, since Android's `ListActivity` uses it to find the `ListView`. So make sure to enter it exactly as specified: ``@android:id/list`.
288
+
The `id` value is very important here, since Android's `ListActivity` uses it to find the `ListView`. So make sure to enter it exactly as specified: ``@android:id/list`.
287
289
288
-
4.Make the `MainActivity` class descend from `ListActivity`. This is a built-in Android base-class. By deriving from this, our activity will automatically have access to the ListView we added to the layout:
290
+
Make the `MainActivity` class descend from `ListActivity`. This is a built-in Android base-class. By deriving from this, our activity will automatically have access to the ListView we added to the layout:
289
291
290
292
```java
291
293
publicclassMainActivityextendsListActivity {
292
294
```
293
295
294
-
5.We're ready to start on our ListAdapter, which we'll base on the `FirebaseListAdapter` from the firebase-ui project we imported. `TheFirebaseListAdapter` classadapts a Firebase collection so that it becomes usable in an Android `ListView`. First we'll add a member to our `MainActivity`:
296
+
We're ready to start on our ListAdapter, which we'll base on the `FirebaseListAdapter` from the firebase-ui project we imported. `TheFirebaseListAdapter` classadapts a Firebase collection so that it becomes usable in an Android `ListView`. First we'll add a member to our `MainActivity`:
6. To make everything come together, we add this to the onCreate method of our MainActivity:
306
+
To make everything come together, we add this to the onCreate method of our MainActivity:
305
307
306
308
```java
307
309
mListAdapter = new FirebaseListAdapter<ChatMessage>(this, ChatMessage.class,
@@ -315,13 +317,13 @@ mListAdapter = new FirebaseListAdapter<ChatMessage>(this, ChatMessage.class,
315
317
setListAdapter(mListAdapter);
316
318
```
317
319
318
-
TheFirebaseListAdapter maps the data from your Firebase database into the ListView that you added to the layout. It creates a new instance of your `two_line_list_item` for each `ChatMessage` and calls the `populateView` method. We override this method and put the name and text in the correct subviews.
320
+
TheFirebaseListAdapter maps the data from your Firebase database into the ListView that you added to the layout. It creates a new instance of your `two_line_list_item` for each `ChatMessage` and calls the `populateView` method. We override this method and put the name and text in the correct subviews.
319
321
320
-
322
+
321
323
322
-
7.Don't worry, the hardest part is behind us now. All that is left in this step is some clean-up. But before that, run your app and see that it shows all existing messages. And if you send a new message, it shows up in the emulator and in your Firebase dashboard.
324
+
Don't worry, the hardest part is behind us now. All that is left in this step is some clean-up. But before that, run your app and see that it shows all existing messages. And if you send a new message, it shows up in the emulator and in your Firebase dashboard.
323
325
324
-
8. The cleanup is minor, but it's important to keep our code as readable as possible at all times. Remember that onSendButtonClick method that we wrote in step 5?That use of a Map looked a bit messy. Now that we have a ChatMessage class, we can make it much more readable:
326
+
The cleanup is minor, but it's important to keep our code as readable as possible at all times. Remember that onSendButtonClick method that we wrote in step 5?That use of a Map looked a bit messy. Now that we have a ChatMessage class, we can make it much more readable:
9.Finally, we also need to clean up our list adapter when the activity is destroyed. This will close the connection to the Firebase server, when the activity is not showing.
340
+
Finally, we also need to clean up our list adapter when the activity is destroyed. This will close the connection to the Firebase server, when the activity is not showing.
350
+
349
351
350
352
In this section we made our app show the chat messages. It was a lot of work, but in the end you can see that the Java code for our main activity still fits in a single screenshot.
351
353
352
354
## Enable e-mail+password login
353
355
354
356
As a final step, we're going to allow the users of our app to log in using email and password.
355
357
356
-
1. In the Login & Auth tab of your Firebase dashboard, enable Email & Password authentication
358
+
In the Login & Auth tab of your Firebase dashboard, enable Email & Password authentication
357
359
358
360
359
361
360
-
2. First add a button to the top right of activity_main.xml
362
+
First add a button to the top right of activity_main.xml
361
363
362
364
```xml
363
365
<Button
@@ -372,7 +374,7 @@ As a final step, we're going to allow the users of our app to log in using email
372
374
373
375
374
376
375
-
3. Extend FirebaseLoginBaseActivity
377
+
Extend FirebaseLoginBaseActivity
376
378
377
379
Although extending `ListActivity` was useful earlier, when it saved some lines of code, it's now more important that we extend `FirebaseLoginBaseActivity`.
@@ -454,17 +456,13 @@ Now go into your Firebase Dashboard and go to the Auth tab and select "Email/Pas
454
456
455
457
This is also where you can configure the password reset emails that you can send to your users, in case they forgot their password.
456
458
457
-
6. Log in with your new user.
458
-
459
-
<img alt="Chat app with login" src="images/0_1.png" height="600">
460
-
461
459
## Wrap-up
462
460
463
461
Wrap-up
464
462
465
463
Congratulations! You've just built a fully functional multi-user chat application that uses Firebase to store the data and authentication users.
466
464
467
-
<img alt="Chat app with login" src="images/0_0.png" height="600">
465
+
468
466
469
467
As a reward for finishing the codelab you’ve earned a promo code!When you’re ready to put your Firebase app in production, you can use the promo code `androidcodelab49` for $49 off your first month of a paid Firebase plan. Just enter the code when you upgrade your Firebase.
0 commit comments