https://kotlinlang.org logo
#compose
Title
# compose
s

Slackbot

11/30/2021, 5:46 PM
This message was deleted.
c

Chris Sinco [G]

11/30/2021, 6:08 PM
Do you have a code snippet? Not clear what you mean by setting constraints with PNG images
k

Kirill Grouchnikov

11/30/2021, 7:18 PM
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

Brian Donovan

11/30/2021, 7:22 PM
I thought the 1, 1.5, 2, 3, 4 x pngs would fix the resolution problems
k

Kirill Grouchnikov

11/30/2021, 7:43 PM
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

Brian Donovan

11/30/2021, 7:48 PM
What are your thoughts to fix?
k

Kirill Grouchnikov

11/30/2021, 7:48 PM
align the buttons at the bottom of the screen, then the texts above, and the rest of the vertical space for the image
b

Brian Donovan

11/30/2021, 7:49 PM
Ty I will try
k

Kirill Grouchnikov

11/30/2021, 7:50 PM
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

Brian Donovan

11/30/2021, 7:50 PM
I was trying to use svg but got errors
k

Kirill Grouchnikov

11/30/2021, 7:53 PM
You're focusing on the technical side instead of the design side.
b

Brian Donovan

11/30/2021, 7:53 PM
k

Kirill Grouchnikov

11/30/2021, 7:54 PM
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

Brian Donovan

11/30/2021, 8:08 PM
Why does the image matter? Isn’t it just a background image?
c

Colton Idle

11/30/2021, 9:26 PM
Can you paste the code? Would be easier to tweak and test out on my end. 😄
1
c

Chris Sinco [G]

12/01/2021, 6:48 AM
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

gildor

12/01/2021, 7:40 AM
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

Chris Sinco [G]

12/01/2021, 7:55 AM
Yep forgot to add that you should convert to VectorDrawable (which Studio can do for you). I assumed that was being done 🙂
b

Brian Donovan

12/01/2021, 4:51 PM
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