Use custom image or text style for reusable Composable in Jetpack Compose - material-components-android

Question

I am currently working on two Android projects, both of which use Jetpack Compose. Both projects use a self-developed library that contains custom composables.
My problem now is that I don't know how to reference project-specific text styles, images or other design characteristics in the library. The implementation of Material Design is unfortunately not sufficient for this.
To give an example:
Both app should have an error screen in case something goes wrong. The structure of the error screen should be the same in both apps. The error screen should contain an error message, and error image and a retry button. To avoid duplicate code i moved the error screen composable to the library. No problem at that point.
But the error screen should also adapt to the app theme. Currently i use a drawable in the error screen composable located inside the library module. The button using the MaterialTheme.typography.button style and the message uses MaterialTheme.typography.body1 style.
But this is not the behavior i want to achieve here. I want to use different error images for both apps and the button and message styles could be completely different depending on the app which is using the composable.
Is there any clever way to achieve this behavior?
Edit: I used the error screen as an easy to understand example for this question, but did not implemented it in the library. But I implemented a profile composable where I am facing the exact same problem. Currently I am using the approach to pass the text styles as parameters, but this is getting ugly really fast:
#Composable
fun Profile(
modifier: Modifier = Modifier,
user: User,
sections: List<Section>,
userIsLoggedIn: Boolean,
onLogin: () -> Unit,
onLogout: () -> Unit,
loginButtonTextStyle: TextStyle = MaterialTheme.typography.button.copy(
textAlign = TextAlign.Center
),
logoutButtonTextStyle: TextStyle = MaterialTheme.typography.button.copy(
color = MaterialTheme.colors.onSurface,
textAlign = TextAlign.Center
),
usernameTextStyle: TextStyle = MaterialTheme.typography.h5.copy(
color = MaterialTheme.colors.onSurface,
textAlign = TextAlign.Center
),
sectionTitleTextStyle: TextStyle = MaterialTheme.typography.subtitle1.copy(
color = MaterialTheme.colors.onSurface
),
itemTitleTextStyle: TextStyle = MaterialTheme.typography.body1,
) {
Column(
modifier = modifier
.verticalScroll(rememberScrollState())
.padding(top = 24.dp)
) {
if (userIsLoggedIn) {
UsernameHeader(
username = user.username,
textStyle = usernameTextStyle
)
} else {
LoginButton(
onLogin = onLogin,
textStyle = loginButtonTextStyle,
)
}
SectionsContainer(
sections = sections,
sectionTitleTextStyle = sectionTitleTextStyle,
itemTitleTextStyle = itemTitleTextStyle
)
if (userIsLoggedIn) {
LogoutButton(
onLogout = onLogout,
textStyle = logoutButtonTextStyle
)
}
}
}
#Composable
private fun UsernameHeader(
username: String,
textStyle: TextStyle
) {
Text(
text = "Hello $username",
style = textStyle,
modifier = Modifier
.padding(horizontal = 16.dp)
.fillMaxWidth()
)
Spacer(modifier = Modifier.height(32.dp))
}
#Composable
private fun LoginButton(
textStyle: TextStyle,
onLogin: () -> Unit
) {
Button(
onClick = onLogin,
modifier = Modifier
.padding(
start = 16.dp,
end = 16.dp,
)
) {
Text(
text = "LOGIN",
style = textStyle,
modifier = Modifier
.fillMaxWidth()
.padding(top = 7.dp, bottom = 9.dp)
)
}
Spacer(modifier = Modifier.height(24.dp))
}
#Composable
private fun LogoutButton(
textStyle: TextStyle,
onLogout: () -> Unit
) {
Column(
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 32.dp)
) {
TextButton(
onClick = onLogout,
modifier = Modifier
.padding(
start = 24.dp,
end = 24.dp,
top = 7.dp,
bottom = 9.dp
)
) {
Text(
text = "LOGOUT",
style = textStyle,
)
}
}
}
#Composable
private fun SectionsContainer(
modifier: Modifier = Modifier,
sections: List<Section>,
sectionTitleTextStyle: TextStyle,
itemTitleTextStyle: TextStyle
) {
Column(modifier = modifier) {
for (section in sections) {
ProfileSection(
section = section,
titleTextStyle = sectionTitleTextStyle,
itemTitleTextStyle = itemTitleTextStyle,
)
}
}
}
#Composable
private fun ProfileSection(
modifier: Modifier = Modifier,
section: Section,
titleTextStyle: TextStyle,
itemTitleTextStyle: TextStyle,
) {
Column(
modifier.padding(bottom = 16.dp)
) {
Text(
text = section.title.toUpperCase(Locale.ROOT),
style = titleTextStyle,
modifier = Modifier
.padding(
start = 16.dp,
end = 16.dp,
top = 9.dp,
bottom = 10.dp
)
.fillMaxWidth()
)
for (item in section.items) {
ProfileItem(
item = item,
itemTitleTextStyle = itemTitleTextStyle
)
}
}
}
#Composable
private fun ProfileItem(
item: Item,
itemTitleTextStyle: TextStyle
) {
when (item) {
is TextItem -> ProfileTextItem(
textItem = item,
titleTextStyle = itemTitleTextStyle
)
is ImageItem -> ProfileImageItem(imageItem = item)
}
}
#Composable
private fun ProfileTextItem(
textItem: TextItem,
titleTextStyle: TextStyle
) {
Text(
text = textItem.title,
style = titleTextStyle,
modifier = Modifier
.padding(
start = 16.dp,
end = 16.dp,
top = 15.dp,
bottom = 12.dp
)
.fillMaxWidth()
)
}
#Composable
private fun ProfileImageItem(imageItem: ImageItem) {
Image(
painter = painterResource(id = imageItem.drawableResId),
contentDescription = imageItem.contentDescription,
modifier = Modifier.fillMaxWidth(),
contentScale = ContentScale.FillWidth
)
}
The models I used are quite simple:
Section:
data class Section(
val title: String,
val items: List<Item>
)
Item:
interface Item
data class TextItem(
val title: String
) : Item
data class ImageItem(
val drawableResId: Int,
val contentDescription: String?
) : Item
User:
data class User(
val username: String
)
I then use this profile composable inside an activity in both apps like this:
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
val systemUiController = remember { SystemUiController(window) }
CompositionLocalProvider(SystemUiControllerAmbient provides systemUiController) {
SampleApp()
}
}
}
#Composable
fun SampleApp() {
SampleTheme {
val systemUiController = SystemUiControllerAmbient.current
systemUiController.setSystemBarsColor(color = MaterialTheme.colors.surface)
Scaffold(
modifier = Modifier.fillMaxSize(),
topBar = { TopAppBarContainer() },
bottomBar = { BottomNavigationContainer() }
) { innerPadding ->
ProfileContainer(Modifier.padding(innerPadding))
}
}
}
#Composable
private fun TopAppBarContainer() {
TopAppBar(
backgroundColor = MaterialTheme.colors.surface,
contentColor = MaterialTheme.colors.onSurface
) {
Text(
text = "Profile",
style = MaterialTheme.typography.h2,
modifier = Modifier.padding(16.dp)
)
}
}
#Composable
private fun ProfileContainer(modifier: Modifier = Modifier) {
Surface(modifier = modifier) {
var userIsLoggedIn by remember { mutableStateOf(false) }
Profile(
Modifier.fillMaxWidth(),
user = User("Username"),
sections = fakeSections,
userIsLoggedIn = userIsLoggedIn,
onLogin = { userIsLoggedIn = true },
onLogout = { userIsLoggedIn = false }
)
}
}
#Composable
private fun BottomNavigationContainer() {
BottomNavigation(
backgroundColor = MaterialTheme.colors.surface,
contentColor = MaterialTheme.colors.onSurface,
) {
BottomNavigationItem(
selected = false,
onClick = { },
icon = {
Icon(
painter = painterResource(R.drawable.logo),
contentDescription = null,
modifier = Modifier.size(24.dp)
)
},
label = {
Text(
text = "Home",
style = MaterialTheme.typography.caption,
color = grey60
)
}
)
BottomNavigationItem(
selected = false,
onClick = { },
icon = {
Icon(
painter = painterResource(R.drawable.ic_assortment),
contentDescription = null,
modifier = Modifier.size(24.dp)
)
},
label = {
Text(
text = "Assortment",
style = MaterialTheme.typography.caption,
color = grey60
)
}
)
BottomNavigationItem(
selected = false,
onClick = { },
icon = {
Icon(
painter = painterResource(R.drawable.ic_heart),
contentDescription = null,
modifier = Modifier.size(24.dp)
)
},
label = {
Text(
text = "Wishlist",
style = MaterialTheme.typography.caption,
color = grey60
)
}
)
BottomNavigationItem(
selected = false,
onClick = { },
icon = {
Icon(
painter = painterResource(R.drawable.ic_cart),
contentDescription = null,
modifier = Modifier.size(24.dp)
)
},
label = {
Text(
text = "Cart",
style = MaterialTheme.typography.caption,
color = grey60
)
}
)
BottomNavigationItem(
selected = true,
onClick = { },
icon = {
Icon(
painter = painterResource(R.drawable.ic_user),
contentDescription = null,
tint = bonprixRed,
modifier = Modifier.size(24.dp)
)
},
label = {
Text(
text = "Profile",
style = MaterialTheme.typography.caption,
color = red
)
}
)
}
}
#Preview
#Composable
fun DefaultPreview() {
SampleApp()
}
}