├── .gitignore ├── .idea ├── compiler.xml ├── copyright │ └── profiles_settings.xml ├── gradle.xml ├── misc.xml ├── modules.xml └── runConfigurations.xml ├── app ├── .gitignore ├── build.gradle ├── proguard-rules.pro └── src │ ├── androidTest │ └── java │ │ └── com │ │ └── example │ │ └── jack │ │ └── coordinatorlayouttest │ │ └── ExampleInstrumentedTest.java │ ├── main │ ├── AndroidManifest.xml │ ├── java │ │ └── com │ │ │ └── example │ │ │ └── jack │ │ │ └── coordinatorlayouttest │ │ │ ├── ScrollingActivity.java │ │ │ └── ToolbarAdapter.java │ └── res │ │ ├── drawable │ │ ├── fukuang.png │ │ ├── jiahao.png │ │ ├── kajuan.png │ │ ├── saoyisao.png │ │ ├── sousuo.png │ │ ├── tongxunlu.png │ │ ├── xiuyixiu.png │ │ ├── zhangdan.png │ │ ├── zhaoxiang.png │ │ └── zhuanzhang.png │ │ ├── layout │ │ ├── activity_scrolling.xml │ │ ├── content_scrolling.xml │ │ ├── layout_item.xml │ │ ├── shenghuo_head1.xml │ │ ├── shenghuo_head2.xml │ │ ├── toolbar_head1.xml │ │ └── toolbar_head2.xml │ │ ├── menu │ │ └── menu_scrolling.xml │ │ ├── mipmap-hdpi │ │ └── ic_launcher.png │ │ ├── mipmap-mdpi │ │ └── ic_launcher.png │ │ ├── mipmap-xhdpi │ │ └── ic_launcher.png │ │ ├── mipmap-xxhdpi │ │ └── ic_launcher.png │ │ ├── mipmap-xxxhdpi │ │ └── ic_launcher.png │ │ ├── values-v21 │ │ └── styles.xml │ │ └── values │ │ ├── colors.xml │ │ ├── dimens.xml │ │ ├── strings.xml │ │ └── styles.xml │ └── test │ └── java │ └── com │ └── example │ └── jack │ └── coordinatorlayouttest │ └── ExampleUnitTest.java ├── build.gradle ├── gradle.properties ├── gradle └── wrapper │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat └── settings.gradle /.gitignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | .gradle 3 | /local.properties 4 | /.idea/workspace.xml 5 | /.idea/libraries 6 | .DS_Store 7 | /build 8 | /captures 9 | .externalNativeBuild 10 | -------------------------------------------------------------------------------- /.idea/compiler.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /.idea/copyright/profiles_settings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /.idea/gradle.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 18 | 19 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 19 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 46 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /.idea/runConfigurations.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 11 | 12 | -------------------------------------------------------------------------------- /app/.gitignore: -------------------------------------------------------------------------------- 1 | /build 2 | -------------------------------------------------------------------------------- /app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: 'com.android.application' 2 | 3 | android { 4 | compileSdkVersion 24 5 | buildToolsVersion "24.0.1" 6 | defaultConfig { 7 | applicationId "com.example.jack.coordinatorlayouttest" 8 | minSdkVersion 15 9 | targetSdkVersion 24 10 | versionCode 1 11 | versionName "1.0" 12 | testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner" 13 | } 14 | buildTypes { 15 | release { 16 | minifyEnabled false 17 | proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' 18 | } 19 | } 20 | } 21 | 22 | dependencies { 23 | compile fileTree(dir: 'libs', include: ['*.jar']) 24 | androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', { 25 | exclude group: 'com.android.support', module: 'support-annotations' 26 | }) 27 | compile 'com.android.support:appcompat-v7:24.1.1' 28 | compile 'com.android.support:design:24.1.1' 29 | testCompile 'junit:junit:4.12' 30 | } 31 | -------------------------------------------------------------------------------- /app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in E:\ProgramFiles2\adt-bundle-windows-x86_64-20140702\sdk/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | 12 | # If your project uses WebView with JS, uncomment the following 13 | # and specify the fully qualified class name to the JavaScript interface 14 | # class: 15 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 16 | # public *; 17 | #} 18 | -------------------------------------------------------------------------------- /app/src/androidTest/java/com/example/jack/coordinatorlayouttest/ExampleInstrumentedTest.java: -------------------------------------------------------------------------------- 1 | package com.example.jack.coordinatorlayouttest; 2 | 3 | import android.content.Context; 4 | import android.support.test.InstrumentationRegistry; 5 | import android.support.test.runner.AndroidJUnit4; 6 | 7 | import org.junit.Test; 8 | import org.junit.runner.RunWith; 9 | 10 | import static org.junit.Assert.*; 11 | 12 | /** 13 | * Instrumentation test, which will execute on an Android device. 14 | * 15 | * @see Testing documentation 16 | */ 17 | @RunWith(AndroidJUnit4.class) 18 | public class ExampleInstrumentedTest { 19 | @Test 20 | public void useAppContext() throws Exception { 21 | // Context of the app under test. 22 | Context appContext = InstrumentationRegistry.getTargetContext(); 23 | 24 | assertEquals("com.example.jack.coordinatorlayouttest", appContext.getPackageName()); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 11 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /app/src/main/java/com/example/jack/coordinatorlayouttest/ScrollingActivity.java: -------------------------------------------------------------------------------- 1 | package com.example.jack.coordinatorlayouttest; 2 | 3 | import android.graphics.Color; 4 | import android.os.Bundle; 5 | import android.support.design.widget.AppBarLayout; 6 | import android.support.design.widget.CollapsingToolbarLayout; 7 | import android.support.v7.app.AppCompatActivity; 8 | import android.support.v7.widget.LinearLayoutManager; 9 | import android.support.v7.widget.RecyclerView; 10 | import android.util.Log; 11 | import android.view.View; 12 | import android.widget.ImageView; 13 | import android.widget.TextView; 14 | 15 | public class ScrollingActivity extends AppCompatActivity { 16 | 17 | private AppBarLayout mAppBarLayout=null; 18 | private CollapsingToolbarLayout collapsingToolbarLayout; 19 | private View mToolbar1=null; 20 | private View mToolbar2=null; 21 | 22 | private ImageView mZhangdan=null; 23 | private TextView mZhangdan_txt=null; 24 | private ImageView mTongxunlu=null; 25 | private ImageView mJiahao=null; 26 | 27 | private ImageView mZhangdan2=null; 28 | private ImageView mShaoyishao=null; 29 | private ImageView mSearch=null; 30 | private ImageView mZhaoxiang=null; 31 | 32 | private RecyclerView myRecyclerView; 33 | 34 | @Override 35 | protected void onCreate(Bundle savedInstanceState) { 36 | super.onCreate(savedInstanceState); 37 | setContentView(R.layout.activity_scrolling); 38 | myRecyclerView=(RecyclerView)findViewById(R.id.myRecyclerView); 39 | myRecyclerView.setLayoutManager(new LinearLayoutManager(this)); 40 | collapsingToolbarLayout=(CollapsingToolbarLayout)findViewById(R.id.toolbar_layout); 41 | collapsingToolbarLayout.setStatusBarScrimColor(getResources().getColor(R.color.color1984D1)); 42 | 43 | myRecyclerView.setAdapter(new ToolbarAdapter(this)); 44 | 45 | mAppBarLayout=(AppBarLayout)findViewById(R.id.app_bar); 46 | mToolbar1=(View)findViewById(R.id.toolbar1); 47 | mToolbar2=(View)findViewById(R.id.toolbar2); 48 | 49 | mZhangdan=(ImageView)findViewById(R.id.img_zhangdan); 50 | mZhangdan_txt=(TextView)findViewById(R.id.img_zhangdan_txt); 51 | mTongxunlu=(ImageView)findViewById(R.id.tongxunlu); 52 | mJiahao=(ImageView)findViewById(R.id.jiahao); 53 | 54 | mZhangdan2=(ImageView)findViewById(R.id.img_shaomiao); 55 | mShaoyishao=(ImageView)findViewById(R.id.img_fukuang); 56 | mSearch=(ImageView)findViewById(R.id.img_search); 57 | mZhaoxiang=(ImageView)findViewById(R.id.img_zhaoxiang); 58 | 59 | mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() { 60 | @Override 61 | public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) { 62 | if (verticalOffset == 0){ 63 | //张开 64 | mToolbar1.setVisibility(View.VISIBLE); 65 | mToolbar2.setVisibility(View.GONE); 66 | setToolbar1Alpha(255); 67 | } else if (Math.abs(verticalOffset) >= appBarLayout.getTotalScrollRange()) { 68 | //收缩 69 | mToolbar1.setVisibility(View.GONE); 70 | mToolbar2.setVisibility(View.VISIBLE); 71 | setToolbar2Alpha(255); 72 | } else { 73 | int alpha=255-Math.abs(verticalOffset); 74 | if(alpha<0){ 75 | Log.e("alpha",alpha+""); 76 | //收缩toolbar 77 | mToolbar1.setVisibility(View.GONE); 78 | mToolbar2.setVisibility(View.VISIBLE); 79 | setToolbar2Alpha(Math.abs(verticalOffset)); 80 | }else{ 81 | //张开toolbar 82 | mToolbar1.setVisibility(View.VISIBLE); 83 | mToolbar2.setVisibility(View.GONE); 84 | setToolbar1Alpha(alpha); 85 | } 86 | } 87 | } 88 | }); 89 | } 90 | 91 | //设置展开时各控件的透明度 92 | public void setToolbar1Alpha(int alpha){ 93 | mZhangdan.getDrawable().setAlpha(alpha); 94 | mZhangdan_txt.setTextColor(Color.argb(alpha,255,255,255)); 95 | mTongxunlu.getDrawable().setAlpha(alpha); 96 | mJiahao.getDrawable().setAlpha(alpha); 97 | } 98 | 99 | //设置闭合时各控件的透明度 100 | public void setToolbar2Alpha(int alpha){ 101 | mZhangdan2.getDrawable().setAlpha(alpha); 102 | mShaoyishao.getDrawable().setAlpha(alpha); 103 | mSearch.getDrawable().setAlpha(alpha); 104 | mZhaoxiang.getDrawable().setAlpha(alpha); 105 | } 106 | 107 | } 108 | -------------------------------------------------------------------------------- /app/src/main/java/com/example/jack/coordinatorlayouttest/ToolbarAdapter.java: -------------------------------------------------------------------------------- 1 | package com.example.jack.coordinatorlayouttest; 2 | 3 | import android.content.Context; 4 | import android.support.v7.widget.RecyclerView; 5 | import android.view.LayoutInflater; 6 | import android.view.View; 7 | import android.view.ViewGroup; 8 | 9 | /** 10 | * Created by Jack on 2016/9/16. 11 | */ 12 | 13 | public class ToolbarAdapter extends RecyclerView.Adapter{ 14 | 15 | private Context context; 16 | 17 | public ToolbarAdapter(Context context){ 18 | this.context=context; 19 | } 20 | 21 | @Override 22 | public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { 23 | if(viewType==0){ 24 | return new ItemView(LayoutInflater.from(context).inflate(R.layout.shenghuo_head2,null)); 25 | }else{ 26 | return new ItemView(LayoutInflater.from(context).inflate(R.layout.layout_item,parent,false)); 27 | } 28 | } 29 | 30 | @Override 31 | public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) { 32 | } 33 | 34 | @Override 35 | public int getItemCount() { 36 | return 20; 37 | } 38 | 39 | @Override 40 | public int getItemViewType(int position) { 41 | if(position==0){ 42 | return 0; 43 | }else{ 44 | return 1; 45 | } 46 | } 47 | 48 | class ItemView extends RecyclerView.ViewHolder{ 49 | public ItemView(View itemView) { 50 | super(itemView); 51 | } 52 | } 53 | 54 | } 55 | -------------------------------------------------------------------------------- /app/src/main/res/drawable/fukuang.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jack921/CoordinatorLayoutTest/828d1d94053032d985c0c118559d817ad5bec1bf/app/src/main/res/drawable/fukuang.png -------------------------------------------------------------------------------- /app/src/main/res/drawable/jiahao.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jack921/CoordinatorLayoutTest/828d1d94053032d985c0c118559d817ad5bec1bf/app/src/main/res/drawable/jiahao.png -------------------------------------------------------------------------------- /app/src/main/res/drawable/kajuan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jack921/CoordinatorLayoutTest/828d1d94053032d985c0c118559d817ad5bec1bf/app/src/main/res/drawable/kajuan.png -------------------------------------------------------------------------------- /app/src/main/res/drawable/saoyisao.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jack921/CoordinatorLayoutTest/828d1d94053032d985c0c118559d817ad5bec1bf/app/src/main/res/drawable/saoyisao.png -------------------------------------------------------------------------------- /app/src/main/res/drawable/sousuo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jack921/CoordinatorLayoutTest/828d1d94053032d985c0c118559d817ad5bec1bf/app/src/main/res/drawable/sousuo.png -------------------------------------------------------------------------------- /app/src/main/res/drawable/tongxunlu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jack921/CoordinatorLayoutTest/828d1d94053032d985c0c118559d817ad5bec1bf/app/src/main/res/drawable/tongxunlu.png -------------------------------------------------------------------------------- /app/src/main/res/drawable/xiuyixiu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jack921/CoordinatorLayoutTest/828d1d94053032d985c0c118559d817ad5bec1bf/app/src/main/res/drawable/xiuyixiu.png -------------------------------------------------------------------------------- /app/src/main/res/drawable/zhangdan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jack921/CoordinatorLayoutTest/828d1d94053032d985c0c118559d817ad5bec1bf/app/src/main/res/drawable/zhangdan.png -------------------------------------------------------------------------------- /app/src/main/res/drawable/zhaoxiang.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jack921/CoordinatorLayoutTest/828d1d94053032d985c0c118559d817ad5bec1bf/app/src/main/res/drawable/zhaoxiang.png -------------------------------------------------------------------------------- /app/src/main/res/drawable/zhuanzhang.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jack921/CoordinatorLayoutTest/828d1d94053032d985c0c118559d817ad5bec1bf/app/src/main/res/drawable/zhuanzhang.png -------------------------------------------------------------------------------- /app/src/main/res/layout/activity_scrolling.xml: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | 17 | 18 | 26 | 27 | 35 | 36 | 43 | 44 | 49 | 50 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /app/src/main/res/layout/content_scrolling.xml: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /app/src/main/res/layout/layout_item.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 12 | 13 | -------------------------------------------------------------------------------- /app/src/main/res/layout/shenghuo_head1.xml: -------------------------------------------------------------------------------- 1 | 2 | 9 | 10 | 14 | 15 | 20 | 21 | 26 | 27 | 35 | 36 | 37 | 38 | 39 | 40 | 44 | 45 | 50 | 51 | 56 | 57 | 65 | 66 | 67 | 68 | 69 | 70 | 74 | 75 | 80 | 81 | 86 | 87 | 95 | 96 | 97 | 98 | 99 | 100 | 104 | 105 | 110 | 111 | 116 | 117 | 125 | 126 | 127 | 128 | 129 | 130 | -------------------------------------------------------------------------------- /app/src/main/res/layout/shenghuo_head2.xml: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | 12 | 13 | 17 | 21 | 26 | 31 | 37 | 38 | 39 | 43 | 48 | 53 | 59 | 60 | 61 | 65 | 70 | 75 | 81 | 82 | 83 | 87 | 92 | 97 | 103 | 104 | 105 | 106 | 107 | 108 | 112 | 116 | 121 | 126 | 132 | 133 | 134 | 138 | 143 | 148 | 154 | 155 | 156 | 160 | 165 | 170 | 176 | 177 | 178 | 182 | 187 | 192 | 198 | 199 | 200 | 201 | 202 | 206 | 207 | -------------------------------------------------------------------------------- /app/src/main/res/layout/toolbar_head1.xml: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | 16 | 17 | 27 | 28 | 36 | 37 | 45 | 46 | -------------------------------------------------------------------------------- /app/src/main/res/layout/toolbar_head2.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 15 | 16 | 24 | 25 | 33 | 34 | 42 | 43 | -------------------------------------------------------------------------------- /app/src/main/res/menu/menu_scrolling.xml: -------------------------------------------------------------------------------- 1 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jack921/CoordinatorLayoutTest/828d1d94053032d985c0c118559d817ad5bec1bf/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jack921/CoordinatorLayoutTest/828d1d94053032d985c0c118559d817ad5bec1bf/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jack921/CoordinatorLayoutTest/828d1d94053032d985c0c118559d817ad5bec1bf/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jack921/CoordinatorLayoutTest/828d1d94053032d985c0c118559d817ad5bec1bf/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jack921/CoordinatorLayoutTest/828d1d94053032d985c0c118559d817ad5bec1bf/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /app/src/main/res/values-v21/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 9 | 10 | -------------------------------------------------------------------------------- /app/src/main/res/values/colors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | #1984D1 4 | #303F9F 5 | #FF4081 6 | 7 | #1984D1 8 | #FFFFFF 9 | #000000 10 | 11 | 12 | -------------------------------------------------------------------------------- /app/src/main/res/values/dimens.xml: -------------------------------------------------------------------------------- 1 | 2 | 180dp 3 | 16dp 4 | 16dp 5 | 6 | -------------------------------------------------------------------------------- /app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | CoordinatorLayoutTest 3 | 4 | "Material is the metaphor.\n\n" 5 | 6 | "A material metaphor is the unifying theory of a rationalized space and a system of motion." 7 | "The material is grounded in tactile reality, inspired by the study of paper and ink, yet " 8 | "technologically advanced and open to imagination and magic.\n" 9 | "Surfaces and edges of the material provide visual cues that are grounded in reality. The " 10 | "use of familiar tactile attributes helps users quickly understand affordances. Yet the " 11 | "flexibility of the material creates new affordances that supercede those in the physical " 12 | "world, without breaking the rules of physics.\n" 13 | "The fundamentals of light, surface, and movement are key to conveying how objects move, " 14 | "interact, and exist in space and in relation to each other. Realistic lighting shows " 15 | "seams, divides space, and indicates moving parts.\n\n" 16 | 17 | "Bold, graphic, intentional.\n\n" 18 | 19 | "The foundational elements of print based design typography, grids, space, scale, color, " 20 | "and use of imagery guide visual treatments. These elements do far more than please the " 21 | "eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge to edge " 22 | "imagery, large scale typography, and intentional white space create a bold and graphic " 23 | "interface that immerse the user in the experience.\n" 24 | "An emphasis on user actions makes core functionality immediately apparent and provides " 25 | "waypoints for the user.\n\n" 26 | 27 | "Motion provides meaning.\n\n" 28 | 29 | "Motion respects and reinforces the user as the prime mover. Primary user actions are " 30 | "inflection points that initiate motion, transforming the whole design.\n" 31 | "All action takes place in a single environment. Objects are presented to the user without " 32 | "breaking the continuity of experience even as they transform and reorganize.\n" 33 | "Motion is meaningful and appropriate, serving to focus attention and maintain continuity. " 34 | "Feedback is subtle yet clear. Transitions are efficient yet coherent.\n\n" 35 | 36 | "3D world.\n\n" 37 | 38 | "The material environment is a 3D space, which means all objects have x, y, and z " 39 | "dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the " 40 | "positive z-axis extending towards the viewer. Every sheet of material occupies a single " 41 | "position along the z-axis and has a standard 1dp thickness.\n" 42 | "On the web, the z-axis is used for layering and not for perspective. The 3D world is " 43 | "emulated by manipulating the y-axis.\n\n" 44 | 45 | "Light and shadow.\n\n" 46 | 47 | "Within the material environment, virtual lights illuminate the scene. Key lights create " 48 | "directional shadows, while ambient light creates soft shadows from all angles.\n" 49 | "Shadows in the material environment are cast by these two light sources. In Android " 50 | "development, shadows occur when light sources are blocked by sheets of material at " 51 | "various positions along the z-axis. On the web, shadows are depicted by manipulating the " 52 | "y-axis only. The following example shows the card with a height of 6dp.\n\n" 53 | 54 | "Resting elevation.\n\n" 55 | 56 | "All material objects, regardless of size, have a resting elevation, or default elevation " 57 | "that does not change. If an object changes elevation, it should return to its resting " 58 | "elevation as soon as possible.\n\n" 59 | 60 | "Component elevations.\n\n" 61 | 62 | "The resting elevation for a component type is consistent across apps (e.g., FAB elevation " 63 | "does not vary from 6dp in one app to 16dp in another app).\n" 64 | "Components may have different resting elevations across platforms, depending on the depth " 65 | "of the environment (e.g., TV has a greater depth than mobile or desktop).\n\n" 66 | 67 | "Responsive elevation and dynamic elevation offsets.\n\n" 68 | 69 | "Some component types have responsive elevation, meaning they change elevation in response " 70 | "to user input (e.g., normal, focused, and pressed) or system events. These elevation " 71 | "changes are consistently implemented using dynamic elevation offsets.\n" 72 | "Dynamic elevation offsets are the goal elevation that a component moves towards, relative " 73 | "to the component’s resting state. They ensure that elevation changes are consistent " 74 | "across actions and component types. For example, all components that lift on press have " 75 | "the same elevation change relative to their resting elevation.\n" 76 | "Once the input event is completed or cancelled, the component will return to its resting " 77 | "elevation.\n\n" 78 | 79 | "Avoiding elevation interference.\n\n" 80 | 81 | "Components with responsive elevations may encounter other components as they move between " 82 | "their resting elevations and dynamic elevation offsets. Because material cannot pass " 83 | "through other material, components avoid interfering with one another any number of ways, " 84 | "whether on a per component basis or using the entire app layout.\n" 85 | "On a component level, components can move or be removed before they cause interference. " 86 | "For example, a floating action button (FAB) can disappear or move off screen before a " 87 | "user picks up a card, or it can move if a snackbar appears.\n" 88 | "On the layout level, design your app layout to minimize opportunities for interference. " 89 | "For example, position the FAB to one side of stream of a cards so the FAB won’t interfere " 90 | "when a user tries to pick up one of cards.\n\n" 91 | 92 | Settings 93 | 94 | -------------------------------------------------------------------------------- /app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 15 | 16 |