├── .gitignore ├── .idea ├── dictionaries │ └── tx.xml ├── externalDependencies.xml ├── gradle.xml ├── misc.xml ├── modules.xml └── runConfigurations.xml ├── README.md ├── app ├── .gitignore ├── build.gradle ├── proguard-rules.pro └── src │ ├── androidTest │ └── java │ │ └── com │ │ └── collapsable │ │ └── ExampleInstrumentedTest.java │ ├── main │ ├── AndroidManifest.xml │ ├── java │ │ └── com │ │ │ └── collapsable │ │ │ ├── AliHomeActivity.java │ │ │ └── ScrollingActivity.java │ └── res │ │ ├── drawable-v24 │ │ └── ic_launcher_foreground.xml │ │ ├── drawable │ │ ├── ic_launcher_background.xml │ │ └── shape_search.xml │ │ ├── layout │ │ ├── activity_ali_home.xml │ │ ├── activity_scrolling.xml │ │ ├── content_scrolling.xml │ │ ├── include_open.xml │ │ ├── include_toolbar_close.xml │ │ └── include_toolbar_open.xml │ │ ├── menu │ │ └── menu_scrolling.xml │ │ ├── mipmap-anydpi-v26 │ │ ├── ic_launcher.xml │ │ └── ic_launcher_round.xml │ │ ├── mipmap-hdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-mdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xxhdpi │ │ ├── ic_add.png │ │ ├── ic_card.png │ │ ├── ic_contact.png │ │ ├── ic_launcher.png │ │ ├── ic_launcher_round.png │ │ ├── ic_payment.png │ │ ├── ic_scan.png │ │ ├── ic_search.png │ │ └── ic_transfer.png │ │ ├── mipmap-xxxhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ └── values │ │ ├── colors.xml │ │ ├── dimens.xml │ │ ├── strings.xml │ │ └── styles.xml │ └── test │ └── java │ └── com │ └── collapsable │ └── 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/dictionaries/tx.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /.idea/externalDependencies.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /.idea/gradle.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 17 | 18 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 20 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | Abstraction issuesJava 40 | 41 | 42 | Android 43 | 44 | 45 | Assignment issuesGroovy 46 | 47 | 48 | Assignment issuesJava 49 | 50 | 51 | Chrome OSCorrectnessLintAndroid 52 | 53 | 54 | Class structureJava 55 | 56 | 57 | Cloning issuesJava 58 | 59 | 60 | Code style issuesJava 61 | 62 | 63 | Concurrency annotation issuesJava 64 | 65 | 66 | Control FlowGroovy 67 | 68 | 69 | Control flow issuesJava 70 | 71 | 72 | CorrectnessLintAndroid 73 | 74 | 75 | Declaration redundancyJava 76 | 77 | 78 | Dependency issuesJava 79 | 80 | 81 | Encapsulation issuesJava 82 | 83 | 84 | Error handlingGroovy 85 | 86 | 87 | Error handlingJava 88 | 89 | 90 | General 91 | 92 | 93 | Groovy 94 | 95 | 96 | Inheritance issuesJava 97 | 98 | 99 | Initialization issuesJava 100 | 101 | 102 | Internationalization issuesJava 103 | 104 | 105 | JUnit issuesJava 106 | 107 | 108 | Java 109 | 110 | 111 | LintAndroid 112 | 113 | 114 | Memory issuesJava 115 | 116 | 117 | Method MetricsGroovy 118 | 119 | 120 | Naming ConventionsGroovy 121 | 122 | 123 | Naming conventionsJava 124 | 125 | 126 | Numeric issuesJava 127 | 128 | 129 | Performance issuesJava 130 | 131 | 132 | PerformanceLintAndroid 133 | 134 | 135 | Potentially confusing code constructsGroovy 136 | 137 | 138 | Probable bugsGroovy 139 | 140 | 141 | Probable bugsJava 142 | 143 | 144 | Resource management issuesJava 145 | 146 | 147 | Security issuesJava 148 | 149 | 150 | SecurityLintAndroid 151 | 152 | 153 | Serialization issuesJava 154 | 155 | 156 | TestNGJava 157 | 158 | 159 | Threading issuesGroovy 160 | 161 | 162 | Threading issuesJava 163 | 164 | 165 | UsabilityLintAndroid 166 | 167 | 168 | Visibility issuesJava 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 180 | 181 | $USER_HOME$/.subversion 182 | 183 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /.idea/runConfigurations.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 11 | 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | >原文链接：[https://mp.weixin.qq.com/s/GegMt7GDBCFVoUgFQWG3Sw](https://mp.weixin.qq.com/s/GegMt7GDBCFVoUgFQWG3Sw) 2 | 3 | 每次打开支付宝首页滑动，头部的伸缩动画甚是吸引人。于是自己决定动手来实现一个。 4 | 5 | 无图言虚空，效果图： 6 | 7 | ![](https://user-gold-cdn.xitu.io/2018/7/8/164782ba281bee30?w=480&h=289&f=gif&s=1489086) 8 | 9 | 首先看到这种效果，第一反应就是`coordinatorLayout`布局，android studio新建项目时，可以直接新建个Scrolling Activity来查看demo效果。 10 | 11 | ![](https://user-gold-cdn.xitu.io/2018/7/7/16472cb3bf607b71?w=855&h=500&f=jpeg&s=50655) 12 | 13 | 官方自带的布局示例： 14 | 15 | ![](https://user-gold-cdn.xitu.io/2018/7/7/164731a43c97bb42?w=480&h=348&f=gif&s=2036139) 16 | 17 | #### gradle关联 18 | ``` 19 | implementation 'com.android.support:design:26.1.0' 20 | ``` 21 | 简单介绍使用到的几个布局： 22 | #### coordinatorLayout 23 | `coordinatorLayout`协调者布局，用来协调其子view并以触摸影响布局的形式产生动画效果的布局。`coordinatorLayout`是一个顶级布局。 24 | #### appBarLayout 25 | `appBarLayout`主要给子布局配置属性`app:layout_scrollFlags`，5个属性值： 26 | `scroll`：所有想滚动出屏幕的view都需要设置这个属性值， 没有设置这个属性的view将被固定在屏幕顶部 27 | `enterAlways`：任意向下的滚动都会导致该view变为可见，启用快速“返回模式” 28 | `enterAlwaysCollapsed`：假设你定义了一个最小高度（minHeight）同时enterAlways也定义了，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候展开完。 29 | `exitUntilCollapsed`：当你定义了一个minHeight，此布局将在滚动到达这个最小高度的时候折叠。 30 | `snap`：当一个滚动事件结束，如果视图是部分可见的，那么它将被滚动到收缩或展开。例如，如果视图只有底部25%显示，它将折叠。相反，如果它的底部75%可见，那么它将完全展开。 31 | 32 | 这里的属性可以组合使用查看效果。 33 | 例如demo中自带的 34 | `app:layout_scrollFlags="scroll|exitUntilCollapsed"` 滑上去toolbar收缩在顶部： 35 | ![](https://user-gold-cdn.xitu.io/2018/7/7/164731c1208b4bc8?w=522&h=236&f=jpeg&s=42140) 36 | 37 | 修改属性改成这样的： 38 | `app:layout_scrollFlags="scroll|enterAlways"` 滑上去toolbar滑出屏幕： 39 | ![](https://user-gold-cdn.xitu.io/2018/7/7/164731f4bd74035b?w=544&h=262&f=jpeg&s=55379) 40 | 41 | #### collapsingToolbarLayout 42 | `collapsingToolbarLayout`可以作为`AppBarLayout`的子view，可以控制包含在其中的控件在滚动时的响应事件，子view可以是个可折叠的Toolbar，`app:layout_collapseMode`设置折叠模式。 43 | 3种折叠模式： 44 | `off`：默认属性，布局将正常显示，无折叠行为。 45 | `pin`：折叠后，此布局将固定在顶部。 46 | `parallax`：折叠时，此布局也会有视差折叠效果。 47 | 当其子布局设置了`parallax`模式时，我们还可以通过`app:layout_collapseParallaxMultiplier`设置视差滚动因子，值为：0~1。 48 | 49 | 50 | 接下来，我们就使用以上的属性来完成demo 51 | #### 实现原理 52 | 1、`coordinatorLayout`嵌套`appBarLayout` 53 | 54 | 2、`appBarLayout`的子view`collapsingToolbarLayout`设置属性 55 | `app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"` 56 | 让头部随着内容下拉而展开，随着内容上拉而收缩。 57 | 58 | 3、`collapsingToolbarLayout`的子布局有两种，展开时显示的布局和`Toolbar`，其中`Toolbar`又包含了两种布局，展开时的和收缩时的。 59 | 展开时，(扫一扫、付钱)的布局： 60 | ``` 61 | 68 | ``` 69 | layout_marginTop="50dp"预留出toolbar的高度，避免布局重叠。 70 | 71 | toolbar里的两种布局： 72 | ``` 73 | 79 | 80 | 83 | 84 | 87 | 88 | 89 | ``` 90 | toolbar里的两个布局，可以通过监听AppBarLayout的移动控制显示和隐藏。 91 | 92 | 4、最下面的布局可以是NestedScrollView,一定要在布局中设置以下属性，这里我直接用的demo中的布局： 93 | ``` 94 | app:layout_behavior="@string/appbar_scrolling_view_behavior" 95 | ``` 96 | 5、滑动过程中，各控件的透明度会有渐变的效果，这里采用类似遮罩的效果，每个include布局里都有个遮罩的view，在滑动过程中监听`appBarLayout`的`addOnOffsetChangedListener`，通过计算滑动的距离，逐渐改变透明度。 97 | ``` 98 | @Override 99 | public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) { 100 | //垂直方向偏移量 101 | int offset = Math.abs(verticalOffset); 102 | //最大偏移距离 103 | int scrollRange = appBarLayout.getTotalScrollRange(); 104 | if (offset <= scrollRange / 2) {//当滑动没超过一半，展开状态下toolbar显示内容，根据收缩位置，改变透明值 105 | toolbarOpen.setVisibility(View.VISIBLE); 106 | toolbarClose.setVisibility(View.GONE); 107 | //根据偏移百分比 计算透明值 108 | float scale2 = (float) offset / (scrollRange / 2); 109 | int alpha2 = (int) (255 * scale2); 110 | bgToolbarOpen.setBackgroundColor(Color.argb(alpha2, 25, 131, 209)); 111 | } else {//当滑动超过一半，收缩状态下toolbar显示内容，根据收缩位置，改变透明值 112 | toolbarClose.setVisibility(View.VISIBLE); 113 | toolbarOpen.setVisibility(View.GONE); 114 | float scale3 = (float) (scrollRange - offset) / (scrollRange / 2); 115 | int alpha3 = (int) (255 * scale3); 116 | bgToolbarClose.setBackgroundColor(Color.argb(alpha3, 25, 131, 209)); 117 | } 118 | //根据偏移百分比计算扫一扫布局的透明度值 119 | float scale = (float) offset / scrollRange; 120 | int alpha = (int) (255 * scale); 121 | bgContent.setBackgroundColor(Color.argb(alpha, 25, 131, 209)); 122 | } 123 | ``` 124 | 详细代码见 125 | github地址：[https://github.com/taixiang/alihome](https://github.com/taixiang/alihome) 126 | 127 | 欢迎关注我的博客：[https://blog.manjiexiang.cn/](https://blog.manjiexiang.cn/) 128 | 更多精彩欢迎关注微信号：春风十里不如认识你 129 | ![image.png](https://upload-images.jianshu.io/upload_images/7569533-cfeb1f55473a2143.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 130 | 131 | 有个「佛系码农圈」，欢迎大家加入畅聊，开心就好！ 132 | ![](https://user-gold-cdn.xitu.io/2018/7/8/16478099583f8ec2?w=185&h=250&f=jpeg&s=35412) 133 | 过期了，可加我微信 tx467220125 拉你入群。 134 | -------------------------------------------------------------------------------- /app/.gitignore: -------------------------------------------------------------------------------- 1 | /build 2 | -------------------------------------------------------------------------------- /app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: 'com.android.application' 2 | 3 | android { 4 | compileSdkVersion 26 5 | defaultConfig { 6 | applicationId "com.collapsable" 7 | minSdkVersion 19 8 | targetSdkVersion 26 9 | versionCode 1 10 | versionName "1.0" 11 | testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner" 12 | } 13 | buildTypes { 14 | release { 15 | minifyEnabled false 16 | proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' 17 | } 18 | } 19 | } 20 | 21 | dependencies { 22 | implementation fileTree(dir: 'libs', include: ['*.jar']) 23 | implementation 'com.android.support:appcompat-v7:26.1.0' 24 | implementation 'com.android.support:design:26.1.0' 25 | testImplementation 'junit:junit:4.12' 26 | } 27 | -------------------------------------------------------------------------------- /app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # You can control the set of applied configuration files using the 3 | # proguardFiles setting in build.gradle. 4 | # 5 | # For more details, see 6 | # http://developer.android.com/guide/developing/tools/proguard.html 7 | 8 | # If your project uses WebView with JS, uncomment the following 9 | # and specify the fully qualified class name to the JavaScript interface 10 | # class: 11 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 12 | # public *; 13 | #} 14 | 15 | # Uncomment this to preserve the line number information for 16 | # debugging stack traces. 17 | #-keepattributes SourceFile,LineNumberTable 18 | 19 | # If you keep the line number information, uncomment this to 20 | # hide the original source file name. 21 | #-renamesourcefileattribute SourceFile 22 | -------------------------------------------------------------------------------- /app/src/androidTest/java/com/collapsable/ExampleInstrumentedTest.java: -------------------------------------------------------------------------------- 1 | package com.collapsable; 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 | * Instrumented 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.collapsable", appContext.getPackageName()); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 12 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /app/src/main/java/com/collapsable/AliHomeActivity.java: -------------------------------------------------------------------------------- 1 | package com.collapsable; 2 | 3 | import android.graphics.Color; 4 | import android.os.Bundle; 5 | import android.support.annotation.Nullable; 6 | import android.support.design.widget.AppBarLayout; 7 | import android.support.v7.app.AppCompatActivity; 8 | import android.util.Log; 9 | import android.view.View; 10 | 11 | /** 12 | * Created by tx on 2018/7/6. 13 | */ 14 | 15 | public class AliHomeActivity extends AppCompatActivity implements AppBarLayout.OnOffsetChangedListener{ 16 | 17 | private AppBarLayout appBar; 18 | /** 19 | * 大布局背景，遮罩层 20 | */ 21 | private View bgContent; 22 | /** 23 | * 展开状态下toolbar显示的内容 24 | */ 25 | private View toolbarOpen; 26 | /** 27 | * 展开状态下toolbar的遮罩层 28 | */ 29 | private View bgToolbarOpen; 30 | /** 31 | * 收缩状态下toolbar显示的内容 32 | */ 33 | private View toolbarClose; 34 | /** 35 | * 收缩状态下toolbar的遮罩层 36 | */ 37 | private View bgToolbarClose; 38 | 39 | @Override 40 | protected void onCreate(@Nullable Bundle savedInstanceState) { 41 | super.onCreate(savedInstanceState); 42 | setContentView(R.layout.activity_ali_home); 43 | appBar = findViewById(R.id.app_bar); 44 | bgContent = findViewById(R.id.bg_content); 45 | toolbarOpen = findViewById(R.id.include_toolbar_open); 46 | bgToolbarOpen = findViewById(R.id.bg_toolbar_open); 47 | toolbarClose = findViewById(R.id.include_toolbar_close); 48 | bgToolbarClose = findViewById(R.id.bg_toolbar_close); 49 | 50 | appBar.addOnOffsetChangedListener(this); 51 | 52 | } 53 | 54 | @Override 55 | protected void onDestroy() { 56 | super.onDestroy(); 57 | appBar.removeOnOffsetChangedListener(this); 58 | } 59 | 60 | @Override 61 | public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) { 62 | //垂直方向偏移量 63 | int offset = Math.abs(verticalOffset); 64 | //最大偏移距离 65 | int scrollRange = appBarLayout.getTotalScrollRange(); 66 | if (offset <= scrollRange / 2) {//当滑动没超过一半，展开状态下toolbar显示内容，根据收缩位置，改变透明值 67 | toolbarOpen.setVisibility(View.VISIBLE); 68 | toolbarClose.setVisibility(View.GONE); 69 | //根据偏移百分比 计算透明值 70 | float scale2 = (float) offset / (scrollRange / 2); 71 | int alpha2 = (int) (255 * scale2); 72 | bgToolbarOpen.setBackgroundColor(Color.argb(alpha2, 25, 131, 209)); 73 | } else {//当滑动超过一半，收缩状态下toolbar显示内容，根据收缩位置，改变透明值 74 | toolbarClose.setVisibility(View.VISIBLE); 75 | toolbarOpen.setVisibility(View.GONE); 76 | float scale3 = (float) (scrollRange - offset) / (scrollRange / 2); 77 | int alpha3 = (int) (255 * scale3); 78 | bgToolbarClose.setBackgroundColor(Color.argb(alpha3, 25, 131, 209)); 79 | } 80 | //根据偏移百分比计算扫一扫布局的透明度值 81 | float scale = (float) offset / scrollRange; 82 | int alpha = (int) (255 * scale); 83 | bgContent.setBackgroundColor(Color.argb(alpha, 25, 131, 209)); 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /app/src/main/java/com/collapsable/ScrollingActivity.java: -------------------------------------------------------------------------------- 1 | package com.collapsable; 2 | 3 | import android.os.Bundle; 4 | import android.support.design.widget.FloatingActionButton; 5 | import android.support.design.widget.Snackbar; 6 | import android.support.v7.app.AppCompatActivity; 7 | import android.support.v7.widget.Toolbar; 8 | import android.view.View; 9 | import android.view.Menu; 10 | import android.view.MenuItem; 11 | 12 | public class ScrollingActivity extends AppCompatActivity { 13 | 14 | @Override 15 | protected void onCreate(Bundle savedInstanceState) { 16 | super.onCreate(savedInstanceState); 17 | setContentView(R.layout.activity_scrolling); 18 | Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); 19 | setSupportActionBar(toolbar); 20 | 21 | FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); 22 | fab.setOnClickListener(new View.OnClickListener() { 23 | @Override 24 | public void onClick(View view) { 25 | Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG) 26 | .setAction("Action", null).show(); 27 | } 28 | }); 29 | } 30 | 31 | @Override 32 | public boolean onCreateOptionsMenu(Menu menu) { 33 | // Inflate the menu; this adds items to the action bar if it is present. 34 | getMenuInflater().inflate(R.menu.menu_scrolling, menu); 35 | return true; 36 | } 37 | 38 | @Override 39 | public boolean onOptionsItemSelected(MenuItem item) { 40 | // Handle action bar item clicks here. The action bar will 41 | // automatically handle clicks on the Home/Up button, so long 42 | // as you specify a parent activity in AndroidManifest.xml. 43 | int id = item.getItemId(); 44 | 45 | //noinspection SimplifiableIfStatement 46 | if (id == R.id.action_settings) { 47 | return true; 48 | } 49 | return super.onOptionsItemSelected(item); 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /app/src/main/res/drawable-v24/ic_launcher_foreground.xml: -------------------------------------------------------------------------------- 1 | 7 | 12 | 13 | 19 | 22 | 25 | 26 | 27 | 28 | 34 | 35 | -------------------------------------------------------------------------------- /app/src/main/res/drawable/ic_launcher_background.xml: -------------------------------------------------------------------------------- 1 | 2 | 7 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95 | 100 | 105 | 110 | 115 | 120 | 125 | 130 | 135 | 140 | 145 | 150 | 155 | 160 | 165 | 170 | 171 | -------------------------------------------------------------------------------- /app/src/main/res/drawable/shape_search.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /app/src/main/res/layout/activity_ali_home.xml: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 13 | 14 | 19 | 20 | 27 | 28 | 34 | 35 | 38 | 39 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /app/src/main/res/layout/activity_scrolling.xml: -------------------------------------------------------------------------------- 1 | 2 | 9 | 10 | 16 | 17 | 25 | 26 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /app/src/main/res/layout/content_scrolling.xml: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /app/src/main/res/layout/include_open.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 7 | 8 | 12 | 13 | 19 | 20 | 25 | 26 | 33 | 34 | 35 | 36 | 42 | 43 | 48 | 49 | 56 | 57 | 58 | 59 | 60 | 66 | 67 | 72 | 73 | 80 | 81 | 82 | 83 | 89 | 90 | 95 | 96 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 113 | 114 | 115 | 116 | 117 | -------------------------------------------------------------------------------- /app/src/main/res/layout/include_toolbar_close.xml: -------------------------------------------------------------------------------- 1 | 5 | 6 | 14 | 15 | 23 | 24 | 32 | 33 | 40 | 41 | 49 | 50 | 54 | 55 | -------------------------------------------------------------------------------- /app/src/main/res/layout/include_toolbar_open.xml: -------------------------------------------------------------------------------- 1 | 6 | 7 | 15 | 16 | 22 | 23 | 33 | 34 | 35 | 43 | 44 | 52 | 53 | 57 | 58 | -------------------------------------------------------------------------------- /app/src/main/res/menu/menu_scrolling.xml: -------------------------------------------------------------------------------- 1 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taixiang/alihome/9d5fa316c36627bf45cb07fae206231ef95168eb/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taixiang/alihome/9d5fa316c36627bf45cb07fae206231ef95168eb/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taixiang/alihome/9d5fa316c36627bf45cb07fae206231ef95168eb/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taixiang/alihome/9d5fa316c36627bf45cb07fae206231ef95168eb/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taixiang/alihome/9d5fa316c36627bf45cb07fae206231ef95168eb/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taixiang/alihome/9d5fa316c36627bf45cb07fae206231ef95168eb/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxhdpi/ic_add.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taixiang/alihome/9d5fa316c36627bf45cb07fae206231ef95168eb/app/src/main/res/mipmap-xxhdpi/ic_add.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxhdpi/ic_card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taixiang/alihome/9d5fa316c36627bf45cb07fae206231ef95168eb/app/src/main/res/mipmap-xxhdpi/ic_card.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxhdpi/ic_contact.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taixiang/alihome/9d5fa316c36627bf45cb07fae206231ef95168eb/app/src/main/res/mipmap-xxhdpi/ic_contact.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taixiang/alihome/9d5fa316c36627bf45cb07fae206231ef95168eb/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taixiang/alihome/9d5fa316c36627bf45cb07fae206231ef95168eb/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxhdpi/ic_payment.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taixiang/alihome/9d5fa316c36627bf45cb07fae206231ef95168eb/app/src/main/res/mipmap-xxhdpi/ic_payment.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxhdpi/ic_scan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taixiang/alihome/9d5fa316c36627bf45cb07fae206231ef95168eb/app/src/main/res/mipmap-xxhdpi/ic_scan.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxhdpi/ic_search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taixiang/alihome/9d5fa316c36627bf45cb07fae206231ef95168eb/app/src/main/res/mipmap-xxhdpi/ic_search.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxhdpi/ic_transfer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taixiang/alihome/9d5fa316c36627bf45cb07fae206231ef95168eb/app/src/main/res/mipmap-xxhdpi/ic_transfer.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taixiang/alihome/9d5fa316c36627bf45cb07fae206231ef95168eb/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taixiang/alihome/9d5fa316c36627bf45cb07fae206231ef95168eb/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /app/src/main/res/values/colors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | #FF4081 6 | 7 | #1983d1 8 | #1673b8 9 | #ffffff 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 | Collapsable 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 |