0

I recently learnt briefly about material 3 in compose & implemented it in the current app I'm building for learning purposes (google calendar clone). In google calendar app, which I guess follows material 2, the size of buttons and switches seem normal. But with material 3 in my app, everything seems abnormally huge. Is it how material 3 is supposed to be? I chose to make a clone because I wanted a good UI reference. I guess I shouldn't have used material 3 for this app. What are your thoughts on the default sizes in M2 VS M3?

I've attached the same screen I tried to replicate from google calendar app.

Google calender android app

Same screen in my app (material 3 - jetoack compose)

I tried reducing the padding with contentPadding parameter in Button/TextButton composables. But it didn't work outm

Siva Subramaniam
  • 3
  • 1
  • 2
  • It doesn't depends on the padding. The `Switch` as many other components has a minimum touch target size (`48.dp`) for accessibility. Check https://stackoverflow.com/questions/75406686/android-compose-how-to-remove-the-space-above-and-below-the-switch/75408239#75408239 – Gabriele Mariotti Mar 09 '23 at 08:08

1 Answers1

0

Yes there are difference in size and shape of both M2 and M3 design, also as you can see the design of switch, both looks quite different.

This is due to the fact that the two design systems and respective libraries differ significantly in terms of their UX/UI designs and Compose implementations.

Google also recommends not to migrate from M2 to M3 compose unless you have migrate your app design M2 to M3.

Your app may use a design system, such as one created using Figma. In such cases, we also highly recommend that you or your design team migrate it from M2 to M3 before starting the Compose migration. It doesn’t make sense to migrate an app to M3 if its UX/UI design is based on M2.

More details can be found on : Migrate M2 to M3 Design

Nitish
  • 3,075
  • 3
  • 13
  • 28