Jochem Kleine
Jochem Kleine

Reputation: 186

Material design conventions: toolbar text content

Preface: while this may seem like a question based on personal preference, I am fairly sure there are set guidelines for material layouts, providing rules to adhere to. (I just cant seem to find them)

In order to prepare for an upcoming exam, I've made a simple quiz app for me and my classmates that goes through questions that will likely be asked on said exam. The layout of the main question screen is displayed below.

enter image description here

As you can see, rather than using the toolbar to display a title ("quiz screen") I have used it to display the entire question, and question number. In addition, I've disabled the back button. Now for the question: is this layout, and use of the toolbar specifically, in concordance with the material design guidelines? I have looked through https://www.google.com/design/spec/material-design/introduction.html, where one would expect to find such information, rather extensively, but have found no answer to this question.

Thanks in advance.

Upvotes: 0

Views: 277

Answers (1)

Niza Siwale
Niza Siwale

Reputation: 2406

As far as I know the toolbar is used to provide hint of what the data in the current screen is about. It should not contain more than more two lines of text.(For two lines of text, use a collapsing toolbar and for a single line use the ordinary toolbar). Coming to your app, I'd suggest you put the question number in the toolbar i.e "Question 3" and the question should be an ordinary textview with about 24sp in text size. Moreover, remove the FAB from the screen and use a flat button instead. The FAB button must not be abused

Upvotes: 1

Related Questions