How to Replace Profile Icon with Name Initials in Bottom Navigation Bar Once User Logged in Android Compose Application

Are you tired of using the same old profile icon in your Android app’s bottom navigation bar? Want to add a personal touch by displaying the user’s name initials instead? Look no further! In this article, we’ll guide you through the process of replacing the profile icon with name initials in the bottom navigation bar once the user logs in, using Android Compose.

Prerequisites

Before we dive into the tutorial, make sure you have:

• Android Studio installed on your computer
• A basic understanding of Android development and Compose
• A project set up with Compose and navigation component

Step 1: Create a User Data Model

Create a new Kotlin file called `UserData.kt` and add the following code:

data class UserData(
    val id: Int,
    val firstName: String,
    val lastName: String,
    val email: String
)

This model will hold the user’s data, including their name, which we’ll use to generate the initials.

Step 2: Create a User Repository

Create a new Kotlin file called `UserRepository.kt` and add the following code:

interface UserRepository {
    fun getUserData(): UserData?
}

This interface will be used to retrieve the user’s data from your app’s data source, such as a database or API.

Step 3: Implement the User Repository

Create a new Kotlin file called `UserRepositoryImpl.kt` and add the following code:

class UserRepositoryImpl(private val dbHelper: DbHelper) : UserRepository {
    override fun getUserData(): UserData? {
        // Implement logic to retrieve user data from database or API
        // For demonstration purposes, we'll return a sample user data
        return UserData(
            1,
            "John",
            "Doe",
            "[email protected]"
        )
    }
}

In this example, we’re using a sample `DbHelper` class to retrieve the user data from a database. You should implement the logic to retrieve the user data from your app’s data source.

Step 4: Create a Compose Function for Name Initials

Create a new Kotlin file called `NameInitials.kt` and add the following code:

@Composable
fun NameInitials(userData: UserData?) {
    if (userData != null) {
        val initials = "${userData.firstName.take(1)}${userData.lastName.take(1)}"
        Text(
            text = initials,
            fontSize = 24.sp,
            fontWeight = FontWeight.Bold
        )
    } else {
        // Display a default icon or text if user data is null
        Icon(
            imageVector = Icons.Filled.AccountCircle,
            contentDescription = "Profile Icon"
        )
    }
}

This composable function takes a `UserData` object as a parameter and generates the name initials. If the `UserData` object is null, it displays a default icon instead.

Step 5: Update the Bottom Navigation Bar

Open your navigation component’s Kotlin file, usually `BottomNavigation.kt`, and add the following code:

@Composable
fun BottomNavigation(
    navigator: NavController,
    viewModel: MainViewModel = viewModel()
) {
    val userData by viewModel.userData.collectAsState(null)
    val navItems = listOf(
        NavItem.Home,
        NavItem.Profile
    )

    BottomNavigation(
        backgroundColor = Color.White
    ) {
        navItems.forEach { item ->
            BottomNavigationItem(
                icon = {
                    if (item.route == NavItem.Profile.route && userData != null) {
                        NameInitials(userData = userData)
                    } else {
                        Icon(
                            imageVector = item.icon,
                            contentDescription = item.title
                        )
                    }
                },
                label = { Text(item.title) },
                selected = item.route == navigator.currentDestination?.route,
                onClick = {
                    navigator.navigate(item.route) {
                        popUpTo(NavItem.Home.route) {
                            saveState = true
                        }
                        launchSingleTop = true
                    }
                }
            )
        }
    }
}

In this code, we’re using the `NameInitials` composable function to display the user’s name initials in the bottom navigation bar. We’re also using the `viewModel` to retrieve the user data and update the UI accordingly.

Step 6: Update the ViewModel

Open your view model’s Kotlin file, usually `MainViewModel.kt`, and add the following code:

class MainViewModel(private val userRepository: UserRepository) : ViewModel() {
    private val _userData = MutableLiveData()
    val userData: LiveData = _userData

    init {
        loadUserData()
    }

    private fun loadUserData() {
        _userData.value = userRepository.getUserData()
    }
}

In this code, we’re using the `UserRepository` to retrieve the user data and update the view model’s `userData` LiveData.

Conclusion

That’s it! With these steps, you’ve successfully replaced the profile icon with name initials in the bottom navigation bar once the user logs in, using Android Compose. Remember to customize the code to fit your app’s specific requirements and data source.

Bonus: Handling Null UserData

In the `NameInitials` composable function, we’re displaying a default icon if the `UserData` object is null. You can customize this behavior to fit your app’s requirements. For example, you could display a “Login” button instead:

@Composable
fun NameInitials(userData: UserData?) {
    if (userData != null) {
        val initials = "${userData.firstName.take(1)}${userData.lastName.take(1)}"
        Text(
            text = initials,
            fontSize = 24.sp,
            fontWeight = FontWeight.Bold
        )
    } else {
        Button(
            onClick = { /* Login button click handler */ }
        ) {
            Text("Login")
        }
    }
}

Common Issues and Solutions

Here are some common issues you might encounter and their solutions:

Issue	Solution
User data is not updating in the bottom navigation bar	Make sure to use the `collectAsState` function to collect the `LiveData` in the composable function.
Default icon is not displaying when user data is null	Check that the `UserData` object is null and the default icon is correctly implemented in the `NameInitials` composable function.
Name initials are not generating correctly	Verify that the `UserData` object contains the correct first and last names, and the `NameInitials` composable function is generating the initials correctly.

By following these steps and troubleshooting common issues, you should be able to successfully replace the profile icon with name initials in the bottom navigation bar once the user logs in, using Android Compose.

Frequently Asked Question

Get ready to elevate your Android Compose app’s user experience by learning how to replace the profile icon with name initials in the bottom navigation bar once the user logs in!