material-design

Material design (Android like) behavior on a web application

由 泄露秘密 提交于 2019-12-04 18:50:42
Scenario We got a mat-toolbar and a mat-tab-group - the behavior we need is like the GIF below i.e. when we scroll down, the mat-tab-group (Cats in the gif below) is scrollable and the mat-toolbar (Pets in the gif below) hides away, only to show up again after we scroll back up. The code Approaches i tried: Tried to use the scroll event, but unable to ascertain if the scroll was up or down because the offsetHeight and offsetTop numbers didn't change. offsetTop & offsetHeight change when the complete window scrolls, the values didn't change with our scroll which is inside the mat-tab-group .

How to show tick marks for Discrete Slider?

由 你说的曾经没有我的故事 提交于 2019-12-04 18:35:40
问题 I'm trying to style a seekbar/slider like the one labeled Discrete Slider - Click (that has the little tick mark indicators) in the Material Design Guidelines. I can't figure out the magical incantation to have the tickmarks show up, does anyone know how to do this? I have a seekbar with 5 positions (0-4) <SeekBar android:layout_width="match_parent" android:layout_height="wrap_content" android:max="4" /> 回答1: Add tick marks with the style attribute: <SeekBar android:id="@+id/seekBar" style="

Collapsing Toolbar Like Google Play Store

由 夙愿已清 提交于 2019-12-04 18:11:51
问题 I want to implement a collapsing toolbar like google Play Store. I have achieved functionality somewhat but that is only working for portrait Screen. Here is a sample of screenshot of what i was able to do. Now what i want to do is when i change my device orientation to LandScape mode it should look Exactly Like This. So what my main question is how to handle these orientation changes. Is there any official android component available that can do this kind of thing or I will have to Z-index

How to Build AppCompatDialog From AlertDialog.Builder or Equivalent?

由 非 Y 不嫁゛ 提交于 2019-12-04 18:10:56
问题 Before this I used a DialogBuilder to create AlertDialog like this AlertDialog.Builder builder = new AlertDialog.Builder(context); ... ... AlertDialog dialog = builder.create(); How can I build the new AppCompatDialog from a dialog builder, or is there another new equivalent way to do that? 回答1: Just found the solution. I should import import android.support.v7.app.AlertDialog; and then AppCompatDialog dialog = builder.create() will work. 回答2: If you would like to use an AlertDialog , just

Horizontal divider with text in the middle in Flutter?

由 好久不见. 提交于 2019-12-04 17:57:44
问题 Is there a built in widget in Flutter to create a divider with text in the middle? Any guide on how to do it? Like this: (the "OR" text in the middle of horizontal line) here's is the screenshot of what I want to achieve 回答1: You can try to use the Row widget. Row( children: <Widget>[ Expanded( child: Divider() ), Text("OR"), Expanded( child: Divider() ), ] ) 回答2: To expand on Jerome's answer - Here is an example that shows how to embed it with other content and also has additional edgeinsets

What are the ways to programmatically generate Material Design color sets?

由 泄露秘密 提交于 2019-12-04 17:40:44
问题 I am trying to create a colour palette of Material Design that changing the lightness / luminosity by percentage with arbitrary color hex. When it comes to the implementation, I have found that there are some color hex I cannot generate and shows Color Unknown Exception. Would you please tell me what are the alternatives or technical precautions to generate this set of colours? The following is my code package com.example.dino.util; import android.content.Context; import android.graphics

No ripples for MaterialCardView

由 不羁的心 提交于 2019-12-04 17:23:13
问题 Are there no ripples on the new MaterialCardView ? I used CardView with android:clickable="true" and android:foreground="?android:attr/selectableItemBackground" which worked fine but with the new MaterialCardView there are no ripples at all 😰. Other View s etc. keep working but I want my card to be clickable (with ripple as feedback). 回答1: This is a bug with MaterialCardView . It's overriding the foreground after it's created. I've filled a bug. It should be fixed to show a ripple if the card

Importing a lot of modules in Angular

由 こ雲淡風輕ζ 提交于 2019-12-04 17:04:03
I'm building an app with Angular 4 and Angular Material, each Material directive requires me to import its module separately.. For example, i'm building a navigation bar, this is how the nav.module.ts starts to look like: import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; import {NavComponent} from './nav.component'; import { AngularFontAwesomeModule } from 'angular-font-awesome/angular-font-awesome'; import { MdInputModule } from '@angular/material'; import { MdMenuModule } from '@angular/material'; import {MdButtonModule} from '@angular/material'; import {

How to set vertical alignment for mdRadioButton directive of Angular Material related to text?

由 落花浮王杯 提交于 2019-12-04 16:58:42
How to set vertical alignment for mdRadioButton directive of Angular Material related to text? I have tried both layout-align and vertical-align style but, the radio button is always align middle related to the text. here is the plunker <md-content> <md-radio-group ng-model="data" style="vertical-align:top;"> <md-radio-button value="a" aria-label="Label 1" style="vertical-align:text-top;">long text 1</md-radio-button> <md-radio-button value="b"> long text 2 </md-radio-button> </md-radio-group> </md-content> Kelbster Angular Material actually generates a container for the radio button's on/off

How to place tabs at bottom of app in a tabbedactivity

由 天大地大妈咪最大 提交于 2019-12-04 16:54:32
I'm trying to use a tabbedActivity in android to create a simple app. I would like to put my tabs at the bottom of the screen. Here is what i've got when creating my Activity with android studio. What I would like, is the part with "SECTION 1 SECTION 2 SECTION 3" to be at the bottom of the screen. Here is my xml file: <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingTop="@dimen/appbar_padding_top" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar android
订阅 material-design