Questions tagged [material-design]

Material design is Google's guide for visual, motion, and interaction design across platforms and devices, introduced with Android 5.0 Lollipop.

Material Design is a visual language that synthesizes the classic principles of good design with the innovation of technology and science. - Introduction - Material Design

Android 5.0 Lollipop includes support for material design apps. Polymer and Angular Material projects also provide official implementations.

Specification:

  1. Material design specifications
  2. Material Design: https://www.youtube.com/watch?v=Q8TXgCzxEnw
  3. Google I/O 2014 - Material design: Structure and components
  4. Google I/O 2014 - Material design: Visual style and imagery

Implementation:

  1. Android docs
  2. AngularJS Material
  3. Angular Material
  4. Polymer Project
  5. Material Design Lite (now deprecated)
  6. Material Components
8542 questions
127
votes
7 answers

Material UI and Grid system

I'm playing a little bit with Material-UI. Are there any options for creating a grid layout (like in Bootstrap)? If not, what is the way to add this functionality? There is a GridList component but I guess it has some different purpose.
kharandziuk
  • 12,020
  • 17
  • 63
  • 121
123
votes
21 answers

How to change background color of the snackbar?

I am showing snackbar in a DialogFragment within the positive touch of the alert dialog. Here is my code snippet: Snackbar snackbar = Snackbar.make(view, "Please enter customer name", Snackbar.LENGTH_LONG) .setAction("Action",…
119
votes
4 answers

How to mimic Google Maps' bottom-sheet 3 phases behavior?

Background I'm assigned to make a UI that behaves similarly to how Google Maps shows a bottom-sheet for a found result. It has three different phases: Bottom content. The upper area is still touchable and won't scroll anything at the…
112
votes
10 answers

How get data from Material UI TextField, DropDownMenu components?

I created a form, I have several TextField, DropDownMenu Material UI components included, question is how I can collect all data from all TextFields, DropDownMenus in one obj and sent it to the server. For TextField it has TextField.getValue()…
Vitalii Trachenko
  • 1,174
  • 2
  • 7
  • 10
111
votes
16 answers

Android Support Design TabLayout: Gravity Center and Mode Scrollable

I am trying to use the new Design TabLayout in my project. I want the layout to adapt to every screen size and orientation, but it can be seen correctly in one orientation. I am dealing with Gravity and Mode setting my tabLayout as: …
Javier Delgado
  • 2,343
  • 2
  • 17
  • 31
110
votes
17 answers

Display badge on top of bottom navigation bar's icon

I have implemented the bottom navigation view in my app and I have looked every where to display badges on top of the icons like this I was wondering whether this is even possible to implement. Any help is appreciated. Thank you.
heisenberg91
  • 1,566
  • 2
  • 12
  • 16
110
votes
6 answers

Apply Material Design Touch Ripple to ImageButton?

I have an imagebutton that doesn't respond with a touch animation when it is clicked because it is a static image unlike regular buttons on lollipop which come with the built in ripple effect. I would like to add the material design ripple touch…
sanic
  • 2,065
  • 4
  • 20
  • 33
110
votes
13 answers

How can I be notified when a Snackbar has dismissed itself?

I'm using a Snackbar from the com.android.support:design:22.2.0 library. I'm using it to undo deletions. To make my life easier, I'm going to make the UI look like things are actually deleted from the data source, and if the undo button in the snack…
105
votes
10 answers

Angular - 'Could not find HammerJS'

I'm working on a simple angular project where I am trying to import Material Design into my project but some of the components aren't working properly and a console warning says: Could not find HammerJS. Certain Angular Material components may not…
Danoram
  • 8,132
  • 12
  • 51
  • 71
104
votes
12 answers

FloatingActionButton with text instead of image

I'm trying to figure out how can be modified FloatingActionButton from android support library. Can it be used with the text instead of image? Something like this one: I see it extends ImageButton so I think not. Am I right? Is this correct in…
102
votes
18 answers

Change the TextInputLayout outline color

I'm trying to customize a TextInputLayout with material style. I managed to set the focused state to the colors I want: Using
Addev
  • 31,819
  • 51
  • 183
  • 302
102
votes
9 answers

How to use in Angular Material?

I was wondering how to use Material's icons, as this is not working: I guess there is a problem with the path given as parameter to the the icon attribute. I would like…
Mahammad Adil Azeem
  • 9,112
  • 13
  • 57
  • 84
101
votes
3 answers

Ionic directives VS Angular material directives with Ionic Framework

I want to use ionic with material design. I am stuck between using ionic directives with custom CSS and angular-material I have read that using ionic directives we get lot of efficient features like App data is remembered with UI-router, even…
Vamsi
  • 9,510
  • 6
  • 38
  • 46
100
votes
18 answers

How do you adjust the height and borderRadius of a BottomSheet in Flutter?

I'm probably missing something obvious here, but my BottomSheet only takes up the bottom half the screen, even though the widgets in it take up more space. So now there is scrolling behavior inside the BottomSheet. I'd like to be able to increase…
Mary
  • 18,347
  • 23
  • 59
  • 76
100
votes
19 answers

How do I change the color of icon of the selected tab of TabLayout?

I'm using a TabLayout with a ViewPager and I'm wondering how I can most efficiently change the color of the icon of the selected tab in the TabLayout. A perfect reference for how this is implemented is Google's Youtube app. On the main page, there…
waylonion
  • 6,866
  • 8
  • 51
  • 92