Sometimes when I use a string resource in my composable, the preview will show the wrong string. It always works fine for literal strings, only string resources are wrong. The bug isn't consistent.
For example if I have this strings.xml:
<resources>
<string name="app_name">Violit</string>
<string name="load_topic_failure_message">Something went wrong loading the topic</string>
</resources>
And I have this composable:
#Composable
fun TopicFailureContent() {
Text(stringResource(R.string.load_topic_failure_message))
}
#Preview(showBackground = true)
#Composable
fun TopicFailureContentPreview() {
TopicFailureContent()
}
It might render something like "Partially checked" or "Navigation menu" instead of "Something went wrong loading the topic".
If I change the composable to this:
#Composable
fun TopicFailureContent() {
Text("Something went wrong loading the topic")
}
it renders the preview correctly.
It looks like the preview might be rendering nearby strings instead of the one I want. String resources work fine in tests and running the app. It's just preview that is not always working.
I'm using Android Studio Electric Eel 2022.1.1 but I was having the same problem on the previous version as well. This fails on both Compose UI version 1.2.1 and 1.3.3.
Any idea why string resources don't always work in preview and how to fix it?
Related
I am working on a Jetpack Project which downloads an image from API using Coil Library.
I have confirmed that valid image URLs and related data are being returned from the API call successfully. I am able to view the image on my browser using the returned URL.
This is my Image Composable:
#Composable
fun AstroPhoto(picture: AstroPicture) {
val imgUrl = picture.url.toUri()
.buildUpon()
.scheme("https")
.build()
AsyncImage(model = ImageRequest.Builder(LocalContext.current)
.data(imgUrl)
.size(Size.ORIGINAL)
.crossfade(true).build(),
placeholder = painterResource(R.drawable.loading_animation),
contentDescription = picture.title,
contentScale = ContentScale.Crop,
)
}
I call the above image composable in a Lazy Column:
....
Box( ... ) {
LazyColumn(content = {
items(state.astroPictures) {
AstroPhoto(picture = it)
} })
}
This is the exception at I am getting:
FATAL EXCEPTION: main Process: com.uxstate, PID: 31790
java.lang.IllegalArgumentException: Only VectorDrawables and
rasterized asset types are supported ex. PNG, JPG
at androidx.compose.ui.res.PainterResources_androidKt.loadVectorResource(PainterResources.android.kt:93)
I am on compose_version = '1.1.1' working with kotlin_version = '1.6.10'. My coil version is "io.coil-kt:coil-compose:2.1.0" and compileSdk 32 and AS Chipmunk. Source code can be found here.
I have checked the docs and searched online but cannot resolve the error. Please help me to go about the error, Thanks.
if you are using png and jpg with painterResource but still face this issue. Change your image, It happened when there is something wrong with the image.
painterResource converts png, and jpg in the bitmap. Its throws that error if it fails to convert any Resource
My project worked correctly before, but after I changed some code (just add a fucntion, it is not about png or jpg or other things about image), my app crash when render a png. But after i reinstall the project in the emulator, it is fixed.
It seems like a bug in Compose? I dont know, may be a bug in gradle?
Just try to reinstall your app, i think it will be fixed.
in my previous projects, there is no problem passing drawable resources to painterResource function. But when I create a new jetpack-compose project, the problem you describe occurs.
In my new project, this problem only happens in preview phase. When I firstly build and run my app in emulator, the problem suddenly disappears.
so this is my solution: if you haven't run you app in emulator, build and run it in emulator.
Just encountered this error and see if anyone had the same error as me.
I just re-opened the Android Studio, and after that, I use Clean Project and Rebuild Project. Now the project and the compose preview are working fine.
Tried to use shape drawable as a placeholder and it caused this error.
If I set the same placeholder to ImageRequest.Builder instead, the code works fine.
AsyncImage(
model = ImageRequest.Builder(LocalContext.current)
.data(imageUrl)
.placeholder(R.drawable.placeholder_rect)
.error(R.drawable.placeholder_rect)
.build(),
contentDescription = "",
)
I'm trying to test a Text that on my component I can print it in different colors, so on my test I'm verifying it gets the expected color. I was looking for a method to return the color but I did not find any.
From now I'm asserting that the text is correct and the visibility is correct, but when trying to find the method to get the colour I get too deep and I'm looking for a simpler solution.
composeTestRule.onNode(hasTestTag("testTagForButton"), true)
.assertExists()
.assertTextEquals("Testing")
I've check that I can do something like .fetchSemanticsNode().layoutInfo.getModifierInfo() to get into the Modifier and perhaps from there I can get the colour, but it's too much maybe. Also I've found this .captureToImage() that perhaps I could get the colour on it, but since I had to put the pixels I decided that it's not the way.
Is there any simple way to get that?
I am by no means a compose expert, but just looking at compose source code, you could utilize their GetTextLayoutResult accessibility semantic action. This will contain all the properties that are used to render the Text on a canvas.
Some quick and dirty extension functions I put up for convenience:
fun SemanticsNodeInteraction.assertTextColor(
color: Color
): SemanticsNodeInteraction = assert(isOfColor(color))
private fun isOfColor(color: Color): SemanticsMatcher = SemanticsMatcher(
"${SemanticsProperties.Text.name} is of color '$color'"
) {
val textLayoutResults = mutableListOf<TextLayoutResult>()
it.config.getOrNull(SemanticsActions.GetTextLayoutResult)
?.action
?.invoke(textLayoutResults)
return#SemanticsMatcher if (textLayoutResults.isEmpty()) {
false
} else {
textLayoutResults.first().layoutInput.style.color == color
}
}
Which can be then used like this:
composeTestRule.onNode(hasTestTag("testTagForButton"), true)
.assertExists()
.assertTextEquals("Testing")
.assertTextColor(Color.Black)
I am unable to comment post above, also didn't find question about checking background color, so decide to place my version here.
private fun hasBackground(node: SemanticsNode, color: Color, shape: Shape): Boolean {
return node.layoutInfo.getModifierInfo().filter { modifierInfo ->
modifierInfo.modifier == Modifier.background(color, shape)
}.size == 1
}
To test background color and don't touch debug inspection info (this isn't for testing) we are unable to test only background color, but can test whole background by comparing production background (which placed into modifier) with our testing one.
Hope it help somebody.
Hello Guys I am using angular for developing an application my output on web is totally fine but when i use cordova to build for android its seems like some of my styles does not considered i checked style.css file and my style is there here is a picture of android build.
as you can see some of styles work correctly like back ground of items that supposed to be purple or title of the items but information below that should not me blue or color of my button for add more boards.
any one run into this problem before or like always i am first one ?
i did not understand why this happen but in my case it went away with dynamic styling.
so for that in mind i created a service for managing colors, and i defined all used colors in my project as string variables and set those variables to my colors hex code.
my service was something like this
export class ThemeControllerService {
private theme: ThemeModel = {
Color60Bold: "#dae0f1",
Color60Normal: "#dae0f1",
Color60Fade: "#dae0f1",
Color30Bold: "#8160a9",
Color30Normal: "#8160a9",
Color30Fade: "#8160a9",
Color10Bold: "#5166b0",
Color10Normal: "#5166b0",
Color10Fade: "#5166b0"
};
GetTheme(): ThemeModel
{
return this.theme;
}
constructor() { }
}
Then I defined this service as a variable in the components that I wanted to use the colors.
and i style my element colors like this
<h3 [style.color]="theme.Color10Fade">2018/04/26</h3>
instead of
h3{
color: #5166b0;
}
After this,my problem solved.
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 !
I'm using Xamarin Forms to produce a TabbedPage consisting of more ContentPages. This is the part of code causing trouble:
public void launchMainDesign(object s, EventArgs e) {
MainPage = new TabbedPage {
Children = {
new ContentPage {
Title = "Login",
Content = pages.loginContent,
BackgroundImage = "bgmain.jpg"
},
new ContentPage {
Title = "Sign Up",
Content = pages.signUpContent,
BackgroundImage = "bgmain.jpg"
}
}
};
}
It seems absolutely fine. I have both the images in my Drawable directory, with the build action set to "AndroidResource".
Whenever the launchMainDesign() function is fired by pressing a button, the app crashes immediately, both in emulator and a build version of the app on a tablet. Unfortunately, I can't test on iOS and WP.
I even tried putting the whole inside part of the function in a try/catch block and print out the exception, but the app just crashes nevertheless.
I am desperately trying to solve this simple problem for about a week now. No one seems to be having exactly the same issue as me. Weirdest thing is, I have a different app where I use exactly the same method and it works just fine. Can the Android Theme be causing this (I'm using Holo, in the working app, there's no theme specified)? That seems to be the only difference.
I also don't think this is caused by RAM struggles, as the image is only about 700 kilobytes (1080x1920) - for this example, I've only used one image.
It could be a memory issue, because even do the size is not big depending on the device resolution it might be trying to scale the image to the device dimensions.
Try checking this README:
https://github.com/xamarin/customer-success/blob/master/samples/Xamarin.Forms/SliderView/README.md
Explains Xamarin.Forms Android Image Memory Management so could help you get around the issue you might be having.