New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Suggestion: Align title and non-title elements #79

Closed
code-schreiber opened this Issue Apr 5, 2018 · 6 comments

Comments

Projects
None yet
2 participants
@code-schreiber
Contributor

code-schreiber commented Apr 5, 2018

One of the first things that I noticed when creating an about screen with a MaterialAboutTitleItem and a MaterialAboutActionItem is that the icon and text of the title item are not aligned with the icon and text of the action item.
A possible solution could be based on margins, after all, the title image should still be bigger than the other ones.

I tried to illustrate the issue with a screenshot where the blue lines belong to the title and the red ones to the action item.

screenshot with grid

I am aware that this is not going to be an issue for everyone but I believe this change will make many eyes happy 👀

@daniel-stoneuk

This comment has been minimized.

Owner

daniel-stoneuk commented Apr 6, 2018

Hi,

Good spot. I think I tried a couple different combinations but this was the most eye pleasing. Part of the issue is that the app icon may be wider than the one in the demo, in this case what will it look like.

I will mess around with different designs, post them here and we can decide on the best.

Thanks.

@daniel-stoneuk

This comment has been minimized.

Owner

daniel-stoneuk commented Apr 6, 2018

screen shot 2018-04-06 at 14 35 06

You're right, I quite prefer the "new" design. Thanks.

I'll commit if you don't have any other design ideas.

@code-schreiber

This comment has been minimized.

Contributor

code-schreiber commented Apr 6, 2018

The "new" design looks very nice! 👍

The only thing that I would consider changing is the spacing for the smaller icons, now it seems too big to left and right. I'm aware that the app icon is usually bigger and that influences the spacing of the whole screen, so my suggestion would be to reduce the spacing of both app and non-app icons.
Other than that thanks for this change!

Be aware that this is a breaking change in terms of design and it should be very clear for library consumers that their screens will potentially look a bit different after updating.

@daniel-stoneuk

This comment has been minimized.

Owner

daniel-stoneuk commented Apr 6, 2018

Yeah, I see what you mean.

If we did decrease the spacing of both types of icon, I believe that the title icon will be too near the edge of the card. This is assuming we want the action icon to be centered with the title icon.

It does seem like material design is heading towards more whitespace and the extra spacing doesn't feel too out of place. It definitely looks better than the original.

Good point about breaking changes. I'll make that clear.

After testing however, it doesn't look that bad with reduced title padding:

image

@code-schreiber

This comment has been minimized.

Contributor

code-schreiber commented Apr 9, 2018

Nice 🎉

@daniel-stoneuk

This comment has been minimized.

Owner

daniel-stoneuk commented Apr 15, 2018

Now in Release 2.3.0! Thanks again.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment