Содержание
- 1 Step 1: Add a FAB to the home fragment layout
- 2 Feedback
- 3 Step 3: Add a click listener to the FAB
- 4 Introduction to Material Design
- 5 The color mixer
- 6 Управление графическими объектами
- 7 Coloring elements
- 8 Step 1: Examine your code
- 9 Material Themes
- 10 Выбор цвета элемента
- 11 Step 1: Create a Material color scheme
- 12 Palette colors
- 13 Customization
- 14 Step: Use theme overlays
- 15 Step 1: Use Material theme attributes
- 16 Color browser elements
- 17 Использование цветов в UI
- 18 Material Design Websites
Step 1: Add a FAB to the home fragment layout
- Download and run the GDGFinderStyles app, which is the starter app for this codelab. If you did the preceding codelab, you can continue from the final code of that codelab.
- In , verify that the material library is included. To use Material Design components, you need to include this library.
- Open and switch to the Text tab.Currently, the home screen layout uses a single with a as a child. If you added a FAB to the , the FAB would be inside the , not floating over all the content, and it would scroll with the rest of the content of the . You need a way to float the FAB above your current layout. is a view group that lets you stack views on top of each other. While doesn’t have any fancy layout abilities, it is sufficient for this app. The should take up the full screen, and the FAB should float near the bottom edge of the screen.
- In , add a around the .
- Replace < with <. Coordinator layout knows about scrolling, and you need to use inside another view with scrolling for scrolling to work correctly.
- Inside and at the bottom of the , below the , add a .
- Run your app. You see a colored dot in the top-left corner.
- Tap the button. Notice that the button visually responds.
- Scroll the page. Notice that the button stays put.
Feedback
Was this page helpful? Yes What was the best thing about this page? It helped me complete my goal(s) Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue. It had the information I needed Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue. It had accurate information Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue. It was easy to read Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue. Something else Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue. No What was the worst thing about this page? It didn’t help me complete my goal(s) Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue. It was missing information I needed Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue. It had inaccurate information Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue. It was hard to read Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue. Something else Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Step 3: Add a click listener to the FAB
In this step, you add a click handler to the FAB that takes the user to a list of GDGs. You’ve added click handlers in previous codelabs, so the instructions are terse.
- In , in the tag, define a variable for the provided .
- Add the listener to the FAB and call it .
- In the home package, open the provided class and look at the navigation live data and functions, which are also shown below. Notice that when the FAB is clicked, the click handler is called, and the app triggers navigation.
- In the home package, open the class. Notice that creates the and assigns it to .
- Add the to the in .
- To eliminate the error, clean and rebuild your project to update the binding object.
- Also in , add an observer that navigates to the list of GDGs. Here is the code:
- Make the necessary imports from . Import this and :
- Run your app.
- Tap the FAB and it takes you to the GDG list. If you are running the app on a physical device, you are asked for the location permission. If you are running the app in an emulator, you may see a blank page with the following message:If you get this message running on the emulator, make sure you are connected to the internet and have location settings turned on. Then open the Maps app to enable location services. You may also have to restart your emulator.
Introduction to Material Design
Material Design is a cross-platform design system from Google, and is the design system for Android. Material Design provides detailed specs for everything in an app’s user interface (UI), from how text should be shown, to how to lay out a screen. The Material Design website at material.io has the complete specifications.
On material.io you can also find a list of additional views that ship with Material Design components. The views include bottom navigation, a floating action button (FAB) that you use in this codelab, chips that you explore in the next codelab, and collapsing toolbars.
In addition to these views that you can use to implement Material Design, the Material Design components library exports the theme that your app already uses. The theme implements Material Design for controls, uses theme attributes, and is customizable.
To see examples of apps that use Material Design, open Gmail, or check out the Google Design website, in particular the annual Material Design awards.
The color mixer
To select a color in the color mixer:
- Use the color slider to select the hue.
- Click inside the color field to select the desired shade.
- Use the alpha slider to change the transparency of the color.
Other options available in the color mixer:
- # — Type a color’s hexadecimal value (such as 26C6DA).
- RGB — Type a color’s RGB (red, green, and blue) values.
- A — Type the alpha (transparency) value. 0 is completely transparent, while 100 is completely opaque.
- Default colors — Reset the color settings to the default (white fill and black stroke).
- Swap fill and stroke — Switch the fill and stroke colors.
- No color — Remove the stroke or fill color.
- Linear gradient — Create a linear gradient.
- Radial gradient — Create a radial gradient.
- Swatches — Switch to the color swatch palette.
Управление графическими объектами
Прежде чем добавлять на страницу приложения графические объекты, обратите внимание на следующее:
- Графические объекты, которые вы добавите в описание, будут видны на странице приложения для всех тестовых типов версий.
- Если вы не хотите рекламировать приложение на ресурсах Google, установите флажок напротив параметра «Отказ от рекламы» на странице Цены и распространение.
Чтобы управлять графическими объектами приложения, выполните следующие действия:
- Войдите в Play Console.
- Нажмите Все приложения .
- Выберите приложение.
- В меню слева нажмите Настройки страницы приложения > Описание приложения.
- В разделе «Графические объекты» добавьте изображения или видео с YouTube.
Coloring elements
To change the background color of a page, use the Fill field in the Properties panel when no elements are selected.
You can change the stroke and fill color of elements by using the color tools. You can adjust colors using the Color panel, the Properties panel, or the Stroke or the Fill tools in the toolbar.
To apply a color using the Color panel:
- Select the element that you want to color.
- Click either the Fill swatch or the Border swatch at the top of the Color panel.
- Select a color in the color mixer or from the color swatch palette.
To apply a color using the Properties panel:
- Select the element that you want to color.
- In the Style section of the Properties panel, click the color swatch in either the Fill color field or the Border color field. The color mixer opens.
- Select a color in the color mixer or from the color swatch palette.
To use the Fill tool:
- Select the Fill tool from the toolbar or press F. (If you see the Stroke tool or the Gradient tool on the toolbar instead, click and hold the button to select the Fill tool from a pop-up menu.)
- Select a color in the color mixer or from the color swatch palette.
- Hover over the element that you want to color. A green outline appears around the element.
- Click the element.
To use the Stroke tool:
- Click and hold the Fill tool in the toolbar, then select the Stroke tool from the pop-up menu. (If you see the Gradient tool on the toolbar instead, click and hold the button to select the Stroke tool from a pop-up menu.) You can also press K.
- Customize the stroke using the tool options bar:
- Click the color swatch to select the color of the stroke or border.
- Check the Border or Style checkbox to specify a border width and border style. (Applies to HTML elements.)
- Check the Stroke checkbox to specify a stroke width. (Applies to shapes.)
- Hover over the element whose border you want to change. A green outline appears around the element.
- Click the element.
Step 1: Examine your code
- Open .
- Look at the Design tab and make sure the blueprint is visible.
- In the Component Tree, select the and . They should be slightly highlighted in the blueprint.
|
|
- Notice the number 16 on the left and the number 26 on the right, indicating the inset of the start and end guidelines, respectively.
- Switch to the Text tab.
- Notice that at the bottom of the , two are defined. Guidelines define vertical or horizontal lines on your screen that define the edges of your content. Everything is placed inside these lines except for full-screen images.
The is correct according to the Material specifications. But should be 16dp also. You could just fix this here manually. However, it is better to create a dimension for these margins and then apply them consistently throughout your app.
Material Themes
-
Oceanic
Background: #263238
Foreground: #B0BEC5
Text: #607D8B
Selection Background: #546E7A
Selection Foreground: #FFFFFF
Buttons: #2E3C43
Second Background: #32424A
Disabled: #415967
Contrast: #1E272C
Active: #314549
Border: #2A373E
Highlight: #425B67
Tree: #546E7A
Notifications: #1E272C
Accent Color: #009688
Excluded Files Color: #2E3C43
Comments Color: #546e7a
Variables Color:
Links Color: #80cbc4
Functions Color: #82aaff
Keywords Color: #c792ea
Tags Color: #f07178
Strings Color: #c3e88d
Operators Color: #89ddff
Attributes Color: #ffcb6b
Numbers Color: #f78c6c
Parameters Color: #f78c6c
-
Darker
Background: #212121
Foreground: #B0BEC5
Text: #727272
Selection Background: #353535
Selection Foreground: #FFFFFF
Buttons: #2A2A2A
Second Background: #292929
Disabled: #474747
Contrast: #1A1A1A
Active: #323232
Border: #292929
Highlight: #3F3F3F
Tree: #323232
Notifications: #1A1A1A
Accent Color: #FF9800
Excluded Files Color: #323232
Comments Color: #616161
Variables Color:
Links Color: #80cbc4
Functions Color: #82aaff
Keywords Color: #c792ea
Tags Color: #f07178
Strings Color: #c3e88d
Operators Color: #89ddff
Attributes Color: #ffcb6b
Numbers Color: #f78c6c
Parameters Color: #f78c6c
-
Lighter
Background: #FAFAFA
Foreground: #546E7A
Text: #94A7B0
Selection Background: #80CBC4
Selection Foreground: #546e7a
Buttons: #F3F4F5
Second Background: #eae8e8
Disabled: #D2D4D5
Contrast: #F4F4F4
Active: #E7E7E8
Border: #d3e1e8
Highlight: #E7E7E8
Tree: #80CBC4
Notifications: #eae8e8
Accent Color: #00BCD4
Excluded Files Color: #eae8e8
Comments Color: #AABFC9
Variables Color:
Links Color: #39ADB5
Functions Color: #6182B8
Keywords Color: #7C4DFF
Tags Color: #E53935
Strings Color: #91B859
Operators Color: #39ADB5
Attributes Color: #F6A434
Numbers Color: #F76D47
Parameters Color: #F76D47
-
Palenight
Background: #292D3E
Foreground: #A6ACCD
Text: #676E95
Selection Background: #3C435E
Selection Foreground: #FFFFFF
Buttons: #303348
Second Background: #34324a
Disabled: #515772
Contrast: #202331
Active: #414863
Border: #2b2a3e
Highlight: #444267
Tree: #676E95
Notifications: #202331
Accent Color: #ab47bc
Excluded Files Color: #2f2e43
Comments Color: #676E95
Variables Color:
Links Color: #80cbc4
Functions Color: #82aaff
Keywords Color: #c792ea
Tags Color: #f07178
Strings Color: #c3e88d
Operators Color: #89ddff
Attributes Color: #ffcb6b
Numbers Color: #f78c6c
Parameters Color: #f78c6c
-
Deep ocean
Background: #0F111A
Foreground: #8F93A2
Text: #4B526D
Selection Background: #232632
Selection Foreground: #FFFFFF
Buttons: #191A21
Second Background: #181A1F
Disabled: #464B5D
Contrast: #090B10
Active: #1A1C25
Border: #0F111A
Highlight: #1F2233
Tree: #717CB4
Notifications: #090B10
Accent Color: #84ffff
Excluded Files Color: #292D3E
Comments Color: #717CB4
Variables Color:
Links Color: #80cbc4
Functions Color: #82aaff
Keywords Color: #c792ea
Tags Color: #f07178
Strings Color: #c3e88d
Operators Color: #89ddff
Attributes Color: #ffcb6b
Numbers Color: #f78c6c
Parameters Color: #F59762
Выбор цвета элемента
Чтобы изменить фоновый цвет страницы, используйте поле Заливка на панели Свойства, когда элементы не выбраны.
Можно изменять цвет контура и заливки элементов с помощью инструментов для работы с цветом. Чтобы настраивать цвета, используйте панели «Цвет» и «Свойства» или инструменты «Контур» и «Заливка» на панели инструментов.
С помощью панели «Цвет»
- Нажмите на элемент, для которого нужно выбрать цвет.
- Нажмите на образец цвета возле параметра Заливка или Граница в верхней части панели «Цвет».
- Выберите цвет на цветовой панели или в палитре образцов цветов.
С помощью панели «Свойства»
- Нажмите на элемент, для которого нужно выбрать цвет.
- В разделе Стиль панели Свойства нажмите на образец в поле Цвет заливки или Цвет границы. Откроется цветовая панель.
- Выберите цвет на цветовой панели или в палитре образцов цветов.
С помощью инструмента «Заливка»
- Выберите инструмент Заливка на панели инструментов или нажмите клавишу F. Если на панели инструментов отображается инструмент «Контур» или «Градиент» , нажмите и удерживайте его кнопку, чтобы выбрать инструмент «Заливка» во всплывающем меню.
- Выберите цвет на цветовой панели или в палитре образцов цветов.
- Наведите указатель мыши на элемент, для которого нужно выбрать цвет. Вокруг него появится зеленый контур.
- Нажмите на элемент.
С помощью инструмента «Контур»
- Нажмите и удерживайте инструмент Заливка на панели инструментов, затем во всплывающем меню выберите инструмент Контур . Если на панели инструментов отображается инструмент «Градиент», нажмите и удерживайте его кнопку, чтобы выбрать инструмент «Контур» во всплывающем меню. Также можно нажать клавишу K.
- Настройте контур с помощью панели настроек инструмента:
- Нажмите на образец цвета, чтобы выбрать цвет контура или границы.
- Установите флажок Граница или Стиль и укажите толщину и стиль границы (применяется к элементам HTML).
- Установите флажок Контур и укажите толщину контура (применяется к фигурам).
- Наведите указатель мыши на элемент, границы которого нужно изменить. Вокруг него появится зеленый контур.
- Нажмите на элемент.
Step 1: Create a Material color scheme
- Open https://material.io/tools/color/. You can use this tool to explore color combinations for your UI.
- Scroll down in the MATERIAL PALETTE on the right to see more colors.
- Click Primary, then click a color. You can use any color you like.
- Click Secondary and click a color.
- Click Text to choose a text color if you want a color that is different from the one the tool has calculated for you. Pick various text colors to explore contrast.
- Click the ACCESSIBILITY tab. You will see a report like the one below. This gives you a report about how readable the currently selected color choices are.
- Look for the triangular exclamation mark icons.
- In the tool, switch to the CUSTOM tab and enter the following two colors.
- Primary: #669df6
- Secondary: #a142f4
The primary color is a blue that’s based on the color used in the GDG logo. The secondary color is based on the balloons in the image on the home screen. Type the colors into the Hex Color field. Keep the black and white fonts suggested by the tool.
Note that this color scheme still has some accessibility warnings. Most color schemes do. You work around this in the next step.
- On the top-right of the window, select EXPORT and ANDROID. The tool initiates a download.
- Save the file in a convenient location.
Palette colors
A color intention is a mapping of a palette color to a given intention within your application. The theme exposes the following palette colors (accessible under ):
- primary — used to represent primary interface elements for a user. It’s the color displayed most frequently across your app’s screens and components.
- secondary — used to represent secondary interface elements for a user. It provides more ways to accent and distinguish your product. Having it is optional.
- error — used to represent interface elements that the user should be made aware of.
- warning — used to represent potentially dangerous actions or important messages.
- info — used to present information to the user that is neutral and not necessarily important.
- success — used to indicate the successful completion of an action that user triggered.
If you want to learn more about color, you can check out the color section.
Customization
You may override the default palette values by including a palette object as part of your theme. If any of the:
palette color objects are provided, they will replace the defaults.
The palette color value can either be a object, or an object with one or more of the keys specified by the following TypeScript interface:
Using a color object
The simplest way to customize an intention is to import one or more of the provided colors and apply them to a palette intention:
Providing the colors directly
If you wish to provide more customized colors, you can either create your own color object, or directly supply colors to some or all of the intention’s keys:
As in the example above, if the intention object contains custom colors using any of the «main», «light», «dark» or «contrastText» keys, these map as follows:
- If the «dark» and / or «light» keys are omitted, their value(s) will be calculated from «main», according to the «tonalOffset» value.
- If «contrastText» is omitted, its value will be calculated to contrast with «main», according to the «contrastThreshold» value.
Both the «tonalOffset» and «contrastThreshold» values may be customized as needed. The «tonalOffset» value can either be a number between 0 and 1, which will apply to both light and dark variants, or an object with light and dark variants specified by the following TypeScript type:
A higher value for «tonalOffset» will make calculated values for «light» lighter, and «dark» darker. A higher value for «contrastThreshold» increases the point at which a background color is considered light, and given a dark «contrastText».
Note that «contrastThreshold» follows a non-linear curve.
Step: Use theme overlays
The theme does not have an option for a dark toolbar on a light screen. In this step, you change the theme for just the toolbar. You make the toolbar dark by applying the theme, which is available from , to the toolbar as an overlay.
- Open and find where the is defined (). The is part of Material Design and allows more customization than the app bar that activities use by default.
- To change the toolbar and any of its children to the dark theme, start by setting the theme of the to the theme. Make sure you do this in the , not in the .
- Change the background of the to .
Notice the image in the header (), which includes both the colored arrow and the gray «GDG Finder» text on a transparent background. With the changed background color, the text does not stand out as much anymore. You can create a new image, or to increase contrast without creating a new image, you can set a tint on the . That causes the whole to be «tinted» to the specified color. The attribute is a color that meets accessibility guidelines for text or iconography when drawn on top of the primary color.
- In the inside the , set the tint to . Because the drawable includes both the image and the GDG Finder text, both will be light.
- Run the app and notice the dark header from the theme. The is responsible for the light logo image, which includes the icon and the «GDG Finder» text.
Step 1: Use Material theme attributes
In this step, you change the styling of the title headers on the home screen to use Material Design theme attributes to style your views. This helps you follow the Material style guide while customizing your app’s style.
- Open the Material web page for typography theming:https://material.io/develop/android/theming/typography/The page shows you all the styles available with Material themes.
- On the page, search or scroll to find (Regular 24sp) and (Regular 20sp). These two attributes are good matches for your app.
- In , replace the current style () of the with . The syntax is a way to look up a theme attribute and apply the value of Headline 5, as defined in the current theme.
- Preview your changes. Notice that when the style is applied, the font of the title changes. This happens because the style set in the view overrides the style set by the theme, as shown by the style-priority pyramid diagram below.
In the pyramid diagram, is below theme. is an attribute on any view that applies text styling. It’s not the same as a style, and it only lets you define things about how to display text. All the text styles in Material Design components can also be used as ; that way, any theme attributes that you define take priority.
- In the , replace the styling you just added with a .
- Preview your changes, or run the app to see the difference. For comparison, the screenshots below show the differences when the Material style is applied to the title and overrides the style.
MATERIAL STYLE: |
TEXT APPEARANCE |
|
|
Color browser elements
Using different elements, you can customize the browser and even elements of the platform. Keep in mind that some may only work on certain platforms or browsers, but they can greatly enhance the experience.
Chrome, Firefox OS, Safari, Internet Explorer and Opera Coast allow you to define colors for elements of the browser, and even the platform using meta tags.
To specify the theme color for Chrome on Android, use the meta theme color.
Specify a startup image
By default, Safari shows a blank screen during load time and after multiple loads a screenshot of the previous state of the app. You can prevent this by telling Safari to show an explicit startup image, by adding a link tag, with . For example:
The image has to be in the specific size of the target device’s screen or it won’t be used. Refer to Safari Web Content Guidelines for further details.
While Apple’s documentation is sparse on this topic, the developer community has figured out a way to target all devices by using advanced media queries to select the appropriate device and then specify the correct image. Here’s a working solution, courtesy of tfausak’s gist
Change the status bar appearance
You can change the appearance of the default status bar to either or . With , the status bar floats on top of the full screen content, rather than pushing it down. This gives the layout more height, but obstructs the top. Here’s the code required:
Screenshot using
Screenshot using
Использование цветов в UI
Выберите палитру
Чтобы ограничить свою цветовую выборку выберите три оттенка из основной палитры и один акцентный цвет из вспомогательной палитры.
Пример основной цветовой палитры
Пример вспомогательной палитры
Используйте непрозрачность для текста, иконок и разделителей
Чтобы сообщить пользователю, насколько важна определенная информация относительно остального текста, вы можете изменять непрозрачность текста.
Темный текст на светлом фоне
Белый текст на темном фоне
Если темный текст расположен на светлом фоне, непрозрачность основного текста должна составлять 87%. Вспомогательный текст, расположенный ниже в визуальной иерархии, должен иметь непрозрачность 54%
Текстовые подсказки для пользователей, вроде тех, что расположены в текстовых полях и в метках, имеют еще меньшую визуальную важность и непрозрачность 26%
Темный текст (#000000) | Непрозрачность |
Основной текст | 87% |
Вспомогательный текст | 54% |
Подсказки (текстовые поля, метки) | 26% |
Светлый текст на темном фоне
Значения в таблице отражают относительную значимость светлого текста на темном фоне.
Светлый текст (#FFFFFF) | Непрозрачность |
Основной текст | 100% |
Вспомогательный текст | 70% |
Подсказки (текстовые поля, метки) | 30% |
Текст на цветном фоне
Для случаев расположения белого или черного текста на цветном фоне ознакомьтесь с этими , в которых указаны оптимальные значения контраста и альфа-канала.
Прочие элементы
Прочие элементы, такие как иконки и разделители, тоже выигрывают, если в качестве величины цвета используют шестнадцатеричное значение черного или белого, поскольку это гарантирует, что они дадут желаемый результат на фоне любого цвета.
Панели инструментов и панели состояния
Панели инструментов и более крупные цветные блоки должны использовать основной оттенок (500) главного цвета вашего приложения. Панель состояния должна использовать более темный оттенок (700) вашего основного цвета.
Смелое использование цвета в больших полях поощряется в UI. Различные элементы в UI могут использовать различные части вашей цветовой темы.
Акцентный цвет
Используйте акцентный цвет для вашей основной кнопки действия и компонентов, таких как переключатели или слайдеры.
В плавающей кнопке действия используется акцентный цвет.
Переключатель, использующий акцентный цвет.
Правильно.
В основном тексте используйте акцентный цвет только для привлечения внимания к веб-ссылке.
Неправильно.
Не используйте акцентный цвет в качестве цвета основного текста.
Правильно
Используйте акцентный цвет для вашей основной кнопки действия и компонентов, таких как переключатели или слайдеры.
Неправильно.
Не используйте акцентный цвет для панелей своего приложения или для крупных цветных участков. Избегайте использования одного и того же цвета для плавающей кнопки действия и для фона.
Запасные акцентные цвета
Если выбранный вами акцентный цвет окажется слишком светлым или слишком темным для выбранного фона, то в качестве запасного варианта обычно используется более темный или светлый оттенок акцентного цвета. Если ваш акцентный цвет совершенно не подходит, используйте оттенок 500 вашего основного цвета на белом фоне. Если для цвета фона выбран оттенок 500 вашего основного цвета, используйте 100% белый или 54% черный.
Правильно
Если цветной фон окажется слишком светлым или слишком темным, используйте запасной акцентный цвет.
Неправильно.
Не используйте акцентный цвет на цветном фоне, если контраст недостаточно высок.
Material Design Websites
1. Google
When it comes to Material Design, how can we not mention Google? It’s the best practice of its own material design guidelines. The material design style is characterized by the clean typography and simple layout that is easy to understand so the user can focus on content.
2. WhatsApp
WhatsApp is a timely communication tool loved by people around the world, implements the concept of material design in its web design and mobile App design very well. In terms of colors, WhatsApp did not use a very colorful palette for its main colors, opting for a more serene mix of gray and green.
These Material Design color tools and resources will help you move to the next step in practicing building your website or App.
Actually, it’s not that hard. To create a website or App that incorporates Material Design, you only need a material design style prototyping tool. Here I give my vote to Mockplus as it has the unique advantage of both in website prototype design and mobile App prototype design. Combining the built-in material design components of Mockplus with the material design color scheme I summarized for you above, designing a Material design style application or website is no longer a difficult task.
С этим читают