2

I'm making a login view using material design guidelines, which makes me confused whether the text field should be and the login button must have the same size?

Login screen

2

In Material Design Guidelines you can find the answer for this. You can set the width in two ways:

  • Set a button’s width to be the size of the text label, with 16dp padding on the left and right
  • Set the button’s relative position to the responsive layout grid

enter image description here enter image description here

  • 2
    so basically i can change the size of the button, thanks – ajprs28 Oct 28 '18 at 22:33
2

It is not mandatory to use the exact specs provided by the Material guidelines. You can define the sizes based on your app requirements.

Material design came up with those specific dimensions on a global level taking care of all the possible UI elements. So obviously, chances are it might not look good aesthetically in certain scenarios/screens like the one you mentioned i.e. your login page.

The outlined text field is 56dp height because it takes care of labels and error messages whereas the contained button is 36dp height. It is your call whether you stick to the guidelines or change it.

  • understood, so i can change the button size it's not just focus with the guides line MD – ajprs28 Oct 28 '18 at 22:36
0

To get exact measurements, look at the density pixel (dp) measurements of the two components in the MD guidelines (56 and 36 in examples), figure out the ratio, and apply ratio to your design.

Visually, if you look at their examples, Material Design basically makes their buttons fit inside their text fields.

Here are the dp measurements of the two and an example of similar components in their Crane Material Study.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.