Improved code for changing theme
This commit is contained in:
parent
c2fcae7c43
commit
d17496f720
|
@ -32,10 +32,10 @@ android {
|
||||||
|
|
||||||
dependencies {
|
dependencies {
|
||||||
testCompile 'junit:junit:4.12'
|
testCompile 'junit:junit:4.12'
|
||||||
compile 'com.android.support:appcompat-v7:25.1.1'
|
compile 'com.android.support:appcompat-v7:25.1.0'
|
||||||
compile 'com.android.support:support-v4:25.1.1'
|
compile 'com.android.support:support-v4:25.1.0'
|
||||||
compile 'com.android.support:design:25.1.1'
|
compile 'com.android.support:design:25.1.0'
|
||||||
compile 'com.android.support:recyclerview-v7:25.1.1'
|
compile 'com.android.support:recyclerview-v7:25.1.0'
|
||||||
compile 'org.jsoup:jsoup:1.8.3'
|
compile 'org.jsoup:jsoup:1.8.3'
|
||||||
compile 'org.mozilla:rhino:1.7.7'
|
compile 'org.mozilla:rhino:1.7.7'
|
||||||
compile 'info.guardianproject.netcipher:netcipher:1.2'
|
compile 'info.guardianproject.netcipher:netcipher:1.2'
|
||||||
|
|
|
@ -4,7 +4,6 @@ import android.content.Intent;
|
||||||
import android.net.Uri;
|
import android.net.Uri;
|
||||||
import android.os.Bundle;
|
import android.os.Bundle;
|
||||||
import android.os.Handler;
|
import android.os.Handler;
|
||||||
import android.preference.PreferenceManager;
|
|
||||||
import android.support.design.widget.CollapsingToolbarLayout;
|
import android.support.design.widget.CollapsingToolbarLayout;
|
||||||
import android.support.design.widget.FloatingActionButton;
|
import android.support.design.widget.FloatingActionButton;
|
||||||
import android.support.v7.app.AppCompatActivity;
|
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.InfoItemBuilder;
|
||||||
import org.schabi.newpipe.info_list.InfoListAdapter;
|
import org.schabi.newpipe.info_list.InfoListAdapter;
|
||||||
import org.schabi.newpipe.report.ErrorActivity;
|
import org.schabi.newpipe.report.ErrorActivity;
|
||||||
|
import org.schabi.newpipe.util.ThemeHelper;
|
||||||
|
|
||||||
import java.io.IOException;
|
import java.io.IOException;
|
||||||
import java.util.Objects;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Copyright (C) Christian Schabesberger 2016 <chris.schabesberger@mailbox.org>
|
* Copyright (C) Christian Schabesberger 2016 <chris.schabesberger@mailbox.org>
|
||||||
|
@ -55,13 +54,11 @@ import java.util.Objects;
|
||||||
public class ChannelActivity extends AppCompatActivity {
|
public class ChannelActivity extends AppCompatActivity {
|
||||||
|
|
||||||
|
|
||||||
private static final String TAG = ChannelActivity.class.toString();
|
|
||||||
private View rootView = null;
|
|
||||||
|
|
||||||
// intent const
|
// intent const
|
||||||
public static final String CHANNEL_URL = "channel_url";
|
public static final String CHANNEL_URL = "channel_url";
|
||||||
public static final String SERVICE_ID = "service_id";
|
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 int serviceId = -1;
|
||||||
private String channelUrl = "";
|
private String channelUrl = "";
|
||||||
private int pageNumber = 0;
|
private int pageNumber = 0;
|
||||||
|
@ -73,12 +70,8 @@ public class ChannelActivity extends AppCompatActivity {
|
||||||
|
|
||||||
@Override
|
@Override
|
||||||
protected void onCreate(Bundle savedInstanceState) {
|
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);
|
super.onCreate(savedInstanceState);
|
||||||
|
ThemeHelper.setTheme(this, false);
|
||||||
setContentView(R.layout.activity_channel);
|
setContentView(R.layout.activity_channel);
|
||||||
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
|
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
|
||||||
rootView = findViewById(R.id.rootView);
|
rootView = findViewById(R.id.rootView);
|
||||||
|
|
|
@ -2,15 +2,17 @@ package org.schabi.newpipe;
|
||||||
|
|
||||||
import android.content.Intent;
|
import android.content.Intent;
|
||||||
import android.media.AudioManager;
|
import android.media.AudioManager;
|
||||||
|
import android.os.Bundle;
|
||||||
import android.support.v4.app.Fragment;
|
import android.support.v4.app.Fragment;
|
||||||
import android.support.v4.app.NavUtils;
|
import android.support.v4.app.NavUtils;
|
||||||
import android.os.Bundle;
|
import android.support.v7.app.AppCompatActivity;
|
||||||
import android.view.Menu;
|
import android.view.Menu;
|
||||||
import android.view.MenuInflater;
|
import android.view.MenuInflater;
|
||||||
import android.view.MenuItem;
|
import android.view.MenuItem;
|
||||||
|
|
||||||
import org.schabi.newpipe.settings.SettingsActivity;
|
import org.schabi.newpipe.settings.SettingsActivity;
|
||||||
import org.schabi.newpipe.util.PermissionHelper;
|
import org.schabi.newpipe.util.PermissionHelper;
|
||||||
|
import org.schabi.newpipe.util.ThemeHelper;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Created by Christian Schabesberger on 02.08.16.
|
* 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/>.
|
* 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;
|
private Fragment mainFragment = null;
|
||||||
|
|
||||||
@Override
|
@Override
|
||||||
protected void onCreate(Bundle savedInstanceState) {
|
protected void onCreate(Bundle savedInstanceState) {
|
||||||
super.onCreate(savedInstanceState);
|
super.onCreate(savedInstanceState);
|
||||||
|
ThemeHelper.setTheme(this, true);
|
||||||
setContentView(R.layout.activity_main);
|
setContentView(R.layout.activity_main);
|
||||||
setVolumeControlStream(AudioManager.STREAM_MUSIC);
|
setVolumeControlStream(AudioManager.STREAM_MUSIC);
|
||||||
mainFragment = getSupportFragmentManager()
|
mainFragment = getSupportFragmentManager()
|
||||||
|
@ -49,7 +52,6 @@ public class MainActivity extends ThemableActivity {
|
||||||
public boolean onCreateOptionsMenu(Menu menu) {
|
public boolean onCreateOptionsMenu(Menu menu) {
|
||||||
super.onCreateOptionsMenu(menu);
|
super.onCreateOptionsMenu(menu);
|
||||||
MenuInflater inflater = getMenuInflater();
|
MenuInflater inflater = getMenuInflater();
|
||||||
|
|
||||||
inflater.inflate(R.menu.main_menu, menu);
|
inflater.inflate(R.menu.main_menu, menu);
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -5,17 +5,17 @@ import android.media.AudioManager;
|
||||||
import android.os.Bundle;
|
import android.os.Bundle;
|
||||||
import android.preference.PreferenceManager;
|
import android.preference.PreferenceManager;
|
||||||
import android.support.v4.app.NavUtils;
|
import android.support.v4.app.NavUtils;
|
||||||
|
import android.support.v7.app.AppCompatActivity;
|
||||||
import android.util.Log;
|
import android.util.Log;
|
||||||
import android.view.Menu;
|
|
||||||
import android.view.MenuItem;
|
import android.view.MenuItem;
|
||||||
import android.widget.Toast;
|
import android.widget.Toast;
|
||||||
|
|
||||||
import org.schabi.newpipe.App;
|
import org.schabi.newpipe.App;
|
||||||
import org.schabi.newpipe.MainActivity;
|
import org.schabi.newpipe.MainActivity;
|
||||||
import org.schabi.newpipe.R;
|
import org.schabi.newpipe.R;
|
||||||
import org.schabi.newpipe.ThemableActivity;
|
|
||||||
import org.schabi.newpipe.extractor.NewPipe;
|
import org.schabi.newpipe.extractor.NewPipe;
|
||||||
import org.schabi.newpipe.extractor.StreamingService;
|
import org.schabi.newpipe.extractor.StreamingService;
|
||||||
|
import org.schabi.newpipe.util.ThemeHelper;
|
||||||
|
|
||||||
import java.util.Collection;
|
import java.util.Collection;
|
||||||
import java.util.HashSet;
|
import java.util.HashSet;
|
||||||
|
@ -39,7 +39,7 @@ import java.util.HashSet;
|
||||||
* along with NewPipe. If not, see <http://www.gnu.org/licenses/>.
|
* 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
|
* Removes invisible separators (\p{Z}) and punctuation characters including
|
||||||
|
@ -55,8 +55,36 @@ public class VideoItemDetailActivity extends ThemableActivity {
|
||||||
private String videoUrl;
|
private String videoUrl;
|
||||||
private int currentStreamingService = -1;
|
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) {
|
protected void onCreate(Bundle savedInstanceState) {
|
||||||
super.onCreate(savedInstanceState);
|
super.onCreate(savedInstanceState);
|
||||||
|
ThemeHelper.setTheme(this, true);
|
||||||
setContentView(R.layout.activity_videoitem_detail);
|
setContentView(R.layout.activity_videoitem_detail);
|
||||||
setVolumeControlStream(AudioManager.STREAM_MUSIC);
|
setVolumeControlStream(AudioManager.STREAM_MUSIC);
|
||||||
// Show the Up button in the action bar.
|
// Show the Up button in the action bar.
|
||||||
|
@ -193,33 +221,6 @@ public class VideoItemDetailActivity extends ThemableActivity {
|
||||||
return result.toArray(new String[result.size()]);
|
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) {
|
private int getServiceIdByUrl(String url) {
|
||||||
StreamingService[] serviceList = NewPipe.getServices();
|
StreamingService[] serviceList = NewPipe.getServices();
|
||||||
int service = -1;
|
int service = -1;
|
||||||
|
|
|
@ -3,18 +3,15 @@ package org.schabi.newpipe.download;
|
||||||
import android.annotation.TargetApi;
|
import android.annotation.TargetApi;
|
||||||
import android.app.AlertDialog;
|
import android.app.AlertDialog;
|
||||||
import android.app.FragmentTransaction;
|
import android.app.FragmentTransaction;
|
||||||
import android.content.ComponentName;
|
|
||||||
import android.content.Context;
|
import android.content.Context;
|
||||||
import android.content.Intent;
|
import android.content.Intent;
|
||||||
import android.content.ServiceConnection;
|
|
||||||
import android.content.SharedPreferences;
|
import android.content.SharedPreferences;
|
||||||
import android.os.Bundle;
|
import android.os.Bundle;
|
||||||
import android.os.IBinder;
|
|
||||||
import android.preference.PreferenceManager;
|
import android.preference.PreferenceManager;
|
||||||
import android.support.v4.app.NavUtils;
|
import android.support.v4.app.NavUtils;
|
||||||
import android.support.v7.app.ActionBar;
|
import android.support.v7.app.ActionBar;
|
||||||
|
import android.support.v7.app.AppCompatActivity;
|
||||||
import android.support.v7.widget.Toolbar;
|
import android.support.v7.widget.Toolbar;
|
||||||
import android.util.Log;
|
|
||||||
import android.view.LayoutInflater;
|
import android.view.LayoutInflater;
|
||||||
import android.view.Menu;
|
import android.view.Menu;
|
||||||
import android.view.MenuInflater;
|
import android.view.MenuInflater;
|
||||||
|
@ -28,32 +25,28 @@ import android.widget.SeekBar;
|
||||||
import android.widget.TextView;
|
import android.widget.TextView;
|
||||||
import android.widget.Toast;
|
import android.widget.Toast;
|
||||||
|
|
||||||
import org.schabi.newpipe.ThemableActivity;
|
|
||||||
import org.schabi.newpipe.report.ErrorActivity;
|
|
||||||
import org.schabi.newpipe.R;
|
import org.schabi.newpipe.R;
|
||||||
|
import org.schabi.newpipe.report.ErrorActivity;
|
||||||
import org.schabi.newpipe.settings.NewPipeSettings;
|
import org.schabi.newpipe.settings.NewPipeSettings;
|
||||||
import org.schabi.newpipe.settings.SettingsActivity;
|
import org.schabi.newpipe.settings.SettingsActivity;
|
||||||
|
import org.schabi.newpipe.util.ThemeHelper;
|
||||||
|
|
||||||
import java.io.File;
|
import java.io.File;
|
||||||
import java.util.Vector;
|
import java.util.Vector;
|
||||||
|
|
||||||
import us.shandian.giga.get.DownloadManager;
|
|
||||||
import us.shandian.giga.service.DownloadManagerService;
|
import us.shandian.giga.service.DownloadManagerService;
|
||||||
import us.shandian.giga.ui.fragment.AllMissionsFragment;
|
import us.shandian.giga.ui.fragment.AllMissionsFragment;
|
||||||
import us.shandian.giga.ui.fragment.MissionsFragment;
|
import us.shandian.giga.ui.fragment.MissionsFragment;
|
||||||
import us.shandian.giga.util.CrashHandler;
|
import us.shandian.giga.util.CrashHandler;
|
||||||
import us.shandian.giga.util.Utility;
|
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_DOWNLOAD = "us.shandian.giga.intent.DOWNLOAD";
|
||||||
|
|
||||||
public static final String INTENT_LIST = "us.shandian.giga.intent.LIST";
|
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";
|
public static final String THREADS = "threads";
|
||||||
|
private static final String TAG = DownloadActivity.class.toString();
|
||||||
|
|
||||||
private MissionsFragment mFragment;
|
private MissionsFragment mFragment;
|
||||||
|
|
||||||
|
|
||||||
|
@ -72,9 +65,9 @@ public class DownloadActivity extends ThemableActivity implements AdapterView.On
|
||||||
startService(i);
|
startService(i);
|
||||||
|
|
||||||
super.onCreate(savedInstanceState);
|
super.onCreate(savedInstanceState);
|
||||||
|
ThemeHelper.setTheme(this, true);
|
||||||
setContentView(R.layout.activity_downloader);
|
setContentView(R.layout.activity_downloader);
|
||||||
|
|
||||||
|
|
||||||
//noinspection ConstantConditions
|
//noinspection ConstantConditions
|
||||||
|
|
||||||
// its ok if this fails, we will catch that error later, and send it as report
|
// its ok if this fails, we will catch that error later, and send it as report
|
||||||
|
|
|
@ -1,5 +1,3 @@
|
||||||
|
|
||||||
|
|
||||||
package org.schabi.newpipe.report;
|
package org.schabi.newpipe.report;
|
||||||
|
|
||||||
import android.app.Activity;
|
import android.app.Activity;
|
||||||
|
@ -8,14 +6,15 @@ import android.content.Intent;
|
||||||
import android.graphics.Color;
|
import android.graphics.Color;
|
||||||
import android.net.Uri;
|
import android.net.Uri;
|
||||||
import android.os.Build;
|
import android.os.Build;
|
||||||
|
import android.os.Bundle;
|
||||||
|
import android.os.Handler;
|
||||||
import android.os.Parcel;
|
import android.os.Parcel;
|
||||||
import android.os.Parcelable;
|
import android.os.Parcelable;
|
||||||
import android.preference.PreferenceManager;
|
import android.preference.PreferenceManager;
|
||||||
import android.support.design.widget.Snackbar;
|
import android.support.design.widget.Snackbar;
|
||||||
import android.support.v4.app.NavUtils;
|
import android.support.v4.app.NavUtils;
|
||||||
import android.support.v7.app.ActionBar;
|
import android.support.v7.app.ActionBar;
|
||||||
import android.os.Bundle;
|
import android.support.v7.app.AppCompatActivity;
|
||||||
import android.os.Handler;
|
|
||||||
import android.util.Log;
|
import android.util.Log;
|
||||||
import android.view.Menu;
|
import android.view.Menu;
|
||||||
import android.view.MenuInflater;
|
import android.view.MenuInflater;
|
||||||
|
@ -34,8 +33,8 @@ import org.schabi.newpipe.BuildConfig;
|
||||||
import org.schabi.newpipe.Downloader;
|
import org.schabi.newpipe.Downloader;
|
||||||
import org.schabi.newpipe.MainActivity;
|
import org.schabi.newpipe.MainActivity;
|
||||||
import org.schabi.newpipe.R;
|
import org.schabi.newpipe.R;
|
||||||
import org.schabi.newpipe.ThemableActivity;
|
|
||||||
import org.schabi.newpipe.extractor.Parser;
|
import org.schabi.newpipe.extractor.Parser;
|
||||||
|
import org.schabi.newpipe.util.ThemeHelper;
|
||||||
|
|
||||||
import java.io.PrintWriter;
|
import java.io.PrintWriter;
|
||||||
import java.io.StringWriter;
|
import java.io.StringWriter;
|
||||||
|
@ -65,65 +64,12 @@ import java.util.Vector;
|
||||||
* along with NewPipe. If not, see <http://www.gnu.org/licenses/>.
|
* along with NewPipe. If not, see <http://www.gnu.org/licenses/>.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
public class ErrorActivity extends ThemableActivity {
|
public class ErrorActivity extends AppCompatActivity {
|
||||||
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];
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// LOG TAGS
|
// LOG TAGS
|
||||||
public static final String TAG = ErrorActivity.class.toString();
|
public static final String TAG = ErrorActivity.class.toString();
|
||||||
|
|
||||||
// BUNDLE TAGS
|
// BUNDLE TAGS
|
||||||
public static final String ERROR_INFO = "error_info";
|
public static final String ERROR_INFO = "error_info";
|
||||||
public static final String ERROR_LIST = "error_list";
|
public static final String ERROR_LIST = "error_list";
|
||||||
|
|
||||||
// MESSAGE ID
|
// MESSAGE ID
|
||||||
public static final int SEARCHED = 0;
|
public static final int SEARCHED = 0;
|
||||||
public static final int REQUESTED_STREAM = 1;
|
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 LOAD_IMAGE = 5;
|
||||||
public static final int UI_ERROR = 6;
|
public static final int UI_ERROR = 6;
|
||||||
public static final int REQUESTED_CHANNEL = 7;
|
public static final int REQUESTED_CHANNEL = 7;
|
||||||
|
|
||||||
// MESSAGE STRING
|
// MESSAGE STRING
|
||||||
public static final String SEARCHED_STRING = "searched";
|
public static final String SEARCHED_STRING = "searched";
|
||||||
public static final String REQUESTED_STREAM_STRING = "requested stream";
|
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 LOAD_IMAGE_STRING = "load image";
|
||||||
public static final String UI_ERROR_STRING = "ui error";
|
public static final String UI_ERROR_STRING = "ui error";
|
||||||
public static final String REQUESTED_CHANNEL_STRING = "requested channel";
|
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_ADDRESS = "crashreport@newpipe.schabi.org";
|
||||||
public static final String ERROR_EMAIL_SUBJECT = "Exception in NewPipe " + BuildConfig.VERSION_NAME;
|
public static final String ERROR_EMAIL_SUBJECT = "Exception in NewPipe " + BuildConfig.VERSION_NAME;
|
||||||
|
Thread globIpRangeThread;
|
||||||
private String[] errorList;
|
private String[] errorList;
|
||||||
private ErrorInfo errorInfo;
|
private ErrorInfo errorInfo;
|
||||||
private Class returnActivity;
|
private Class returnActivity;
|
||||||
private String currentTimeStamp;
|
private String currentTimeStamp;
|
||||||
private String globIpRange;
|
private String globIpRange;
|
||||||
Thread globIpRangeThread;
|
|
||||||
|
|
||||||
// views
|
// views
|
||||||
private TextView errorView;
|
private TextView errorView;
|
||||||
private EditText userCommentBox;
|
private EditText userCommentBox;
|
||||||
|
@ -238,9 +180,26 @@ public class ErrorActivity extends ThemableActivity {
|
||||||
context.startActivity(intent);
|
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
|
@Override
|
||||||
protected void onCreate(Bundle savedInstanceState) {
|
protected void onCreate(Bundle savedInstanceState) {
|
||||||
super.onCreate(savedInstanceState);
|
super.onCreate(savedInstanceState);
|
||||||
|
ThemeHelper.setTheme(this, true);
|
||||||
setContentView(R.layout.activity_error);
|
setContentView(R.layout.activity_error);
|
||||||
|
|
||||||
Intent intent = getIntent();
|
Intent intent = getIntent();
|
||||||
|
@ -325,13 +284,6 @@ public class ErrorActivity extends ThemableActivity {
|
||||||
return false;
|
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) {
|
private String formErrorText(String[] el) {
|
||||||
String text = "";
|
String text = "";
|
||||||
if(el != null) {
|
if(el != null) {
|
||||||
|
@ -468,6 +420,56 @@ public class ErrorActivity extends ThemableActivity {
|
||||||
return df.format(new Date());
|
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 {
|
private class IpRagneRequester implements Runnable {
|
||||||
Handler h = new Handler();
|
Handler h = new Handler();
|
||||||
public void run() {
|
public void run() {
|
||||||
|
@ -487,8 +489,6 @@ public class ErrorActivity extends ThemableActivity {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
private class IpRageReturnRunnable implements Runnable {
|
private class IpRageReturnRunnable implements Runnable {
|
||||||
String ipRange;
|
String ipRange;
|
||||||
public IpRageReturnRunnable(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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,7 +5,6 @@ import android.content.Intent;
|
||||||
import android.content.res.Configuration;
|
import android.content.res.Configuration;
|
||||||
import android.os.Bundle;
|
import android.os.Bundle;
|
||||||
import android.preference.PreferenceActivity;
|
import android.preference.PreferenceActivity;
|
||||||
import android.preference.PreferenceManager;
|
|
||||||
import android.support.annotation.LayoutRes;
|
import android.support.annotation.LayoutRes;
|
||||||
import android.support.annotation.NonNull;
|
import android.support.annotation.NonNull;
|
||||||
import android.support.v7.app.ActionBar;
|
import android.support.v7.app.ActionBar;
|
||||||
|
@ -16,8 +15,7 @@ import android.view.View;
|
||||||
import android.view.ViewGroup;
|
import android.view.ViewGroup;
|
||||||
|
|
||||||
import org.schabi.newpipe.R;
|
import org.schabi.newpipe.R;
|
||||||
|
import org.schabi.newpipe.util.ThemeHelper;
|
||||||
import java.util.Objects;
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -41,16 +39,16 @@ import java.util.Objects;
|
||||||
*/
|
*/
|
||||||
|
|
||||||
public class SettingsActivity extends PreferenceActivity {
|
public class SettingsActivity extends PreferenceActivity {
|
||||||
private AppCompatDelegate mDelegate = null;
|
|
||||||
SettingsFragment f = new SettingsFragment();
|
SettingsFragment f = new SettingsFragment();
|
||||||
|
private AppCompatDelegate mDelegate = null;
|
||||||
|
|
||||||
|
public static void initSettings(Context context) {
|
||||||
|
NewPipeSettings.initSettings(context);
|
||||||
|
}
|
||||||
|
|
||||||
@Override
|
@Override
|
||||||
protected void onCreate(Bundle savedInstanceBundle) {
|
protected void onCreate(Bundle savedInstanceBundle) {
|
||||||
if (PreferenceManager.getDefaultSharedPreferences(this)
|
ThemeHelper.setTheme(this, true);
|
||||||
.getString("theme", getResources().getString(R.string.light_theme_title)).
|
|
||||||
equals(getResources().getString(R.string.dark_theme_title))) {
|
|
||||||
setTheme(R.style.DarkTheme);
|
|
||||||
}
|
|
||||||
getDelegate().installViewFactory();
|
getDelegate().installViewFactory();
|
||||||
getDelegate().onCreate(savedInstanceBundle);
|
getDelegate().onCreate(savedInstanceBundle);
|
||||||
super.onCreate(savedInstanceBundle);
|
super.onCreate(savedInstanceBundle);
|
||||||
|
@ -156,8 +154,4 @@ public class SettingsActivity extends PreferenceActivity {
|
||||||
}
|
}
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
public static void initSettings(Context context) {
|
|
||||||
NewPipeSettings.initSettings(context);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,14 +1,12 @@
|
||||||
package org.schabi.newpipe.settings;
|
package org.schabi.newpipe.settings;
|
||||||
|
|
||||||
import android.app.Activity;
|
import android.app.Activity;
|
||||||
import android.app.ListActivity;
|
|
||||||
import android.content.ClipData;
|
import android.content.ClipData;
|
||||||
import android.content.Intent;
|
import android.content.Intent;
|
||||||
import android.content.SharedPreferences;
|
import android.content.SharedPreferences;
|
||||||
import android.net.Uri;
|
import android.net.Uri;
|
||||||
import android.os.Build;
|
import android.os.Build;
|
||||||
import android.os.Bundle;
|
import android.os.Bundle;
|
||||||
import android.preference.CheckBoxPreference;
|
|
||||||
import android.preference.ListPreference;
|
import android.preference.ListPreference;
|
||||||
import android.preference.Preference;
|
import android.preference.Preference;
|
||||||
import android.preference.PreferenceFragment;
|
import android.preference.PreferenceFragment;
|
||||||
|
@ -21,7 +19,6 @@ import org.schabi.newpipe.App;
|
||||||
import org.schabi.newpipe.R;
|
import org.schabi.newpipe.R;
|
||||||
|
|
||||||
import java.util.ArrayList;
|
import java.util.ArrayList;
|
||||||
import java.util.Objects;
|
|
||||||
|
|
||||||
import info.guardianproject.netcipher.proxy.OrbotHelper;
|
import info.guardianproject.netcipher.proxy.OrbotHelper;
|
||||||
|
|
||||||
|
@ -48,8 +45,8 @@ import info.guardianproject.netcipher.proxy.OrbotHelper;
|
||||||
public class SettingsFragment extends PreferenceFragment
|
public class SettingsFragment extends PreferenceFragment
|
||||||
implements SharedPreferences.OnSharedPreferenceChangeListener
|
implements SharedPreferences.OnSharedPreferenceChangeListener
|
||||||
{
|
{
|
||||||
|
public static final int REQUEST_INSTALL_ORBOT = 0x1234;
|
||||||
SharedPreferences.OnSharedPreferenceChangeListener prefListener;
|
SharedPreferences.OnSharedPreferenceChangeListener prefListener;
|
||||||
|
|
||||||
// get keys
|
// get keys
|
||||||
String DEFAULT_RESOLUTION_PREFERENCE;
|
String DEFAULT_RESOLUTION_PREFERENCE;
|
||||||
String DEFAULT_AUDIO_FORMAT_PREFERENCE;
|
String DEFAULT_AUDIO_FORMAT_PREFERENCE;
|
||||||
|
@ -58,9 +55,6 @@ public class SettingsFragment extends PreferenceFragment
|
||||||
String DOWNLOAD_PATH_AUDIO_PREFERENCE;
|
String DOWNLOAD_PATH_AUDIO_PREFERENCE;
|
||||||
String USE_TOR_KEY;
|
String USE_TOR_KEY;
|
||||||
String THEME;
|
String THEME;
|
||||||
|
|
||||||
public static final int REQUEST_INSTALL_ORBOT = 0x1234;
|
|
||||||
|
|
||||||
private ListPreference defaultResolutionPreference;
|
private ListPreference defaultResolutionPreference;
|
||||||
private ListPreference defaultAudioFormatPreference;
|
private ListPreference defaultAudioFormatPreference;
|
||||||
private ListPreference searchLanguagePreference;
|
private ListPreference searchLanguagePreference;
|
||||||
|
|
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -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>
|
|
@ -2,7 +2,7 @@
|
||||||
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
|
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
|
||||||
|
|
||||||
<item
|
<item
|
||||||
android:drawable="?android:attr/windowBackground"/>
|
android:drawable="windowBackground"/>
|
||||||
|
|
||||||
<item>
|
<item>
|
||||||
<bitmap
|
<bitmap
|
||||||
|
|
|
@ -169,16 +169,16 @@
|
||||||
|
|
||||||
|
|
||||||
A material metaphor is the unifying theory of a rationalized space and a system of motion.
|
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.
|
technologically advanced and open to imagination and magic.
|
||||||
|
|
||||||
Surfaces and edges of the material provide visual cues that are grounded in reality. The
|
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
|
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
|
flexibility of the material creates new affordances that supercede those in the physical
|
||||||
world, without breaking the rules of physics.
|
world, without breaking the rules of physics.
|
||||||
|
|
||||||
The fundamentals of light, surface, and movement are key to conveying how objects move,
|
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
|
interact, and exist in space and in relation to each other. Realistic lighting shows
|
||||||
seams, divides space, and indicates moving parts.
|
seams, divides space, and indicates moving parts.
|
||||||
|
|
||||||
|
|
||||||
|
@ -187,13 +187,13 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
The foundational elements of print based design typography, grids, space, scale, color,
|
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
|
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
|
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
|
imagery, large scale typography, and intentional white space create a bold and graphic
|
||||||
interface that immerse the user in the experience.
|
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.
|
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.
|
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.
|
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.
|
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
|
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
|
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
|
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.
|
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.
|
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.
|
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
|
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
|
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
|
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.
|
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
|
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
|
that does not change. If an object changes elevation, it should return to its resting
|
||||||
elevation as soon as possible.
|
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).
|
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).
|
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
|
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
|
to user input (e.g., normal, focused, and pressed) or system events. These elevation
|
||||||
changes are consistently implemented using dynamic elevation offsets.
|
changes are consistently implemented using dynamic elevation offsets.
|
||||||
|
|
||||||
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
|
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
|
||||||
to the component’s resting state. They ensure that elevation changes are consistent
|
to the component’s resting state. They ensure that elevation changes are consistent
|
||||||
across actions and component types. For example, all components that lift on press have
|
across actions and component types. For example, all components that lift on press have
|
||||||
the same elevation change relative to their resting elevation.
|
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.
|
elevation.
|
||||||
|
|
||||||
|
|
||||||
|
@ -285,17 +285,17 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Components with responsive elevations may encounter other components as they move between
|
Components with responsive elevations may encounter other components as they move between
|
||||||
their resting elevations and dynamic elevation offsets. Because material cannot pass
|
their resting elevations and dynamic elevation offsets. Because material cannot pass
|
||||||
through other material, components avoid interfering with one another any number of ways,
|
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.
|
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.
|
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
|
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.
|
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.
|
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 won’t interfere
|
For example, position the FAB to one side of stream of a cards so the FAB won’t interfere
|
||||||
when a user tries to pick up one of cards.
|
when a user tries to pick up one of cards.
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -165,16 +165,16 @@
|
||||||
|
|
||||||
|
|
||||||
A material metaphor is the unifying theory of a rationalized space and a system of motion.
|
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.
|
technologically advanced and open to imagination and magic.
|
||||||
|
|
||||||
Surfaces and edges of the material provide visual cues that are grounded in reality. The
|
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
|
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
|
flexibility of the material creates new affordances that supercede those in the physical
|
||||||
world, without breaking the rules of physics.
|
world, without breaking the rules of physics.
|
||||||
|
|
||||||
The fundamentals of light, surface, and movement are key to conveying how objects move,
|
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
|
interact, and exist in space and in relation to each other. Realistic lighting shows
|
||||||
seams, divides space, and indicates moving parts.
|
seams, divides space, and indicates moving parts.
|
||||||
|
|
||||||
|
|
||||||
|
@ -183,13 +183,13 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
The foundational elements of print based design typography, grids, space, scale, color,
|
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
|
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
|
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
|
imagery, large scale typography, and intentional white space create a bold and graphic
|
||||||
interface that immerse the user in the experience.
|
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.
|
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.
|
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.
|
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.
|
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
|
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
|
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
|
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.
|
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.
|
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.
|
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
|
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
|
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
|
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.
|
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
|
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
|
that does not change. If an object changes elevation, it should return to its resting
|
||||||
elevation as soon as possible.
|
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).
|
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).
|
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
|
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
|
to user input (e.g., normal, focused, and pressed) or system events. These elevation
|
||||||
changes are consistently implemented using dynamic elevation offsets.
|
changes are consistently implemented using dynamic elevation offsets.
|
||||||
|
|
||||||
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
|
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
|
||||||
to the component’s resting state. They ensure that elevation changes are consistent
|
to the component’s resting state. They ensure that elevation changes are consistent
|
||||||
across actions and component types. For example, all components that lift on press have
|
across actions and component types. For example, all components that lift on press have
|
||||||
the same elevation change relative to their resting elevation.
|
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.
|
elevation.
|
||||||
|
|
||||||
|
|
||||||
|
@ -281,17 +281,17 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Components with responsive elevations may encounter other components as they move between
|
Components with responsive elevations may encounter other components as they move between
|
||||||
their resting elevations and dynamic elevation offsets. Because material cannot pass
|
their resting elevations and dynamic elevation offsets. Because material cannot pass
|
||||||
through other material, components avoid interfering with one another any number of ways,
|
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.
|
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.
|
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
|
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.
|
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.
|
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 won’t interfere
|
For example, position the FAB to one side of stream of a cards so the FAB won’t interfere
|
||||||
when a user tries to pick up one of cards.
|
when a user tries to pick up one of cards.
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -157,16 +157,16 @@
|
||||||
|
|
||||||
|
|
||||||
A material metaphor is the unifying theory of a rationalized space and a system of motion.
|
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.
|
technologically advanced and open to imagination and magic.
|
||||||
|
|
||||||
Surfaces and edges of the material provide visual cues that are grounded in reality. The
|
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
|
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
|
flexibility of the material creates new affordances that supercede those in the physical
|
||||||
world, without breaking the rules of physics.
|
world, without breaking the rules of physics.
|
||||||
|
|
||||||
The fundamentals of light, surface, and movement are key to conveying how objects move,
|
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
|
interact, and exist in space and in relation to each other. Realistic lighting shows
|
||||||
seams, divides space, and indicates moving parts.
|
seams, divides space, and indicates moving parts.
|
||||||
|
|
||||||
|
|
||||||
|
@ -175,13 +175,13 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
The foundational elements of print based design typography, grids, space, scale, color,
|
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
|
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
|
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
|
imagery, large scale typography, and intentional white space create a bold and graphic
|
||||||
interface that immerse the user in the experience.
|
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.
|
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.
|
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.
|
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.
|
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
|
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
|
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
|
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.
|
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.
|
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.
|
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
|
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
|
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
|
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.
|
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
|
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
|
that does not change. If an object changes elevation, it should return to its resting
|
||||||
elevation as soon as possible.
|
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).
|
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).
|
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
|
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
|
to user input (e.g., normal, focused, and pressed) or system events. These elevation
|
||||||
changes are consistently implemented using dynamic elevation offsets.
|
changes are consistently implemented using dynamic elevation offsets.
|
||||||
|
|
||||||
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
|
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
|
||||||
to the component’s resting state. They ensure that elevation changes are consistent
|
to the component’s resting state. They ensure that elevation changes are consistent
|
||||||
across actions and component types. For example, all components that lift on press have
|
across actions and component types. For example, all components that lift on press have
|
||||||
the same elevation change relative to their resting elevation.
|
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.
|
elevation.
|
||||||
|
|
||||||
|
|
||||||
|
@ -273,17 +273,17 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Components with responsive elevations may encounter other components as they move between
|
Components with responsive elevations may encounter other components as they move between
|
||||||
their resting elevations and dynamic elevation offsets. Because material cannot pass
|
their resting elevations and dynamic elevation offsets. Because material cannot pass
|
||||||
through other material, components avoid interfering with one another any number of ways,
|
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.
|
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.
|
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
|
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.
|
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.
|
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 won’t interfere
|
For example, position the FAB to one side of stream of a cards so the FAB won’t interfere
|
||||||
when a user tries to pick up one of cards.
|
when a user tries to pick up one of cards.
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -170,16 +170,16 @@
|
||||||
|
|
||||||
|
|
||||||
A material metaphor is the unifying theory of a rationalized space and a system of motion.
|
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.
|
technologically advanced and open to imagination and magic.
|
||||||
|
|
||||||
Surfaces and edges of the material provide visual cues that are grounded in reality. The
|
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
|
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
|
flexibility of the material creates new affordances that supercede those in the physical
|
||||||
world, without breaking the rules of physics.
|
world, without breaking the rules of physics.
|
||||||
|
|
||||||
The fundamentals of light, surface, and movement are key to conveying how objects move,
|
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
|
interact, and exist in space and in relation to each other. Realistic lighting shows
|
||||||
seams, divides space, and indicates moving parts.
|
seams, divides space, and indicates moving parts.
|
||||||
|
|
||||||
|
|
||||||
|
@ -188,13 +188,13 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
The foundational elements of print based design typography, grids, space, scale, color,
|
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
|
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
|
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
|
imagery, large scale typography, and intentional white space create a bold and graphic
|
||||||
interface that immerse the user in the experience.
|
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.
|
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.
|
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.
|
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.
|
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
|
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
|
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
|
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.
|
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.
|
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.
|
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
|
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
|
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
|
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.
|
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
|
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
|
that does not change. If an object changes elevation, it should return to its resting
|
||||||
elevation as soon as possible.
|
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).
|
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).
|
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
|
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
|
to user input (e.g., normal, focused, and pressed) or system events. These elevation
|
||||||
changes are consistently implemented using dynamic elevation offsets.
|
changes are consistently implemented using dynamic elevation offsets.
|
||||||
|
|
||||||
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
|
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
|
||||||
to the component’s resting state. They ensure that elevation changes are consistent
|
to the component’s resting state. They ensure that elevation changes are consistent
|
||||||
across actions and component types. For example, all components that lift on press have
|
across actions and component types. For example, all components that lift on press have
|
||||||
the same elevation change relative to their resting elevation.
|
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.
|
elevation.
|
||||||
|
|
||||||
|
|
||||||
|
@ -286,17 +286,17 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Components with responsive elevations may encounter other components as they move between
|
Components with responsive elevations may encounter other components as they move between
|
||||||
their resting elevations and dynamic elevation offsets. Because material cannot pass
|
their resting elevations and dynamic elevation offsets. Because material cannot pass
|
||||||
through other material, components avoid interfering with one another any number of ways,
|
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.
|
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.
|
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
|
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.
|
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.
|
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 won’t interfere
|
For example, position the FAB to one side of stream of a cards so the FAB won’t interfere
|
||||||
when a user tries to pick up one of cards.
|
when a user tries to pick up one of cards.
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -168,16 +168,16 @@
|
||||||
|
|
||||||
|
|
||||||
A material metaphor is the unifying theory of a rationalized space and a system of motion.
|
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.
|
technologically advanced and open to imagination and magic.
|
||||||
|
|
||||||
Surfaces and edges of the material provide visual cues that are grounded in reality. The
|
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
|
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
|
flexibility of the material creates new affordances that supercede those in the physical
|
||||||
world, without breaking the rules of physics.
|
world, without breaking the rules of physics.
|
||||||
|
|
||||||
The fundamentals of light, surface, and movement are key to conveying how objects move,
|
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
|
interact, and exist in space and in relation to each other. Realistic lighting shows
|
||||||
seams, divides space, and indicates moving parts.
|
seams, divides space, and indicates moving parts.
|
||||||
|
|
||||||
|
|
||||||
|
@ -186,13 +186,13 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
The foundational elements of print based design typography, grids, space, scale, color,
|
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
|
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
|
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
|
imagery, large scale typography, and intentional white space create a bold and graphic
|
||||||
interface that immerse the user in the experience.
|
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.
|
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.
|
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.
|
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.
|
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
|
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
|
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
|
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.
|
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.
|
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.
|
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
|
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
|
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
|
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.
|
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
|
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
|
that does not change. If an object changes elevation, it should return to its resting
|
||||||
elevation as soon as possible.
|
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).
|
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).
|
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
|
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
|
to user input (e.g., normal, focused, and pressed) or system events. These elevation
|
||||||
changes are consistently implemented using dynamic elevation offsets.
|
changes are consistently implemented using dynamic elevation offsets.
|
||||||
|
|
||||||
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
|
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
|
||||||
to the component’s resting state. They ensure that elevation changes are consistent
|
to the component’s resting state. They ensure that elevation changes are consistent
|
||||||
across actions and component types. For example, all components that lift on press have
|
across actions and component types. For example, all components that lift on press have
|
||||||
the same elevation change relative to their resting elevation.
|
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.
|
elevation.
|
||||||
|
|
||||||
|
|
||||||
|
@ -284,17 +284,17 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Components with responsive elevations may encounter other components as they move between
|
Components with responsive elevations may encounter other components as they move between
|
||||||
their resting elevations and dynamic elevation offsets. Because material cannot pass
|
their resting elevations and dynamic elevation offsets. Because material cannot pass
|
||||||
through other material, components avoid interfering with one another any number of ways,
|
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.
|
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.
|
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
|
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.
|
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.
|
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 won’t interfere
|
For example, position the FAB to one side of stream of a cards so the FAB won’t interfere
|
||||||
when a user tries to pick up one of cards.
|
when a user tries to pick up one of cards.
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -163,16 +163,16 @@
|
||||||
|
|
||||||
|
|
||||||
A material metaphor is the unifying theory of a rationalized space and a system of motion.
|
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.
|
technologically advanced and open to imagination and magic.
|
||||||
|
|
||||||
Surfaces and edges of the material provide visual cues that are grounded in reality. The
|
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
|
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
|
flexibility of the material creates new affordances that supercede those in the physical
|
||||||
world, without breaking the rules of physics.
|
world, without breaking the rules of physics.
|
||||||
|
|
||||||
The fundamentals of light, surface, and movement are key to conveying how objects move,
|
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
|
interact, and exist in space and in relation to each other. Realistic lighting shows
|
||||||
seams, divides space, and indicates moving parts.
|
seams, divides space, and indicates moving parts.
|
||||||
|
|
||||||
|
|
||||||
|
@ -181,13 +181,13 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
The foundational elements of print based design typography, grids, space, scale, color,
|
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
|
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
|
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
|
imagery, large scale typography, and intentional white space create a bold and graphic
|
||||||
interface that immerse the user in the experience.
|
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.
|
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.
|
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.
|
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.
|
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
|
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
|
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
|
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.
|
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.
|
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.
|
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
|
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
|
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
|
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.
|
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
|
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
|
that does not change. If an object changes elevation, it should return to its resting
|
||||||
elevation as soon as possible.
|
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).
|
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).
|
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
|
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
|
to user input (e.g., normal, focused, and pressed) or system events. These elevation
|
||||||
changes are consistently implemented using dynamic elevation offsets.
|
changes are consistently implemented using dynamic elevation offsets.
|
||||||
|
|
||||||
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
|
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
|
||||||
to the component’s resting state. They ensure that elevation changes are consistent
|
to the component’s resting state. They ensure that elevation changes are consistent
|
||||||
across actions and component types. For example, all components that lift on press have
|
across actions and component types. For example, all components that lift on press have
|
||||||
the same elevation change relative to their resting elevation.
|
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.
|
elevation.
|
||||||
|
|
||||||
|
|
||||||
|
@ -279,17 +279,17 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Components with responsive elevations may encounter other components as they move between
|
Components with responsive elevations may encounter other components as they move between
|
||||||
their resting elevations and dynamic elevation offsets. Because material cannot pass
|
their resting elevations and dynamic elevation offsets. Because material cannot pass
|
||||||
through other material, components avoid interfering with one another any number of ways,
|
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.
|
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.
|
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
|
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.
|
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.
|
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 won’t interfere
|
For example, position the FAB to one side of stream of a cards so the FAB won’t interfere
|
||||||
when a user tries to pick up one of cards.
|
when a user tries to pick up one of cards.
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -164,16 +164,16 @@
|
||||||
|
|
||||||
|
|
||||||
A material metaphor is the unifying theory of a rationalized space and a system of motion.
|
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.
|
technologically advanced and open to imagination and magic.
|
||||||
|
|
||||||
Surfaces and edges of the material provide visual cues that are grounded in reality. The
|
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
|
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
|
flexibility of the material creates new affordances that supercede those in the physical
|
||||||
world, without breaking the rules of physics.
|
world, without breaking the rules of physics.
|
||||||
|
|
||||||
The fundamentals of light, surface, and movement are key to conveying how objects move,
|
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
|
interact, and exist in space and in relation to each other. Realistic lighting shows
|
||||||
seams, divides space, and indicates moving parts.
|
seams, divides space, and indicates moving parts.
|
||||||
|
|
||||||
|
|
||||||
|
@ -182,13 +182,13 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
The foundational elements of print based design typography, grids, space, scale, color,
|
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
|
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
|
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
|
imagery, large scale typography, and intentional white space create a bold and graphic
|
||||||
interface that immerse the user in the experience.
|
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.
|
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.
|
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.
|
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.
|
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
|
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
|
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
|
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.
|
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.
|
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.
|
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
|
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
|
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
|
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.
|
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
|
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
|
that does not change. If an object changes elevation, it should return to its resting
|
||||||
elevation as soon as possible.
|
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).
|
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).
|
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
|
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
|
to user input (e.g., normal, focused, and pressed) or system events. These elevation
|
||||||
changes are consistently implemented using dynamic elevation offsets.
|
changes are consistently implemented using dynamic elevation offsets.
|
||||||
|
|
||||||
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
|
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
|
||||||
to the component’s resting state. They ensure that elevation changes are consistent
|
to the component’s resting state. They ensure that elevation changes are consistent
|
||||||
across actions and component types. For example, all components that lift on press have
|
across actions and component types. For example, all components that lift on press have
|
||||||
the same elevation change relative to their resting elevation.
|
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.
|
elevation.
|
||||||
|
|
||||||
|
|
||||||
|
@ -280,17 +280,17 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Components with responsive elevations may encounter other components as they move between
|
Components with responsive elevations may encounter other components as they move between
|
||||||
their resting elevations and dynamic elevation offsets. Because material cannot pass
|
their resting elevations and dynamic elevation offsets. Because material cannot pass
|
||||||
through other material, components avoid interfering with one another any number of ways,
|
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.
|
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.
|
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
|
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.
|
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.
|
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 won’t interfere
|
For example, position the FAB to one side of stream of a cards so the FAB won’t interfere
|
||||||
when a user tries to pick up one of cards.
|
when a user tries to pick up one of cards.
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -161,16 +161,16 @@
|
||||||
|
|
||||||
|
|
||||||
Materiál metafora je zjednocujúci teórie racionálne priestoru a systém pohybu.
|
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.
|
technologicky pokročilé a otvorené fantáziu a mágiu.
|
||||||
|
|
||||||
Povrchy a hrany materiálu poskytujú vizuálnu pokyny, ktoré sú zakotvené v realite.
|
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
|
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é
|
Pružnosť materiálu vytvára nové affordances že nadradené tie fyzické
|
||||||
svet bez toho, aby porušenie pravidiel fyziky.
|
svet bez toho, aby porušenie pravidiel fyziky.
|
||||||
|
|
||||||
Základy svetla, povrchu a pohyb sú kľúčom k dopravovanie, ako sa objekty pohybovať,
|
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
|
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í.
|
š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,
|
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ť
|
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
|
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ý
|
snímok, rozsiahle typografie a úmyselné biely priestor vytvoriť tučný a grafický
|
||||||
rozhranie, ktoré ponorí užívateľov v zážitku.
|
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.
|
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.
|
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.
|
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é.
|
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
|
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
|
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
|
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.
|
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.
|
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.
|
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
|
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
|
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
|
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.
|
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
|
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
|
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.
|
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).
|
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).
|
ž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
|
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
|
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.
|
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
|
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
|
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ú
|
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.
|
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.
|
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
|
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ť
|
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,
|
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.
|
č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.
|
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
|
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.
|
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.
|
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ť
|
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.
|
ak sa užívateľ pokúsi vyzdvihnúť jednu z kariet.
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -170,16 +170,16 @@
|
||||||
|
|
||||||
|
|
||||||
A material metaphor is the unifying theory of a rationalized space and a system of motion.
|
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.
|
technologically advanced and open to imagination and magic.
|
||||||
|
|
||||||
Surfaces and edges of the material provide visual cues that are grounded in reality. The
|
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
|
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
|
flexibility of the material creates new affordances that supercede those in the physical
|
||||||
world, without breaking the rules of physics.
|
world, without breaking the rules of physics.
|
||||||
|
|
||||||
The fundamentals of light, surface, and movement are key to conveying how objects move,
|
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
|
interact, and exist in space and in relation to each other. Realistic lighting shows
|
||||||
seams, divides space, and indicates moving parts.
|
seams, divides space, and indicates moving parts.
|
||||||
|
|
||||||
|
|
||||||
|
@ -188,13 +188,13 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
The foundational elements of print based design typography, grids, space, scale, color,
|
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
|
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
|
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
|
imagery, large scale typography, and intentional white space create a bold and graphic
|
||||||
interface that immerse the user in the experience.
|
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.
|
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.
|
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.
|
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.
|
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
|
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
|
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
|
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.
|
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.
|
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.
|
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
|
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
|
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
|
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.
|
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
|
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
|
that does not change. If an object changes elevation, it should return to its resting
|
||||||
elevation as soon as possible.
|
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).
|
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).
|
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
|
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
|
to user input (e.g., normal, focused, and pressed) or system events. These elevation
|
||||||
changes are consistently implemented using dynamic elevation offsets.
|
changes are consistently implemented using dynamic elevation offsets.
|
||||||
|
|
||||||
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
|
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
|
||||||
to the component’s resting state. They ensure that elevation changes are consistent
|
to the component’s resting state. They ensure that elevation changes are consistent
|
||||||
across actions and component types. For example, all components that lift on press have
|
across actions and component types. For example, all components that lift on press have
|
||||||
the same elevation change relative to their resting elevation.
|
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.
|
elevation.
|
||||||
|
|
||||||
|
|
||||||
|
@ -286,17 +286,17 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Components with responsive elevations may encounter other components as they move between
|
Components with responsive elevations may encounter other components as they move between
|
||||||
their resting elevations and dynamic elevation offsets. Because material cannot pass
|
their resting elevations and dynamic elevation offsets. Because material cannot pass
|
||||||
through other material, components avoid interfering with one another any number of ways,
|
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.
|
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.
|
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
|
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.
|
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.
|
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 won’t interfere
|
For example, position the FAB to one side of stream of a cards so the FAB won’t interfere
|
||||||
when a user tries to pick up one of cards.
|
when a user tries to pick up one of cards.
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -29,10 +29,12 @@
|
||||||
<string-array name="theme_description_list">
|
<string-array name="theme_description_list">
|
||||||
<item>@string/light_theme_title</item>
|
<item>@string/light_theme_title</item>
|
||||||
<item>@string/dark_theme_title</item>
|
<item>@string/dark_theme_title</item>
|
||||||
|
<item>@string/black_theme_title</item>
|
||||||
</string-array>
|
</string-array>
|
||||||
<string-array name="theme_list">
|
<string-array name="theme_list">
|
||||||
<item>@string/light_theme_title</item>
|
<item>@string/light_theme_title</item>
|
||||||
<item>@string/dark_theme_title</item>
|
<item>@string/dark_theme_title</item>
|
||||||
|
<item>@string/black_theme_title</item>
|
||||||
</string-array>
|
</string-array>
|
||||||
|
|
||||||
<string name="default_audio_format_key" translatable="false">default_audio_format</string>
|
<string name="default_audio_format_key" translatable="false">default_audio_format</string>
|
||||||
|
|
|
@ -49,6 +49,7 @@
|
||||||
<string name="light_theme_title">Light</string>
|
<string name="light_theme_title">Light</string>
|
||||||
<string name="dark_theme_title">Dark</string>
|
<string name="dark_theme_title">Dark</string>
|
||||||
<string name="black_theme_title">Black</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 name="download_dialog_title">Download</string>
|
||||||
<string-array name="download_options">
|
<string-array name="download_options">
|
||||||
|
|
|
@ -49,6 +49,10 @@
|
||||||
<item name="rss">@drawable/ic_rss_feed_black_24dp</item>
|
<item name="rss">@drawable/ic_rss_feed_black_24dp</item>
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<style name="BlackTheme" parent="DarkTheme">
|
||||||
|
<item name="android:windowBackground">@color/black</item>
|
||||||
|
</style>
|
||||||
|
|
||||||
<style name="NewPipeActionbarTheme" parent="Widget.AppCompat.Light.ActionBar.Solid">
|
<style name="NewPipeActionbarTheme" parent="Widget.AppCompat.Light.ActionBar.Solid">
|
||||||
<item name="android:displayOptions">showHome</item>
|
<item name="android:displayOptions">showHome</item>
|
||||||
<item name="displayOptions">showHome</item>
|
<item name="displayOptions">showHome</item>
|
||||||
|
@ -107,6 +111,11 @@
|
||||||
<item name="windowNoTitle">true</item>
|
<item name="windowNoTitle">true</item>
|
||||||
</style>
|
</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.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
|
||||||
|
|
||||||
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
|
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
|
||||||
|
|
Loading…
Reference in New Issue