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?
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
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.
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.