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

Roar Gronmo

12/02/2019, 1:35 PM
I am missing the ability to add an image to the ContainedButtonStyle button, which is/was possible in the XML's <Button style="@style/Widget.MaterialComponents.Button.Icon" app:icon="@drawable/my_edit_pen"/>, or do I need to design my own material IconContainedButton (I'd rather not).
l

Louis Pullen-Freilich [G]

12/02/2019, 2:15 PM
Yeah, there isn't icon support there yet - will be in the future.
r

Roar Gronmo

12/02/2019, 2:15 PM
Oh, thanx.
l

Louis Pullen-Freilich [G]

12/02/2019, 2:15 PM
You don't need to design your own button, you can just use the
Button
overload that takes
children
, and just add a
Row
of an image and text if you want, so at least the rest of it will be correctly styled
r

Roar Gronmo

12/02/2019, 3:18 PM
@Louis Pullen-Freilich [G] I tried what you suggested, it works for now, but it isn't quite what I expected, some problems with correct aligning both in height and in width.
Copy code
Button(onClick = {},
                                    style = ContainedButtonStyle()
                                ){
                                    Row(mainAxisSize = LayoutSize.Expand
                                    ){
                                        VectorImage(id = R.drawable.ic_baseline_edit_24)
                                        WidthSpacer(width = 16.dp)
                                        Text(
                                            text = "UPDATE",
                                            style = +themeTextStyle { button })
                                    }
                                }
@Louis Pullen-Freilich [G] BTW:
VectorImage
is the same used in the "JetNews" example
@Louis Pullen-Freilich [G] Better now when I added
crossAxisAlignment = CrossAxisAlignment.Center
, but it will be still better with an icon parameter.
l

Louis Pullen-Freilich [G]

12/02/2019, 3:30 PM
Yeah, obviously the styling won't be correct (unless you follow the Material spec yourself and make sure the numbers match up) - but it's the easiest way of doing this for now 🙂 This will be natively supported in the future in some form, so you won't have to worry about manually aligning these things
2 Views