Merge remote-tracking branch 'origin/master'

This commit is contained in:
Weblate 2017-03-01 12:45:58 +01:00
commit 8ed86261ef
47 changed files with 1606 additions and 858 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="?android:windowBackground"/>
<item>
<bitmap
android:gravity="center"
android:src="@mipmap/ic_launcher"/>
</item>
</layer-list>

View file

@ -1,9 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="?android:attr/windowBackground"/>
<item>
<bitmap
android:gravity="center"

View file

@ -0,0 +1,79 @@
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="@+id/channel_header_layout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="@+id/channel_banner_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:scaleType="center"
android:src="@drawable/channel_banner"
android:background="@android:color/black"
android:adjustViewBounds="true"/>
<RelativeLayout
android:id="@+id/channel_avatar_layout"
android:layout_alignTop="@id/channel_banner_image"
android:layout_width="@dimen/channel_avatar_halo_size"
android:layout_height="@dimen/channel_avatar_halo_size"
android:layout_marginLeft="20dp"
android:layout_marginStart="20dp"
android:layout_marginTop="60dp">
<ImageView
android:id="@+id/channel_avatar_halo"
android:layout_width="@dimen/channel_avatar_halo_size"
android:layout_height="@dimen/channel_avatar_halo_size"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:src="@drawable/white_circle" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/channel_avatar_view"
android:layout_width="@dimen/channel_avatar_size"
android:layout_height="@dimen/channel_avatar_size"
android:src="@drawable/buddy"
android:layout_centerInParent="true"/>
</RelativeLayout>
<TextView
android:id="@+id/channel_title_view"
android:layout_below="@id/channel_banner_image"
android:layout_toEndOf="@id/channel_avatar_layout"
android:layout_toRightOf="@id/channel_avatar_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_marginStart="4dp"
android:textSize="@dimen/video_item_detail_title_text_size"
android:textAppearance="?android:attr/textAppearanceLarge"/>
<LinearLayout
android:id="@+id/channel_subscriber_layout"
android:layout_below="@id/channel_banner_image"
android:layout_toEndOf="@id/channel_title_view"
android:layout_toRightOf="@id/channel_title_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/channel_subscribe_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/subscribe"
android:layout_marginLeft="4dp"
android:layout_marginStart="4dp"/>
<TextView
android:id="@+id/channel_subscriber_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"/>
</LinearLayout>
</RelativeLayout>

View file

@ -1,81 +1,17 @@
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:id="@+id/rootView"
tools:context="org.schabi.newpipe.ChannelActivity">
android:orientation="vertical"
android:title="Channel">
<android.support.design.widget.AppBarLayout
android:id="@+id/channel_app_bar"
<android.support.v7.widget.RecyclerView
android:id="@+id/channel_streams_view"
android:layout_width="match_parent"
android:layout_height="@dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/channel_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="@color/light_youtube_primary_color"
app:statusBarScrim="@color/light_youtube_dark_color"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/channel_banner_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:background="@color/light_youtube_dark_color"
app:layout_collapseMode="parallax" />
<ImageView
android:id="@+id/channel_avatar_halo"
android:visibility="gone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="28dp"
android:layout_marginStart="28dp"
android:layout_marginTop="38dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:src="@drawable/white_circle"/>
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/channel_avatar_view"
android:visibility="gone"
android:layout_width="@dimen/channel_avatar_size"
android:layout_height="@dimen/channel_avatar_size"
android:src="@drawable/buddy"
android:layout_marginLeft="30dp"
android:layout_marginStart="30dp"
android:layout_marginTop="40dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"/>
<android.support.v7.widget.Toolbar
android:id="@+id/cannel_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:id="@+id/channel_rss_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/fab_margin"
android:src="?attr/rss"
app:layout_anchor="@id/channel_app_bar"
app:layout_anchorGravity="bottom|end" />
android:layout_height="match_parent"
android:background="?android:windowBackground"
android:scrollbars="vertical"/>
<RelativeLayout
android:layout_width="match_parent"
@ -87,11 +23,4 @@
android:layout_centerInParent="true"
android:indeterminate="true"/>
</RelativeLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/channel_streams_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?android:windowBackground"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:scrollbars="vertical"/>
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>

View file

@ -0,0 +1,78 @@
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="@+id/channel_header_layout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="@+id/channel_banner_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:scaleType="center"
android:src="@drawable/channel_banner"
android:background="@android:color/black"
android:adjustViewBounds="true"/>
<RelativeLayout
android:id="@+id/channel_avatar_layout"
android:layout_alignTop="@id/channel_banner_image"
android:layout_width="@dimen/channel_avatar_halo_size"
android:layout_height="@dimen/channel_avatar_halo_size"
android:layout_marginLeft="20dp"
android:layout_marginStart="20dp"
android:layout_marginTop="30dp">
<ImageView
android:id="@+id/channel_avatar_halo"
android:layout_width="@dimen/channel_avatar_halo_size"
android:layout_height="@dimen/channel_avatar_halo_size"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:src="@drawable/white_circle" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/channel_avatar_view"
android:layout_width="@dimen/channel_avatar_size"
android:layout_height="@dimen/channel_avatar_size"
android:src="@drawable/buddy"
android:layout_centerInParent="true"/>
</RelativeLayout>
<TextView
android:id="@+id/channel_title_view"
android:layout_below="@id/channel_banner_image"
android:layout_toEndOf="@id/channel_avatar_layout"
android:layout_toRightOf="@id/channel_avatar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_marginStart="4dp"
android:textSize="@dimen/video_item_detail_title_text_size"
android:textAppearance="?android:attr/textAppearanceLarge"/>
<LinearLayout
android:id="@+id/channel_subscriber_layout"
android:visibility="gone"
android:layout_below="@id/channel_avatar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/channel_subscribe_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/subscribe"
android:layout_marginLeft="4dp"
android:layout_marginStart="4dp"/>
<TextView
android:id="@+id/channel_subscriber_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"/>
</LinearLayout>
</RelativeLayout>

View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical">
<ProgressBar
android:id="@+id/paginate_progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingBottom="10dp"/>
</LinearLayout>

View file

@ -2,6 +2,16 @@
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context="org.schabi.newpipe.ChannelActivity">
<item android:id="@+id/menu_item_openInBrowser"
app:showAsAction="never"
android:title="@string/open_in_browser" />
<item android:id="@+id/menu_item_share"
android:title="@string/share"
app:showAsAction="ifRoom"
android:icon="?attr/share"/>
<item
android:id="@+id/action_settings"
android:orderInCategory="100"

View file

@ -175,16 +175,16 @@
A material metaphor is the unifying theory of a rationalized space and a system of motion.
The material is grounded in tactile reality, inspired by the study of paper and ink, yet
The material is grounded in tactile reality, inspired by the study of paper and ink, yet
technologically advanced and open to imagination and magic.
Surfaces and edges of the material provide visual cues that are grounded in reality. The
use of familiar tactile attributes helps users quickly understand affordances. Yet the
flexibility of the material creates new affordances that supercede those in the physical
Surfaces and edges of the material provide visual cues that are grounded in reality. The
use of familiar tactile attributes helps users quickly understand affordances. Yet the
flexibility of the material creates new affordances that supercede those in the physical
world, without breaking the rules of physics.
The fundamentals of light, surface, and movement are key to conveying how objects move,
interact, and exist in space and in relation to each other. Realistic lighting shows
The fundamentals of light, surface, and movement are key to conveying how objects move,
interact, and exist in space and in relation to each other. Realistic lighting shows
seams, divides space, and indicates moving parts.
@ -193,13 +193,13 @@
The foundational elements of print based design typography, grids, space, scale, color,
and use of imagery guide visual treatments. These elements do far more than please the
eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge to edge
imagery, large scale typography, and intentional white space create a bold and graphic
The foundational elements of print based design typography, grids, space, scale, color,
and use of imagery guide visual treatments. These elements do far more than please the
eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge to edge
imagery, large scale typography, and intentional white space create a bold and graphic
interface that immerse the user in the experience.
An emphasis on user actions makes core functionality immediately apparent and provides
An emphasis on user actions makes core functionality immediately apparent and provides
waypoints for the user.
@ -208,13 +208,13 @@
Motion respects and reinforces the user as the prime mover. Primary user actions are
Motion respects and reinforces the user as the prime mover. Primary user actions are
inflection points that initiate motion, transforming the whole design.
All action takes place in a single environment. Objects are presented to the user without
All action takes place in a single environment. Objects are presented to the user without
breaking the continuity of experience even as they transform and reorganize.
Motion is meaningful and appropriate, serving to focus attention and maintain continuity.
Motion is meaningful and appropriate, serving to focus attention and maintain continuity.
Feedback is subtle yet clear. Transitions are efficient yet coherent.
@ -223,12 +223,12 @@
The material environment is a 3D space, which means all objects have x, y, and z
dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the
positive z-axis extending towards the viewer. Every sheet of material occupies a single
The material environment is a 3D space, which means all objects have x, y, and z
dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the
positive z-axis extending towards the viewer. Every sheet of material occupies a single
position along the z-axis and has a standard 1dp thickness.
On the web, the z-axis is used for layering and not for perspective. The 3D world is
On the web, the z-axis is used for layering and not for perspective. The 3D world is
emulated by manipulating the y-axis.
@ -237,12 +237,12 @@
Within the material environment, virtual lights illuminate the scene. Key lights create
Within the material environment, virtual lights illuminate the scene. Key lights create
directional shadows, while ambient light creates soft shadows from all angles.
Shadows in the material environment are cast by these two light sources. In Android
development, shadows occur when light sources are blocked by sheets of material at
various positions along the z-axis. On the web, shadows are depicted by manipulating the
Shadows in the material environment are cast by these two light sources. In Android
development, shadows occur when light sources are blocked by sheets of material at
various positions along the z-axis. On the web, shadows are depicted by manipulating the
y-axis only. The following example shows the card with a height of 6dp.
@ -251,8 +251,8 @@
All material objects, regardless of size, have a resting elevation, or default elevation
that does not change. If an object changes elevation, it should return to its resting
All material objects, regardless of size, have a resting elevation, or default elevation
that does not change. If an object changes elevation, it should return to its resting
elevation as soon as possible.
@ -261,10 +261,10 @@
The resting elevation for a component type is consistent across apps (e.g., FAB elevation
The resting elevation for a component type is consistent across apps (e.g., FAB elevation
does not vary from 6dp in one app to 16dp in another app).
Components may have different resting elevations across platforms, depending on the depth
Components may have different resting elevations across platforms, depending on the depth
of the environment (e.g., TV has a greater depth than mobile or desktop).
@ -273,16 +273,16 @@
Some component types have responsive elevation, meaning they change elevation in response
to user input (e.g., normal, focused, and pressed) or system events. These elevation
Some component types have responsive elevation, meaning they change elevation in response
to user input (e.g., normal, focused, and pressed) or system events. These elevation
changes are consistently implemented using dynamic elevation offsets.
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
to the components resting state. They ensure that elevation changes are consistent
across actions and component types. For example, all components that lift on press have
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
to the components resting state. They ensure that elevation changes are consistent
across actions and component types. For example, all components that lift on press have
the same elevation change relative to their resting elevation.
Once the input event is completed or cancelled, the component will return to its resting
Once the input event is completed or cancelled, the component will return to its resting
elevation.
@ -291,17 +291,17 @@
Components with responsive elevations may encounter other components as they move between
their resting elevations and dynamic elevation offsets. Because material cannot pass
through other material, components avoid interfering with one another any number of ways,
Components with responsive elevations may encounter other components as they move between
their resting elevations and dynamic elevation offsets. Because material cannot pass
through other material, components avoid interfering with one another any number of ways,
whether on a per component basis or using the entire app layout.
On a component level, components can move or be removed before they cause interference.
For example, a floating action button (FAB) can disappear or move off screen before a
On a component level, components can move or be removed before they cause interference.
For example, a floating action button (FAB) can disappear or move off screen before a
user picks up a card, or it can move if a snackbar appears.
On the layout level, design your app layout to minimize opportunities for interference.
For example, position the FAB to one side of stream of a cards so the FAB wont interfere
On the layout level, design your app layout to minimize opportunities for interference.
For example, position the FAB to one side of stream of a cards so the FAB wont interfere
when a user tries to pick up one of cards.

View file

@ -165,16 +165,16 @@
A material metaphor is the unifying theory of a rationalized space and a system of motion.
The material is grounded in tactile reality, inspired by the study of paper and ink, yet
The material is grounded in tactile reality, inspired by the study of paper and ink, yet
technologically advanced and open to imagination and magic.
Surfaces and edges of the material provide visual cues that are grounded in reality. The
use of familiar tactile attributes helps users quickly understand affordances. Yet the
flexibility of the material creates new affordances that supercede those in the physical
Surfaces and edges of the material provide visual cues that are grounded in reality. The
use of familiar tactile attributes helps users quickly understand affordances. Yet the
flexibility of the material creates new affordances that supercede those in the physical
world, without breaking the rules of physics.
The fundamentals of light, surface, and movement are key to conveying how objects move,
interact, and exist in space and in relation to each other. Realistic lighting shows
The fundamentals of light, surface, and movement are key to conveying how objects move,
interact, and exist in space and in relation to each other. Realistic lighting shows
seams, divides space, and indicates moving parts.
@ -183,13 +183,13 @@
The foundational elements of print based design typography, grids, space, scale, color,
and use of imagery guide visual treatments. These elements do far more than please the
eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge to edge
imagery, large scale typography, and intentional white space create a bold and graphic
The foundational elements of print based design typography, grids, space, scale, color,
and use of imagery guide visual treatments. These elements do far more than please the
eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge to edge
imagery, large scale typography, and intentional white space create a bold and graphic
interface that immerse the user in the experience.
An emphasis on user actions makes core functionality immediately apparent and provides
An emphasis on user actions makes core functionality immediately apparent and provides
waypoints for the user.
@ -198,13 +198,13 @@
Motion respects and reinforces the user as the prime mover. Primary user actions are
Motion respects and reinforces the user as the prime mover. Primary user actions are
inflection points that initiate motion, transforming the whole design.
All action takes place in a single environment. Objects are presented to the user without
All action takes place in a single environment. Objects are presented to the user without
breaking the continuity of experience even as they transform and reorganize.
Motion is meaningful and appropriate, serving to focus attention and maintain continuity.
Motion is meaningful and appropriate, serving to focus attention and maintain continuity.
Feedback is subtle yet clear. Transitions are efficient yet coherent.
@ -213,12 +213,12 @@
The material environment is a 3D space, which means all objects have x, y, and z
dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the
positive z-axis extending towards the viewer. Every sheet of material occupies a single
The material environment is a 3D space, which means all objects have x, y, and z
dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the
positive z-axis extending towards the viewer. Every sheet of material occupies a single
position along the z-axis and has a standard 1dp thickness.
On the web, the z-axis is used for layering and not for perspective. The 3D world is
On the web, the z-axis is used for layering and not for perspective. The 3D world is
emulated by manipulating the y-axis.
@ -227,12 +227,12 @@
Within the material environment, virtual lights illuminate the scene. Key lights create
Within the material environment, virtual lights illuminate the scene. Key lights create
directional shadows, while ambient light creates soft shadows from all angles.
Shadows in the material environment are cast by these two light sources. In Android
development, shadows occur when light sources are blocked by sheets of material at
various positions along the z-axis. On the web, shadows are depicted by manipulating the
Shadows in the material environment are cast by these two light sources. In Android
development, shadows occur when light sources are blocked by sheets of material at
various positions along the z-axis. On the web, shadows are depicted by manipulating the
y-axis only. The following example shows the card with a height of 6dp.
@ -241,8 +241,8 @@
All material objects, regardless of size, have a resting elevation, or default elevation
that does not change. If an object changes elevation, it should return to its resting
All material objects, regardless of size, have a resting elevation, or default elevation
that does not change. If an object changes elevation, it should return to its resting
elevation as soon as possible.
@ -251,10 +251,10 @@
The resting elevation for a component type is consistent across apps (e.g., FAB elevation
The resting elevation for a component type is consistent across apps (e.g., FAB elevation
does not vary from 6dp in one app to 16dp in another app).
Components may have different resting elevations across platforms, depending on the depth
Components may have different resting elevations across platforms, depending on the depth
of the environment (e.g., TV has a greater depth than mobile or desktop).
@ -263,16 +263,16 @@
Some component types have responsive elevation, meaning they change elevation in response
to user input (e.g., normal, focused, and pressed) or system events. These elevation
Some component types have responsive elevation, meaning they change elevation in response
to user input (e.g., normal, focused, and pressed) or system events. These elevation
changes are consistently implemented using dynamic elevation offsets.
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
to the components resting state. They ensure that elevation changes are consistent
across actions and component types. For example, all components that lift on press have
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
to the components resting state. They ensure that elevation changes are consistent
across actions and component types. For example, all components that lift on press have
the same elevation change relative to their resting elevation.
Once the input event is completed or cancelled, the component will return to its resting
Once the input event is completed or cancelled, the component will return to its resting
elevation.
@ -281,17 +281,17 @@
Components with responsive elevations may encounter other components as they move between
their resting elevations and dynamic elevation offsets. Because material cannot pass
through other material, components avoid interfering with one another any number of ways,
Components with responsive elevations may encounter other components as they move between
their resting elevations and dynamic elevation offsets. Because material cannot pass
through other material, components avoid interfering with one another any number of ways,
whether on a per component basis or using the entire app layout.
On a component level, components can move or be removed before they cause interference.
For example, a floating action button (FAB) can disappear or move off screen before a
On a component level, components can move or be removed before they cause interference.
For example, a floating action button (FAB) can disappear or move off screen before a
user picks up a card, or it can move if a snackbar appears.
On the layout level, design your app layout to minimize opportunities for interference.
For example, position the FAB to one side of stream of a cards so the FAB wont interfere
On the layout level, design your app layout to minimize opportunities for interference.
For example, position the FAB to one side of stream of a cards so the FAB wont interfere
when a user tries to pick up one of cards.

View file

@ -157,16 +157,16 @@
A material metaphor is the unifying theory of a rationalized space and a system of motion.
The material is grounded in tactile reality, inspired by the study of paper and ink, yet
The material is grounded in tactile reality, inspired by the study of paper and ink, yet
technologically advanced and open to imagination and magic.
Surfaces and edges of the material provide visual cues that are grounded in reality. The
use of familiar tactile attributes helps users quickly understand affordances. Yet the
flexibility of the material creates new affordances that supercede those in the physical
Surfaces and edges of the material provide visual cues that are grounded in reality. The
use of familiar tactile attributes helps users quickly understand affordances. Yet the
flexibility of the material creates new affordances that supercede those in the physical
world, without breaking the rules of physics.
The fundamentals of light, surface, and movement are key to conveying how objects move,
interact, and exist in space and in relation to each other. Realistic lighting shows
The fundamentals of light, surface, and movement are key to conveying how objects move,
interact, and exist in space and in relation to each other. Realistic lighting shows
seams, divides space, and indicates moving parts.
@ -175,13 +175,13 @@
The foundational elements of print based design typography, grids, space, scale, color,
and use of imagery guide visual treatments. These elements do far more than please the
eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge to edge
imagery, large scale typography, and intentional white space create a bold and graphic
The foundational elements of print based design typography, grids, space, scale, color,
and use of imagery guide visual treatments. These elements do far more than please the
eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge to edge
imagery, large scale typography, and intentional white space create a bold and graphic
interface that immerse the user in the experience.
An emphasis on user actions makes core functionality immediately apparent and provides
An emphasis on user actions makes core functionality immediately apparent and provides
waypoints for the user.
@ -190,13 +190,13 @@
Motion respects and reinforces the user as the prime mover. Primary user actions are
Motion respects and reinforces the user as the prime mover. Primary user actions are
inflection points that initiate motion, transforming the whole design.
All action takes place in a single environment. Objects are presented to the user without
All action takes place in a single environment. Objects are presented to the user without
breaking the continuity of experience even as they transform and reorganize.
Motion is meaningful and appropriate, serving to focus attention and maintain continuity.
Motion is meaningful and appropriate, serving to focus attention and maintain continuity.
Feedback is subtle yet clear. Transitions are efficient yet coherent.
@ -205,12 +205,12 @@
The material environment is a 3D space, which means all objects have x, y, and z
dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the
positive z-axis extending towards the viewer. Every sheet of material occupies a single
The material environment is a 3D space, which means all objects have x, y, and z
dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the
positive z-axis extending towards the viewer. Every sheet of material occupies a single
position along the z-axis and has a standard 1dp thickness.
On the web, the z-axis is used for layering and not for perspective. The 3D world is
On the web, the z-axis is used for layering and not for perspective. The 3D world is
emulated by manipulating the y-axis.
@ -219,12 +219,12 @@
Within the material environment, virtual lights illuminate the scene. Key lights create
Within the material environment, virtual lights illuminate the scene. Key lights create
directional shadows, while ambient light creates soft shadows from all angles.
Shadows in the material environment are cast by these two light sources. In Android
development, shadows occur when light sources are blocked by sheets of material at
various positions along the z-axis. On the web, shadows are depicted by manipulating the
Shadows in the material environment are cast by these two light sources. In Android
development, shadows occur when light sources are blocked by sheets of material at
various positions along the z-axis. On the web, shadows are depicted by manipulating the
y-axis only. The following example shows the card with a height of 6dp.
@ -233,8 +233,8 @@
All material objects, regardless of size, have a resting elevation, or default elevation
that does not change. If an object changes elevation, it should return to its resting
All material objects, regardless of size, have a resting elevation, or default elevation
that does not change. If an object changes elevation, it should return to its resting
elevation as soon as possible.
@ -243,10 +243,10 @@
The resting elevation for a component type is consistent across apps (e.g., FAB elevation
The resting elevation for a component type is consistent across apps (e.g., FAB elevation
does not vary from 6dp in one app to 16dp in another app).
Components may have different resting elevations across platforms, depending on the depth
Components may have different resting elevations across platforms, depending on the depth
of the environment (e.g., TV has a greater depth than mobile or desktop).
@ -255,16 +255,16 @@
Some component types have responsive elevation, meaning they change elevation in response
to user input (e.g., normal, focused, and pressed) or system events. These elevation
Some component types have responsive elevation, meaning they change elevation in response
to user input (e.g., normal, focused, and pressed) or system events. These elevation
changes are consistently implemented using dynamic elevation offsets.
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
to the components resting state. They ensure that elevation changes are consistent
across actions and component types. For example, all components that lift on press have
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
to the components resting state. They ensure that elevation changes are consistent
across actions and component types. For example, all components that lift on press have
the same elevation change relative to their resting elevation.
Once the input event is completed or cancelled, the component will return to its resting
Once the input event is completed or cancelled, the component will return to its resting
elevation.
@ -273,17 +273,17 @@
Components with responsive elevations may encounter other components as they move between
their resting elevations and dynamic elevation offsets. Because material cannot pass
through other material, components avoid interfering with one another any number of ways,
Components with responsive elevations may encounter other components as they move between
their resting elevations and dynamic elevation offsets. Because material cannot pass
through other material, components avoid interfering with one another any number of ways,
whether on a per component basis or using the entire app layout.
On a component level, components can move or be removed before they cause interference.
For example, a floating action button (FAB) can disappear or move off screen before a
On a component level, components can move or be removed before they cause interference.
For example, a floating action button (FAB) can disappear or move off screen before a
user picks up a card, or it can move if a snackbar appears.
On the layout level, design your app layout to minimize opportunities for interference.
For example, position the FAB to one side of stream of a cards so the FAB wont interfere
On the layout level, design your app layout to minimize opportunities for interference.
For example, position the FAB to one side of stream of a cards so the FAB wont interfere
when a user tries to pick up one of cards.

View file

@ -170,16 +170,16 @@
A material metaphor is the unifying theory of a rationalized space and a system of motion.
The material is grounded in tactile reality, inspired by the study of paper and ink, yet
The material is grounded in tactile reality, inspired by the study of paper and ink, yet
technologically advanced and open to imagination and magic.
Surfaces and edges of the material provide visual cues that are grounded in reality. The
use of familiar tactile attributes helps users quickly understand affordances. Yet the
flexibility of the material creates new affordances that supercede those in the physical
Surfaces and edges of the material provide visual cues that are grounded in reality. The
use of familiar tactile attributes helps users quickly understand affordances. Yet the
flexibility of the material creates new affordances that supercede those in the physical
world, without breaking the rules of physics.
The fundamentals of light, surface, and movement are key to conveying how objects move,
interact, and exist in space and in relation to each other. Realistic lighting shows
The fundamentals of light, surface, and movement are key to conveying how objects move,
interact, and exist in space and in relation to each other. Realistic lighting shows
seams, divides space, and indicates moving parts.
@ -188,13 +188,13 @@
The foundational elements of print based design typography, grids, space, scale, color,
and use of imagery guide visual treatments. These elements do far more than please the
eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge to edge
imagery, large scale typography, and intentional white space create a bold and graphic
The foundational elements of print based design typography, grids, space, scale, color,
and use of imagery guide visual treatments. These elements do far more than please the
eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge to edge
imagery, large scale typography, and intentional white space create a bold and graphic
interface that immerse the user in the experience.
An emphasis on user actions makes core functionality immediately apparent and provides
An emphasis on user actions makes core functionality immediately apparent and provides
waypoints for the user.
@ -203,13 +203,13 @@
Motion respects and reinforces the user as the prime mover. Primary user actions are
Motion respects and reinforces the user as the prime mover. Primary user actions are
inflection points that initiate motion, transforming the whole design.
All action takes place in a single environment. Objects are presented to the user without
All action takes place in a single environment. Objects are presented to the user without
breaking the continuity of experience even as they transform and reorganize.
Motion is meaningful and appropriate, serving to focus attention and maintain continuity.
Motion is meaningful and appropriate, serving to focus attention and maintain continuity.
Feedback is subtle yet clear. Transitions are efficient yet coherent.
@ -218,12 +218,12 @@
The material environment is a 3D space, which means all objects have x, y, and z
dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the
positive z-axis extending towards the viewer. Every sheet of material occupies a single
The material environment is a 3D space, which means all objects have x, y, and z
dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the
positive z-axis extending towards the viewer. Every sheet of material occupies a single
position along the z-axis and has a standard 1dp thickness.
On the web, the z-axis is used for layering and not for perspective. The 3D world is
On the web, the z-axis is used for layering and not for perspective. The 3D world is
emulated by manipulating the y-axis.
@ -232,12 +232,12 @@
Within the material environment, virtual lights illuminate the scene. Key lights create
Within the material environment, virtual lights illuminate the scene. Key lights create
directional shadows, while ambient light creates soft shadows from all angles.
Shadows in the material environment are cast by these two light sources. In Android
development, shadows occur when light sources are blocked by sheets of material at
various positions along the z-axis. On the web, shadows are depicted by manipulating the
Shadows in the material environment are cast by these two light sources. In Android
development, shadows occur when light sources are blocked by sheets of material at
various positions along the z-axis. On the web, shadows are depicted by manipulating the
y-axis only. The following example shows the card with a height of 6dp.
@ -246,8 +246,8 @@
All material objects, regardless of size, have a resting elevation, or default elevation
that does not change. If an object changes elevation, it should return to its resting
All material objects, regardless of size, have a resting elevation, or default elevation
that does not change. If an object changes elevation, it should return to its resting
elevation as soon as possible.
@ -256,10 +256,10 @@
The resting elevation for a component type is consistent across apps (e.g., FAB elevation
The resting elevation for a component type is consistent across apps (e.g., FAB elevation
does not vary from 6dp in one app to 16dp in another app).
Components may have different resting elevations across platforms, depending on the depth
Components may have different resting elevations across platforms, depending on the depth
of the environment (e.g., TV has a greater depth than mobile or desktop).
@ -268,16 +268,16 @@
Some component types have responsive elevation, meaning they change elevation in response
to user input (e.g., normal, focused, and pressed) or system events. These elevation
Some component types have responsive elevation, meaning they change elevation in response
to user input (e.g., normal, focused, and pressed) or system events. These elevation
changes are consistently implemented using dynamic elevation offsets.
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
to the components resting state. They ensure that elevation changes are consistent
across actions and component types. For example, all components that lift on press have
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
to the components resting state. They ensure that elevation changes are consistent
across actions and component types. For example, all components that lift on press have
the same elevation change relative to their resting elevation.
Once the input event is completed or cancelled, the component will return to its resting
Once the input event is completed or cancelled, the component will return to its resting
elevation.
@ -286,17 +286,17 @@
Components with responsive elevations may encounter other components as they move between
their resting elevations and dynamic elevation offsets. Because material cannot pass
through other material, components avoid interfering with one another any number of ways,
Components with responsive elevations may encounter other components as they move between
their resting elevations and dynamic elevation offsets. Because material cannot pass
through other material, components avoid interfering with one another any number of ways,
whether on a per component basis or using the entire app layout.
On a component level, components can move or be removed before they cause interference.
For example, a floating action button (FAB) can disappear or move off screen before a
On a component level, components can move or be removed before they cause interference.
For example, a floating action button (FAB) can disappear or move off screen before a
user picks up a card, or it can move if a snackbar appears.
On the layout level, design your app layout to minimize opportunities for interference.
For example, position the FAB to one side of stream of a cards so the FAB wont interfere
On the layout level, design your app layout to minimize opportunities for interference.
For example, position the FAB to one side of stream of a cards so the FAB wont interfere
when a user tries to pick up one of cards.

View file

@ -168,16 +168,16 @@
A material metaphor is the unifying theory of a rationalized space and a system of motion.
The material is grounded in tactile reality, inspired by the study of paper and ink, yet
The material is grounded in tactile reality, inspired by the study of paper and ink, yet
technologically advanced and open to imagination and magic.
Surfaces and edges of the material provide visual cues that are grounded in reality. The
use of familiar tactile attributes helps users quickly understand affordances. Yet the
flexibility of the material creates new affordances that supercede those in the physical
Surfaces and edges of the material provide visual cues that are grounded in reality. The
use of familiar tactile attributes helps users quickly understand affordances. Yet the
flexibility of the material creates new affordances that supercede those in the physical
world, without breaking the rules of physics.
The fundamentals of light, surface, and movement are key to conveying how objects move,
interact, and exist in space and in relation to each other. Realistic lighting shows
The fundamentals of light, surface, and movement are key to conveying how objects move,
interact, and exist in space and in relation to each other. Realistic lighting shows
seams, divides space, and indicates moving parts.
@ -186,13 +186,13 @@
The foundational elements of print based design typography, grids, space, scale, color,
and use of imagery guide visual treatments. These elements do far more than please the
eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge to edge
imagery, large scale typography, and intentional white space create a bold and graphic
The foundational elements of print based design typography, grids, space, scale, color,
and use of imagery guide visual treatments. These elements do far more than please the
eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge to edge
imagery, large scale typography, and intentional white space create a bold and graphic
interface that immerse the user in the experience.
An emphasis on user actions makes core functionality immediately apparent and provides
An emphasis on user actions makes core functionality immediately apparent and provides
waypoints for the user.
@ -201,13 +201,13 @@
Motion respects and reinforces the user as the prime mover. Primary user actions are
Motion respects and reinforces the user as the prime mover. Primary user actions are
inflection points that initiate motion, transforming the whole design.
All action takes place in a single environment. Objects are presented to the user without
All action takes place in a single environment. Objects are presented to the user without
breaking the continuity of experience even as they transform and reorganize.
Motion is meaningful and appropriate, serving to focus attention and maintain continuity.
Motion is meaningful and appropriate, serving to focus attention and maintain continuity.
Feedback is subtle yet clear. Transitions are efficient yet coherent.
@ -216,12 +216,12 @@
The material environment is a 3D space, which means all objects have x, y, and z
dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the
positive z-axis extending towards the viewer. Every sheet of material occupies a single
The material environment is a 3D space, which means all objects have x, y, and z
dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the
positive z-axis extending towards the viewer. Every sheet of material occupies a single
position along the z-axis and has a standard 1dp thickness.
On the web, the z-axis is used for layering and not for perspective. The 3D world is
On the web, the z-axis is used for layering and not for perspective. The 3D world is
emulated by manipulating the y-axis.
@ -230,12 +230,12 @@
Within the material environment, virtual lights illuminate the scene. Key lights create
Within the material environment, virtual lights illuminate the scene. Key lights create
directional shadows, while ambient light creates soft shadows from all angles.
Shadows in the material environment are cast by these two light sources. In Android
development, shadows occur when light sources are blocked by sheets of material at
various positions along the z-axis. On the web, shadows are depicted by manipulating the
Shadows in the material environment are cast by these two light sources. In Android
development, shadows occur when light sources are blocked by sheets of material at
various positions along the z-axis. On the web, shadows are depicted by manipulating the
y-axis only. The following example shows the card with a height of 6dp.
@ -244,8 +244,8 @@
All material objects, regardless of size, have a resting elevation, or default elevation
that does not change. If an object changes elevation, it should return to its resting
All material objects, regardless of size, have a resting elevation, or default elevation
that does not change. If an object changes elevation, it should return to its resting
elevation as soon as possible.
@ -254,10 +254,10 @@
The resting elevation for a component type is consistent across apps (e.g., FAB elevation
The resting elevation for a component type is consistent across apps (e.g., FAB elevation
does not vary from 6dp in one app to 16dp in another app).
Components may have different resting elevations across platforms, depending on the depth
Components may have different resting elevations across platforms, depending on the depth
of the environment (e.g., TV has a greater depth than mobile or desktop).
@ -266,16 +266,16 @@
Some component types have responsive elevation, meaning they change elevation in response
to user input (e.g., normal, focused, and pressed) or system events. These elevation
Some component types have responsive elevation, meaning they change elevation in response
to user input (e.g., normal, focused, and pressed) or system events. These elevation
changes are consistently implemented using dynamic elevation offsets.
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
to the components resting state. They ensure that elevation changes are consistent
across actions and component types. For example, all components that lift on press have
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
to the components resting state. They ensure that elevation changes are consistent
across actions and component types. For example, all components that lift on press have
the same elevation change relative to their resting elevation.
Once the input event is completed or cancelled, the component will return to its resting
Once the input event is completed or cancelled, the component will return to its resting
elevation.
@ -284,17 +284,17 @@
Components with responsive elevations may encounter other components as they move between
their resting elevations and dynamic elevation offsets. Because material cannot pass
through other material, components avoid interfering with one another any number of ways,
Components with responsive elevations may encounter other components as they move between
their resting elevations and dynamic elevation offsets. Because material cannot pass
through other material, components avoid interfering with one another any number of ways,
whether on a per component basis or using the entire app layout.
On a component level, components can move or be removed before they cause interference.
For example, a floating action button (FAB) can disappear or move off screen before a
On a component level, components can move or be removed before they cause interference.
For example, a floating action button (FAB) can disappear or move off screen before a
user picks up a card, or it can move if a snackbar appears.
On the layout level, design your app layout to minimize opportunities for interference.
For example, position the FAB to one side of stream of a cards so the FAB wont interfere
On the layout level, design your app layout to minimize opportunities for interference.
For example, position the FAB to one side of stream of a cards so the FAB wont interfere
when a user tries to pick up one of cards.

View file

@ -163,16 +163,16 @@
A material metaphor is the unifying theory of a rationalized space and a system of motion.
The material is grounded in tactile reality, inspired by the study of paper and ink, yet
The material is grounded in tactile reality, inspired by the study of paper and ink, yet
technologically advanced and open to imagination and magic.
Surfaces and edges of the material provide visual cues that are grounded in reality. The
use of familiar tactile attributes helps users quickly understand affordances. Yet the
flexibility of the material creates new affordances that supercede those in the physical
Surfaces and edges of the material provide visual cues that are grounded in reality. The
use of familiar tactile attributes helps users quickly understand affordances. Yet the
flexibility of the material creates new affordances that supercede those in the physical
world, without breaking the rules of physics.
The fundamentals of light, surface, and movement are key to conveying how objects move,
interact, and exist in space and in relation to each other. Realistic lighting shows
The fundamentals of light, surface, and movement are key to conveying how objects move,
interact, and exist in space and in relation to each other. Realistic lighting shows
seams, divides space, and indicates moving parts.
@ -181,13 +181,13 @@
The foundational elements of print based design typography, grids, space, scale, color,
and use of imagery guide visual treatments. These elements do far more than please the
eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge to edge
imagery, large scale typography, and intentional white space create a bold and graphic
The foundational elements of print based design typography, grids, space, scale, color,
and use of imagery guide visual treatments. These elements do far more than please the
eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge to edge
imagery, large scale typography, and intentional white space create a bold and graphic
interface that immerse the user in the experience.
An emphasis on user actions makes core functionality immediately apparent and provides
An emphasis on user actions makes core functionality immediately apparent and provides
waypoints for the user.
@ -196,13 +196,13 @@
Motion respects and reinforces the user as the prime mover. Primary user actions are
Motion respects and reinforces the user as the prime mover. Primary user actions are
inflection points that initiate motion, transforming the whole design.
All action takes place in a single environment. Objects are presented to the user without
All action takes place in a single environment. Objects are presented to the user without
breaking the continuity of experience even as they transform and reorganize.
Motion is meaningful and appropriate, serving to focus attention and maintain continuity.
Motion is meaningful and appropriate, serving to focus attention and maintain continuity.
Feedback is subtle yet clear. Transitions are efficient yet coherent.
@ -211,12 +211,12 @@
The material environment is a 3D space, which means all objects have x, y, and z
dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the
positive z-axis extending towards the viewer. Every sheet of material occupies a single
The material environment is a 3D space, which means all objects have x, y, and z
dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the
positive z-axis extending towards the viewer. Every sheet of material occupies a single
position along the z-axis and has a standard 1dp thickness.
On the web, the z-axis is used for layering and not for perspective. The 3D world is
On the web, the z-axis is used for layering and not for perspective. The 3D world is
emulated by manipulating the y-axis.
@ -225,12 +225,12 @@
Within the material environment, virtual lights illuminate the scene. Key lights create
Within the material environment, virtual lights illuminate the scene. Key lights create
directional shadows, while ambient light creates soft shadows from all angles.
Shadows in the material environment are cast by these two light sources. In Android
development, shadows occur when light sources are blocked by sheets of material at
various positions along the z-axis. On the web, shadows are depicted by manipulating the
Shadows in the material environment are cast by these two light sources. In Android
development, shadows occur when light sources are blocked by sheets of material at
various positions along the z-axis. On the web, shadows are depicted by manipulating the
y-axis only. The following example shows the card with a height of 6dp.
@ -239,8 +239,8 @@
All material objects, regardless of size, have a resting elevation, or default elevation
that does not change. If an object changes elevation, it should return to its resting
All material objects, regardless of size, have a resting elevation, or default elevation
that does not change. If an object changes elevation, it should return to its resting
elevation as soon as possible.
@ -249,10 +249,10 @@
The resting elevation for a component type is consistent across apps (e.g., FAB elevation
The resting elevation for a component type is consistent across apps (e.g., FAB elevation
does not vary from 6dp in one app to 16dp in another app).
Components may have different resting elevations across platforms, depending on the depth
Components may have different resting elevations across platforms, depending on the depth
of the environment (e.g., TV has a greater depth than mobile or desktop).
@ -261,16 +261,16 @@
Some component types have responsive elevation, meaning they change elevation in response
to user input (e.g., normal, focused, and pressed) or system events. These elevation
Some component types have responsive elevation, meaning they change elevation in response
to user input (e.g., normal, focused, and pressed) or system events. These elevation
changes are consistently implemented using dynamic elevation offsets.
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
to the components resting state. They ensure that elevation changes are consistent
across actions and component types. For example, all components that lift on press have
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
to the components resting state. They ensure that elevation changes are consistent
across actions and component types. For example, all components that lift on press have
the same elevation change relative to their resting elevation.
Once the input event is completed or cancelled, the component will return to its resting
Once the input event is completed or cancelled, the component will return to its resting
elevation.
@ -279,17 +279,17 @@
Components with responsive elevations may encounter other components as they move between
their resting elevations and dynamic elevation offsets. Because material cannot pass
through other material, components avoid interfering with one another any number of ways,
Components with responsive elevations may encounter other components as they move between
their resting elevations and dynamic elevation offsets. Because material cannot pass
through other material, components avoid interfering with one another any number of ways,
whether on a per component basis or using the entire app layout.
On a component level, components can move or be removed before they cause interference.
For example, a floating action button (FAB) can disappear or move off screen before a
On a component level, components can move or be removed before they cause interference.
For example, a floating action button (FAB) can disappear or move off screen before a
user picks up a card, or it can move if a snackbar appears.
On the layout level, design your app layout to minimize opportunities for interference.
For example, position the FAB to one side of stream of a cards so the FAB wont interfere
On the layout level, design your app layout to minimize opportunities for interference.
For example, position the FAB to one side of stream of a cards so the FAB wont interfere
when a user tries to pick up one of cards.

View file

@ -164,16 +164,16 @@
A material metaphor is the unifying theory of a rationalized space and a system of motion.
The material is grounded in tactile reality, inspired by the study of paper and ink, yet
The material is grounded in tactile reality, inspired by the study of paper and ink, yet
technologically advanced and open to imagination and magic.
Surfaces and edges of the material provide visual cues that are grounded in reality. The
use of familiar tactile attributes helps users quickly understand affordances. Yet the
flexibility of the material creates new affordances that supercede those in the physical
Surfaces and edges of the material provide visual cues that are grounded in reality. The
use of familiar tactile attributes helps users quickly understand affordances. Yet the
flexibility of the material creates new affordances that supercede those in the physical
world, without breaking the rules of physics.
The fundamentals of light, surface, and movement are key to conveying how objects move,
interact, and exist in space and in relation to each other. Realistic lighting shows
The fundamentals of light, surface, and movement are key to conveying how objects move,
interact, and exist in space and in relation to each other. Realistic lighting shows
seams, divides space, and indicates moving parts.
@ -182,13 +182,13 @@
The foundational elements of print based design typography, grids, space, scale, color,
and use of imagery guide visual treatments. These elements do far more than please the
eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge to edge
imagery, large scale typography, and intentional white space create a bold and graphic
The foundational elements of print based design typography, grids, space, scale, color,
and use of imagery guide visual treatments. These elements do far more than please the
eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge to edge
imagery, large scale typography, and intentional white space create a bold and graphic
interface that immerse the user in the experience.
An emphasis on user actions makes core functionality immediately apparent and provides
An emphasis on user actions makes core functionality immediately apparent and provides
waypoints for the user.
@ -197,13 +197,13 @@
Motion respects and reinforces the user as the prime mover. Primary user actions are
Motion respects and reinforces the user as the prime mover. Primary user actions are
inflection points that initiate motion, transforming the whole design.
All action takes place in a single environment. Objects are presented to the user without
All action takes place in a single environment. Objects are presented to the user without
breaking the continuity of experience even as they transform and reorganize.
Motion is meaningful and appropriate, serving to focus attention and maintain continuity.
Motion is meaningful and appropriate, serving to focus attention and maintain continuity.
Feedback is subtle yet clear. Transitions are efficient yet coherent.
@ -212,12 +212,12 @@
The material environment is a 3D space, which means all objects have x, y, and z
dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the
positive z-axis extending towards the viewer. Every sheet of material occupies a single
The material environment is a 3D space, which means all objects have x, y, and z
dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the
positive z-axis extending towards the viewer. Every sheet of material occupies a single
position along the z-axis and has a standard 1dp thickness.
On the web, the z-axis is used for layering and not for perspective. The 3D world is
On the web, the z-axis is used for layering and not for perspective. The 3D world is
emulated by manipulating the y-axis.
@ -226,12 +226,12 @@
Within the material environment, virtual lights illuminate the scene. Key lights create
Within the material environment, virtual lights illuminate the scene. Key lights create
directional shadows, while ambient light creates soft shadows from all angles.
Shadows in the material environment are cast by these two light sources. In Android
development, shadows occur when light sources are blocked by sheets of material at
various positions along the z-axis. On the web, shadows are depicted by manipulating the
Shadows in the material environment are cast by these two light sources. In Android
development, shadows occur when light sources are blocked by sheets of material at
various positions along the z-axis. On the web, shadows are depicted by manipulating the
y-axis only. The following example shows the card with a height of 6dp.
@ -240,8 +240,8 @@
All material objects, regardless of size, have a resting elevation, or default elevation
that does not change. If an object changes elevation, it should return to its resting
All material objects, regardless of size, have a resting elevation, or default elevation
that does not change. If an object changes elevation, it should return to its resting
elevation as soon as possible.
@ -250,10 +250,10 @@
The resting elevation for a component type is consistent across apps (e.g., FAB elevation
The resting elevation for a component type is consistent across apps (e.g., FAB elevation
does not vary from 6dp in one app to 16dp in another app).
Components may have different resting elevations across platforms, depending on the depth
Components may have different resting elevations across platforms, depending on the depth
of the environment (e.g., TV has a greater depth than mobile or desktop).
@ -262,16 +262,16 @@
Some component types have responsive elevation, meaning they change elevation in response
to user input (e.g., normal, focused, and pressed) or system events. These elevation
Some component types have responsive elevation, meaning they change elevation in response
to user input (e.g., normal, focused, and pressed) or system events. These elevation
changes are consistently implemented using dynamic elevation offsets.
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
to the components resting state. They ensure that elevation changes are consistent
across actions and component types. For example, all components that lift on press have
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
to the components resting state. They ensure that elevation changes are consistent
across actions and component types. For example, all components that lift on press have
the same elevation change relative to their resting elevation.
Once the input event is completed or cancelled, the component will return to its resting
Once the input event is completed or cancelled, the component will return to its resting
elevation.
@ -280,17 +280,17 @@
Components with responsive elevations may encounter other components as they move between
their resting elevations and dynamic elevation offsets. Because material cannot pass
through other material, components avoid interfering with one another any number of ways,
Components with responsive elevations may encounter other components as they move between
their resting elevations and dynamic elevation offsets. Because material cannot pass
through other material, components avoid interfering with one another any number of ways,
whether on a per component basis or using the entire app layout.
On a component level, components can move or be removed before they cause interference.
For example, a floating action button (FAB) can disappear or move off screen before a
On a component level, components can move or be removed before they cause interference.
For example, a floating action button (FAB) can disappear or move off screen before a
user picks up a card, or it can move if a snackbar appears.
On the layout level, design your app layout to minimize opportunities for interference.
For example, position the FAB to one side of stream of a cards so the FAB wont interfere
On the layout level, design your app layout to minimize opportunities for interference.
For example, position the FAB to one side of stream of a cards so the FAB wont interfere
when a user tries to pick up one of cards.

View file

@ -161,16 +161,16 @@
Materiál metafora je zjednocujúci teórie racionálne priestoru a systém pohybu.
Materiál je zakotvená v taktilné skutočnosti, inšpirované štúdiom papiera a atramentu, ale napriek tomu
Materiál je zakotvená v taktilné skutočnosti, inšpirované štúdiom papiera a atramentu, ale napriek tomu
technologicky pokročilé a otvorené fantáziu a mágiu.
Povrchy a hrany materiálu poskytujú vizuálnu pokyny, ktoré sú zakotvené v realite.
Použitie známych hmatových vlastností, pomáha používateľom rýchlo pochopiť affordances. napriek tomu
Pružnosť materiálu vytvára nové affordances že nadradené tie fyzické
Povrchy a hrany materiálu poskytujú vizuálnu pokyny, ktoré sú zakotvené v realite.
Použitie známych hmatových vlastností, pomáha používateľom rýchlo pochopiť affordances. napriek tomu
Pružnosť materiálu vytvára nové affordances že nadradené tie fyzické
svet bez toho, aby porušenie pravidiel fyziky.
Základy svetla, povrchu a pohyb sú kľúčom k dopravovanie, ako sa objekty pohybovať,
komunikovať, a existujú v priestore a vo vzťahu k sebe navzájom. Realistické svetelné šou
Základy svetla, povrchu a pohyb sú kľúčom k dopravovanie, ako sa objekty pohybovať,
komunikovať, a existujú v priestore a vo vzťahu k sebe navzájom. Realistické svetelné šou
švy, rozdeľuje priestor, a indikuje pohyblivých častí.
@ -179,13 +179,13 @@
Foundational prvky tlače na dizajn typografie, rošty, priestor, mierka, farby,
a používanie metafor riadiť vizuálne procedúry. Tieto prvky robiť oveľa viac, než potešiť
oko. Vytvárajú hierarchie, zmysel a zameranie. výber farieb úmyselné, od okraja k okraju
snímok, rozsiahle typografie a úmyselné biely priestor vytvoriť tučný a grafický
Foundational prvky tlače na dizajn typografie, rošty, priestor, mierka, farby,
a používanie metafor riadiť vizuálne procedúry. Tieto prvky robiť oveľa viac, než potešiť
oko. Vytvárajú hierarchie, zmysel a zameranie. výber farieb úmyselné, od okraja k okraju
snímok, rozsiahle typografie a úmyselné biely priestor vytvoriť tučný a grafický
rozhranie, ktoré ponorí užívateľov v zážitku.
Dôraz na užívateľských akcií činí základné funkcie okamžite zrejmé a poskytuje
Dôraz na užívateľských akcií činí základné funkcie okamžite zrejmé a poskytuje
waypointy pre užívateľov.
@ -194,13 +194,13 @@
Návrh rešpektuje a posilňuje užívateľa ako hnacia sila. Primárne akcie užívateľa sú
Návrh rešpektuje a posilňuje užívateľa ako hnacia sila. Primárne akcie užívateľa sú
inflexné body, ktoré iniciujú pohyb, transformáciu celej konštrukcie.
Celá akcia prebieha v jedinom prostredí. Objekty sú prezentované užívateľovi bez toho,
Celá akcia prebieha v jedinom prostredí. Objekty sú prezentované užívateľovi bez toho,
prelomenie kontinuity skúseností, aj keď ich transformáciu a reorganizáciu.
Pohyb je zmysluplné a vhodné, slúžiace sústrediť pozornosť a zachovanie kontinuity.
Pohyb je zmysluplné a vhodné, slúžiace sústrediť pozornosť a zachovanie kontinuity.
Spätná väzba je jemné, ale napriek tomu jasné. Prechody sú ef fi točné ešte koherentné.
@ -209,12 +209,12 @@
Materiál prostredie je 3D priestore, čo znamená, že všetky objekty majú X, Y, a Z
rozmery. Os je kolmo zarovnaný k rovine zobrazenie, s
kladná os rozširuje smerom k divákovi. Každý list materiálu, umiestnené v jednom
Materiál prostredie je 3D priestore, čo znamená, že všetky objekty majú X, Y, a Z
rozmery. Os je kolmo zarovnaný k rovine zobrazenie, s
kladná os rozširuje smerom k divákovi. Každý list materiálu, umiestnené v jednom
poloha pozdĺž osi a má štandardnú hrúbku 1DP.
Na webe, os sa používa pre vrstvenie a nie pre perspektívy. 3D svet
Na webe, os sa používa pre vrstvenie a nie pre perspektívy. 3D svet
emuloval tým, že manipuluje os y.
@ -223,12 +223,12 @@
V hmotnom prostredí, virtuálne svetlá osvetľujú scénu. Kľúčové svetla vytvárajú
V hmotnom prostredí, virtuálne svetlá osvetľujú scénu. Kľúčové svetla vytvárajú
smerové tiene, zatiaľ čo okolité svetlo vytvára mäkké tiene zo všetkých strán.
Tiene v hmotnom prostredí sú obsadené týmito dvoma svetelnými zdrojmi. v Android
vývoj, dochádza tiene, keď sú svetelné zdroje blokované plechového materiálu, na
Rôzne pozície pozdĺž osi. Na webe tiene sú znázornené manipuláciou
Tiene v hmotnom prostredí sú obsadené týmito dvoma svetelnými zdrojmi. v Android
vývoj, dochádza tiene, keď sú svetelné zdroje blokované plechového materiálu, na
Rôzne pozície pozdĺž osi. Na webe tiene sú znázornené manipuláciou
Iba os y. Nasledujúci príklad ukazuje kartu s výškou 6dp.
@ -237,8 +237,8 @@
Všetky významné objekty, bez ohľadu na ich veľkosť, majú výšku odpočíva, alebo predvolené výšku
to nič nemení. V prípade, že objekt sa mení výšku, mal by sa vrátiť do svojej pokojovej
Všetky významné objekty, bez ohľadu na ich veľkosť, majú výšku odpočíva, alebo predvolené výšku
to nič nemení. V prípade, že objekt sa mení výšku, mal by sa vrátiť do svojej pokojovej
nadmorskej výšky čo najskôr.
@ -247,10 +247,10 @@
Pokojová nadmorská výška pre typ komponentu je konzistentné naprieč aplikáciami (napr FAB elevácie
Pokojová nadmorská výška pre typ komponentu je konzistentné naprieč aplikáciami (napr FAB elevácie
nelíši od 6dp v jednej aplikácii na 16dp v inej aplikácii).
Zložky môžu mať rôzne pokojovej výšky medzi platformami, v závislosti od hĺbky
Zložky môžu mať rôzne pokojovej výšky medzi platformami, v závislosti od hĺbky
životného prostredia (napr televízor má väčšiu hĺbku, ako mobilný telefón alebo plochy).
@ -259,16 +259,16 @@
Niektoré typy komponentov majú citlivejší výšku, čo znamená, že meniť výšku v odozve
na vstup používateľa (napríklad normálny priebeh, sa zameral, a lisované), alebo systémové udalosti. tieto elevácie
Niektoré typy komponentov majú citlivejší výšku, čo znamená, že meniť výšku v odozve
na vstup používateľa (napríklad normálny priebeh, sa zameral, a lisované), alebo systémové udalosti. tieto elevácie
Zmeny sa vykonávali dôsledne používať dynamické výškové posuny.
Dynamické výškové posuny sú cieľom nadmorská výška, ktorá zložka sa pohybuje smerom, relatívna
do pokojového stavu súčasti. Zaisťujú, že zmeny elevácie sú v súlade
naprieč akcií a typov komponentov. Napríklad všetky súčasti, ktoré vlek na lise majú
Dynamické výškové posuny sú cieľom nadmorská výška, ktorá zložka sa pohybuje smerom, relatívna
do pokojového stavu súčasti. Zaisťujú, že zmeny elevácie sú v súlade
naprieč akcií a typov komponentov. Napríklad všetky súčasti, ktoré vlek na lise majú
rovnaká zmena prevýšenie vo vzťahu k ich prevýšenie odpočinku.
Akonáhle je vstupná udalosť dokončenie alebo zrušená, bude zložka vráti do svojej pokojovej
Akonáhle je vstupná udalosť dokončenie alebo zrušená, bude zložka vráti do svojej pokojovej
nadmorská výška.
@ -277,17 +277,17 @@
Zložky s citlivými nadmorských výškach môže stretnúť s ďalšími komponentmi, ako sa pohybovať medzi
ich odpočinku vyvýšeniny a dynamické výškové odsadenie. Vzhľadom k tomu, materiál nemôže prejsť
prostredníctvom iného materiálu, komponenty nenarušovať spolu navzájom nejakom množstvo ciest,
Zložky s citlivými nadmorských výškach môže stretnúť s ďalšími komponentmi, ako sa pohybovať medzi
ich odpočinku vyvýšeniny a dynamické výškové odsadenie. Vzhľadom k tomu, materiál nemôže prejsť
prostredníctvom iného materiálu, komponenty nenarušovať spolu navzájom nejakom množstvo ciest,
či už na úrovni jednotlivých komponentov alebo s použitím kompletné rozloženie aplikácie.
Na úrovni komponentov môžu zložky presunúť alebo odstrániť skôr, než spôsobia rušenie.
Napríklad tlačidlo plávajúce akcie (FAB) môžu zmiznúť alebo presunúť mimo obrazovku pred
Na úrovni komponentov môžu zložky presunúť alebo odstrániť skôr, než spôsobia rušenie.
Napríklad tlačidlo plávajúce akcie (FAB) môžu zmiznúť alebo presunúť mimo obrazovku pred
Užívateľ zdvihne kartu, alebo sa môže pohybovať, ak sa objaví snackbar.
Na úrovni Usporiadanie, riešenie rozvrhnutie aplikácie, aby sa minimalizovalo príležitostí k rušeniu.
Napríklad, umiestnenie FAB na jednej strane prúdu niekoľkých kariet, takže FAB nebude zasahovať
Na úrovni Usporiadanie, riešenie rozvrhnutie aplikácie, aby sa minimalizovalo príležitostí k rušeniu.
Napríklad, umiestnenie FAB na jednej strane prúdu niekoľkých kariet, takže FAB nebude zasahovať
ak sa užívateľ pokúsi vyzdvihnúť jednu z kariet.

View file

@ -170,16 +170,16 @@
A material metaphor is the unifying theory of a rationalized space and a system of motion.
The material is grounded in tactile reality, inspired by the study of paper and ink, yet
The material is grounded in tactile reality, inspired by the study of paper and ink, yet
technologically advanced and open to imagination and magic.
Surfaces and edges of the material provide visual cues that are grounded in reality. The
use of familiar tactile attributes helps users quickly understand affordances. Yet the
flexibility of the material creates new affordances that supercede those in the physical
Surfaces and edges of the material provide visual cues that are grounded in reality. The
use of familiar tactile attributes helps users quickly understand affordances. Yet the
flexibility of the material creates new affordances that supercede those in the physical
world, without breaking the rules of physics.
The fundamentals of light, surface, and movement are key to conveying how objects move,
interact, and exist in space and in relation to each other. Realistic lighting shows
The fundamentals of light, surface, and movement are key to conveying how objects move,
interact, and exist in space and in relation to each other. Realistic lighting shows
seams, divides space, and indicates moving parts.
@ -188,13 +188,13 @@
The foundational elements of print based design typography, grids, space, scale, color,
and use of imagery guide visual treatments. These elements do far more than please the
eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge to edge
imagery, large scale typography, and intentional white space create a bold and graphic
The foundational elements of print based design typography, grids, space, scale, color,
and use of imagery guide visual treatments. These elements do far more than please the
eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge to edge
imagery, large scale typography, and intentional white space create a bold and graphic
interface that immerse the user in the experience.
An emphasis on user actions makes core functionality immediately apparent and provides
An emphasis on user actions makes core functionality immediately apparent and provides
waypoints for the user.
@ -203,13 +203,13 @@
Motion respects and reinforces the user as the prime mover. Primary user actions are
Motion respects and reinforces the user as the prime mover. Primary user actions are
inflection points that initiate motion, transforming the whole design.
All action takes place in a single environment. Objects are presented to the user without
All action takes place in a single environment. Objects are presented to the user without
breaking the continuity of experience even as they transform and reorganize.
Motion is meaningful and appropriate, serving to focus attention and maintain continuity.
Motion is meaningful and appropriate, serving to focus attention and maintain continuity.
Feedback is subtle yet clear. Transitions are efficient yet coherent.
@ -218,12 +218,12 @@
The material environment is a 3D space, which means all objects have x, y, and z
dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the
positive z-axis extending towards the viewer. Every sheet of material occupies a single
The material environment is a 3D space, which means all objects have x, y, and z
dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the
positive z-axis extending towards the viewer. Every sheet of material occupies a single
position along the z-axis and has a standard 1dp thickness.
On the web, the z-axis is used for layering and not for perspective. The 3D world is
On the web, the z-axis is used for layering and not for perspective. The 3D world is
emulated by manipulating the y-axis.
@ -232,12 +232,12 @@
Within the material environment, virtual lights illuminate the scene. Key lights create
Within the material environment, virtual lights illuminate the scene. Key lights create
directional shadows, while ambient light creates soft shadows from all angles.
Shadows in the material environment are cast by these two light sources. In Android
development, shadows occur when light sources are blocked by sheets of material at
various positions along the z-axis. On the web, shadows are depicted by manipulating the
Shadows in the material environment are cast by these two light sources. In Android
development, shadows occur when light sources are blocked by sheets of material at
various positions along the z-axis. On the web, shadows are depicted by manipulating the
y-axis only. The following example shows the card with a height of 6dp.
@ -246,8 +246,8 @@
All material objects, regardless of size, have a resting elevation, or default elevation
that does not change. If an object changes elevation, it should return to its resting
All material objects, regardless of size, have a resting elevation, or default elevation
that does not change. If an object changes elevation, it should return to its resting
elevation as soon as possible.
@ -256,10 +256,10 @@
The resting elevation for a component type is consistent across apps (e.g., FAB elevation
The resting elevation for a component type is consistent across apps (e.g., FAB elevation
does not vary from 6dp in one app to 16dp in another app).
Components may have different resting elevations across platforms, depending on the depth
Components may have different resting elevations across platforms, depending on the depth
of the environment (e.g., TV has a greater depth than mobile or desktop).
@ -268,16 +268,16 @@
Some component types have responsive elevation, meaning they change elevation in response
to user input (e.g., normal, focused, and pressed) or system events. These elevation
Some component types have responsive elevation, meaning they change elevation in response
to user input (e.g., normal, focused, and pressed) or system events. These elevation
changes are consistently implemented using dynamic elevation offsets.
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
to the components resting state. They ensure that elevation changes are consistent
across actions and component types. For example, all components that lift on press have
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
to the components resting state. They ensure that elevation changes are consistent
across actions and component types. For example, all components that lift on press have
the same elevation change relative to their resting elevation.
Once the input event is completed or cancelled, the component will return to its resting
Once the input event is completed or cancelled, the component will return to its resting
elevation.
@ -286,17 +286,17 @@
Components with responsive elevations may encounter other components as they move between
their resting elevations and dynamic elevation offsets. Because material cannot pass
through other material, components avoid interfering with one another any number of ways,
Components with responsive elevations may encounter other components as they move between
their resting elevations and dynamic elevation offsets. Because material cannot pass
through other material, components avoid interfering with one another any number of ways,
whether on a per component basis or using the entire app layout.
On a component level, components can move or be removed before they cause interference.
For example, a floating action button (FAB) can disappear or move off screen before a
On a component level, components can move or be removed before they cause interference.
For example, a floating action button (FAB) can disappear or move off screen before a
user picks up a card, or it can move if a snackbar appears.
On the layout level, design your app layout to minimize opportunities for interference.
For example, position the FAB to one side of stream of a cards so the FAB wont interfere
On the layout level, design your app layout to minimize opportunities for interference.
For example, position the FAB to one side of stream of a cards so the FAB wont interfere
when a user tries to pick up one of cards.

View file

@ -29,10 +29,12 @@
<string-array name="theme_description_list">
<item>@string/light_theme_title</item>
<item>@string/dark_theme_title</item>
<item>@string/black_theme_title</item>
</string-array>
<string-array name="theme_list">
<item>@string/light_theme_title</item>
<item>@string/dark_theme_title</item>
<item>@string/black_theme_title</item>
</string-array>
<string name="default_audio_format_key" translatable="false">default_audio_format</string>

View file

@ -86,6 +86,8 @@
<string name="error_report_title">Error report</string>
<string name="all">All</string>
<string name="channel">Channel</string>
<string name="yes">Yes</string>
<string name="later">Later</string>
<!-- error strings -->
<string name="general_error">Error</string>
@ -151,10 +153,12 @@
<string name="use_exoplayer_summary">Experimental</string>
<string name="videos">videos</string>
<string name="subscriber">subscriber</string>
<string name="subscribe">Subscribe</string>
<string name="views">views</string>
<string name="short_thousand">T</string>
<string name="short_thousand">K</string>
<string name="short_million">M</string>
<string name="short_billion">B</string>
<string name="restart_title">Restart</string>
<!-- Missions -->
<string name="start">Start</string>
@ -183,6 +187,7 @@
<string name="msg_wait">Please wait…</string>
<string name="msg_copied">Copied to clipboard.</string>
<string name="no_available_dir">Please select an available download directory.</string>
<string name="msg_restart">You have to restart the application to apply the theme.\n\nDo you want to restart now?</string>
<!-- Checksum types -->
<string name="md5" translatable="false">MD5</string>

View file

@ -49,6 +49,10 @@
<item name="rss">@drawable/ic_rss_feed_black_24dp</item>
</style>
<style name="BlackTheme" parent="DarkTheme">
<item name="android:windowBackground">@color/black</item>
</style>
<style name="NewPipeActionbarTheme" parent="Widget.AppCompat.Light.ActionBar.Solid">
<item name="android:displayOptions">showHome</item>
<item name="displayOptions">showHome</item>
@ -107,6 +111,11 @@
<item name="windowNoTitle">true</item>
</style>
<style name="BlackTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />