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.
8,585
questions
0
votes
0
answers
18
views
Angular 16 (Material) trying to create an identifier to html element using a variable
I'm trying to creaet a dynamic menu using mat-menu elements and asigning an identifier with a variable. [matMenuTriggerFor] don't reconize this identifier
Values for menu are:
this.menuAyuda.push([...
0
votes
0
answers
16
views
How could I use Material You web in an HTML/Express project?
I would like to make a web application, and I would like to use Material You web for it, but I don't want to have to use JavaScript or Node for it. I will use Node if I have to.
Is there any way for ...
0
votes
2
answers
52
views
make google's SignInButton with rounded corners looking like a material button
TLDR: I want to make Google's Sign In button look like a material button with rounded corner shape and keep the rest(Text, google icon by default).
I have implemented Sign-in feature using FirebaseUI ...
0
votes
0
answers
14
views
How can I listen to MDC search bar typed-in String, in order to display results onto SearchView UI?
I've tried to connect the Material Design Component Search Bar component into my Android Studio, but I have difficulties doing so.
Firstly, I'm not sure whether searchView.getEditText()....
2
votes
1
answer
57
views
Material Design - Bootstrap Input Field Problem
This is MDB bootstrap Code which i got.
Link for the Code : https://mdbootstrap.com/docs/standard/extended/login/#:~:text=EDIT%20IN%20SANDBOX-,Registration%20page,-Once%20again%2C%20the
<!-- ...
0
votes
0
answers
16
views
CoordinatorLayout Behavior not working when RecyclerView or NestedScrollView scroll programmatically
I have AppBarLayout and BottomNavigationView that both collapse during scroll.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout ...
0
votes
0
answers
29
views
why ModalBottomSheet in jetpack compose is throwing error?
I have modalbottomsheet implementation in a composable, but it's causing crash in my app due to the following erorr, please help for this below error I am not able to find it's solution, I using ...
1
vote
0
answers
41
views
Same UI libraries for Angular and Flutter
I want a library like https://m3.material.io/ this but as you know that the update will come on next angular version which will support material 3 design
Please suggest me any library like m3
I have ...
0
votes
1
answer
14
views
Material Dialog - How to change color of Checkbox in single choice items?
I am trying to change the color of radio button for Material Dialog, what possibility I found in the documentation here and here is to override the whole layout using app:singleChoiceItemLayout but is ...
0
votes
1
answer
179
views
Material Design 3 with Angular
I am new to material design and I am researching whether I can use Material Design 3 with Angular version 17.
I have followed the steps mentioned in Material Design 3 and successfully installed but I ...
1
vote
1
answer
23
views
How to automatically color Android's status bar based on appbar
According to the material 3 specs of the appbar not only the appbar itself, also the statusbar should adapt it's color when scrolling the list under the appbar. How to achieve this? Are we supposed to ...
0
votes
2
answers
101
views
Change outline color of a Material 3 switch
I am trying to find a way to change the outline Color of a material 3 switch and for some odd reason I cannot find a way, I would appreciate it if someone could tell me how I can do that in both XML ...
0
votes
0
answers
32
views
ExtendedFloatingActionButton not respondig to RecyclerView scroll and not executing onClick
the situation is as follows.
Quick recap, the ExtendedFloatingActionButton is not reacting to the
RecyclerView addOnScrollListener but the regular button is working just fine.
Detailed explanation ...
0
votes
1
answer
54
views
Two adjacent Composables with the same elevation present a dividing shadow
I'm wanting to present a collapsible bar below a sticky top bar. In the initial state when the collapsible bar is fully expanded, I want both bars to look like they are on the exact same elevation. ...
0
votes
0
answers
11
views
Is there a way to implement Material's multi-select on Cards using standard Flutter or a package?
Is there a way to implement multi-selection of "Larger selections" in Flutter, like cards or images? When the items go into selectable mode, a circular checkbox appears in the upper left ...
0
votes
0
answers
19
views
adapter.noitfyDataSetChanged() does not work with AutoCompleteTextView when used before/after textView.setText
I am developing an android app and using Material Design for UI. As mentioned here, I'm using AutoCompleteTextView inside a TextInputLayout.
Consider an example of a school app. There are two drop-...
0
votes
0
answers
28
views
how to I implement two dark modes in android?
I am trying to implement dark and light mode in my application, I want to have two dark modes one with grey background and the other with black background for OLED displays. Following is the code I am ...
0
votes
0
answers
9
views
questions about circle shape imageview with ShapeableImageView in android
I found a couple answers to make a view circled with material ShapeableImageView like the code below.
answer1
<style name="ShapeAppearanceOverlay.App.CornerSize50Percent" parent="&...
0
votes
2
answers
44
views
Change TextInputEditText Hint Style
I want to change TextInputEditText type FilledBox
When before Typing hint needs style Bold and color #FF0000 (RED)
When after Typing hint style regular and color #000000 (Black)
How Can I do
0
votes
0
answers
28
views
'app-navbar' not rendering after running `ng add @angular/material`
I'm trying to add Material multi-selection component to my angular+ts website.
I've added the lines to my app.module.ts
And to my html and ts.
I ran ng add @angular/material
I try to ng serve but I ...
0
votes
0
answers
14
views
Vuetify 3 presets
I was using a preset vue-cli-plugin-vuetify-preset-reply based on Material Studies Reply Vuetify 2. Do you know how to use it in vuetify 3?
I've checked the new documentation but there isn't any ...
0
votes
0
answers
15
views
What is the workflow of creating a html project for Material design 3 for web with nodejs?
I could't make the new material 3 design for web work on a simple html page. I'm not aware of the full workflow and documentation is not very great from google.
I did what the documentation said and ...
0
votes
0
answers
16
views
Where can I find @angular/material theme methods?
I cannot custom theming find functions like:
@include mat.core();
mat.define-palette();
mat-palette();
mat.define-light-theme();`
Where I can find official documentation about these functions?
Thank ...
0
votes
0
answers
35
views
Android: Migrate compose theme from Material 2 to 3 and nesting themes in multi-module app
Migrating compose Material theme from 2 to 3 is pretty straightforward and described in the docs. They say that you create M3 theme and just migrate your composable by components and/or by screens (so ...
0
votes
0
answers
47
views
Is there a way to implement this layout with Jetpack compose + Material3
I want to implement this layout with images using Jetpack Compose and Material UI 3.
I tried with ModalBottomSheet and BottomSheetScaffold composables, but I also need the bottom sheet to overlap the ...
0
votes
2
answers
52
views
MDC: Material3 MaterialCalendar Background Color
How to change Material Calendar background? I am setting a day and night theme and it is working except for the night mode where the set color background is not applied correctly.
This is the expected ...
0
votes
0
answers
11
views
How did positioning the menu item in toolbar at leftMost corner after toolbar navigationButton
Currently i am creating toolbar in my fragment i have to implement searchView on this toolbar and i put toolbarNavigation button also.i set searchview.OnActionExpanded() on it so its behavier was good ...
0
votes
1
answer
59
views
Material 2 Date Picker Android Text Size so small
I face the issue when implement Material 2 DatePicker in MDC. the text size look so small when running. I haven’t implement any theme / style to my date picker
screenshot-datepicker
I see tutorial ...
0
votes
0
answers
23
views
AppBar back button animation clashes with title when navigating between screens
I'm having issues with Flutter's AppBar backwards navigation button clashing with my centred title when navigating between screens.
As you can see the arrow moves through the title when going forward/...
0
votes
0
answers
18
views
What will better, make own custom AppBar, or to insert 2 appBar Android Material
I need to have 1 appBar in top where will be information, and another below is search.
But Jetpack offer AppBars not very customizable
I dont know what will better to do
Scaffold(topBar = {Column{...
0
votes
0
answers
20
views
Material Design Guidelines for choosing the right Composable
Material3 from Google is great for applying some consistency in terms of what colors, shapes and typography is used throughout the app.
However, sometimes i struggle with knowing which composables to ...
0
votes
1
answer
32
views
How to automatically create tonal palettes and colors for Material3 in Android?
Googles Material3 provides a color system for design consistency throught the app.
I then looked at the Reply sample app provided by Google. It has hardcoded all of the colors as ARGB color ints.
Is ...
0
votes
1
answer
47
views
Android TextInputLayout[hint inside the edit field not outside the border]
I'm trying to create TextInputLayout with hint inside the input field like this:
This is my code, I tried with OutLinedBox and Filled, If I use Filled and set a background for the layout, the ...
1
vote
1
answer
40
views
Tonal Palette with pure css
I don't know how to implement this design system in pure css. Can anyone guide me what css fucntion to use ?
Is this about increase/decrease lightness in hsl function? My first time doing this kind ...
0
votes
0
answers
45
views
WPF MaterialDesign app, When trying to publish working application I get error "The target "StaticWebAssetsPrepareForRun" does not exist in project"
I'm building a WPF application using Material Design Toolkit as a basis. Everything works well when I run the app inside Visual Studio but when I'm trying to publish it I get.
"The target "...
-1
votes
2
answers
56
views
How do you determine which of Material colors to use for what [closed]
I'm learning Android (Compose) development and have recently faced an issue where I don't understand theming properly. My problem is that I have no idea which color name(primary, onPrimary, background ...
0
votes
1
answer
28
views
Android Material Slider - programatically show label
The label is normally hidden until user pressed the handle (thumb).
This all works fine.
But is there a way to show the label programmatically for a few seconds?
Basically show the label without the ...
0
votes
2
answers
78
views
How to put a Divider between DropdownMenu items in Flutter
I have a DropdownMenu and I want to draw a horizontal divider(line) between DropDownMenuEntries.
'dropdownMenuEntries' property only expects a List of DropDownMenuEntry Widgets.
Any help would be ...
0
votes
1
answer
43
views
I'm using the material design wpf library. how can I make the tooltip black?
I need to make the textbox completely black, but no matter how hard I try I can't make the tooltip black. How do I make it black?
I did a lot of research on how to make the textbox completely black ...
0
votes
0
answers
24
views
Material design in XAML custom mouse hover color WPF
I can't set the mouse hover color, it's somehow always like black with opacity of a value (darkening hover effect), so in short term I would like to set the hover color to let's say "Azure" ...
0
votes
1
answer
17
views
how do I get a mat-icon to align properly with the text in a mat-card-title?
how do I get a mat-icon to align properly with the text in a mat-card-title? What I would like is for the home icon to line up properly with the the text "The 20 Minute Rule". It seems like ...
0
votes
1
answer
46
views
Change elevation shadow color in API 27 or previous
I need to change the shadow color of views, especially MaterialCardView. Is there anyway to do it natively? Or maybe a lib that has good "drawing performance"?
I tried View#...
1
vote
0
answers
191
views
Crash when Replacing Custom Loading View with CircularProgressIndicator in Jetpack Compose
I'm encountering a crash in my Jetpack Compose app when I attempt to replace a custom loading view with the CircularProgressIndicator from Material Design. Specifically, the crash occurs after my ...
0
votes
1
answer
21
views
Textfield material design
I changed my layouts to textfield in material design but now I got error message "Val cannot be reassigned" in following code:
binding.istwert.editText = binding.inhalt.editText
I only want ...
1
vote
2
answers
174
views
How to make suggestions appear below the SearchBar
I want to make the list of suggestions appear below the SearchBar like in this example:
I used the same code in the sample but the search box and the list goes fullscreen like this when the search ...
0
votes
1
answer
36
views
How can I let the text label in FloatingActionButton.extended word wrap without specifying its width?
I tried everything including Expanded, Container (with double.infinity with or not), Wrap, FractionallySizedBox. And it always either shows me the overflow issue, completely crashes, or makes the text ...
0
votes
2
answers
51
views
Where is the reset icon?
I want to use a reset icon. The closest one I could find is Icons.Default.LockReset after adding "androidx.compose.material:material-icons-extended:1.5.1", but there is a lock in the middle....
1
vote
2
answers
196
views
Material 3 custom colors - How to generate tonal palettes?
The material 3 site has a section on custom colors.
Theme builder
Is there a way to programmatically generate tonal palettes for a given (harmonized) color to override the color scheme?
@Composable
...
1
vote
1
answer
23
views
Android NavigationBar Alternative Approach for Devices with Smaller Screens
I need to provide an alternative NavigationBar implementation should the device's width be less that 600.
Here is the code that I am working with:
val config = LocalConfiguration.current
val ...
0
votes
0
answers
12
views
material stretching unity and tiles don't work and uv mapping not working because need Pro builder
I want to put material on the wall and it stretches. Idk why
as you can see this is the problem.
I want to make the material not stretching if the wall is too big for the material, repeat a half or a ...