-4

I've read the material.io page and tried it myself ,in a button on an android test - app. but there are 2 things which I think are nice but don't know if they fit into the material design guidlines:

  • The black borders
  • the 'not round but angular' corners

here is a screen- recording of the app

Improve this question
6
  • 3
    Can you just add a copy of the button as an image? WHy do we have to watch a video to answer this?
    – xenoid
    Commented Aug 20, 2017 at 13:16
  • Most buttons are clickable. So my button comes with an animation. To show this, I decided to record my screen instead of rendering a gif.
    – Emanuel Graf
    Commented Aug 20, 2017 at 13:19
  • The question isn't about the animation...
    – xenoid
    Commented Aug 20, 2017 at 13:20
  • No. As the title reveals, the question is about the button , which contains 2 states: clicked and not clicked. The 2 states are connected together through the animation. So the animation is part of the button.
    – Emanuel Graf
    Commented Aug 20, 2017 at 13:23
  • What do you mean by material design? I am not familiar.
    – Webster
    Commented Aug 20, 2017 at 14:40

2 Answers 2

Reset to default
1

The guideline mentions outlined buttons (https://material.io/design/components/buttons.html#outlined-button), but no buttons with a color AND an outline. If you want to keep the button yellow, you should remove the outline but add a shadow.

The guideline allows cut corners, see the Shrine Material Theme on https://material.io/design/components/buttons.html#theming

Apart from that:

  • the green effect does not respect the cut corners
  • the button should have an offset from the top and left
  • the button appears too big, the guidline mentions a height of 36dp
  • maybe this is my personal taste, but I think the colors look bad. I can't exactly point my finger at it. Maybe there are just too many different colors, maybe it is the yellow.
Improve this answer
0

"Material Design", suggested by Google in 2014, is the name of a new visual language for Web page User Interface used on Google's platforms such as Chrome OS and the Web.

The overall look is summarized on http:thenextweb.com

The features of Material Design are to provide a bold, vibrant, and consistent look for visual products. It is intentional design where any motion used must provide meaning.

As you illustrate your button and its action, I do not believe it fits the Material Design guidelines.

Your button art is flat rather than appearing as a tangible surface apart from the background. A slight drop-shadow emphasizes the "feel" of real materials rather than artwork. A Material Design button appears to "BE" a button by virtue of the dimensional appearance as real material would.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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