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. Jul 10, 2019 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. Jul 10, 2019 at 15:06
  • Reading MD I would say they are suggesting the title should persist and you should give up the space. Jul 10, 2019 at 15:15

1 Answer 1


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 Jul 10, 2019 at 18:32

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.