https://kotlinlang.org logo
Join Slack
Powered by
This message was deleted.
# compose
s
This message was deleted.
c
Do you have a code snippet? Not clear what you mean by setting constraints with PNG images
k
Are you setting up constraints to display the texts and the buttons under the image? Perhaps it should start the other way around - align the buttons at the bottom of the screen, then the texts above, and the rest of the vertical space for the image
b
I thought the 1, 1.5, 2, 3, 4 x pngs would fix the resolution problems
k
It's not about resolution, it's about the logical usage of available space. If your image is 1.5x1 aspect ratio, and your screen is let's say 1.6x1, you will simply run out of vertical space by the time you get to the buttons.
b
What are your thoughts to fix?
k
align the buttons at the bottom of the screen, then the texts above, and the rest of the vertical space for the image
b
Ty I will try
k
And you'll need to decide what to do with that image when there's not enough vertical space to display it fully. That vertically squished guy doesn't look good.
b
I was trying to use svg but got errors
k
You're focusing on the technical side instead of the design side.
b
k
The question you should be asking is how does this screen adapt to a certain amount of available space, horizontally and vertically. Which elements take precedence, and which are decorational. Once you have the answers to this question, then you can start talking about constraints, image formats, resolution-based variants, etc
b
Why does the image matter? Isn’t it just a background image?
c
Can you paste the code? Would be easier to tweak and test out on my end. 😄
➕ 1
c
A few things to consider (based on the snippets so far): 1. You have 
contentScale
set to 
FillBounds
. This will cause the image to stretch if the aspect ratio of the container doesn't match the image. You should consider FillWidth/Height or Crop to ensure your photo isn't warped. You also play around with the 
aspectRatio
modifier to help. Examples here:
2. Drawable resources (in this case your background image) are still used in Compose like they are previously in the View system — that is swapping them at runtime based on device configuration qualifiers (density, locale, etc). But as stated in #1, the image scales based on the container 3. You are using ConstraintLayout but that is changing the size of the container the image is in, which is likely causing the stretching because that size is different from the aspect ratio of the image 4. Looks like some of your UI is being constrained off screen so it may be due to the container/parent that the ConstraintLayout is in. It would be helpful to see the fuller context of the Composable function to see the layout relationships between parents and descendants.
5. On using SVGs, I'd only advise doing that for vector illustrations like icons. For photos, you should stick with JPG/PNG/WEBP.
Sidenote: is there a reason you went with ConstraintLayout for this layout instead of using Box/Row/Column? I understand many are more familiar with CL coming from Views, but wondering if that's the reasoning or that there was a complex layout that couldn't be done with the other layout types.
g
5. A small addition about SVG. Android doesn’t support SVG out of the box, only VectorDrawables (this why you got those errors), and you cannot use VectorDrawable for this image anyway, it’s raster image, cannot be converted to VectorDrawable: https://developer.android.com/guide/topics/graphics/vector-drawable-resources
➕ 1
c
Yep forgot to add that you should convert to VectorDrawable (which Studio can do for you). I assumed that was being done 🙂
b
thanks everyone, I was able to constrain the logo to the top parent and put all the other elements inside of a column and constrain the column to the bottom parent
🎉 1
2 Views
Open in Slack
PreviousNext
Powered by