Knowledge of the UI that Android developers should know

Objective

iOS and Android use the same set of iOS interactive design This practice is noncommittal, after all, a lot of people do so, for this we are in development to be able to convert the size of the appropriate resolution, we can directly compare the resolution of the two sides directly conversion, for example: iOS: (640*1136px) X 75% = iOS: (480*852px) ≈android (WVGA hdpi):(480*800px), know this can be converted according to the corresponding proportion

Screen Basics iphone Interface Size:

Equipment	resolution	PPI	Status Bar Height	Navigation Bar Height	tab Bar Height
IPhone6 Plus	1080x1920px	401PPI	54px	132px	146px
IPhone6	750x1334px	326PPI	40px	88px	98px
Iphone5-5c-5s	640x1136px	326PPI	40px	88px	98px
Iphone4-4s	640x960px	326PPI	40px	88px	98px
Iphone&ipod Touch Tertiary Generation	320x480px	163PPI	20px	44px	49px

Android System density:

density	Density value	resolution	proportions	DP and PX
ldpi	120	240x320	3	1DP = 0.75px
mdpi	160	320x480	4	1DP = 1px
hdpi	240	480x800	6	1DP = 1.5px
xhdpi	320	720x1280	8	1DP = 2px
xxhdpi	480	1080x1920	12	1DP = 3px
xxxhdpi	640	3840x2160	16	1DP = 4px

Concept:

2. Resolution. Resolution is the number of pixels on the phone screen, generally described as the "width x height" of the screen, for example, 720x1280 indicates that this screen has 720 pixels in the width direction and 1280 pixels in the height direction. Android is more than the size of the iphone, it is recommended to take the size of the 720x1280 , this size in the 720x1280 display is perfect, in the 1080x1920 look more clear, the image file size is also moderate, The memory consumption of the app is not too high. It's easy to calculate, it's 1dp=2px .

   Why choose 720*1280 as a design manuscript with resolution set to
   Because the resolution of the 320DPI screen is the most common 720x1280, with this size as the canvas size, is the most sense, so that the design and application on the most 320dpi of the machine to run on the same look.
   and pick the most density, because the picture zoom out better, put the assembly distortion, choose 320DPI as the target screen, for other screens to provide pictures, only need to zoom out.
   The DPI is the default setting for Photoshop, and this number is related to subsequent conversions.

4. Screen size. The screen size is the physical size of the diagonal of the phone, in inches (inch). For example, a mobile phone for "5 inch large screen mobile phone" refers to the size of the diagonal, 5 inches x2.54 cm/inch = 12.7 centimeters.

6. Density (dpi,dots per inch; or ppi,pixels per inch). From the English name, that is, no inch pixel points, the higher the value of course the more delicate display. If we know that the resolution of a cell phone is 1080x1920 and the screen size is 5 inches, how should we calculate the density of the screen? Very simple, we can by the width of 1080 and 1920, according to the law of the tick, the number of pixels to calculate the diagonal is about 2203, and then 2203 divided by 5 is the density of this screen, the result is 440. The 440dpi screen is already quite delicate.

8. An important unit DP
   DP can also be written as dip, or density-independent pixel. You can imagine that a DP is more like a physical size, such as a picture with a width and height of 100dp that "looks" as large on 320x480 and 480x800 's phone. In fact, their pixel values are not the same. DP is such a size, regardless of the density of the screen, the same DP-sized elements on the screen always look almost large. That's why we're using DP for our development.
   In addition, the text size uses the SP, which is the abbreviation for Scale-independentpixel, so that when you adjust the font size in the system settings, the text in the app will become larger and smaller.

10. DP vs. PX Conversion
    In Android, the system density of 160dpi of the medium-density mobile phone screen for the benchmark screen, that is, the 320x480 phone screen. In this screen, 1dp=1px.
    100DP is 100px in 320x480 (mdpi,160dpi). So how many PX does 100DP have on the 480x800 (hdpi,240dpi) phone? We know that 100DP looks almost large on two phones, and according to the proportional relationship between 160 and 240, we know that in 480x800, 100DP actually covers 150px. So if you have a 100px picture for your mdpi phone, this image will stretch to 150px on the hdpi phone, but they are all 100dp.
    The scaling ratios of medium density and high density appear to be not calculated by 160dpi and 240dpi, and can be computed by 320px and 480px. However, scaling by width does not apply to ultra-high density xhdpi and ultra-high density xxhdpi. That is, how many px is 1DP in 720x1280? If you use 720/320, you will come to 1dp=2.25px, it is wrong to actually calculate it. DP and PX conversion to the system density , 720x1280 system density of 320,320x480 system density is 160,320/160=2; then in 720x1280, 1dp=2px. In the same vein, 1dp=3px in 1080x1920.
    When the Android system font size is set to "normal", the SP and PX size conversion and DP and PX are the same. For example, a text size in the 720x1280 PS canvas is 24px, then tell the engineer, the text size is 12SP.

Material Design Code

It mainly provides the interface component spacing, size, etc. of the Android side, more details can be in the Chinese document or the official English view more content, the following image from here

Borders and Spacing

This screen shows how the list of icons, avatars, and a 2-line text is left-aligned, and how a 56DP floating action button and text align Right.

There are 16DP vertical borders on each side. The content with an icon or avatar has a 72dp left margin.
Vertical margins:
1.24DP
2.56DP
3.48DP
4.72DP

This screen shows how the icons, avatars, 2-line text list, sub-headings, and 40dp floating action buttons align to the left. The small icons are right-aligned.
The icon (size icon) has a vertical border of around 16DP. The content with an icon or avatar has a 72dp left margin.
Vertical margins
1.24DP
2.56DP
3.72DP
4.48DP
5.8DP

This screen shows how the icon is left-aligned, and how the icon and a 56DP floating action button align right.
The icon has a 16DP left vertical border. The content with an icon or avatar has a 72dp left margin and a 32dp right margin (taking into account the 56DP Circular floating action button). So the icon under the Circular floating action button is also on it.
Vertical margins
1.24DP
2.56DP
3.8DP
4.72DP

This screen shows how icons, avatars, and text are left-aligned, and how floating action buttons, icons, or text align Right.
The icon has a 16DP left and right vertical border. The content area with an icon or avatar is left-aligned and 72DP from the left edge.
Vertical margins
1.24DP
2.56DP
3.48DP
4.8DP

This screen shows the width of the side navigation menu, as well as how icons, avatars, and text are left-aligned, and how small icons are right-aligned.
The icons have a vertical border of 16DP from the left and right edges of the side navigation menu. Content with an icon or avatar is 72DP from the left edge of the side navigation menu. The width of the side navigation menu is equal to the width of the screen minus the height of the action bar, which is 56dp wide from the right side of the screen in this example.
Vertical margins
1.48DP
2.8DP
3.56DP

Touch Target Size

The minimum touch target size is 48DP. In the layout, always remember when you set the margin for the icon (24DP) or the Avatar (40DP). Touch targets cannot overlap.

App Bar

Formerly the Android Action Bar for branding, navigation, search and operation.

Default height:
Mobile phone horizontal screen (Landscape): 48DP
Phone vertical screen (Portrait): 56DP
Tablet PC/PC Desktop (tablet/desktop): 64DP
For a pull-up menu, its height equals the default height plus the content height.

Side navigation bar (side nav)

If the sidebar appears, the left and right side of the navigation drawer (NAV drawer) can be fixed always display or floating display temporary overlay up. The content of the navigation bar on the left should be primarily navigation or recognition type. The contents of the right navigation bar should primarily be a deeper level of information on the primary content of the page.

Temporary navigation drawers can overlay the content canvas. The fixed navigation drawer should be placed on the side or bottom of the content canvas.

Size:
Mobile: Side navigation bar width = screen width-app bar height
Example: Nexus 4:304DP
Nexus 5:288DP
Iphone:264dp
Maximum width of float: 304DP

Bottom Action Bar (Bottom Sheets)

A panel that slides up from the bottom edge of the screen, using this method to present a set of features to the user. The bottom Action Bar presents a simple, clear set of actions that do not require additional explanation.
Specifications:

Bottom Action Bar for list styles:

The bottom action Bar of the list style of the leading department:

The bottom action bar that contains the standard Gongge style for jumping to other program portals:

Button

Bottom fixed button:

Hover Response button: Default size and mini size. Mini size is only used to create visual continuity with other elements on the screen.

Status of flat and floating buttons:

1. Flat Light/light Color
   Min. width: 88dp, Height: 36dp
   Coverage status: 20% #999, click Status: 40% #999, unavailable status: 10% #999

2. Flat Dark/dark Color
   Min. width: 88dp, Height: 36dp
   Overwrite status: 15% #ccc, click Status: 25% #ccc, unavailable status: 10% #ccc

3. Raised Light/light color
   Min. width: 88dp, Height: 36dp

4. Flat Light/light Color
   Min. width: 88dp, Height: 36dp
   Normal state: Color 500, Overwrite status: Color 600, click Status: Color 700, unavailable status: 10% #ccc

Card

A piece of paper containing a set of specific data sets containing information about a single subject, such as photos, text, and links.

Card with rounded corners, with multiple operations, can be ignored and reflow

Layout guidelines:
Font design:
Body: 14SP or 16SP
Title: 24SP or greater
Flat button: Roboto medium,14sp,10sp word Spacing
Card spacing on mobile devices:
Screen border and card white: 8DP
Card Room White: 8DP
Content left White: 16DP

Paper

Chips is a small chunk of a block that renders complex entities, such as calendar events or contacts.

Closed status of the contact paper view:
Font used by Contact name: Roboto, General, 14SP
When you click on the contact paper view in the off state, it expands and displays the address of the contact person

Open the status of the contact sheet view:
By default, the topmost contact is activated and selected
The font of the contact name is: Roboto, General, 16SP
The font for address text is: Roboto, General, 14SP
When the user chooses, the paper view is closed

Prompt box (Dialogs)

Used to prompt the user for some decision, or some other additional information needed to complete a task. Dialog can be either a simple answer pattern with cancellation/determination or a complex pattern of custom layouts, such as some text settings or text input.

Grid

A grid list is an optional component of a standard list view. The grid list differs significantly from the grid applied to layouts and other visual views.

Grid list Header/Footer (header/footers):
Single-Line Header/footer:
High: 48DP
Text padding: 16DP
Default font Size: 16sp
Secondary action aligns with tail right

Two-line Header/footer:
High: 68DP
Text padding: 16DP
Default font size per line: 16SP/12SP or 14SP/14SP

Grid list with pictures only:
Mesh Inner margin: 4DP
Tiles in the grid list can span multiple columns.
Consider carefully whether the secondary text in the grid list requires the use of multi-column tiles, because large tiles can cause a lot of wasted space.

Single-line grid list:
Text Only
High: 48DP
Text padding: 16DP
Default font Size: 16sp
Mesh Inner margin: 4DP

Text with an icon:
High: 48DP
Text padding: 16DP
Default font Size: 16sp
Mesh Inner margin: 4DP
The minor text in the footer of the grid list or in the header can be right-aligned or left-aligned.

A list of two rows of grids:
Text Only
High: 68DP
Text padding: 16DP
Default font size per line: 16SP/12SP or 14SP/14SP
Mesh Inner margin: 4DP

Text with an icon:
High: 68DP
Text padding: 16DP
Default font size per line: 16SP/12SP or 14SP/14SP
The footer of the grid list or the secondary text in the header can be right-aligned or left-aligned.
Grid padding is 4DP

List

The list displays multiple lines of items vertically as a single contiguous element.

Single-line list:
Text Only:
Font: Roboto Regular 16sp
Height of tile: 48DP
Text padding: 16DP
Add 8DP padding to the top and bottom of the list. A special case is the upper part of the list with header entries (subheader), because the header entries contain their own padding.

Icons with text:
Font: Roboto Regular 16sp
Height of tile: 48DP
Left icon padding: 16DP
Text left padding: 72DP
Text upper and lower inner margin: 16DP
Add 8DP padding to the top and bottom of the list. A special case is the upper part of the list with header entries (subheader), because the header entries contain their own padding.

Avatar with text:
Font: Roboto Regular 16sp
Height of tile: 56DP
Left head inner margin: 16DP
Text left padding: 72DP
Text upper and lower inner margin: 20DP
Add 8DP padding to the top and bottom of the list. A special case is the upper part of the list with header entries (subheader), because the header entries contain their own padding.

Two-line list:
Text Only:
Font for main text: Roboto Regular 16sp
Font for minor text: Roboto Regular 14sp
Height of tile: 72DP
Text padding: 16DP
Add 8DP padding to the top and bottom of the list. A special case is the upper part of the list with header entries (subheader), because the header entries contain their own padding.

Avatar with text:
Font for main text: Roboto Regular 16sp
Font for minor text: Roboto Regular 14sp
Height of tile: 72DP
Left head inner margin: 16DP
Text left padding: 72DP
Text upper and lower inner margin: 16DP
The icon is aligned with the text Area center.
Add 8DP padding to the top and bottom of the list. A special case is the upper part of the list with header entries (subheader), because the header entries contain their own padding.

Avatar with text and icons:
Font for main text: Roboto Regular 16sp
Font for minor text: Roboto Regular 14sp
Height of tile: 72DP
Left head inner margin: 16DP
Text left padding: 72DP
Text upper and lower inner margin: 16DP
Right side icon padding: 16DP
Add 8DP padding to the top and bottom of the list. A special case is the upper part of the list with header entries (subheader), because the header entries contain their own padding.

List of three rows:

Text Only:
Font for main text: Roboto Regular 16sp
Font for minor text: Roboto Regular 14sp
Height of tile: 88DP
Text padding: 16DP
Add 8DP padding to the top and bottom of the list. A special case is the upper part of the list with header entries (subheader), because the header entries contain their own padding.

Avatar with text:
Font for main text: Roboto Regular 16sp
Font for minor text: Roboto Regular 14sp
Height of tile: 88DP
Left head inner margin: 16DP
Text left padding: 72DP
Text upper and lower inner margin: 16DP
Align the Avatar to the top of the main text.
Add 8DP padding to the top and bottom of the list. A special case is the upper part of the list with header entries (subheader), because the header entries contain their own padding.

Avatar with text and icons:
Font for main text: Roboto Regular 16sp
Font for minor text: Roboto Regular 14sp
Height of tile: 88DP
Left head inner margin: 16DP
Text left padding: 72DP
Text upper and lower inner margin: 16DP
Right side icon padding: 16DP
The Avatar and icon align to the top of the main text.
Add 8DP padding to the top and bottom of the list. A special case is the upper part of the list with header entries (subheader), because the header entries contain their own padding.

Menu

A menu is a temporary piece of paper (paper) that is triggered by a button, an action (action), a point (pointer), or another control that contains at least two menu items.
Each menu item is a discrete option or action and can affect the selected button in the app, view, or view.
Menus should not be used as the primary navigation method in your app.

Snackbars and Toasts

Snackbar is a lightweight feedback mechanism for operations, often in the form of a small pop-up box that appears below the screen of the phone or on the lower left side of the desktop. They appear at the top of all layers of the screen, including floating action buttons.

They will automatically disappear after a timeout or when the user touches the other part of the screen. Snackbar can slide off on the screen. When they appear, they do not block the user's input on the screen and do not support input. The screen can only be a Snackbar at most.

Android also provides a capsule-like tip-box Toast that is primarily used to prompt system messages. Toasts are very similar to Snackbar, but toast does not contain actions and cannot be slid off the screen.

Mobile-Snackbar:

Single-line Snackbar height: DP
Multi-line Snackbar Height: DP
Text: Roboto Regular sp
Action button: Roboto Medium sp, uppercase text
Default background fill color: #323232 100%

Android Toast:

The developer can customize the Toast and its location on the screen. If you intend to customize the Toast, it is strongly recommended to follow the Snackbar style described above.

Subtitle

A subtitle is a special list block that paints a list or different parts of the grid, usually related to the current filter or sort criteria.

Subtitles can be displayed inline in chunks, or can be associated with content, for example, in adjacent grouped lists.

During scrolling, the subtitle remains fixed at the top of the screen, unless the screen is toggled or replaced by another subtitle.

To improve the visual effect of grouped content, you can use system colors to display subheadings.

List subtitle
The block height is 48DP.

Subtitle font is Roboto Medium 14sp.

The subtitle should be left-aligned with the avatar or icon in the list, unless that place has an advanced action (promoted action).

Grid subtitle
The block height is 48DP.

Subtitle font is Roboto Medium 14sp.

The subtitle is 16dp away from the left edge.

Tabs

In one app, tabs makes it easy to explore and switch between different views and functions and to explore different categories of data.

Usage
tab is used to display the grouped content that is associated. The tab tag is used to briefly describe the content.

Specifications:
Fixed and full screen width
Tab width: 1/3 of the screen
Indicator height of the active tab: 2 DP
Text: SP Roboto Medium
The text is centered in the tab
Active text color: secondary color in #fff or color selection (details visible color)
Unavailable text color: #fff 60%

Scrollable:
Tab Width: dp + text width + DP
Indicator height of the active tab: 2 DP
Text: SP Roboto Medium
Active text color: secondary color in #fff or color selection
Unavailable text color: #fff 60%

text box

The text box allows the user to enter text. They can be single-line, with or without scroll bars, or multiple lines, with an icon. Click the text box to display the cursor and automatically display the keyboard. In addition to input, text boxes can perform other tasks, such as text selection (cut, copy, paste), and automatic search of data.
The text box can have different input types. The input type determines what characters are allowed in the text box, and some may prompt the virtual keyboard and adjust its layout to display the most commonly used characters. Common types include numbers, text, email addresses, phone numbers, personal names, usernames, URLs, street addresses, credit card numbers, PIN codes, and search queries.

Light theme:

Prompt and input font: Roboto Regular sp
Input frame Height: DP
Top and bottom padding of text: DP
Text field delimited padding: 8 dp

Light theme with icons:

Prompt and input font: Roboto Regular sp
Input frame Height: DP
Top and bottom padding of text: DP
Text field delimited padding: 8 dp

Finally read, we develop their own application, can refer to the above specifications, the actual development is certainly in accordance with the decision of the product manager, here also do not spit groove, leave work.

Knowledge of the UI that Android developers should know