In material design, if the title is long we should put it in a prominent Appbar like this:

enter image description here

The title should not be truncated or shrunk. so when the content scrolls up, should I transform the prominent Appbar to normal? If so, what would happen to the long title, as it should not be truncated or shrunk? Or we should let it be in this way all the time?

  • Material Design isn't gospel, if changing it to a normal app bar and making the title smaller suits your users and your application, it's hard to argue against that. Google give you the rule-set which, if followed, makes your app conform to MD. – DarrylGodden Jul 10 '19 at 14:56
  • @DarrylGodden thank you, But does MD has a rule-set for this situation? it is not mentioned in the Material Design website. – Ali Kazemkhanloo Jul 10 '19 at 15:06
  • Reading MD I would say they are suggesting the title should persist and you should give up the space. – DarrylGodden Jul 10 '19 at 15:15

Design for the unconstrainable

Free form text like this is not good material for the app bar. Move your title to … a page title 😁

Sample of long descriptor as a page title

In response to the OP’s comment …
If the company’s brand should be reflected in the app bar, you can set the constraint that the app bar should not exceed a certain depth. Designing around that requirement, you might allow the client/user to upload an SVG logo (following size guidelines) which can be scaled to work in the allowed space.

Whenever you ask something of the user you’ll need a fallback. If the user hasn’t uploaded their logo, you can default to their name, which can be truncated for space and appended with an elipsis .

  • In my case, I should use the name of the company that this app belongs to. And it is a little long – Ali Kazemkhanloo Jul 10 '19 at 18:32

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.