Графические объекты, скриншоты и видео

Step 1: Add a FAB to the home fragment layout

1. 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.
2. In , verify that the material library is included. To use Material Design components, you need to include this library.

1. 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.

1. In , add a around the .

1. Replace < with <. Coordinator layout knows about scrolling, and you need to use inside another view with scrolling for scrolling to work correctly.

1. Inside and at the bottom of the , below the , add a .

1. Run your app. You see a colored dot in the top-left corner.

1. Tap the button. Notice that the button visually responds.
2. 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.

1. In , in the tag, define a variable for the provided .

1. Add the listener to the FAB and call it .

1. 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.

1. In the home package, open the class. Notice that creates the and assigns it to .
2. Add the to the in .

1. To eliminate the error, clean and rebuild your project to update the binding object.
2. Also in , add an observer that navigates to the list of GDGs. Here is the code:

1. Make the necessary imports from . Import this and :

1. Run your app.
2. 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:

1. Use the color slider to select the hue.
2. Click inside the color field to select the desired shade.
3. 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, установите флажок напротив параметра «Отказ от рекламы» на странице Цены и распространение.

Чтобы управлять графическими объектами приложения, выполните следующие действия:

1. Войдите в Play Console.
2. Нажмите Все приложения .
3. Выберите приложение.
4. В меню слева нажмите Настройки страницы приложения > Описание приложения.
5. В разделе «Графические объекты» добавьте изображения или видео с 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:

1. Select the element that you want to color.
2. Click either the Fill swatch or the Border swatch at the top of the Color panel.
3. Select a color in the color mixer or from the color swatch palette.

To apply a color using the Properties panel:

1. Select the element that you want to color.
2. 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.
3. Select a color in the color mixer or from the color swatch palette.

To use the Fill tool:

1. 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.)
2. Select a color in the color mixer or from the color swatch palette.
3. Hover over the element that you want to color. A green outline appears around the element.
4. Click the element.

To use the Stroke tool:

1. 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.
2. 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.)
3. Hover over the element whose border you want to change. A green outline appears around the element.
4. Click the element.

Step 1: Examine your code

1. Open .
2. Look at the Design tab and make sure the blueprint is visible.
3. In the Component Tree, select the and . They should be slightly highlighted in the blueprint.

1. Notice the number 16 on the left and the number 26 on the right, indicating the inset of the start and end guidelines, respectively.
2. Switch to the Text tab.
3. 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

Выбор цвета элемента

Чтобы изменить фоновый цвет страницы, используйте поле Заливка на панели Свойства, когда элементы не выбраны.

Можно изменять цвет контура и заливки элементов с помощью инструментов для работы с цветом. Чтобы настраивать цвета, используйте панели «Цвет» и «Свойства» или инструменты «Контур» и «Заливка» на панели инструментов.

С помощью панели «Цвет»

1. Нажмите на элемент, для которого нужно выбрать цвет.
2. Нажмите на образец цвета возле параметра Заливка или Граница в верхней части панели «Цвет».
3. Выберите цвет на цветовой панели или в палитре образцов цветов.

С помощью панели «Свойства»

1. Нажмите на элемент, для которого нужно выбрать цвет.
2. В разделе Стиль панели Свойства нажмите на образец в поле Цвет заливки или Цвет границы. Откроется цветовая панель.
3. Выберите цвет на цветовой панели или в палитре образцов цветов.

С помощью инструмента «Заливка»

1. Выберите инструмент Заливка на панели инструментов или нажмите клавишу F. Если на панели инструментов отображается инструмент «Контур» или «Градиент» , нажмите и удерживайте его кнопку, чтобы выбрать инструмент «Заливка» во всплывающем меню.
2. Выберите цвет на цветовой панели или в палитре образцов цветов.
3. Наведите указатель мыши на элемент, для которого нужно выбрать цвет. Вокруг него появится зеленый контур.
4. Нажмите на элемент.

С помощью инструмента «Контур»

1. Нажмите и удерживайте инструмент Заливка на панели инструментов, затем во всплывающем меню выберите инструмент Контур . Если на панели инструментов отображается инструмент «Градиент», нажмите и удерживайте его кнопку, чтобы выбрать инструмент «Контур» во всплывающем меню. Также можно нажать клавишу K.
2. Настройте контур с помощью панели настроек инструмента:
   • Нажмите на образец цвета, чтобы выбрать цвет контура или границы.
   • Установите флажок Граница или Стиль и укажите толщину и стиль границы (применяется к элементам HTML).
   • Установите флажок Контур и укажите толщину контура (применяется к фигурам).
3. Наведите указатель мыши на элемент, границы которого нужно изменить. Вокруг него появится зеленый контур.
4. Нажмите на элемент.

Step 1: Create a Material color scheme

1. Open https://material.io/tools/color/. You can use this tool to explore color combinations for your UI.

1. Scroll down in the MATERIAL PALETTE on the right to see more colors.
2. Click Primary, then click a color. You can use any color you like.
3. Click Secondary and click a color.
4. 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.
5. 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.

1. Look for the triangular exclamation mark icons.

1. 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.

1. On the top-right of the window, select EXPORT and ANDROID. The tool initiates a download.
2. 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.

1. 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.
2. 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 .

1. 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.

1. In the inside the , set the tint to . Because the drawable includes both the image and the GDG Finder text, both will be light.

1. 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.

1. 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.
2. On the page, search or scroll to find (Regular 24sp) and (Regular 20sp). These two attributes are good matches for your app.
3. 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.

1. 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.

1. In the , replace the styling you just added with a .

1. 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.

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%

Светлый текст на темном фоне

Значения в таблице отражают относительную значимость светлого текста на темном фоне.

Текст на цветном фоне

Для случаев расположения белого или черного текста на цветном фоне ознакомьтесь с этими , в которых указаны оптимальные значения контраста и альфа-канала.

Прочие элементы

Прочие элементы, такие как иконки и разделители, тоже выигрывают, если в качестве величины цвета используют шестнадцатеричное значение черного или белого, поскольку это гарантирует, что они дадут желаемый результат на фоне любого цвета.

Панели инструментов и панели состояния

Панели инструментов и более крупные цветные блоки должны использовать основной оттенок (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.

С этим читают

• Angular 5 material для начинающих
• Background-color
• The role of color in product design: ux of color palettes
• Advanced & beautiful html5 / javascript color picker
• :first-child
• Цвета в css
• Прозрачный текст на css
• Нативный
• Цвет
• The power of visioning