Improved code for changing theme

This commit is contained in:
59436419 2017-02-27 17:25:15 +05:30
parent c2fcae7c43
commit d17496f720
24 changed files with 538 additions and 534 deletions

View File

@ -32,10 +32,10 @@ android {
dependencies {
testCompile 'junit:junit:4.12'
compile 'com.android.support:appcompat-v7:25.1.1'
compile 'com.android.support:support-v4:25.1.1'
compile 'com.android.support:design:25.1.1'
compile 'com.android.support:recyclerview-v7:25.1.1'
compile 'com.android.support:appcompat-v7:25.1.0'
compile 'com.android.support:support-v4:25.1.0'
compile 'com.android.support:design:25.1.0'
compile 'com.android.support:recyclerview-v7:25.1.0'
compile 'org.jsoup:jsoup:1.8.3'
compile 'org.mozilla:rhino:1.7.7'
compile 'info.guardianproject.netcipher:netcipher:1.2'

View File

@ -4,7 +4,6 @@ import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.os.Handler;
import android.preference.PreferenceManager;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
@ -30,9 +29,9 @@ import org.schabi.newpipe.extractor.exceptions.ParsingException;
import org.schabi.newpipe.info_list.InfoItemBuilder;
import org.schabi.newpipe.info_list.InfoListAdapter;
import org.schabi.newpipe.report.ErrorActivity;
import org.schabi.newpipe.util.ThemeHelper;
import java.io.IOException;
import java.util.Objects;
/**
* Copyright (C) Christian Schabesberger 2016 <chris.schabesberger@mailbox.org>
@ -55,13 +54,11 @@ import java.util.Objects;
public class ChannelActivity extends AppCompatActivity {
private static final String TAG = ChannelActivity.class.toString();
private View rootView = null;
// intent const
public static final String CHANNEL_URL = "channel_url";
public static final String SERVICE_ID = "service_id";
private static final String TAG = ChannelActivity.class.toString();
private View rootView = null;
private int serviceId = -1;
private String channelUrl = "";
private int pageNumber = 0;
@ -73,12 +70,8 @@ public class ChannelActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
if (PreferenceManager.getDefaultSharedPreferences(this)
.getString("theme", getResources().getString(R.string.light_theme_title)).
equals(getResources().getString(R.string.dark_theme_title))) {
setTheme(R.style.DarkTheme_NoActionBar);
}
super.onCreate(savedInstanceState);
ThemeHelper.setTheme(this, false);
setContentView(R.layout.activity_channel);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
rootView = findViewById(R.id.rootView);

View File

@ -2,15 +2,17 @@ package org.schabi.newpipe;
import android.content.Intent;
import android.media.AudioManager;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.NavUtils;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import org.schabi.newpipe.settings.SettingsActivity;
import org.schabi.newpipe.util.PermissionHelper;
import org.schabi.newpipe.util.ThemeHelper;
/**
* Created by Christian Schabesberger on 02.08.16.
@ -32,13 +34,14 @@ import org.schabi.newpipe.util.PermissionHelper;
* along with NewPipe. If not, see <http://www.gnu.org/licenses/>.
*/
public class MainActivity extends ThemableActivity {
public class MainActivity extends AppCompatActivity {
private Fragment mainFragment = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ThemeHelper.setTheme(this, true);
setContentView(R.layout.activity_main);
setVolumeControlStream(AudioManager.STREAM_MUSIC);
mainFragment = getSupportFragmentManager()
@ -49,7 +52,6 @@ public class MainActivity extends ThemableActivity {
public boolean onCreateOptionsMenu(Menu menu) {
super.onCreateOptionsMenu(menu);
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.main_menu, menu);
return true;
}

View File

@ -1,19 +0,0 @@
package org.schabi.newpipe;
import android.os.Build;
import android.os.Bundle;
import android.preference.PreferenceManager;
import android.support.v7.app.AppCompatActivity;
public class ThemableActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (PreferenceManager.getDefaultSharedPreferences(this)
.getString("theme", getResources().getString(R.string.light_theme_title)).
equals(getResources().getString(R.string.dark_theme_title))) {
setTheme(R.style.DarkTheme);
}
}
}

View File

@ -5,17 +5,17 @@ import android.media.AudioManager;
import android.os.Bundle;
import android.preference.PreferenceManager;
import android.support.v4.app.NavUtils;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;
import org.schabi.newpipe.App;
import org.schabi.newpipe.MainActivity;
import org.schabi.newpipe.R;
import org.schabi.newpipe.ThemableActivity;
import org.schabi.newpipe.extractor.NewPipe;
import org.schabi.newpipe.extractor.StreamingService;
import org.schabi.newpipe.util.ThemeHelper;
import java.util.Collection;
import java.util.HashSet;
@ -39,7 +39,7 @@ import java.util.HashSet;
* along with NewPipe. If not, see <http://www.gnu.org/licenses/>.
*/
public class VideoItemDetailActivity extends ThemableActivity {
public class VideoItemDetailActivity extends AppCompatActivity {
/**
* Removes invisible separators (\p{Z}) and punctuation characters including
@ -55,8 +55,36 @@ public class VideoItemDetailActivity extends ThemableActivity {
private String videoUrl;
private int currentStreamingService = -1;
private static String removeHeadingGibberish(final String input) {
int start = 0;
for (int i = input.indexOf("://") - 1; i >= 0; i--) {
if (!input.substring(i, i + 1).matches("\\p{L}")) {
start = i + 1;
break;
}
}
return input.substring(start, input.length());
}
private static String trim(final String input) {
if (input == null || input.length() < 1) {
return input;
} else {
String output = input;
while (output.length() > 0 && output.substring(0, 1).matches(REGEX_REMOVE_FROM_URL)) {
output = output.substring(1);
}
while (output.length() > 0
&& output.substring(output.length() - 1, output.length()).matches(REGEX_REMOVE_FROM_URL)) {
output = output.substring(0, output.length() - 1);
}
return output;
}
}
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ThemeHelper.setTheme(this, true);
setContentView(R.layout.activity_videoitem_detail);
setVolumeControlStream(AudioManager.STREAM_MUSIC);
// Show the Up button in the action bar.
@ -193,33 +221,6 @@ public class VideoItemDetailActivity extends ThemableActivity {
return result.toArray(new String[result.size()]);
}
private static String removeHeadingGibberish(final String input) {
int start = 0;
for (int i = input.indexOf("://") - 1; i >= 0; i--) {
if (!input.substring(i, i + 1).matches("\\p{L}")) {
start = i + 1;
break;
}
}
return input.substring(start, input.length());
}
private static String trim(final String input) {
if (input == null || input.length() < 1) {
return input;
} else {
String output = input;
while (output.length() > 0 && output.substring(0, 1).matches(REGEX_REMOVE_FROM_URL)) {
output = output.substring(1);
}
while (output.length() > 0
&& output.substring(output.length() - 1, output.length()).matches(REGEX_REMOVE_FROM_URL)) {
output = output.substring(0, output.length() - 1);
}
return output;
}
}
private int getServiceIdByUrl(String url) {
StreamingService[] serviceList = NewPipe.getServices();
int service = -1;

View File

@ -3,18 +3,15 @@ package org.schabi.newpipe.download;
import android.annotation.TargetApi;
import android.app.AlertDialog;
import android.app.FragmentTransaction;
import android.content.ComponentName;
import android.content.Context;
import android.content.Intent;
import android.content.ServiceConnection;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.os.IBinder;
import android.preference.PreferenceManager;
import android.support.v4.app.NavUtils;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuInflater;
@ -28,32 +25,28 @@ import android.widget.SeekBar;
import android.widget.TextView;
import android.widget.Toast;
import org.schabi.newpipe.ThemableActivity;
import org.schabi.newpipe.report.ErrorActivity;
import org.schabi.newpipe.R;
import org.schabi.newpipe.report.ErrorActivity;
import org.schabi.newpipe.settings.NewPipeSettings;
import org.schabi.newpipe.settings.SettingsActivity;
import org.schabi.newpipe.util.ThemeHelper;
import java.io.File;
import java.util.Vector;
import us.shandian.giga.get.DownloadManager;
import us.shandian.giga.service.DownloadManagerService;
import us.shandian.giga.ui.fragment.AllMissionsFragment;
import us.shandian.giga.ui.fragment.MissionsFragment;
import us.shandian.giga.util.CrashHandler;
import us.shandian.giga.util.Utility;
public class DownloadActivity extends ThemableActivity implements AdapterView.OnItemClickListener{
public class DownloadActivity extends AppCompatActivity implements AdapterView.OnItemClickListener {
public static final String INTENT_DOWNLOAD = "us.shandian.giga.intent.DOWNLOAD";
public static final String INTENT_LIST = "us.shandian.giga.intent.LIST";
private static final String TAG = DownloadActivity.class.toString();
public static final String THREADS = "threads";
private static final String TAG = DownloadActivity.class.toString();
private MissionsFragment mFragment;
@ -72,9 +65,9 @@ public class DownloadActivity extends ThemableActivity implements AdapterView.On
startService(i);
super.onCreate(savedInstanceState);
ThemeHelper.setTheme(this, true);
setContentView(R.layout.activity_downloader);
//noinspection ConstantConditions
// its ok if this fails, we will catch that error later, and send it as report

View File

@ -1,5 +1,3 @@
package org.schabi.newpipe.report;
import android.app.Activity;
@ -8,14 +6,15 @@ import android.content.Intent;
import android.graphics.Color;
import android.net.Uri;
import android.os.Build;
import android.os.Bundle;
import android.os.Handler;
import android.os.Parcel;
import android.os.Parcelable;
import android.preference.PreferenceManager;
import android.support.design.widget.Snackbar;
import android.support.v4.app.NavUtils;
import android.support.v7.app.ActionBar;
import android.os.Bundle;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.Menu;
import android.view.MenuInflater;
@ -34,8 +33,8 @@ import org.schabi.newpipe.BuildConfig;
import org.schabi.newpipe.Downloader;
import org.schabi.newpipe.MainActivity;
import org.schabi.newpipe.R;
import org.schabi.newpipe.ThemableActivity;
import org.schabi.newpipe.extractor.Parser;
import org.schabi.newpipe.util.ThemeHelper;
import java.io.PrintWriter;
import java.io.StringWriter;
@ -65,65 +64,12 @@ import java.util.Vector;
* along with NewPipe. If not, see <http://www.gnu.org/licenses/>.
*/
public class ErrorActivity extends ThemableActivity {
public static class ErrorInfo implements Parcelable {
public int userAction;
public String request;
public String serviceName;
public int message;
public static ErrorInfo make(int userAction, String serviceName, String request, int message) {
ErrorInfo info = new ErrorInfo();
info.userAction = userAction;
info.serviceName = serviceName;
info.request = request;
info.message = message;
return info;
}
@Override
public int describeContents() {
return 0;
}
@Override
public void writeToParcel(Parcel dest, int flags) {
dest.writeInt(this.userAction);
dest.writeString(this.request);
dest.writeString(this.serviceName);
dest.writeInt(this.message);
}
public ErrorInfo() {
}
protected ErrorInfo(Parcel in) {
this.userAction = in.readInt();
this.request = in.readString();
this.serviceName = in.readString();
this.message = in.readInt();
}
public static final Parcelable.Creator<ErrorInfo> CREATOR = new Parcelable.Creator<ErrorInfo>() {
@Override
public ErrorInfo createFromParcel(Parcel source) {
return new ErrorInfo(source);
}
@Override
public ErrorInfo[] newArray(int size) {
return new ErrorInfo[size];
}
};
}
public class ErrorActivity extends AppCompatActivity {
// LOG TAGS
public static final String TAG = ErrorActivity.class.toString();
// BUNDLE TAGS
public static final String ERROR_INFO = "error_info";
public static final String ERROR_LIST = "error_list";
// MESSAGE ID
public static final int SEARCHED = 0;
public static final int REQUESTED_STREAM = 1;
@ -133,7 +79,6 @@ public class ErrorActivity extends ThemableActivity {
public static final int LOAD_IMAGE = 5;
public static final int UI_ERROR = 6;
public static final int REQUESTED_CHANNEL = 7;
// MESSAGE STRING
public static final String SEARCHED_STRING = "searched";
public static final String REQUESTED_STREAM_STRING = "requested stream";
@ -143,17 +88,14 @@ public class ErrorActivity extends ThemableActivity {
public static final String LOAD_IMAGE_STRING = "load image";
public static final String UI_ERROR_STRING = "ui error";
public static final String REQUESTED_CHANNEL_STRING = "requested channel";
public static final String ERROR_EMAIL_ADDRESS = "crashreport@newpipe.schabi.org";
public static final String ERROR_EMAIL_SUBJECT = "Exception in NewPipe " + BuildConfig.VERSION_NAME;
Thread globIpRangeThread;
private String[] errorList;
private ErrorInfo errorInfo;
private Class returnActivity;
private String currentTimeStamp;
private String globIpRange;
Thread globIpRangeThread;
// views
private TextView errorView;
private EditText userCommentBox;
@ -238,9 +180,26 @@ public class ErrorActivity extends ThemableActivity {
context.startActivity(intent);
}
private static String getStackTrace(final Throwable throwable) {
final StringWriter sw = new StringWriter();
final PrintWriter pw = new PrintWriter(sw, true);
throwable.printStackTrace(pw);
return sw.getBuffer().toString();
}
// errorList to StringList
private static String[] elToSl(List<Throwable> stackTraces) {
String[] out = new String[stackTraces.size()];
for (int i = 0; i < stackTraces.size(); i++) {
out[i] = getStackTrace(stackTraces.get(i));
}
return out;
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ThemeHelper.setTheme(this, true);
setContentView(R.layout.activity_error);
Intent intent = getIntent();
@ -325,13 +284,6 @@ public class ErrorActivity extends ThemableActivity {
return false;
}
private static String getStackTrace(final Throwable throwable) {
final StringWriter sw = new StringWriter();
final PrintWriter pw = new PrintWriter(sw, true);
throwable.printStackTrace(pw);
return sw.getBuffer().toString();
}
private String formErrorText(String[] el) {
String text = "";
if(el != null) {
@ -468,6 +420,56 @@ public class ErrorActivity extends ThemableActivity {
return df.format(new Date());
}
public static class ErrorInfo implements Parcelable {
public static final Parcelable.Creator<ErrorInfo> CREATOR = new Parcelable.Creator<ErrorInfo>() {
@Override
public ErrorInfo createFromParcel(Parcel source) {
return new ErrorInfo(source);
}
@Override
public ErrorInfo[] newArray(int size) {
return new ErrorInfo[size];
}
};
public int userAction;
public String request;
public String serviceName;
public int message;
public ErrorInfo() {
}
protected ErrorInfo(Parcel in) {
this.userAction = in.readInt();
this.request = in.readString();
this.serviceName = in.readString();
this.message = in.readInt();
}
public static ErrorInfo make(int userAction, String serviceName, String request, int message) {
ErrorInfo info = new ErrorInfo();
info.userAction = userAction;
info.serviceName = serviceName;
info.request = request;
info.message = message;
return info;
}
@Override
public int describeContents() {
return 0;
}
@Override
public void writeToParcel(Parcel dest, int flags) {
dest.writeInt(this.userAction);
dest.writeString(this.request);
dest.writeString(this.serviceName);
dest.writeInt(this.message);
}
}
private class IpRagneRequester implements Runnable {
Handler h = new Handler();
public void run() {
@ -487,8 +489,6 @@ public class ErrorActivity extends ThemableActivity {
}
}
private class IpRageReturnRunnable implements Runnable {
String ipRange;
public IpRageReturnRunnable(String ipRange) {
@ -504,13 +504,4 @@ public class ErrorActivity extends ThemableActivity {
}
}
}
// errorList to StringList
private static String[] elToSl(List<Throwable> stackTraces) {
String[] out = new String[stackTraces.size()];
for(int i = 0; i < stackTraces.size(); i++) {
out[i] = getStackTrace(stackTraces.get(i));
}
return out;
}
}

View File

@ -5,7 +5,6 @@ import android.content.Intent;
import android.content.res.Configuration;
import android.os.Bundle;
import android.preference.PreferenceActivity;
import android.preference.PreferenceManager;
import android.support.annotation.LayoutRes;
import android.support.annotation.NonNull;
import android.support.v7.app.ActionBar;
@ -16,8 +15,7 @@ import android.view.View;
import android.view.ViewGroup;
import org.schabi.newpipe.R;
import java.util.Objects;
import org.schabi.newpipe.util.ThemeHelper;
/**
@ -41,16 +39,16 @@ import java.util.Objects;
*/
public class SettingsActivity extends PreferenceActivity {
private AppCompatDelegate mDelegate = null;
SettingsFragment f = new SettingsFragment();
private AppCompatDelegate mDelegate = null;
public static void initSettings(Context context) {
NewPipeSettings.initSettings(context);
}
@Override
protected void onCreate(Bundle savedInstanceBundle) {
if (PreferenceManager.getDefaultSharedPreferences(this)
.getString("theme", getResources().getString(R.string.light_theme_title)).
equals(getResources().getString(R.string.dark_theme_title))) {
setTheme(R.style.DarkTheme);
}
ThemeHelper.setTheme(this, true);
getDelegate().installViewFactory();
getDelegate().onCreate(savedInstanceBundle);
super.onCreate(savedInstanceBundle);
@ -156,8 +154,4 @@ public class SettingsActivity extends PreferenceActivity {
}
return true;
}
public static void initSettings(Context context) {
NewPipeSettings.initSettings(context);
}
}

View File

@ -1,14 +1,12 @@
package org.schabi.newpipe.settings;
import android.app.Activity;
import android.app.ListActivity;
import android.content.ClipData;
import android.content.Intent;
import android.content.SharedPreferences;
import android.net.Uri;
import android.os.Build;
import android.os.Bundle;
import android.preference.CheckBoxPreference;
import android.preference.ListPreference;
import android.preference.Preference;
import android.preference.PreferenceFragment;
@ -21,7 +19,6 @@ import org.schabi.newpipe.App;
import org.schabi.newpipe.R;
import java.util.ArrayList;
import java.util.Objects;
import info.guardianproject.netcipher.proxy.OrbotHelper;
@ -48,8 +45,8 @@ import info.guardianproject.netcipher.proxy.OrbotHelper;
public class SettingsFragment extends PreferenceFragment
implements SharedPreferences.OnSharedPreferenceChangeListener
{
public static final int REQUEST_INSTALL_ORBOT = 0x1234;
SharedPreferences.OnSharedPreferenceChangeListener prefListener;
// get keys
String DEFAULT_RESOLUTION_PREFERENCE;
String DEFAULT_AUDIO_FORMAT_PREFERENCE;
@ -58,9 +55,6 @@ public class SettingsFragment extends PreferenceFragment
String DOWNLOAD_PATH_AUDIO_PREFERENCE;
String USE_TOR_KEY;
String THEME;
public static final int REQUEST_INSTALL_ORBOT = 0x1234;
private ListPreference defaultResolutionPreference;
private ListPreference defaultAudioFormatPreference;
private ListPreference searchLanguagePreference;

View File

@ -0,0 +1,31 @@
package org.schabi.newpipe.util;
import android.content.Context;
import android.preference.PreferenceManager;
import org.schabi.newpipe.R;
public class ThemeHelper {
public static void setTheme(Context context, boolean mode) {
// mode is true for normal theme, false for no action bar theme.
String themeKey = context.getString(R.string.theme_key);
//String lightTheme = context.getResources().getString(R.string.light_theme_title);
String darkTheme = context.getResources().getString(R.string.dark_theme_title);
String blackTheme = context.getResources().getString(R.string.black_theme_title);
String sp = PreferenceManager.getDefaultSharedPreferences(context)
.getString(themeKey, context.getResources().getString(R.string.light_theme_title));
if (mode) {
if (sp.equals(darkTheme)) context.setTheme(R.style.DarkTheme);
else if (sp.equals(blackTheme)) context.setTheme(R.style.BlackTheme);
else context.setTheme(R.style.AppTheme);
} else {
if (sp.equals(darkTheme)) context.setTheme(R.style.DarkTheme_NoActionBar);
else if (sp.equals(blackTheme)) context.setTheme(R.style.BlackTheme_NoActionBar);
else context.setTheme(R.style.AppTheme_NoActionBar);
}
}
}

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

@ -2,7 +2,7 @@
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="?android:attr/windowBackground"/>
android:drawable="windowBackground"/>
<item>
<bitmap

View File

@ -169,16 +169,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.
@ -187,13 +187,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.
@ -202,13 +202,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.
@ -217,12 +217,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.
@ -231,12 +231,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.
@ -245,8 +245,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.
@ -255,10 +255,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).
@ -267,16 +267,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.
@ -285,17 +285,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

@ -49,6 +49,7 @@
<string name="light_theme_title">Light</string>
<string name="dark_theme_title">Dark</string>
<string name="black_theme_title">Black</string>
<string name="theme_applied_message">Theme will be applied on next launch.</string>
<string name="download_dialog_title">Download</string>
<string-array name="download_options">

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" />