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 guidelines, components, and tools that support the best practices of user interface design." (Material.io)

0
votes
1answer
61 views

Material Design vs Trust

I am at the cross roads whether to use material design or not for startup website. I want to give the visitors feeling of that It protect your privacy (ie: does not sell ads based on user data), ...
-1
votes
1answer
53 views

Missing pickers in specification? [closed]

I am trying to find a specification for date/time pickers in Material Design. Has date/time pickers been removed from the Material Design specification? I can't seem to find it, multiple ...
-1
votes
0answers
38 views

Invisible layers in Sketch when using Material UI as the basis for UI component library [closed]

I'm trying to use the Material UI Theme Editor which spits out a Sketch file as the basis for our component library. I'm then exporting the components to Zeplin for developers to get specs on. ...
1
vote
1answer
78 views

Material design and Material UI

Since I am new to Material design, I am having some clarification 1) What is material design? Common CSS material design framework? 2) Difference between material design and material UI? Material UI ...
0
votes
1answer
78 views

when using material design guidelines do you use exact heights for sections? [closed]

My question is if everything is suppose to be in 4px or 8px increments does that mean even the height of sections or containers? For instance if you wanted to have a section that filled the viewport ...
0
votes
1answer
45 views

WCAG 2.1 contrast issue for Google/Angular Material Design

I'm relatively new to accessibility compliance, but my research has found a confusing anomaly: The Angular Material buttons, links, etc are apparently WCAG compliant, yet do not seem to have the ...
-2
votes
0answers
47 views

Material UI List with Text Input

I am trying to create a list for the settings page of my app using Material UI list component. I see the examples of the secondary action for controls like toggles or checkboxes, but what should I use ...
0
votes
2answers
98 views

Which icons have matching width / height ? Material Design icons are uneven [closed]

If you look at the containing vector of Material Design Icons, this is what makes the icons match in size. However the vectors of the content inside are not all the same sizes and follow no standard, ...
0
votes
2answers
62 views

Fit Large Text in a Quizz Layout

I'm trying to make a Quizz section for my app in android the problem is that it may have large Texts in it and i want to make it easy to read and to answer i came out with this design but i think ...
0
votes
0answers
23 views

Material Design - Should BottomSheetDialogFragment contain text field input?

Should the BottomSheetDialogFragment contain any text-input fields directly or should that be reserved for centered modals?
0
votes
1answer
82 views

Material Design outlined textfields filled with auto fill chrome style

We're using outlined textfields from Material Design. On some occasions, chrome(or any other browser I guess) can auto fill the data because the users has saved them. Chrome gives a hint to the user ...
0
votes
1answer
89 views

Material Design: Should you use “Selection Controls” and “Text Fields” simultaneously

I know there are always exceptions to a design system. But as a general rule, should you avoid mixing Selection Control and Text Field components? I tend to think Selection Controls belong more in ...
0
votes
0answers
58 views

Do tabs belong in a Material Design dialog?

I'm building a MD styled desktop application that essentially acts as a dashboard (w/ a data table) for a list of remote devices. Within the data table, I have a button for each item that presents a ...
0
votes
0answers
52 views

How to indicate actions on an expandable list?

TL;DR I need an expandable/collapsable list where each item indicates that some actions are available and each category may be expanded/collapsed allow more actions on that category Material ...
0
votes
2answers
95 views

Is it bad to have hamburger menu with back naviation button for inner pages

We are using hamburger menu on all page even page are inner pages. I want to know if this is bad user experience to show back navigation button with hamburger menu in web? below is an example
1
vote
3answers
206 views

Material: Hamburger Menu and Navigation

We're currently thinking about our hamburger menu and the navigation in our app. Here's an example using the Drive app: This is the Drive app when opening it from the launcher. This is the menu, now ...
0
votes
0answers
65 views

is using a FAB for multiple user actions and screens good practice?

I'm working on a gaming product where users can perform a wide variety of actions from rating, writing a review, adding to lists, log the game in their 'backlog' etc.. Each of those can lead to ...
1
vote
1answer
122 views

Material Guidelines for Alerts

Aside from Bootstrap's alerts page I am unable to find any material guidelines for alerts that we can use in the development of a notification bar. Are there any good guidelines out there based on ...
0
votes
2answers
250 views

Material Design - label to the left of underline input field?

We use the Material Design underline text fields with floating labels in our application (see right on the picture). This works well on mobile, but for long forms on a desktop a label to the left of ...
-1
votes
1answer
172 views

Material dialog with multiple actions

I am working on a material design dialog to create a new abence request. In this dialog all required information can be entered. After that the user can either directly request the absence or just ...
1
vote
1answer
55 views

What is the technical name for the “Tap to translate” button from GoogleTranslate app?

When copying some text on Android, Google Translate displays a floating button on the side of the screen (top / right) that can be tapped to translate or just dragged up and down to not be obstructive....
1
vote
2answers
246 views

Can a floating action button be used for a filter functionality?

According to Google's Material Design Guidelines, would it be considered appropriate to have a filter functionality triggered by a floating action button? The guidelines suggest only to use a ...
3
votes
1answer
135 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
76 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
55 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
58 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 ...
2
votes
3answers
705 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
69 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 ...
3
votes
1answer
102 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 ...
0
votes
1answer
72 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
173 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
1k 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
36 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
68 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
2answers
145 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
407 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
461 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 ...
2
votes
3answers
160 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
411 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
150 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
187 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
1answer
76 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
662 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
692 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
289 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
546 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
2answers
117 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 ...
1
vote
4answers
964 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 ...
6
votes
2answers
1k 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
85 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 ...