Hello, I am wondering why a lot of material compon...

# compose

[Badran]

Hello, I am wondering why a lot of material components have size hardcoded and we know that the development is going to all adaptive and different screen sizes?

Does it make sense that sizes for example like IconButton is hardcoded inside and cannot be changed at all? I know I can copy the source code modify it and put it in my ui library but that sounds like a useless effort...

are there any better ways? to manipulate sizes but keep it easy and clean

[Alex Styl]

They are hardcoded because they are built according to the material spec (not meant to be customizable)

this is a pain for many of us that are building design systems and that's why im building compose unstyled.

For your case you could use the `Button` component and style it as you see fit (with any size and styling as you want

[Badran]

Thanks @Alex Styl I'll have a look!

It is unfortunate since we are trying to build for larger screens and buttons pretty small... thanks again

[Alex Styl]

hmmm maybe there is a way then. what type of larger screen are you talking about?

[Alex Styl]

not tablets right?

[Alex Styl]

if you gave me a bit more context of your situation i could help you out. one thing that comes to my mind for example is using a different density using the LocalDensity . wrap your app's content with it and increase/descrease the size of your UI.

But it really depends on your situation.

[Badran]

Thanks, We are using the same components of our mobile app in the automotive apps so mainly cars.

That is why need to customize each element and be a bit careful to not break any UX rules

[Alex Styl]

the local density will work if you want to increase the size of every peace of UI. that would be the simplest thing to do without having to change any component code (so the 'easy and clean' solution you asked)

you could have a fixed density in your car ui for example, while in the mobile app use the default density.

if that doesn't work out, you would need your own components (non material ones)

[Alex Styl]

btw. you mentioned adaptive design and different screen sizes. usually you don't change the size of your UI when you build for multiple screens.

instead if you have more space, you display more (or less) content in the screen, or change the way the elements are placed in the screen to fit nicely (row on wide screens, columns on narrow, etc)

[Badran]

yes exactly we would like to control them specifically more than a multiplier, but thanks a lot for the idea and help🙏

yes true for adaptive, I may have describe it wrong but we do that between mobile and tablets to re-organize some elements to loook nicer

[Alex Styl]

gotcha. for moving things around (and swaping layouts) there is the window size class compose api (it's part of CMP).

I think you can specify size classes and query in runtime to know if you are currently on a smaller or bigger screen (and place your elements in different layouts ie Column/Row)