Stack Exchange Network

Stack Exchange network consists of 174 Q&A communities including Stack Overflow, the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Visit Stack Exchange

Questions tagged [material-design]

Material Design is a design language developed by Google. Based on the paper and ink metaphor, the framework is characterised by the use of 'cards', grid-based layouts, responsive animations, transitions and depth effects such as lighting and shadows. "Material is an adaptable system of ...

2
votes
1answer
69 views

Can material design give a unique identity to my application?

Can material design be personalized in a way that gives identity to the app? what I know about MDC (Material Design Components, an acronym I've just known!) is that it provides us with a bunch of ...
0
votes
1answer
58 views

Toolbar at the bottom of texts/numbers busy screen

I have my app as the screen below. I need to place a toolbar with 2 buttons: one large button displaying the currently active list/deck of drugs (below it's written 'Pediatric Drugs' where he can ...
3
votes
1answer
38 views

Correct pattern to select while able to search

Situation: We have a list of items, which can be multi-selected. However, we can also have a search field which allows us to filter the list. Problem: Let's say I have a huge list of items. I ...
0
votes
2answers
47 views

How to show triple-state, double-action column via Material icons?

I have this boolean field that can be null too. So I have three states: null, true, false. Based on it, I have two actions: make true, make false Is there a good UI/UX way to combine all of them in ...
1
vote
3answers
125 views

Android Material Design : Should text field and button have same size?

I'm making a login view using material design guidelines, which makes me confused whether the text field should be and the login button must have the same size?
-1
votes
2answers
62 views

Too many cards in one list possible? [closed]

I want to setup an app with some cards. I want also to filter this cards. Do you think there is a limit of cards if I have the possibility to reach all cards fast via a e.g. timeline? So do you think ...
2
votes
1answer
56 views

Is it wrong to automatically switch between Grid and List view

At the moment, I have a Material based app where I automatically change between List view and Grid view depending on device's viewport size, should I do that? I already read here that they are ...
-1
votes
1answer
61 views

Design for row of list of absences

I have to create a list of absences, for a mobile application in android, each row has the following data: Absence number (Example: N°1, N°2, N°3 ...) Date (Example: June 28, March 17, October 9 ...) ...
1
vote
1answer
102 views

Can I implement search box in a prominent app bar, trying to follow Material Design?

I am designing an app with a custom app bar, which in the main screen is a prominent one, meaning it's wider than the usual one. I already have some custom features there, for example city filter. I ...
1
vote
1answer
286 views

Hamburger menu or back button on Android?

Should I display hamburger menu icon (in the place of the navigation icon on the top App bar) on every screen that comes directly from the navigation drawer on Android or should it be the back button? ...
1
vote
1answer
23 views

How to best show an activity state transition adhering to google's material design component framework?

I have an application which consist of three views for an activity. A list View, A chat view. Every activity has a status , which a a user can either mark completed, pending Example of list view: ...
0
votes
1answer
57 views

Set of navigation actions in Material Design

I am an android developer. There is a screen of Completed level in my application. There are several options that user can choose: go to the next level or next chapter (if it was final level) repeat ...
0
votes
1answer
83 views

What is the best way to display a destructive action on this component?

The final assignment from my course is to create a mobile application similar to AnkiDroid where the user can create flashcards to study. I'm not sure about how to display a destructive action on the ...
2
votes
1answer
211 views

What is stepper? Is it wizard?

I have a doubt what is stepper? There is confusion in term i.e being used or explained in iOS and Google Material design. Which is the right meaning of stepper? Is iOS or material design right or ...
0
votes
1answer
243 views

Tabs VS Menu hierarchy . Material design VS informational architecture

There are two levels of menu. Tabs and usual sub menu. The problem is when tabs are under home/manage/analytics menu - it doesn't make sense because hierarchy is actually backwards. Because ...
1
vote
3answers
138 views

What's the appriopriate behavior for this “SEE ALL” button? Opening modal window or moving to another tab?

Hello. I'm designing b2b mobile app. My main tab, "Overview" consists of sections: recently bought items some recommended products customer's vouchers some statistics Those sections are in-a-...
2
votes
2answers
263 views

Should I add a cross on my Material Design Dialog?

I'm working on a web application with Material Design. I have some dialogs in this application, and I'm wondering if it's more conventional to have a close cross or not. This is not a fullscreen ...
0
votes
2answers
119 views

How to differentiate two type of Map pins

Greeting Fellas, I was working on a requirement where I in a map I need to differentiate b/w two pins. 1 - Normal fuel station 2 - Partnered fuel station I should show this two on the map with ...
0
votes
2answers
114 views

best way to use Select with prev/next buttons in Material Design

what is the best way to use in Material Design a select with next/prev arrows? i'm working on an area that there are three select (with many items inside) so i want to let the user able to go to the ...
0
votes
0answers
83 views

How to show a connection status in material design

I have an app that basically is just a "tv-remote" for a device, that the user connects to via Wi-Fi. One thing to consider is that half of the app users are blind or have bad vision. Because the app ...
0
votes
1answer
70 views

Datepickers in mobile app - Is OK required?

I'm going to design a datepicker popup (for a single date). It is going to be like typical calendars, appearing in a box, grouping weeks in rows. Lowest offers are going to be displayed under each day....
1
vote
1answer
381 views

Material design error message on top of a pop up

We are using material design messaging guidelines in a complex system, the problem: in case I have an issue with a form and the issue is a non critical one, I will show a banner, In case I have a ...
1
vote
1answer
163 views

Material design: Can you use bottom and top app bar at the same time? What's the relation between them?

I'm currently designing a B2B app that will have plenty of buttons (on top app bar) that just can't be hidden. Is it possible to transfer some of the buttons from top app bar to bottom app bar, just ...
0
votes
3answers
198 views

Material Design the correct way to work with primary and secondary action in this case

Today I've got a question about the correct way to use material design in a "UX way" and in a particular case. I'm working on a desktop interface with a sidebar on the left that control main focus ...
2
votes
1answer
295 views

How to show a table with 10+ columns in android [duplicate]

since the android screen is small to show a table with 10+ columns so, I was wondering what is the best approach to show this kind of table according to material design guidlines The data from ...
0
votes
1answer
83 views

How to show pre-filtered list on a search results area

I am working an iOS app that manage employees requests, I have a screen that shows requests, and a search field above it, I can search within my requests. but, I can also send a push notification with ...
0
votes
0answers
82 views

Trending practices for displaying step-by-step content on Android

Some time ago, Material Design on Android provided "steppers" for displaying to user step-by-step guidance through a complex process. We use this for our company app but dint of using it, I realize ...
1
vote
4answers
587 views

Display large table with many columns using Material Design [closed]

I have the table below: I want to show each table row using a Material card view. Something like this: Is this a good idea? Is there any better approach? Edit: i understand the table usage , but ...
5
votes
2answers
641 views

Old Material Guidelines Website [closed]

The new material guidlines website is weird. It has like generic rules but applied to weird system like "crane system" or "shine system". It doesn't show the generic rules applied as base. By show I ...
2
votes
2answers
72 views

Ideas for placing tab-specific actions

I've got the following tabbed interface Each tab is a scrollable list of items that can be marked as checked or not. You can click on the blue button on the top right to add a new item to the ...
0
votes
0answers
50 views

A full bleed button that is always visible through the scroll or a button at the bottom of the screen

I am making an Android app. This is how the screen goes. The screen has is scrollable and at the bottom there is a button Submit. Now there are two ways of showing this button. 1) Have it placed ...
1
vote
2answers
115 views

Empty comment UI practice

What is the best practice to display empty commit message? At the moment I'm developing Google Material design desktop app where users can view commit details. When there is no commit message I'm ...
1
vote
2answers
566 views
0
votes
2answers
136 views

Guidelines for Material Card in Android

If I were to follow elevated card(first one) like here, where should I place the expand more arrow? Also, is it okay to do the same card with image on the left? Cards displayed are different brands ...
2
votes
2answers
94 views

Expandability in Mobile app Burger menus

Is it correct to use expandable items (Nested Menus) in burger menus in mobile apps? Something like this
0
votes
3answers
137 views

Designing for IOS and Android

I am not sure if this is the right stackexchange site to ask this question. The company that I work for gives us only IOS designs (buildt totally using IOS components. No material design whatsoever). ...
0
votes
0answers
105 views

Navigation drawer large and small avatar specs missing

On the official material design guidelines page - https://material.io/guidelines/patterns/navigation-drawer.html#navigation-drawer-content The specs for the large avatar, and small avatar are missing....
0
votes
1answer
220 views

Confirm dialog with optional checkbox

I am working on a web application where I need to display an alert. In this alert, clicking on "No" will hide the alert and clicking on "Yes" will remove the selected element (in example). I would ...
1
vote
2answers
2k views

Material Design - How to display an error on a larger screen

A bit similar to this question Material Design - How to display a log in error Though it doesn't address how to do this on a larger screen (i.e. desktop browser) since snackbar at the bottom as an ...
1
vote
1answer
78 views

Second level navigation drawer

Situation: I have second level navigation drawer. 1st level is with 3 cards (LDAP configuration, LDAP encryption, LDAP authentification). On the second level(LDAP configuration) there are no cards, ...
0
votes
0answers
27 views

2 steps in navigation drawer

Situation: In navigation drawer, I can add a new role to the item. If new role added, next step is to assign the user. If the user is not assigned, the role is removed from the item list. Problem: ...
0
votes
1answer
66 views

What is correct pattern to create item with several options

I'm developing a web app using angular and material design. At this moment, when I'm creating a new role I enter name and description of the role and role is created. After discussion with colleagues, ...
0
votes
1answer
73 views

Display logo twice in Material design menu

Is it a bad design to have a logo twice in Material Design menu, One with collapsible mode and the one when the menu is expanded as below? Since I make the logo two places here, our marketing team ...
3
votes
1answer
152 views

Status bar color of BBC confused with battery low

This morning I was reading this Then I thought for seconds my phone battery is down. But it was not the case. Well it is different from the red of battery saver. Many cannot figure it out. Is it ...
0
votes
1answer
351 views

Design guidelines on vertical divider in list item

I am trying to figure out when to put a vertical divider in my Material Design list item (esepcially with switch element). I cant find the dimensions/specs/when to use a vertical divider. I find ...
1
vote
3answers
2k views

Correct “Select all” pattern

I'm developing a material design based desktop app where I encountered some UX problem and can't decide how to implement "Select all" capability. Situation: I have the right side panel with a list: ...
0
votes
1answer
128 views

Android - What is the approach to use to let the user choose from a small list of time-related options?

I'm working on an app and I want to show the user how much he's paying for services he's got enabled. I want the user to be able to choose to display the cost per day, week, month and year. To let ...
2
votes
2answers
1k views

MaterialDesign - Fullscreen Dialog, how to show multiple actions

The Material Design guidelines for fullscreen dialogs state, that the action (like SAVE in the screenshot) should be shown on the top right. Cancel always is shown as an X on the top left. EDIT Now ...
0
votes
2answers
2k views

Card with horizontal ScrollView [closed]

I'd like to ask how I should design this vertical RecyclerView while the ChildViews are cards now I'd like to make a Card with the RecyclerView in it but since Cards inside a Card equals Cardception I'...
0
votes
1answer
313 views

Best way to display read only & read write fields mixed together in web

I have web page form with 5 sections and almost 30 text fields. Out of which 15 are read-only and remaining are read-write. The form is built in material design. In my case, in section 1, I have 3 ...