I'm developing an Android application using Jetpack Compose and facing a peculiar issue with text rendering. In my MainScreen
composable, I have AnalyticsBox
and HabitListItem
components where text disappears when I apply custom styling using TextStyle
or my custom Typography
.
Here's the relevant code:
package com.example.habitflow.ui.screen
import android.util.Log
import androidxpose.foundation.Image
import androidxpose.foundation.background
import androidxpose.foundation.layout.*
import androidxpose.foundation.lazy.LazyColumn
import androidxpose.foundation.lazy.items
import androidxpose.foundation.shape.RoundedCornerShape
import androidxpose.material.icons.Icons
import androidxpose.material.icons.filled.Add
import androidxpose.material.icons.filled.Settings
import androidxpose.material3.*
import androidxpose.runtime.Composable
import androidxpose.ui.Alignment
import androidxpose.ui.Modifier
import androidxpose.ui.graphics.Color
import androidxpose.ui.layout.ContentScale
import androidxpose.ui.res.painterResource
import androidxpose.ui.text.TextStyle
import androidxpose.ui.text.font.FontWeight
import androidxpose.ui.text.style.TextAlign
import androidxpose.ui.unit.dp
import androidxpose.ui.unit.sp
import androidx.hilt.navigationpose.hiltViewModel
import androidx.lifecyclepose.collectAsStateWithLifecycle
import com.example.habitflow.R
import com.example.habitflow.domain.model.Habit
import com.example.habitflow.ui.theme.Black
import com.example.habitflow.ui.theme.Pink80
import com.example.habitflow.ui.theme.Poppins
import com.example.habitflow.ui.theme.TealLight
import com.example.habitflow.ui.theme.Typography
import com.example.habitflow.ui.theme.White
import com.example.habitflow.ui.viewmodel.HabitViewModel
import com.example.habitflow.ui.viewmodel.AnalyticsViewModel
@Composable
fun MainScreen(
onAddHabitClick: () -> Unit,
onSettingsClick: () -> Unit,
onEditHabitClick: (Habit) -> Unit,
viewModel: HabitViewModel = hiltViewModel(),
analyticsViewModel: AnalyticsViewModel = hiltViewModel()
) {
// ... (MainScreen code as provided) ...
}
@Composable
fun AnalyticsBox(icon: Int, number: Int, label: String) {
Log.d("AnalyticsBox", "Number: $number, Label: $label")
Column(
modifier = Modifier
.background(TealLight, RoundedCornerShape(8.dp))
.padding(16.dp),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center,
) {
Icon(painter = painterResource(id = icon), contentDescription = label)
Text(text = if (number == 0) "0" else number.toString())
Text(text = label)
}
}
@Composable
fun HabitListItem(habit: Habit, onEditHabitClick: (Habit) -> Unit, viewModel: HabitViewModel) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 8.dp)
.background(TealLight, RoundedCornerShape(8.dp))
.padding(16.dp),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
Column {
Text(text = habit.name) // Text disappears when styled
Text(text = habit.description) // Text disappears when styled
Text(text = "@ ${habit.reminderDateTime}") // Text disappears when styled
}
Button(onClick = { viewModelpleteHabit(habit) }) {
Text("Complete")
}
}
}
When I apply Typography.bodyMedium.copy(color = Black)
or a custom TextStyle
to the Text
composables within AnalyticsBox
and HabitListItem
, the text disappears from the screen. The text renders correctly without any styling. The quote text in MainScreen
renders correctly with the same Typography
. I've tried different TextStyle
configurations, but the issue persists.
Example of disappearing text:
Text(
text = habit.name,
style = TextStyle(
fontWeight = FontWeight.Medium,
fontSize = 15.sp,
lineHeight = 17.sp,
letterSpacing = 0.5.sp
)
)
I expect the text within AnalyticsBox
and HabitListItem
to render with the applied styles, similar to how the quote text renders.
Questions:
- Why does the text disappear when I apply styling in
AnalyticsBox
andHabitListItem
? - Is there a specific restriction or issue with how Compose handles styling in these composables?
- How can I properly apply custom styles to the text in these components without causing them to disappear?
I've already tried simplifying the Typography
and checked for font loading issues, but the problem persists.