InfoSheet General Cleanup

[irvine752]

Some minor cleanup issues I noticed:

• Image Cropping: Can we get options for the image display? I think you have the image set to center crop. Sometimes I think it all depends on the image, sometimes a top crop is better than a center crop.

• Lottie Display: While this is working well, I think adding an option to blow up or scale the image horizontally to fill all the space would look great. It seems like anything I pull in is stuck in the center with white side bars.

• Text Color: Do we have a way to modify the title color besides the hardcoding stuff in the styles.xml? If not, this could be a great quick option to set the color dynamically

• Button Boarder: Can we also get borders around the buttons at the bottom of the sheet as an option? + a color option for the boarder.

• Text Font If you could also provide a Font Option to dynamically set the font for your text, that would be a another great addition.

After all this, I'll be buying you coffee :)

[maxkeppeler]

Image Cropping: You can use ratio: Ratio or scaleType: ImageView.ScaleType for the ImageView CoverImage. Lottie Display: Has the same attributes, if you adapt your animation ratio to the view, it should fit. Text Color: Will be added Button Border: You mean for the outlined text button? Using an outlined text button will give it a border. I can add an attr for the color of the border. Text font: For which components? It would be quite messy to set all fonts in a sheet builder, and I guess usually one sets the font for all anyways to have the same look across the app? Or do you only need to set the font for a specific component as for example the title too?

[irvine752]

Yep, the Button Border is just the outlined text button. For the Text Font, I was thinking of maybe having something different for the sheet title that's all. It's entirely up to you, most people do like to keep the fonts static & uniform across the App

I will play around with the ScaleTypes. I should be ok, I just didn't know you had an option for that. The demo only shows a few configurations. I'll take a deep dive to see all the features.

[irvine752]

Quick feedback, so the scaling works well, but I do think we need a way to set a background color for the image area. This would be great in cases where the image scaling is not appropriate, and the intention is to keep the same aspect ratio. If the background color is something we can set dynamically, the image can blend well the background without any noticeable open spaces on the sides. It's an issue with small images or lottie animations that are too small width wise to fit the sheet.

Let me know what you think.

[maxkeppeler]

Since LottieAnimationView is based on a normal ImageView, not a ShapeableImageView, I would need to find another way to clip the corners of it. Otherwise, the background color (or a Lottie Animation with a fixed background color) would result in square dialogs and bottom sheets instead of rounded or cut corners.

Perhaps I misunderstand that - why would you not want the Lottie Animation take the necessary height to keep its aspect ratio while fitting to the width of the sheet? The dimension ratio is applied to the parent container view of the cover image/ animation view.

[irvine752]

So it's a bit of an illusion. It's more so trying to blend the LottieAnimationView with the surroundings to give a better visual appearance. If it's a LottieAnimationView with a white background, there's no issues. Only becomes an eye sore if you have a different color. Scaling with FIT_XY works, but doesn't look clean. I would say look at the LottieDialog example we started out with. They do offer the same feature, not sure if they also have a way to clip the corners.

[maxkeppeler]

Alright, I believe I understand what you want to achieve. I will add an option to set the background color of the ImageView/LottieAnimationView and clip the corners depending on the TopStyle and CornerFamily of the sheet, likely tomorrow after work. Any other things you would like to control regarding the LottieAnimationView/ ImageView in gernal of the cover?

[maxkeppeler]

withCoverLottieAnimation(LottieAnimation {
                ratio(Ratio(3, 2))
                setupAnimation {
                    // Lottie animation setup
                    setAnimation(R.raw.anim_lottie_business_team)
                    // .. more settings
                }
                setupImageView {
                    // Manipulate ImageView
                    setBackgroundColor(ContextCompat.getColor(context, R.color.sheetDividerColor))
                }
            })

If you set a background color to the ImageView, it will be replaced by a shapeDrawable with the same color and clipped top corners, if necessary depending on the TopStyle.

[irvine752]

Thanks, I just played with the sample + the changes you mentioned. Looks great. I took a peek, I think all the options/settings are covered under LottieAnimationRequest.

[maxkeppeler]

You are welcome. Great to hear!

[irvine752]

Hey, can we get a quick example of how to change the button outline & fill color?

[maxkeppeler]

Thanks for mentioning it - it's missing in the README.

Use this for the border color of the outlined button:

<attr name="sheetButtonOutlinedButtonBorderColor" format="reference" />

Use this for the border width of the outlined button:

<attr name="sheetButtonOutlinedButtonBorderWidth" format="dimension" />