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

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.

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.


С этим читают