Create Composables with Jetpack Compose
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
Open the Starter project in the 06-use-material-design directory of the m3-cjp-materials repo, in Android Studio Koala or later.
import androidx.compose.ui.graphics.Color
val colorPrimary = Color(0xFF006837)
val colorPrimaryDark = Color(0xFF004012)
val colorAccent = Color(0xFFc75f00)
import androidx.compose.material.Typography
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.sp
import com.yourcompany.android.githubusers.R
val rubik = FontFamily(
Font(R.font.rubik_regular, FontWeight.Normal),
)
val chivo = FontFamily(
Font(R.font.chivo_bold, FontWeight.Bold)
)
val Typography = Typography(
h3 = TextStyle(
fontSize = 36.sp,
fontFamily = rubik,
fontWeight = FontWeight.ExtraBold,
letterSpacing = (-8).sp
),
h4 = TextStyle(
fontSize = 24.sp,
fontFamily = rubik,
fontWeight = FontWeight.ExtraBold,
letterSpacing = (-8).sp
),
h5 = TextStyle(
fontSize = 24.sp,
fontFamily = chivo,
fontWeight = FontWeight.Bold
),
h6 = TextStyle(
fontSize = 16.sp,
fontFamily = chivo,
fontWeight = FontWeight.Bold
),
subtitle1 = TextStyle(
fontSize = 16.sp,
fontFamily = chivo,
fontWeight = FontWeight.Normal
),
subtitle2 = TextStyle(
fontSize = 14.sp,
fontFamily = chivo,
fontWeight = FontWeight.Bold
),
body2 = TextStyle(
fontSize = 14.sp,
fontFamily = rubik,
fontWeight = FontWeight.Normal,
lineHeight = 22.sp
),
button = TextStyle(
fontSize = 14.sp,
fontFamily = rubik,
fontWeight = FontWeight.Normal
),
overline = TextStyle(
fontSize = 14.sp,
fontFamily = rubik,
fontWeight = FontWeight.Bold,
textAlign = TextAlign.Center,
letterSpacing = (3).sp
)
)
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Shapes
import androidx.compose.ui.unit.dp
val Shapes = Shapes(
small = RoundedCornerShape(4.dp),
medium = RoundedCornerShape(8.dp),
large = RoundedCornerShape(16.dp)
)
import androidx.compose.material.darkColors
import androidx.compose.material.lightColors
private val DarkColorPalette = darkColors(
primary = colorPrimaryDark,
primaryVariant = colorPrimary,
secondary = colorAccent
)
private val LightColorPalette = lightColors(
primary = colorPrimary,
primaryVariant = colorPrimaryDark,
secondary = colorAccent
)
@Composable
fun GithubUserAppTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit
) {
val colors = if (darkTheme) {
DarkColorPalette
} else {
LightColorPalette
}
MaterialTheme(
colors = colors,
typography = Typography,
shapes = Shapes,
content = content
)
}
Card(shape = MaterialTheme.shapes.large)
Text(
text = repo.name,
style = MaterialTheme.typography.h5,
)
Text(
text = it,
style = MaterialTheme.typography.body1
)
Text(
text = repo.htmlUrl,
style = MaterialTheme.typography.subtitle2,
color = MaterialTheme.colors.secondary,
textDecoration = TextDecoration.Underline
)
@Preview(uiMode = UI_MODE_NIGHT_YES)
@Preview(uiMode = UI_MODE_NIGHT_NO)
@Composable
fun PreviewGitHubRepoCard() {
GithubUserAppTheme {
GitHubRepoCard(
/*...*/
)
}
}
setContent {
GithubUserAppTheme {
val state by viewModel.state.observeAsState()
Column(modifier = Modifier.padding(16.dp)) {
state?.forEach { repo ->
GitHubRepoCard(repo)
Spacer(modifier = Modifier.height(16.dp))
}
}
}
}