Why Firebase accelerates Android development in Android Kotlin - Build It to Prove It

Build: Firebase Benefits

This screen shows key reasons why Firebase helps speed up Android app development.

Target UI

-------------------------
|  Firebase Benefits     |
|-----------------------|
| - Easy Authentication |
| - Real-time Database   |
| - Hosting & Storage   |
| - Analytics & Crashlytics |
|-----------------------|
| [Close]               |
-------------------------

Display a title at the top: 'Firebase Benefits'

Show a vertical list of four key Firebase features with bullet points:

1. Easy Authentication

2. Real-time Database

3. Hosting & Storage

4. Analytics & Crashlytics

Add a Close button at the bottom that closes the screen when tapped

Starter Code

Android Kotlin

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

class FirebaseBenefitsActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
      FirebaseBenefitsScreen(onClose = { finish() })
    }
  }
}

@Composable
fun FirebaseBenefitsScreen(onClose: () -> Unit) {
  Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
    Column(modifier = Modifier.padding(16.dp)) {
      // TODO: Add title text here
      // TODO: Add bullet list of Firebase features here
      // TODO: Add Close button here
    }
  }
}

Task 1

Task 2

Task 3

Solution

Android Kotlin

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

class FirebaseBenefitsActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
      FirebaseBenefitsScreen(onClose = { finish() })
    }
  }
}

@Composable
fun FirebaseBenefitsScreen(onClose: () -> Unit) {
  Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
    Column(
      modifier = Modifier.padding(16.dp),
      verticalArrangement = Arrangement.spacedBy(12.dp)
    ) {
      Text(
        text = "Firebase Benefits",
        fontSize = 24.sp,
        fontWeight = FontWeight.Bold
      )

      Text(text = "• Easy Authentication", fontSize = 18.sp)
      Text(text = "• Real-time Database", fontSize = 18.sp)
      Text(text = "• Hosting & Storage", fontSize = 18.sp)
      Text(text = "• Analytics & Crashlytics", fontSize = 18.sp)

      Button(onClick = onClose, modifier = Modifier.padding(top = 24.dp)) {
        Text(text = "Close")
      }
    }
  }
}

This screen uses Jetpack Compose to build a simple vertical list of Firebase benefits. The title uses a larger bold font to stand out. Each feature is shown as a bullet point using the Unicode bullet character \u2022. The Close button calls the onClose lambda, which finishes the activity and closes the screen. Padding and spacing keep the layout clean and easy to read.

This approach shows how Firebase features can be presented clearly to users or developers, emphasizing how Firebase accelerates Android development by providing ready-made services.

Final Result

Completed Screen

-------------------------
|  Firebase Benefits     |
|-----------------------|
| • Easy Authentication |
| • Real-time Database   |
| • Hosting & Storage   |
| • Analytics & Crashlytics |
|-----------------------|
| [Close]               |
-------------------------

Tapping the Close button closes the Firebase Benefits screen and returns to the previous screen.

Stretch Goal

Add a dark mode toggle button that switches the screen colors between light and dark themes.

💡 Hint

Use Compose's MaterialTheme and remember a state variable to toggle between light and dark color schemes.