I'm sure this is a newbie question, but I'm trying to implement a Material 3 theme. I have added the themes.kt & colors.kt to my com.my.project.ui.theme package. But I don't understand what I can do next to implement these colors as my app is not using these colors and is still using the default material 3 colors that came when I started the app. I'm not finding the disconnect.
I have added the dependencies and removed the old Material dependency
//implementation 'androidx.compose.material:material:1.3.1'
implementation 'androidx.compose.material3:material3:1.1.0-alpha03'
implementation "androidx.compose.material3:material3-window-size-class:1.1.0-alpha03"
implementation "com.google.accompanist:accompanist-flowlayout:0.24.8-beta"
One thing I notice is the function in themes.kt is saying it is never used (grayed out).
#Composable
fun DzoicTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: #Composable () -> Unit) {
val useDynamicColors = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
val colors = when {
useDynamicColors && darkTheme -> dynamicDarkColorScheme(LocalContext.current)
useDynamicColors && !darkTheme -> dynamicLightColorScheme(LocalContext.current)
darkTheme -> DarkColors
else -> LightColors
}
MaterialTheme(
colorScheme = colors,
typography = Typography,
shapes = Shapes,
content = content
)
}
Where does this function get called (DzoicTheme)? Default was AppTheme but instructions said to change it. Is the name important here? Most tutorials show utilizing material 3 colors from the activity compose functions but I do all my design in xml layout files, does this matter? Any help here would be appreciated!
I know how to implement BottomSheet in Material 2 Jetpack Compose using BottomSheetScaffold.
But there is no BottomSheetScaffold in Material 3. Also, there is nothing in official samples about BottomSheet.
So I was able to make it work!
It seems that, as of today, BottomSheetScaffold is not available yet on Material3, this is discussed in this issue I found digging around: https://issuetracker.google.com/issues/229839039
I quote the important part from the reply of a google dev:
we aren't in a super easy spot with Swipeable. It currently has a number of critical bugs that need to be addressed first (we are working on this), which is why we are limiting the surface we are exposing for Swipeable in M3 for the time. Our plan for the coming months is to focus on this specific area and improve developer experience.
Material 3 for Jetpack Compose is still in alpha - this means we
consider components production-ready, but the API shape is flexible
while in alpha. This gives us space to iterate while getting
real-world feedback from developers, which ultimately helps improve
your experience. Copy-pasting source code for components that are not
(fully) implemented or exposed in an alpha version can be a good thing
to do in the meantime! Owning the source code while the API shape is
still flexible gives you a number of benefits like ease of updating
dependencies, even if the APIs change, and allows you to evolve your
components in your own pace.
So I just followed the advice and I copy pasted BottomSheetScaffold into my project. Of course it did not work straight away because of a few missing classes and some minor API changes. At the end I was able to make it work by pulling and hacking the following classes and adding them to my project:
BottomSheetScaffold.kt
Drawer.kt
Strings.kt
Swipeable.kt
I have created a gist with the source code if you want to try:
https://gist.github.com/Marlinski/0b043968c2f574d70ee6060aeda54882
You will have to change the import to make it work on your project as well as add the "-Xjvm-default=all" option by adding the following into your gradle file in the android{} section:
android{
...
kotlinOptions {
freeCompilerArgs += ["-Xjvm-default=all"]
// "-Xjvm-default=all" option added because of this error:
// ... Inheritance from an interface with '#JvmDefault' members is only allowed with -Xjvm-default option
// triggered by porting BottomSheetScaffold for Material3 on Swipeable.kt:844
}
}
It works very well for me, will keep this solution until it is officially supported in material3.
Hope it helps!
I got pretty similar results using a fullscreen dialog with AnimatedVisibility, here is the code if interested:
// Visibility state for the dialog which will trigger it only once when called
val transitionState = remember {
MutableTransitionState(false).apply {
targetState = true
}
}
Dialog(
onDismissRequest = {} // You can set a visibility state variable to false in here which will close the dialog when clicked outside its bounds, no reason to when full screen though,
properties = DialogProperties(
// This property makes the dialog full width of the screen
usePlatformDefaultWidth = false
)
) {
// Visibility animation, more information in android docs if needed
AnimatedVisibility(
visibleState = transitionState,
enter = slideInVertically(
initialOffsetY = { it },
animationSpec = ...
),
exit = slideOutVertically(
targetOffsetY = { it },
animationSpec = ...
)
)
) {
Box(
modifier = Modifier.fillMaxSize().background(color = ...)
) {
// Your layout
// This can be any user interraction that closes the dialog
Button(
transitionState.apply { targetState = false }
) ...
}
}
All of this is in a composable function that gets called when a UI action to open said dialog is performed, it's not ideal but it works.
Hope I was able to help!
There is already a great answer by Marlinski, but i would like to add that there is also a ModalBottomSheetLayout which also does not have any implementation for Material 3.
I created a gist for people who need it in use right now:
https://gist.github.com/Pasha831/bdedcfee01acdc96cf3ae643da64f88a
We finally have ModalBottomSheet in Material3.
var openBottomSheet by rememberSaveable { mutableStateOf(false) }
val bottomSheetState = rememberSheetState(skipHalfExpanded = true)
// Sheet content
if (openBottomSheet) {
ModalBottomSheet(
onDismissRequest = { openBottomSheet = false },
sheetState = bottomSheetState,
) {
Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center) {
Button(
// Note: If you provide logic outside of onDismissRequest to remove the sheet,
// you must additionally handle intended state cleanup, if any.
onClick = {
scope.launch { bottomSheetState.hide() }.invokeOnCompletion {
if (!bottomSheetState.isVisible) {
openBottomSheet = false
}
}
}
) {
Text("Hide Bottom Sheet")
}
}
}
}
For more link here: https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ModalBottomSheet(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.material3.SheetState,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,kotlin.Function0,kotlin.Function1)
I am trying to use imageResource in an Android Jetpack Compose app but I cannot find the depndency to add to my grade file.
imageResource is in the docs here:
androidx.compose.ui.res
Image(
bitmap = imageResource(id = R.drawable.background),
modifier = Modifier.fillMaxSize(),
contentScale = ContentScale.Crop
)
When I add androidx.compose.ui.res to my grade file it fails to resolve.
How do I find the dependency to add to my grade file for immageresouzrce?
No dependency, the link you posted clearly states the method is accessible though ImageBitmap.Companion.imageResource(...), so that is what it is.
Type the exact phrase and you'll be good.
Explicitly using the Companion property is not necessary, you could directly use ImageBitmap.imageResource(...) here as well.
I am having the following issue. I am adding some vector drawable images in my project which is built using Jetpack compose. I am overriding the colors of the drawable by setting
android:fillColor="?colorPrimary"
But, the previous solution, even though it works on a usual Android project, when working on Jetpack compose it is not.
Of course, I have initialized a Material Theme with my colors/typo/shapes.
Any suggetions?
Best regards!
I've run into similar issues where compose doesn't play well with attributes. It prefers to access via colorResource(R.color.colorName).
What you might be looking for is either of the below implementations:
Icon(
Icons.Filled,
"contentDescription",
tint = MaterialTheme.colors.secondary
)
Image(
painter = painterResource(R.drawable.resourceName),
contentDescription = "contentDescription",
colorFilter = ColorFilter.tint(Color.myColor)
)
UPDATE:
I actually found something similar with font attributes. You might want to try something like this:
fun getFontFromAttribute(resId: Int, context: Context): Typeface? =
context.obtainStyledAttributes(R.style.MYSTYLE, intArrayOf(resId))
.use { array ->
val resource = array.getResourceId(array.getIndex(0), 0)
if (resource == 0) {
null
} else {
ResourcesCompat.getFont(context, resource) ?: Typeface.SANS_SERIF
}
}
As I am exploring JetPack Compose and Tooling for it, I came across the wonderful PreView feature of it. Although I can see the preview in Split and Design window, when tried to deploy it in an emulator, I found this error.
androidx.compose.ui.tooling.preview.PreviewActivity is not an activity
subclass or alias
I am using
Android Studio Arctic Fox| 2020.3.1 RC1
activityComposeVersion = "1.3.0-rc01"
composeVersion = "1.0.0-rc02"
kotlinVersion = "1.5.10"
I was trying to deploy preview of GradientTintedIconButtonPreview()
#Preview
#Composable
fun SquareComposablePreview() {
Text("Hello World")
}
#Preview
#Composable
fun ComposablePreview() {
Text("Hello World")
}
These two Composable is identical. For SquareComposablePreview the preview runs without an issue, but for ComposablePreview is am getting the error.
Am I doing something wrong of there are issue with the tool !