frist commit

.gitignore

@@ -0,0 +1,10 @@
+*.iml
+.gradle
+/local.properties
+/.idea
+.DS_Store
+/build
+/captures
+.externalNativeBuild
+.cxx
+local.properties

CONTRIBUTING.md

@@ -0,0 +1,28 @@
+# How to Contribute
+
+We'd love to accept your patches and contributions to this project. There are
+just a few small guidelines you need to follow.
+
+## Contributor License Agreement
+
+Contributions to this project must be accompanied by a Contributor License
+Agreement. You (or your employer) retain the copyright to your contribution,
+this simply gives us permission to use and redistribute your contributions as
+part of the project. Head over to <https://cla.developers.google.com/> to see
+your current agreements on file or to sign a new one.
+
+You generally only need to submit a CLA once, so if you've already submitted one
+(even if it was for a different project), you probably don't need to do it
+again.
+
+## Code reviews
+
+All submissions, including submissions by project members, require review. We
+use GitHub pull requests for this purpose. Consult
+[GitHub Help](https://help.github.com/articles/about-pull-requests/) for more
+information on using pull requests.
+
+## Community Guidelines
+
+This project follows [Google's Open Source Community
+Guidelines](https://opensource.google.com/conduct/).

LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

README.md

@@ -0,0 +1,29 @@
+# Compose Animation Codelab
+
+This folder contains the source code for the
+[Compose Animation](https://developer.android.com/codelabs/android-compose-animation)
+codelab.
+
+In this codelab, you will learn how to use some Animation APIs in Jetpack Compose.
+
+## Screenshot
+
+![Screenshot](screenshots/app.png)
+
+## License
+
+```
+Copyright 2021 The Android Open Source Project
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+```

build.gradle

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2021 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+buildscript {
+    ext {
+        compose_version = '1.1.1'
+        kotlin_version = '1.6.10'
+    }
+    repositories {
+        google()
+        mavenCentral()
+    }
+    dependencies {
+        classpath 'com.android.tools.build:gradle:7.1.2'
+        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
+    }
+}
+
+allprojects {
+    repositories {
+        google()
+        mavenCentral()
+    }
+}

finished/.gitignore

@@ -0,0 +1 @@
+/build

finished/build.gradle

@@ -0,0 +1,64 @@
+/*
+ * Copyright 2021 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+plugins {
+    id 'com.android.application'
+    id 'kotlin-android'
+}
+
+android {
+    compileSdkVersion 31
+    defaultConfig {
+        applicationId 'com.example.android.codelab.animation'
+        minSdkVersion 21
+        targetSdkVersion 31
+        versionCode 1
+        versionName '1.0'
+    }
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_1_8
+        targetCompatibility JavaVersion.VERSION_1_8
+    }
+    buildFeatures {
+        compose true
+    }
+    kotlinOptions {
+        jvmTarget = '1.8'
+    }
+    composeOptions {
+        kotlinCompilerExtensionVersion compose_version
+    }
+}
+
+dependencies {
+    implementation 'androidx.core:core-ktx:1.7.0'
+
+    implementation "androidx.compose.ui:ui:$compose_version"
+    implementation "androidx.compose.material:material:$compose_version"
+    implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
+    implementation 'androidx.activity:activity-compose:1.4.0'
+    debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
+}
+
+// Compiler flag to use experimental Compose APIs
+tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile).configureEach {
+    kotlinOptions {
+        jvmTarget = "1.8"
+        freeCompilerArgs += [
+                "-Xopt-in=kotlin.RequiresOptIn"
+        ]
+    }
+}

finished/src/main/AndroidManifest.xml

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright 2021 The Android Open Source Project
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     https://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+-->
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="com.example.android.codelab.animation">
+
+    <application
+        android:allowBackup="false"
+        android:icon="@mipmap/ic_launcher"
+        android:label="@string/app_name"
+        android:roundIcon="@mipmap/ic_launcher_round"
+        android:supportsRtl="true"
+        android:theme="@style/Theme.Animation">
+        <activity
+            android:name=".MainActivity"
+            android:exported="true"
+            android:label="@string/app_name"
+            android:theme="@style/Theme.Animation">
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+        </activity>
+    </application>
+
+</manifest>

finished/src/main/java/com/example/android/codelab/animation/MainActivity.kt

@@ -0,0 +1,35 @@
+/*
+ * Copyright 2021 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.example.android.codelab.animation
+
+import android.os.Bundle
+import androidx.activity.ComponentActivity
+import androidx.activity.compose.setContent
+import com.example.android.codelab.animation.ui.AnimationCodelabTheme
+import com.example.android.codelab.animation.ui.home.Home
+
+class MainActivity : ComponentActivity() {
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContent {
+            AnimationCodelabTheme {
+                Home()
+            }
+        }
+    }
+}

finished/src/main/java/com/example/android/codelab/animation/ui/Color.kt

@@ -0,0 +1,27 @@
+/*
+ * Copyright 2021 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.example.android.codelab.animation.ui
+
+import androidx.compose.ui.graphics.Color
+
+val Purple100 = Color(0xFFE1BEE7)
+val Purple500 = Color(0xFF6200EE)
+val Purple700 = Color(0xFF3700B3)
+val Teal200 = Color(0xFF03DAC5)
+val Green300 = Color(0xFF81C784)
+val Green800 = Color(0xFF2E7D32)
+val Amber600 = Color(0xFFFFB300)

finished/src/main/java/com/example/android/codelab/animation/ui/Theme.kt

@@ -0,0 +1,34 @@
+/*
+ * Copyright 2021 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.example.android.codelab.animation.ui
+
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.lightColors
+import androidx.compose.runtime.Composable
+
+@Composable
+fun AnimationCodelabTheme(content: @Composable () -> Unit) {
+    val colors = lightColors(
+        primary = Purple500,
+        primaryVariant = Purple700,
+        secondary = Teal200
+    )
+    MaterialTheme(
+        colors = colors,
+        content = content
+    )
+}

finished/src/main/java/com/example/android/codelab/animation/ui/home/Home.kt

@@ -0,0 +1,753 @@
+/*
+ * Copyright 2021 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.example.android.codelab.animation.ui.home
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.ExperimentalAnimationApi
+import androidx.compose.animation.animateColor
+import androidx.compose.animation.animateColorAsState
+import androidx.compose.animation.animateContentSize
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.FastOutLinearInEasing
+import androidx.compose.animation.core.LinearOutSlowInEasing
+import androidx.compose.animation.core.RepeatMode
+import androidx.compose.animation.core.Spring
+import androidx.compose.animation.core.animateDp
+import androidx.compose.animation.core.animateFloat
+import androidx.compose.animation.core.calculateTargetValue
+import androidx.compose.animation.core.infiniteRepeatable
+import androidx.compose.animation.core.keyframes
+import androidx.compose.animation.core.rememberInfiniteTransition
+import androidx.compose.animation.core.spring
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.core.updateTransition
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
+import androidx.compose.animation.splineBasedDecay
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.gestures.awaitFirstDown
+import androidx.compose.foundation.gestures.horizontalDrag
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.LazyListState
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material.FloatingActionButton
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Scaffold
+import androidx.compose.material.Surface
+import androidx.compose.material.TabPosition
+import androidx.compose.material.TabRow
+import androidx.compose.material.Text
+import androidx.compose.material.TextButton
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.AccountBox
+import androidx.compose.material.icons.filled.Check
+import androidx.compose.material.icons.filled.Edit
+import androidx.compose.material.icons.filled.Home
+import androidx.compose.material.icons.filled.Info
+import androidx.compose.material.icons.filled.Refresh
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.key
+import androidx.compose.runtime.mutableStateListOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.composed
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.input.pointer.consumePositionChange
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.input.pointer.positionChange
+import androidx.compose.ui.input.pointer.util.VelocityTracker
+import androidx.compose.ui.res.stringArrayResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.heading
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.example.android.codelab.animation.R
+import com.example.android.codelab.animation.ui.Amber600
+import com.example.android.codelab.animation.ui.AnimationCodelabTheme
+import com.example.android.codelab.animation.ui.Green300
+import com.example.android.codelab.animation.ui.Green800
+import com.example.android.codelab.animation.ui.Purple100
+import com.example.android.codelab.animation.ui.Purple700
+import kotlinx.coroutines.coroutineScope
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
+import kotlin.math.absoluteValue
+import kotlin.math.roundToInt
+
+private enum class TabPage {
+    Home, Work
+}
+
+/**
+ * Shows the entire screen.
+ */
+@Composable
+fun Home() {
+    // String resources.
+    val allTasks = stringArrayResource(R.array.tasks)
+    val allTopics = stringArrayResource(R.array.topics).toList()
+
+    // The currently selected tab.
+    var tabPage by remember { mutableStateOf(TabPage.Home) }
+
+    // True if the whether data is currently loading.
+    var weatherLoading by remember { mutableStateOf(false) }
+
+    // Holds all the tasks currently shown on the task list.
+    val tasks = remember { mutableStateListOf(*allTasks) }
+
+    // Holds the topic that is currently expanded to show its body.
+    var expandedTopic by remember { mutableStateOf<String?>(null) }
+
+    // True if the message about the edit feature is shown.
+    var editMessageShown by remember { mutableStateOf(false) }
+
+    // Simulates loading weather data. This takes 3 seconds.
+    suspend fun loadWeather() {
+        if (!weatherLoading) {
+            weatherLoading = true
+            delay(3000L)
+            weatherLoading = false
+        }
+    }
+
+    // Shows the message about edit feature.
+    suspend fun showEditMessage() {
+        if (!editMessageShown) {
+            editMessageShown = true
+            delay(3000L)
+            editMessageShown = false
+        }
+    }
+
+    // Load the weather at the initial composition.
+    LaunchedEffect(Unit) {
+        loadWeather()
+    }
+
+    val lazyListState = rememberLazyListState()
+
+    // The background color. The value is changed by the current tab.
+    val backgroundColor by animateColorAsState(if (tabPage == TabPage.Home) Purple100 else Green300)
+
+    // The coroutine scope for event handlers calling suspend functions.
+    val coroutineScope = rememberCoroutineScope()
+    Scaffold(
+        topBar = {
+            HomeTabBar(
+                backgroundColor = backgroundColor,
+                tabPage = tabPage,
+                onTabSelected = { tabPage = it }
+            )
+        },
+        backgroundColor = backgroundColor,
+        floatingActionButton = {
+            HomeFloatingActionButton(
+                extended = lazyListState.isScrollingUp(),
+                onClick = {
+                    coroutineScope.launch {
+                        showEditMessage()
+                    }
+                }
+            )
+        }
+    ) {
+        LazyColumn(
+            contentPadding = PaddingValues(horizontal = 16.dp, vertical = 32.dp),
+            state = lazyListState
+        ) {
+            // Weather
+            item { Header(title = stringResource(R.string.weather)) }
+            item { Spacer(modifier = Modifier.height(16.dp)) }
+            item {
+                Surface(
+                    modifier = Modifier.fillMaxWidth(),
+                    elevation = 2.dp
+                ) {
+                    if (weatherLoading) {
+                        LoadingRow()
+                    } else {
+                        WeatherRow(onRefresh = {
+                            coroutineScope.launch {
+                                loadWeather()
+                            }
+                        })
+                    }
+                }
+            }
+            item { Spacer(modifier = Modifier.height(32.dp)) }
+
+            // Topics
+            item { Header(title = stringResource(R.string.topics)) }
+            item { Spacer(modifier = Modifier.height(16.dp)) }
+            items(allTopics) { topic ->
+                TopicRow(
+                    topic = topic,
+                    expanded = expandedTopic == topic,
+                    onClick = {
+                        expandedTopic = if (expandedTopic == topic) null else topic
+                    }
+                )
+            }
+            item { Spacer(modifier = Modifier.height(32.dp)) }
+
+            // Tasks
+            item { Header(title = stringResource(R.string.tasks)) }
+            item { Spacer(modifier = Modifier.height(16.dp)) }
+            if (tasks.isEmpty()) {
+                item {
+                    TextButton(onClick = { tasks.clear(); tasks.addAll(allTasks) }) {
+                        Text(stringResource(R.string.add_tasks))
+                    }
+                }
+            }
+            items(count = tasks.size) { i ->
+                val task = tasks.getOrNull(i)
+                if (task != null) {
+                    key(task) {
+                        TaskRow(
+                            task = task,
+                            onRemove = { tasks.remove(task) }
+                        )
+                    }
+                }
+            }
+        }
+        EditMessage(editMessageShown)
+    }
+}
+
+/**
+ * Shows the floating action button.
+ *
+ * @param extended Whether the tab should be shown in its expanded state.
+ */
+// AnimatedVisibility is currently an experimental API in Compose Animation.
+@OptIn(ExperimentalAnimationApi::class)
+@Composable
+private fun HomeFloatingActionButton(
+    extended: Boolean,
+    onClick: () -> Unit
+) {
+    // Use `FloatingActionButton` rather than `ExtendedFloatingActionButton` for full control on
+    // how it should animate.
+    FloatingActionButton(onClick = onClick) {
+        Row(
+            modifier = Modifier.padding(horizontal = 16.dp)
+        ) {
+            Icon(
+                imageVector = Icons.Default.Edit,
+                contentDescription = null
+            )
+            // Toggle the visibility of the content with animation.
+            AnimatedVisibility(visible = extended) {
+                Text(
+                    text = stringResource(R.string.edit),
+                    modifier = Modifier
+                        .padding(start = 8.dp, top = 3.dp)
+                )
+            }
+        }
+    }
+}
+
+/**
+ * Shows a message that the edit feature is not available.
+ */
+@OptIn(ExperimentalAnimationApi::class)
+@Composable
+private fun EditMessage(shown: Boolean) {
+    AnimatedVisibility(
+        visible = shown,
+        enter = slideInVertically(
+            // Enters by sliding in from offset -fullHeight to 0.
+            initialOffsetY = { fullHeight -> -fullHeight },
+            animationSpec = tween(durationMillis = 150, easing = LinearOutSlowInEasing)
+        ),
+        exit = slideOutVertically(
+            // Exits by sliding out from offset 0 to -fullHeight.
+            targetOffsetY = { fullHeight -> -fullHeight },
+            animationSpec = tween(durationMillis = 250, easing = FastOutLinearInEasing)
+        )
+    ) {
+        Surface(
+            modifier = Modifier.fillMaxWidth(),
+            color = MaterialTheme.colors.secondary,
+            elevation = 4.dp
+        ) {
+            Text(
+                text = stringResource(R.string.edit_message),
+                modifier = Modifier.padding(16.dp)
+            )
+        }
+    }
+}
+
+/**
+ * Returns whether the lazy list is currently scrolling up.
+ */
+@Composable
+private fun LazyListState.isScrollingUp(): Boolean {
+    var previousIndex by remember(this) { mutableStateOf(firstVisibleItemIndex) }
+    var previousScrollOffset by remember(this) { mutableStateOf(firstVisibleItemScrollOffset) }
+    return remember(this) {
+        derivedStateOf {
+            if (previousIndex != firstVisibleItemIndex) {
+                previousIndex > firstVisibleItemIndex
+            } else {
+                previousScrollOffset >= firstVisibleItemScrollOffset
+            }.also {
+                previousIndex = firstVisibleItemIndex
+                previousScrollOffset = firstVisibleItemScrollOffset
+            }
+        }
+    }.value
+}
+
+/**
+ * Shows the header label.
+ *
+ * @param title The title to be shown.
+ */
+@Composable
+private fun Header(
+    title: String
+) {
+    Text(
+        text = title,
+        modifier = Modifier.semantics { heading() },
+        style = MaterialTheme.typography.h5
+    )
+}
+
+/**
+ * Shows a row for one topic.
+ *
+ * @param topic The topic title.
+ * @param expanded Whether the row should be shown expanded with the topic body.
+ * @param onClick Called when the row is clicked.
+ */
+@OptIn(ExperimentalMaterialApi::class)
+@Composable
+private fun TopicRow(topic: String, expanded: Boolean, onClick: () -> Unit) {
+    TopicRowSpacer(visible = expanded)
+    Surface(
+        modifier = Modifier
+            .fillMaxWidth(),
+        elevation = 2.dp,
+        onClick = onClick
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(16.dp)
+                // This `Column` animates its size when its content changes.
+                .animateContentSize()
+        ) {
+            Row {
+                Icon(
+                    imageVector = Icons.Default.Info,
+                    contentDescription = null
+                )
+                Spacer(modifier = Modifier.width(16.dp))
+                Text(
+                    text = topic,
+                    style = MaterialTheme.typography.body1
+                )
+            }
+            if (expanded) {
+                Spacer(modifier = Modifier.height(8.dp))
+                Text(
+                    text = stringResource(R.string.lorem_ipsum),
+                    textAlign = TextAlign.Justify
+                )
+            }
+        }
+    }
+    TopicRowSpacer(visible = expanded)
+}
+
+/**
+ * Shows a separator for topics.
+ */
+@OptIn(ExperimentalAnimationApi::class)
+@Composable
+fun TopicRowSpacer(visible: Boolean) {
+    AnimatedVisibility(visible = visible) {
+        Spacer(modifier = Modifier.height(8.dp))
+    }
+}
+
+/**
+ * Shows the bar that holds 2 tabs.
+ *
+ * @param backgroundColor The background color for the bar.
+ * @param tabPage The [TabPage] that is currently selected.
+ * @param onTabSelected Called when the tab is switched.
+ */
+@Composable
+private fun HomeTabBar(
+    backgroundColor: Color,
+    tabPage: TabPage,
+    onTabSelected: (tabPage: TabPage) -> Unit
+) {
+    TabRow(
+        selectedTabIndex = tabPage.ordinal,
+        backgroundColor = backgroundColor,
+        indicator = { tabPositions ->
+            HomeTabIndicator(tabPositions, tabPage)
+        }
+    ) {
+        HomeTab(
+            icon = Icons.Default.Home,
+            title = stringResource(R.string.home),
+            onClick = { onTabSelected(TabPage.Home) }
+        )
+        HomeTab(
+            icon = Icons.Default.AccountBox,
+            title = stringResource(R.string.work),
+            onClick = { onTabSelected(TabPage.Work) }
+        )
+    }
+}
+
+/**
+ * Shows an indicator for the tab.
+ *
+ * @param tabPositions The list of [TabPosition]s from a [TabRow].
+ * @param tabPage The [TabPage] that is currently selected.
+ */
+@Composable
+private fun HomeTabIndicator(
+    tabPositions: List<TabPosition>,
+    tabPage: TabPage
+) {
+    val transition = updateTransition(
+        tabPage,
+        label = "Tab indicator"
+    )
+    val indicatorLeft by transition.animateDp(
+        transitionSpec = {
+            if (TabPage.Home isTransitioningTo TabPage.Work) {
+                // Indicator moves to the right.
+                // Low stiffness spring for the left edge so it moves slower than the right edge.
+                spring(stiffness = Spring.StiffnessVeryLow)
+            } else {
+                // Indicator moves to the left.
+                // Medium stiffness spring for the left edge so it moves faster than the right edge.
+                spring(stiffness = Spring.StiffnessMedium)
+            }
+        },
+        label = "Indicator left"
+    ) { page ->
+        tabPositions[page.ordinal].left
+    }
+    val indicatorRight by transition.animateDp(
+        transitionSpec = {
+            if (TabPage.Home isTransitioningTo TabPage.Work) {
+                // Indicator moves to the right
+                // Medium stiffness spring for the right edge so it moves faster than the left edge.
+                spring(stiffness = Spring.StiffnessMedium)
+            } else {
+                // Indicator moves to the left.
+                // Low stiffness spring for the right edge so it moves slower than the left edge.
+                spring(stiffness = Spring.StiffnessVeryLow)
+            }
+        },
+        label = "Indicator right"
+    ) { page ->
+        tabPositions[page.ordinal].right
+    }
+    val color by transition.animateColor(
+        label = "Border color"
+    ) { page ->
+        if (page == TabPage.Home) Purple700 else Green800
+    }
+    Box(
+        Modifier
+            .fillMaxSize()
+            .wrapContentSize(align = Alignment.BottomStart)
+            .offset(x = indicatorLeft)
+            .width(indicatorRight - indicatorLeft)
+            .padding(4.dp)
+            .fillMaxSize()
+            .border(
+                BorderStroke(2.dp, color),
+                RoundedCornerShape(4.dp)
+            )
+    )
+}
+
+/**
+ * Shows a tab.
+ *
+ * @param icon The icon to be shown on this tab.
+ * @param title The title to be shown on this tab.
+ * @param onClick Called when this tab is clicked.
+ * @param modifier The [Modifier].
+ */
+@Composable
+private fun HomeTab(
+    icon: ImageVector,
+    title: String,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier
+) {
+    Row(
+        modifier = modifier
+            .clickable(onClick = onClick)
+            .padding(16.dp),
+        horizontalArrangement = Arrangement.Center,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Icon(
+            imageVector = icon,
+            contentDescription = null
+        )
+        Spacer(modifier = Modifier.width(16.dp))
+        Text(text = title)
+    }
+}
+
+/**
+ * Shows the weather.
+ *
+ * @param onRefresh Called when the refresh icon button is clicked.
+ */
+@Composable
+private fun WeatherRow(
+    onRefresh: () -> Unit
+) {
+    Row(
+        modifier = Modifier
+            .heightIn(min = 64.dp)
+            .padding(16.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Box(
+            modifier = Modifier
+                .size(48.dp)
+                .clip(CircleShape)
+                .background(Amber600)
+        )
+        Spacer(modifier = Modifier.width(16.dp))
+        Text(text = stringResource(R.string.temperature), fontSize = 24.sp)
+        Spacer(modifier = Modifier.weight(1f))
+        IconButton(onClick = onRefresh) {
+            Icon(
+                imageVector = Icons.Default.Refresh,
+                contentDescription = stringResource(R.string.refresh)
+            )
+        }
+    }
+}
+
+/**
+ * Shows the loading state of the weather.
+ */
+@Composable
+private fun LoadingRow() {
+    // Creates an `InfiniteTransition` that runs infinite child animation values.
+    val infiniteTransition = rememberInfiniteTransition()
+    val alpha by infiniteTransition.animateFloat(
+        initialValue = 0f,
+        targetValue = 1f,
+        // `infiniteRepeatable` repeats the specified duration-based `AnimationSpec` infinitely.
+        animationSpec = infiniteRepeatable(
+            // The `keyframes` animates the value by specifying multiple timestamps.
+            animation = keyframes {
+                // One iteration is 1000 milliseconds.
+                durationMillis = 1000
+                // 0.7f at the middle of an iteration.
+                0.7f at 500
+            },
+            // When the value finishes animating from 0f to 1f, it repeats by reversing the
+            // animation direction.
+            repeatMode = RepeatMode.Reverse
+        )
+    )
+    Row(
+        modifier = Modifier
+            .heightIn(min = 64.dp)
+            .padding(16.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Box(
+            modifier = Modifier
+                .size(48.dp)
+                .clip(CircleShape)
+                .background(Color.LightGray.copy(alpha = alpha))
+        )
+        Spacer(modifier = Modifier.width(16.dp))
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(32.dp)
+                .background(Color.LightGray.copy(alpha = alpha))
+        )
+    }
+}
+
+/**
+ * Shows a row for one task.
+ *
+ * @param task The task description.
+ * @param onRemove Called when the task is swiped away and removed.
+ */
+@Composable
+private fun TaskRow(task: String, onRemove: () -> Unit) {
+    Surface(
+        modifier = Modifier
+            .fillMaxWidth()
+            .swipeToDismiss(onRemove),
+        elevation = 2.dp
+    ) {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(16.dp)
+        ) {
+            Icon(
+                imageVector = Icons.Default.Check,
+                contentDescription = null
+            )
+            Spacer(modifier = Modifier.width(16.dp))
+            Text(
+                text = task,
+                style = MaterialTheme.typography.body1
+            )
+        }
+    }
+}
+/**
+ * The modified element can be horizontally swiped away.
+ *
+ * @param onDismissed Called when the element is swiped to the edge of the screen.
+ */
+private fun Modifier.swipeToDismiss(
+    onDismissed: () -> Unit
+): Modifier = composed {
+    // This `Animatable` stores the horizontal offset for the element.
+    val offsetX = remember { Animatable(0f) }
+    pointerInput(Unit) {
+        // Used to calculate a settling position of a fling animation.
+        val decay = splineBasedDecay<Float>(this)
+        // Wrap in a coroutine scope to use suspend functions for touch events and animation.
+        coroutineScope {
+            while (true) {
+                // Wait for a touch down event.
+                val pointerId = awaitPointerEventScope { awaitFirstDown().id }
+                // Interrupt any ongoing animation.
+                offsetX.stop()
+                // Prepare for drag events and record velocity of a fling.
+                val velocityTracker = VelocityTracker()
+                // Wait for drag events.
+                awaitPointerEventScope {
+                    horizontalDrag(pointerId) { change ->
+                        // Record the position after offset
+                        val horizontalDragOffset = offsetX.value + change.positionChange().x
+                        launch {
+                            // Overwrite the `Animatable` value while the element is dragged.
+                            offsetX.snapTo(horizontalDragOffset)
+                        }
+                        // Record the velocity of the drag.
+                        velocityTracker.addPosition(change.uptimeMillis, change.position)
+                        // Consume the gesture event, not passed to external
+                        change.consumePositionChange()
+                    }
+                }
+                // Dragging finished. Calculate the velocity of the fling.
+                val velocity = velocityTracker.calculateVelocity().x
+                // Calculate where the element eventually settles after the fling animation.
+                val targetOffsetX = decay.calculateTargetValue(offsetX.value, velocity)
+                // The animation should end as soon as it reaches these bounds.
+                offsetX.updateBounds(
+                    lowerBound = -size.width.toFloat(),
+                    upperBound = size.width.toFloat()
+                )
+                launch {
+                    if (targetOffsetX.absoluteValue <= size.width) {
+                        // Not enough velocity; Slide back to the default position.
+                        offsetX.animateTo(targetValue = 0f, initialVelocity = velocity)
+                    } else {
+                        // Enough velocity to slide away the element to the edge.
+                        offsetX.animateDecay(velocity, decay)
+                        // The element was swiped away.
+                        onDismissed()
+                    }
+                }
+            }
+        }
+    }
+        // Apply the horizontal offset to the element.
+        .offset { IntOffset(offsetX.value.roundToInt(), 0) }
+}
+
+@Preview
+@Composable
+private fun PreviewHomeTabBar() {
+    HomeTabBar(
+        backgroundColor = Purple100,
+        tabPage = TabPage.Home,
+        onTabSelected = {}
+    )
+}
+
+@Preview
+@Composable
+private fun PreviewHome() {
+    AnimationCodelabTheme {
+        Home()
+    }
+}

finished/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright 2021 The Android Open Source Project
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     https://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+-->
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/purple_100"/>
+    <foreground android:drawable="@drawable/ic_launcher_foreground"/>
+</adaptive-icon>

finished/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright 2021 The Android Open Source Project
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     https://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+-->
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/purple_100"/>
+    <foreground android:drawable="@drawable/ic_launcher_foreground"/>
+</adaptive-icon>

finished/src/main/res/values/colors.xml

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright 2021 The Android Open Source Project
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     https://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+-->
+<resources>
+    <color name="purple_100">#FFE1BEE7</color>
+    <color name="purple_500">#FF6200EE</color>
+    <color name="purple_700">#FF3700B3</color>
+</resources>

finished/src/main/res/values/strings.xml

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright 2021 The Android Open Source Project
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     https://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+-->
+<resources>
+    <string name="app_name">AnimationCodelab</string>
+    <string name="home">Home</string>
+    <string name="work">Work</string>
+    <string name="weather">Weather</string>
+    <string name="temperature">18 ℃</string>
+    <string name="tasks">Tasks</string>
+    <string name="add_tasks">ADD TASKS</string>
+    <string-array name="tasks">
+        <item>Buy milk</item>
+        <item>Choose curtain</item>
+        <item>Plant rosemary</item>
+        <item>Finish the essay</item>
+        <item>Receive new packages</item>
+        <item>Take a photo</item>
+    </string-array>
+    <string name="topics">Topics</string>
+    <string-array name="topics">
+        <item>2 new packages arrived</item>
+        <item>DIY project recommendation</item>
+        <item>Festival next month</item>
+        <item>New flower seeds available</item>
+    </string-array>
+    <string name="lorem_ipsum">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</string>
+    <string name="edit">EDIT</string>
+    <string name="edit_message">Edit feature is not supported</string>
+    <string name="refresh">Refresh</string>
+</resources>

finished/src/main/res/values/themes.xml

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright 2021 The Android Open Source Project
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     https://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+-->
+<resources xmlns:tools="http://schemas.android.com/tools">
+    <style name="Theme.Animation" parent="android:Theme.Material.NoActionBar">
+        <item name="android:colorPrimary">@color/purple_500</item>
+        <item name="android:colorPrimaryDark">@color/purple_700</item>
+    </style>
+</resources>

gradle.properties

@@ -0,0 +1,22 @@
+# Project-wide Gradle settings.
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+
+# Specifies the JVM arguments used for the daemon process.
+# The setting is particularly useful for tweaking memory settings.
+org.gradle.jvmargs=-Xmx2048m
+
+org.gradle.configureondemand=true
+org.gradle.caching=true
+org.gradle.parallel=true
+
+# AndroidX package structure to make it clearer which packages are bundled with the
+# Android operating system, and which are packaged with your app's APK
+# https://developer.android.com/topic/libraries/support-library/androidx-rn
+android.useAndroidX=true
+
+# Kotlin code style for this project: "official" or "obsolete":
+kotlin.code.style=official

gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,5 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.2-bin.zip
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists

gradlew

@@ -0,0 +1,185 @@
+#!/usr/bin/env sh
+
+#
+# Copyright 2015 the original author or authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+
+##############################################################################
+##
+##  Gradle start up script for UN*X
+##
+##############################################################################
+
+# Attempt to set APP_HOME
+# Resolve links: $0 may be a link
+PRG="$0"
+# Need this for relative symlinks.
+while [ -h "$PRG" ] ; do
+    ls=`ls -ld "$PRG"`
+    link=`expr "$ls" : '.*-> \(.*\)$'`
+    if expr "$link" : '/.*' > /dev/null; then
+        PRG="$link"
+    else
+        PRG=`dirname "$PRG"`"/$link"
+    fi
+done
+SAVED="`pwd`"
+cd "`dirname \"$PRG\"`/" >/dev/null
+APP_HOME="`pwd -P`"
+cd "$SAVED" >/dev/null
+
+APP_NAME="Gradle"
+APP_BASE_NAME=`basename "$0"`
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD="maximum"
+
+warn () {
+    echo "$*"
+}
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+}
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "`uname`" in
+  CYGWIN* )
+    cygwin=true
+    ;;
+  Darwin* )
+    darwin=true
+    ;;
+  MINGW* )
+    msys=true
+    ;;
+  NONSTOP* )
+    nonstop=true
+    ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD="$JAVA_HOME/jre/sh/java"
+    else
+        JAVACMD="$JAVA_HOME/bin/java"
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD="java"
+    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+fi
+
+# Increase the maximum file descriptors if we can.
+if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
+    MAX_FD_LIMIT=`ulimit -H -n`
+    if [ $? -eq 0 ] ; then
+        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
+            MAX_FD="$MAX_FD_LIMIT"
+        fi
+        ulimit -n $MAX_FD
+        if [ $? -ne 0 ] ; then
+            warn "Could not set maximum file descriptor limit: $MAX_FD"
+        fi
+    else
+        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
+    fi
+fi
+
+# For Darwin, add options to specify how the application appears in the dock
+if $darwin; then
+    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
+fi
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
+    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
+    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
+
+    JAVACMD=`cygpath --unix "$JAVACMD"`
+
+    # We build the pattern for arguments to be converted via cygpath
+    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
+    SEP=""
+    for dir in $ROOTDIRSRAW ; do
+        ROOTDIRS="$ROOTDIRS$SEP$dir"
+        SEP="|"
+    done
+    OURCYGPATTERN="(^($ROOTDIRS))"
+    # Add a user-defined pattern to the cygpath arguments
+    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
+        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
+    fi
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    i=0
+    for arg in "$@" ; do
+        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
+        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
+
+        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
+            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
+        else
+            eval `echo args$i`="\"$arg\""
+        fi
+        i=`expr $i + 1`
+    done
+    case $i in
+        0) set -- ;;
+        1) set -- "$args0" ;;
+        2) set -- "$args0" "$args1" ;;
+        3) set -- "$args0" "$args1" "$args2" ;;
+        4) set -- "$args0" "$args1" "$args2" "$args3" ;;
+        5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
+        6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
+        7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
+        8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
+        9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+    esac
+fi
+
+# Escape application args
+save () {
+    for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
+    echo " "
+}
+APP_ARGS=`save "$@"`
+
+# Collect all arguments for the java command, following the shell quoting and substitution rules
+eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
+
+exec "$JAVACMD" "$@"

gradlew.bat

@@ -0,0 +1,89 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+
+@if "%DEBUG%" == "" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%" == "" set DIRNAME=.
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if "%ERRORLEVEL%" == "0" goto execute
+
+echo.
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo.
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if "%ERRORLEVEL%"=="0" goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
+exit /b 1
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega

settings.gradle

@@ -0,0 +1,2 @@
+rootProject.name = "AnimationCodelab"
+include ':finished', ':start'

start/.gitignore

@@ -0,0 +1 @@
+/build

start/build.gradle

@@ -0,0 +1,67 @@
+/*
+ * Copyright 2021 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+plugins {
+    id 'com.android.application'
+    id 'kotlin-android'
+}
+
+android {
+    compileSdkVersion 31
+    defaultConfig {
+        applicationId 'com.example.android.codelab.animation'
+        minSdkVersion 21
+        targetSdkVersion 31
+        versionCode 1
+        versionName '1.0'
+    }
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_1_8
+        targetCompatibility JavaVersion.VERSION_1_8
+    }
+    buildFeatures {
+        compose true
+    }
+    kotlinOptions {
+        jvmTarget = '1.8'
+    }
+    composeOptions {
+        kotlinCompilerExtensionVersion compose_version
+    }
+}
+
+dependencies {
+    implementation 'androidx.core:core-ktx:1.7.0'
+
+    implementation "androidx.compose.ui:ui:$compose_version"
+    implementation "androidx.compose.material:material:$compose_version"
+    implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
+    implementation 'androidx.activity:activity-compose:1.4.0'
+
+    implementation "com.google.accompanist:accompanist-pager:0.23.1"
+
+    debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
+}
+
+// Compiler flag to use experimental Compose APIs
+tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile).configureEach {
+    kotlinOptions {
+        jvmTarget = "1.8"
+        freeCompilerArgs += [
+                "-Xopt-in=kotlin.RequiresOptIn"
+        ]
+    }
+}

start/src/main/AndroidManifest.xml

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright 2021 The Android Open Source Project
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     https://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+-->
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="com.example.android.codelab.animation">
+
+    <application
+        android:allowBackup="false"
+        android:icon="@mipmap/ic_launcher"
+        android:label="@string/app_name"
+        android:roundIcon="@mipmap/ic_launcher_round"
+        android:supportsRtl="true"
+        android:theme="@style/Theme.Animation">
+        <activity
+            android:name=".MainActivity"
+            android:exported="true"
+            android:label="@string/app_name"
+            android:theme="@style/Theme.Animation">
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+        </activity>
+    </application>
+
+</manifest>

start/src/main/java/com/example/android/codelab/animation/MainActivity.kt

@@ -0,0 +1,36 @@
+/*
+ * Copyright 2021 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.example.android.codelab.animation
+
+import android.os.Bundle
+import androidx.activity.ComponentActivity
+import androidx.activity.compose.setContent
+import com.example.android.codelab.animation.ui.AnimationCodelabTheme
+import com.example.android.codelab.animation.ui.home.Home
+import com.example.android.codelab.animation.ui.home.PagerHome
+
+class MainActivity : ComponentActivity() {
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContent {
+            AnimationCodelabTheme {
+                PagerHome()
+            }
+        }
+    }
+}

start/src/main/java/com/example/android/codelab/animation/ui/Color.kt

@@ -0,0 +1,27 @@
+/*
+ * Copyright 2021 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.example.android.codelab.animation.ui
+
+import androidx.compose.ui.graphics.Color
+
+val Purple100 = Color(0xFFE1BEE7)
+val Purple500 = Color(0xFF6200EE)
+val Purple700 = Color(0xFF3700B3)
+val Teal200 = Color(0xFF03DAC5)
+val Green300 = Color(0xFF81C784)
+val Green800 = Color(0xFF2E7D32)
+val Amber600 = Color(0xFFFFB300)

start/src/main/java/com/example/android/codelab/animation/ui/Theme.kt

@@ -0,0 +1,38 @@
+/*
+ * Copyright 2021 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.example.android.codelab.animation.ui
+
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.lightColors
+import androidx.compose.runtime.Composable
+import kotlinx.coroutines.flow.MutableStateFlow
+
+
+val darkTheme = MutableStateFlow(false)
+
+@Composable
+fun AnimationCodelabTheme(content: @Composable () -> Unit) {
+    val colors = lightColors(
+        primary = Purple500,
+        primaryVariant = Purple700,
+        secondary = Teal200
+    )
+    MaterialTheme(
+        colors = colors,
+        content = content
+    )
+}

start/src/main/java/com/example/android/codelab/animation/ui/appbar/MyComposeAppBar.kt

@@ -0,0 +1,99 @@
+package com.jackiehou.mycomposeapp.ui.appbar
+
+import android.app.Activity
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material.*
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.MoreVert
+import androidx.compose.material.icons.rounded.ArrowBack
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import com.example.android.codelab.animation.ui.darkTheme
+
+/**
+ *Author:  jackiehou
+ *Time:    2022/3/28
+ *Description:
+ **/
+
+
+@Composable
+fun CenterTopAppBar(isShowBack: Boolean = true, title: String = "Preview", rightContent: @Composable (() -> Unit)? = null) {
+    TopAppBar(
+        modifier = Modifier.fillMaxWidth(),
+    ) {
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            horizontalArrangement = Arrangement.SpaceBetween,
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            val leftAlpha = if (isShowBack) 1f else 0f
+            val titlePercent = if (isShowBack || rightContent != null) 0.9f else 1f
+            val context = LocalContext.current
+            IconButton(
+                onClick = { if(context is Activity) context.onBackPressed() },
+                modifier = Modifier.alpha(leftAlpha)
+            ) {
+                Icon(imageVector = Icons.Rounded.ArrowBack, contentDescription = "arrow back")
+            }
+            Text(
+                text = title,
+                modifier = Modifier.fillMaxWidth(titlePercent),
+                style = MaterialTheme.typography.h6,
+                textAlign = TextAlign.Center,
+                overflow = TextOverflow.Ellipsis,
+                maxLines = 1
+            )
+            if (rightContent != null) {
+                rightContent()
+            } else {
+                RightMenu()
+            }
+
+        }
+    }
+}
+
+@Composable
+fun RightMenu() {
+    val showMenu = remember {
+        mutableStateOf(false)
+    }
+    Row(horizontalArrangement = Arrangement.End) {
+        IconButton(onClick = { showMenu.value = !showMenu.value }) {
+            Icon(Icons.Default.MoreVert, "more")
+        }
+        DropdownMenu(expanded = showMenu.value, onDismissRequest = { showMenu.value = false }) {
+
+            DropdownMenuItem(onClick = {
+                darkTheme.value = true
+            }) {
+                Text("Dark Theme")
+            }
+            DropdownMenuItem(onClick = {
+                darkTheme.value = false
+            }) {
+                Text("Ligth Theme")
+            }
+        }
+    }
+}
+
+
+
+
+@Preview(showBackground = true)
+@Composable
+fun PreviewCenterTopAppBar(){
+    CenterTopAppBar()
+}

start/src/main/java/com/example/android/codelab/animation/ui/home/Home.kt

@@ -0,0 +1,814 @@
+/*
+ * Copyright 2021 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.example.android.codelab.animation.ui.home
+
+import androidx.compose.animation.*
+import androidx.compose.animation.core.*
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.gestures.awaitFirstDown
+import androidx.compose.foundation.gestures.horizontalDrag
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.LazyListState
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.*
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.AccountBox
+import androidx.compose.material.icons.filled.Check
+import androidx.compose.material.icons.filled.Edit
+import androidx.compose.material.icons.filled.Home
+import androidx.compose.material.icons.filled.Info
+import androidx.compose.material.icons.filled.Refresh
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.key
+import androidx.compose.runtime.mutableStateListOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.snapshots.SnapshotStateList
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.composed
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.input.pointer.consumePositionChange
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.input.pointer.positionChange
+import androidx.compose.ui.input.pointer.util.VelocityTracker
+import androidx.compose.ui.res.stringArrayResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.heading
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.example.android.codelab.animation.R
+import com.example.android.codelab.animation.ui.Amber600
+import com.example.android.codelab.animation.ui.AnimationCodelabTheme
+import com.example.android.codelab.animation.ui.Green300
+import com.example.android.codelab.animation.ui.Green800
+import com.example.android.codelab.animation.ui.Purple100
+import com.example.android.codelab.animation.ui.Purple700
+import com.google.accompanist.pager.ExperimentalPagerApi
+import com.google.accompanist.pager.HorizontalPager
+import com.google.accompanist.pager.PagerState
+import com.google.accompanist.pager.rememberPagerState
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.coroutineScope
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
+import kotlin.math.absoluteValue
+import kotlin.math.roundToInt
+
+enum class TabPage {
+    Home, Work
+}
+
+/**
+ * Shows the entire screen.
+ */
+@OptIn(ExperimentalPagerApi::class)
+@Composable
+fun Home() {
+    // String resources.
+    val allTasks = stringArrayResource(R.array.tasks)
+    val allTopics = stringArrayResource(R.array.topics).toList()
+
+    // The currently selected tab.
+//    var tabPage by remember { mutableStateOf(TabPage.Home) }
+    //val (tabPage, setTabPage) = remember { mutableStateOf(TabPage.Home) }
+    val tabPage = rememberPagerState(TabPage.Home.ordinal)
+
+    // True if the whether data is currently loading.
+    var weatherLoading by remember { mutableStateOf(false) }
+
+    // Holds all the tasks currently shown on the task list.
+    val tasks = remember { mutableStateListOf(*allTasks) }
+
+    // Holds the topic that is currently expanded to show its body.
+    var expandedTopic by remember { mutableStateOf<String?>(null) }
+
+    // True if the message about the edit feature is shown.
+    var editMessageShown by remember { mutableStateOf(false) }
+
+    val loadWeather = suspend {
+        if (!weatherLoading) {
+            weatherLoading = true
+            delay(3000L)
+            weatherLoading = false
+        }
+    }
+
+    // Simulates loading weather data. This takes 3 seconds.
+    /*suspend fun loadWeather() {
+
+    }*/
+
+    // Shows the message about edit feature.
+    val showEditMessage = suspend {
+        if (!editMessageShown) {
+            editMessageShown = true
+            delay(3000L)
+            editMessageShown = false
+        }
+    }
+
+    // Load the weather at the initial composition.
+    LaunchedEffect(Unit) {
+        loadWeather()
+    }
+
+    val lazyListState = rememberLazyListState()
+
+    // The background color. The value is changed by the current tab.
+    // TODO 1: Animate this color change.
+    //val backgroundColor = if (tabPage == TabPage.Home) Purple100 else Green300
+    /*val backgroundColor by animateColorAsState(targetValue = if (tabPage == TabPage.Home) Purple100 else Green300,
+    animationSpec = tween(durationMillis = 350))*/
+
+    val transition = updateTransition(tabPage)
+    val backgroundColor by transition.animateColor {
+        if (it.targetPage == TabPage.Home.ordinal) Purple100 else Green300
+    }
+
+    // The coroutine scope for event handlers calling suspend functions.
+    val coroutineScope = rememberCoroutineScope()
+    Scaffold(
+        topBar = {
+            HomeTabBar(
+                backgroundColor = backgroundColor,
+                tabPage = tabPage,
+                transition = transition,
+                onTabSelected = {
+                    coroutineScope.launch {
+                        tabPage.animateScrollToPage(page = it)}
+                    }
+
+//                onTabSelected = {tabPage = it  }
+            )
+        },
+        backgroundColor = backgroundColor,
+        floatingActionButton = {
+            HomeFloatingActionButton(
+                extended = lazyListState.isScrollingUp(),
+                onClick = {
+                    coroutineScope.launch {
+                        showEditMessage()
+                    }
+                }
+            )
+        }
+    ) {
+        /*HorizontalPager(count = 2, state = tabPage){
+
+        }*/
+        PageContent(lazyListState,
+            weatherLoading,
+            coroutineScope,
+            loadWeather,
+            allTopics,
+            expandedTopic,
+            tasks,
+            allTasks)
+
+        EditMessage(editMessageShown)
+    }
+}
+
+@Composable
+fun PageContent(
+    lazyListState: LazyListState,
+    weatherLoading: Boolean,
+    coroutineScope: CoroutineScope,
+    loadWeather: suspend () -> Unit,
+    allTopics: List<String>,
+    expandedTopic: String?,
+    tasks: SnapshotStateList<String>,
+    allTasks: Array<String>,
+) {
+    var expandedTopic1 = expandedTopic
+    LazyColumn(
+        contentPadding = PaddingValues(horizontal = 16.dp, vertical = 32.dp),
+        state = lazyListState
+    ) {
+        // Weather
+        item { Header(title = stringResource(R.string.weather)) }
+        item { Spacer(modifier = Modifier.height(16.dp)) }
+        item {
+            Surface(
+                modifier = Modifier.fillMaxWidth(),
+                elevation = 2.dp
+            ) {
+                if (weatherLoading) {
+                    LoadingRow()
+                } else {
+                    WeatherRow(onRefresh = {
+                        coroutineScope.launch {
+                            loadWeather()
+                        }
+                    })
+                }
+            }
+        }
+        item { Spacer(modifier = Modifier.height(32.dp)) }
+
+        // Topics
+        item { Header(title = stringResource(R.string.topics)) }
+        item { Spacer(modifier = Modifier.height(16.dp)) }
+        items(allTopics) { topic ->
+            TopicRow(
+                topic = topic,
+                expanded = expandedTopic1 == topic,
+                onClick = {
+                    coroutineScope.launch {
+                        delay(200)
+                        expandedTopic1 = if (expandedTopic1 == topic) null else topic
+                    }
+                }
+            )
+        }
+        item { Spacer(modifier = Modifier.height(32.dp)) }
+
+        // Tasks
+        item { Header(title = stringResource(R.string.tasks)) }
+        item { Spacer(modifier = Modifier.height(16.dp)) }
+        if (tasks.isEmpty()) {
+            item {
+                TextButton(onClick = { tasks.clear(); tasks.addAll(allTasks) }) {
+                    Text(stringResource(R.string.add_tasks))
+                }
+            }
+        }
+        items(count = tasks.size) { i ->
+            val task = tasks.getOrNull(i)
+            if (task != null) {
+                key(task) {
+                    TaskRow(
+                        task = task,
+                        onRemove = { tasks.remove(task) }
+                    )
+                }
+            }
+        }
+    }
+}
+
+
+/**
+ * Shows the floating action button.
+ *
+ * @param extended Whether the tab should be shown in its expanded state.
+ */
+// AnimatedVisibility is currently an experimental API in Compose Animation.
+@OptIn(ExperimentalAnimationApi::class)
+@Composable
+private fun HomeFloatingActionButton(
+    extended: Boolean,
+    onClick: () -> Unit,
+) {
+    // Use `FloatingActionButton` rather than `ExtendedFloatingActionButton` for full control on
+    // how it should animate.
+    FloatingActionButton(onClick = onClick) {
+        Row(
+            modifier = Modifier.padding(horizontal = 16.dp)
+        ) {
+            Icon(
+                imageVector = Icons.Default.Edit,
+                contentDescription = null
+            )
+            // Toggle the visibility of the content with animation.
+            // TODO 2-1: Animate this visibility change.
+            /*if (extended) {
+                Text(
+                    text = stringResource(R.string.edit),
+                    modifier = Modifier
+                        .padding(start = 8.dp, top = 3.dp)
+                )
+            }*/
+            AnimatedVisibility(
+                visible = extended,
+                /*enter = slideInHorizontally(
+                    initialOffsetX = {it},
+                    animationSpec = tween(durationMillis = 200,easing = LinearOutSlowInEasing)),
+                exit = slideOutHorizontally(
+                    targetOffsetX = {it},
+                    animationSpec = tween(durationMillis = 200,easing = LinearOutSlowInEasing))*/
+            ) {
+                Text(
+                    text = stringResource(R.string.edit),
+                    modifier = Modifier
+                        .padding(start = 8.dp, top = 3.dp)
+                )
+            }
+        }
+    }
+}
+
+/**
+ * Shows a message that the edit feature is not available.
+ */
+@OptIn(ExperimentalAnimationApi::class)
+@Composable
+private fun EditMessage(shown: Boolean) {
+    // TODO 2-2: The message should slide down from the top on appearance and slide up on
+    //           disappearance.
+    AnimatedVisibility(
+        visible = shown,
+        enter = fadeIn() + expandVertically(),
+        exit = fadeOut() + shrinkVertically(),
+        /*enter= slideInVertically(
+            initialOffsetY = {-it},
+            animationSpec = tween(durationMillis = 200, easing = LinearOutSlowInEasing)
+        ),
+        exit = slideOutVertically(
+            targetOffsetY = {-it},
+            animationSpec = tween(durationMillis = 200, easing = FastOutLinearInEasing)
+        )*/
+    ) {
+        Surface(
+            modifier = Modifier.fillMaxWidth(),
+            color = MaterialTheme.colors.secondary,
+            elevation = 4.dp
+        ) {
+            Text(
+                text = stringResource(R.string.edit_message),
+                modifier = Modifier.padding(16.dp)
+            )
+        }
+    }
+}
+
+/**
+ * Returns whether the lazy list is currently scrolling up.
+ */
+@Composable
+private fun LazyListState.isScrollingUp(): Boolean {
+    var previousIndex by remember(this) { mutableStateOf(firstVisibleItemIndex) }
+    var previousScrollOffset by remember(this) { mutableStateOf(firstVisibleItemScrollOffset) }
+    return remember(this) {
+        derivedStateOf {
+            if (previousIndex != firstVisibleItemIndex) {
+                previousIndex > firstVisibleItemIndex
+            } else {
+                previousScrollOffset >= firstVisibleItemScrollOffset
+            }.also {
+                previousIndex = firstVisibleItemIndex
+                previousScrollOffset = firstVisibleItemScrollOffset
+            }
+        }
+    }.value
+}
+
+/**
+ * Shows the header label.
+ *
+ * @param title The title to be shown.
+ */
+@Composable
+private fun Header(
+    title: String,
+) {
+    Text(
+        text = title,
+        modifier = Modifier.semantics { heading() },
+        style = MaterialTheme.typography.h5
+    )
+}
+
+/**
+ * Shows a row for one topic.
+ *
+ * @param topic The topic title.
+ * @param expanded Whether the row should be shown expanded with the topic body.
+ * @param onClick Called when the row is clicked.
+ */
+@OptIn(ExperimentalMaterialApi::class)
+@Composable
+private fun TopicRow(topic: String, expanded: Boolean, onClick: () -> Unit) {
+    TopicRowSpacer(visible = expanded)
+    Surface(
+        modifier = Modifier
+            .fillMaxWidth(),
+        elevation = 2.dp,
+        onClick = onClick
+    ) {
+        //val size = animateSizeAsState(targetValue = )
+        // TODO 3: Animate the size change of the content.
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(16.dp)
+                .animateContentSize(animationSpec = tween(durationMillis = 250))
+        ) {
+            Row {
+                Icon(
+                    imageVector = Icons.Default.Info,
+                    contentDescription = null
+                )
+                Spacer(modifier = Modifier.width(16.dp))
+                Text(
+                    text = topic,
+                    style = MaterialTheme.typography.body1
+                )
+            }
+            if (expanded) {
+                Spacer(modifier = Modifier.height(8.dp))
+                Text(
+                    text = stringResource(R.string.lorem_ipsum),
+                    textAlign = TextAlign.Justify
+                )
+            }
+        }
+    }
+    TopicRowSpacer(visible = expanded)
+}
+
+/**
+ * Shows a separator for topics.
+ */
+@OptIn(ExperimentalAnimationApi::class)
+@Composable
+fun TopicRowSpacer(visible: Boolean) {
+    AnimatedVisibility(visible = visible) {
+        Spacer(modifier = Modifier.height(8.dp))
+    }
+}
+
+/**
+ * Shows the bar that holds 2 tabs.
+ *
+ * @param backgroundColor The background color for the bar.
+ * @param tabPage The [TabPage] that is currently selected.
+ * @param onTabSelected Called when the tab is switched.
+ */
+@OptIn(ExperimentalPagerApi::class)
+@Composable
+private fun HomeTabBar(
+    backgroundColor: Color,
+    tabPage: PagerState,
+    onTabSelected: (tabPage: Int) -> Unit,
+    transition: Transition<PagerState>,
+) {
+    //val coroutineScope = rememberCoroutineScope()
+    TabRow(
+        selectedTabIndex = tabPage.currentPage,
+        backgroundColor = backgroundColor,
+        indicator = { tabPositions ->
+            HomeTabIndicator(tabPositions, transition)
+        }
+    ) {
+        HomeTab(
+            icon = Icons.Default.Home,
+            title = stringResource(R.string.home),
+            onClick = {
+                onTabSelected(TabPage.Home.ordinal)
+                /*coroutineScope.launch {
+                    delay(100)
+                }*/
+
+            }
+        )
+        HomeTab(
+            icon = Icons.Default.AccountBox,
+            title = stringResource(R.string.work),
+            onClick = {
+                onTabSelected(TabPage.Work.ordinal)
+                /*coroutineScope.launch {
+                    delay(100)
+                    onTabSelected(TabPage.Work)
+                }*/
+            }
+        )
+    }
+}
+
+/**
+ * Shows an indicator for the tab.
+ *
+ * @param tabPositions The list of [TabPosition]s from a [TabRow].
+ * @param tabPage The [TabPage] that is currently selected.
+ */
+@OptIn(ExperimentalPagerApi::class)
+@Composable
+private fun HomeTabIndicator(
+    tabPositions: List<TabPosition>,
+    transition: Transition<PagerState>,
+) {
+
+    /*val indicatorLeft = tabPositions[tabPage.ordinal].left
+    val indicatorRight = tabPositions[tabPage.ordinal].right
+    val color = if (tabPage == TabPage.Home) Purple700 else Green800*/
+    // TODO 4: Animate these value changes.
+    /*val indicatorLeft by animateDpAsState(targetValue = tabPositions[tabPage.ordinal].left)
+    val indicatorRight by animateDpAsState(targetValue = tabPositions[tabPage.ordinal].right)
+    val color by animateColorAsState(targetValue = if (tabPage == TabPage.Home) Purple700 else Green800)*/
+    //val transition = updateTransition(tabPage, label = "indicator")
+    val indicatorLeft by transition.animateDp(transitionSpec = {
+//        if(TabPage.Home isTransitioningTo TabPage.Work){
+        if (this.initialState.targetPage == TabPage.Home.ordinal && this.targetState.targetPage == TabPage.Work.ordinal) {
+            spring(stiffness = Spring.StiffnessVeryLow)
+        } else {
+            spring(stiffness = Spring.StiffnessMedium)
+        }
+    }, label = "left") { page ->
+        tabPositions[page.targetPage].left
+    }
+
+    val indicatorRight by transition.animateDp(transitionSpec = {
+        //if(TabPage.Home isTransitioningTo TabPage.Work){
+        if (this.initialState.targetPage == TabPage.Home.ordinal && this.targetState.targetPage == TabPage.Work.ordinal) {
+            spring(stiffness = Spring.StiffnessMedium)
+        } else {
+            spring(stiffness = Spring.StiffnessVeryLow)
+        }
+    }, label = "right") { page ->
+        tabPositions[page.targetPage].right
+    }
+    val color by transition.animateColor(label = "color") {
+        if (it.targetPage == TabPage.Home.ordinal) Purple700 else Green800
+    }
+    /*val indicatorLeft by transition.animateDp { page ->
+        tabPositions[page.ordinal].left
+    }
+    val indicatorRight by transition.animateDp { page ->
+        tabPositions[page.ordinal].right
+    }
+    val color by transition.animateColor { page ->
+        if (page == TabPage.Home) Purple700 else Green800
+    }*/
+
+    Box(
+        Modifier
+            .fillMaxSize()
+            .wrapContentSize(align = Alignment.BottomStart)
+            .offset(x = indicatorLeft)
+            .width(indicatorRight - indicatorLeft)
+            .padding(4.dp)
+            .fillMaxSize()
+            .border(
+                BorderStroke(2.dp, color),
+                RoundedCornerShape(4.dp)
+            )
+    )
+}
+
+/**
+ * Shows a tab.
+ *
+ * @param icon The icon to be shown on this tab.
+ * @param title The title to be shown on this tab.
+ * @param onClick Called when this tab is clicked.
+ * @param modifier The [Modifier].
+ */
+@Composable
+private fun HomeTab(
+    icon: ImageVector,
+    title: String,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Row(
+        modifier = modifier
+            .clickable(onClick = onClick)
+            .padding(16.dp),
+        horizontalArrangement = Arrangement.Center,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Icon(
+            imageVector = icon,
+            contentDescription = null
+        )
+        Spacer(modifier = Modifier.width(16.dp))
+        Text(text = title)
+    }
+}
+
+/**
+ * Shows the weather.
+ *
+ * @param onRefresh Called when the refresh icon button is clicked.
+ */
+@Composable
+private fun WeatherRow(
+    onRefresh: () -> Unit,
+) {
+    Row(
+        modifier = Modifier
+            .heightIn(min = 64.dp)
+            .padding(16.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Box(
+            modifier = Modifier
+                .size(48.dp)
+                .clip(CircleShape)
+                .background(Amber600)
+        )
+        Spacer(modifier = Modifier.width(16.dp))
+        Text(text = stringResource(R.string.temperature), fontSize = 24.sp)
+        Spacer(modifier = Modifier.weight(1f))
+        IconButton(onClick = onRefresh) {
+            Icon(
+                imageVector = Icons.Default.Refresh,
+                contentDescription = stringResource(R.string.refresh)
+            )
+        }
+    }
+}
+
+/**
+ * Shows the loading state of the weather.
+ */
+@Composable
+private fun LoadingRow() {
+    // TODO 5: Animate this value between 0f and 1f, then back to 0f repeatedly.
+    val infiniteTransition = rememberInfiniteTransition()
+    val alpha by infiniteTransition.animateFloat(initialValue = 0.25f,
+        targetValue = 1f,
+        animationSpec = InfiniteRepeatableSpec(repeatMode = RepeatMode.Reverse,animation = tween(durationMillis = 800)))
+    Row(
+        modifier = Modifier
+            .heightIn(min = 64.dp)
+            .padding(16.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Box(
+            modifier = Modifier
+                .size(48.dp)
+                .clip(CircleShape)
+                .background(Color.LightGray.copy(alpha = alpha))
+        )
+        Spacer(modifier = Modifier.width(16.dp))
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(32.dp)
+                .background(Color.LightGray.copy(alpha = alpha))
+        )
+    }
+}
+
+/**
+ * Shows a row for one task.
+ *
+ * @param task The task description.
+ * @param onRemove Called when the task is swiped away and removed.
+ */
+@Composable
+private fun TaskRow(task: String, onRemove: () -> Unit) {
+    Surface(
+        modifier = Modifier
+            .fillMaxWidth()
+            .swipeToDismiss(onRemove),
+        elevation = 2.dp
+    ) {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(16.dp)
+        ) {
+            Icon(
+                imageVector = Icons.Default.Check,
+                contentDescription = null
+            )
+            Spacer(modifier = Modifier.width(16.dp))
+            Text(
+                text = task,
+                style = MaterialTheme.typography.body1
+            )
+        }
+    }
+}
+
+/**
+ * The modified element can be horizontally swiped away.
+ *
+ * @param onDismissed Called when the element is swiped to the edge of the screen.
+ */
+private fun Modifier.swipeToDismiss(
+    onDismissed: () -> Unit,
+): Modifier = composed {
+    // TODO 6-1: Create an Animatable instance for the offset of the swiped element.
+    val offsetX = remember { Animatable(0f) } // Add this line
+    pointerInput(Unit) {
+        // Used to calculate a settling position of a fling animation.
+        val decay = splineBasedDecay<Float>(this)
+        // Wrap in a coroutine scope to use suspend functions for touch events and animation.
+        coroutineScope {
+            while (true) {
+                // Wait for a touch down event.
+                val pointerId = awaitPointerEventScope { awaitFirstDown().id }
+                // TODO 6-2: Touch detected; the animation should be stopped.
+                offsetX.stop()
+                // Prepare for drag events and record velocity of a fling.
+                val velocityTracker = VelocityTracker()
+                // Wait for drag events.
+                awaitPointerEventScope {
+                    horizontalDrag(pointerId) { change ->
+                        // TODO 6-3: Apply the drag change to the Animatable offset.
+                        val horizontalDragOffset = offsetX.value + change.positionChange().x
+                        launch {
+                            offsetX.snapTo(horizontalDragOffset)
+                        }
+                        // Record the velocity of the drag.
+                        velocityTracker.addPosition(change.uptimeMillis, change.position)
+                        // Consume the gesture event, not passed to external
+                        change.consumePositionChange()
+                    }
+                }
+                // Dragging finished. Calculate the velocity of the fling.
+                val velocity = velocityTracker.calculateVelocity().x
+                // TODO 6-4: Calculate the eventual position where the fling should settle
+                //           based on the current offset value and velocity
+                val targetOffsetX = decay.calculateTargetValue(offsetX.value, velocity)
+                // TODO 6-5: Set the upper and lower bounds so that the animation stops when it
+                //           reaches the edge.
+                offsetX.updateBounds(
+                    lowerBound = -size.width.toFloat(),
+                    upperBound = size.width.toFloat()
+                )
+                launch {
+                    // TODO 6-6: Slide back the element if the settling position does not go beyond
+                    //           the size of the element. Remove the element if it does.
+                    if (targetOffsetX.absoluteValue <= size.width) {
+                        // Not enough velocity; Slide back.
+                        offsetX.animateTo(targetValue = 0f, initialVelocity = velocity)
+                    } else {
+                        // Enough velocity to slide away the element to the edge.
+                        offsetX.animateDecay(velocity, decay)
+                        // The element was swiped away.
+                        onDismissed()
+                    }
+                }
+            }
+        }
+    }
+        .offset {
+            // TODO 6-7: Use the animating offset value here.
+            IntOffset(offsetX.value.roundToInt(), 0)
+        }
+}
+
+@OptIn(ExperimentalPagerApi::class)
+@Preview
+@Composable
+private fun PreviewHomeTabBar() {
+    val pagerState = rememberPagerState()
+    HomeTabBar(
+        backgroundColor = Purple100,
+        tabPage = pagerState,
+        onTabSelected = {},
+        transition = updateTransition(targetState = pagerState)
+
+    )
+}
+
+@Preview
+@Composable
+private fun PreviewHome() {
+    AnimationCodelabTheme {
+        Home()
+    }
+}

start/src/main/java/com/example/android/codelab/animation/ui/home/PagerHome.kt

@@ -0,0 +1,240 @@
+package com.example.android.codelab.animation.ui.home
+
+import android.util.Log
+import androidx.compose.animation.animateColor
+import androidx.compose.animation.core.Transition
+import androidx.compose.animation.core.animateDp
+import androidx.compose.animation.core.updateTransition
+import androidx.compose.foundation.*
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.LazyListState
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.*
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.AccountBox
+import androidx.compose.material.icons.filled.Create
+import androidx.compose.material.icons.filled.Home
+import androidx.compose.material.icons.filled.Refresh
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Alignment.Companion.Bottom
+import androidx.compose.ui.Alignment.Companion.BottomCenter
+import androidx.compose.ui.Alignment.Companion.CenterHorizontally
+import androidx.compose.ui.Alignment.Companion.CenterVertically
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.example.android.codelab.animation.R
+import com.example.android.codelab.animation.ui.*
+import com.google.accompanist.pager.ExperimentalPagerApi
+import com.google.accompanist.pager.HorizontalPager
+import com.google.accompanist.pager.PagerState
+import com.google.accompanist.pager.rememberPagerState
+import com.jackiehou.mycomposeapp.ui.appbar.CenterTopAppBar
+import kotlinx.coroutines.CoroutineExceptionHandler
+import kotlinx.coroutines.coroutineScope
+import kotlinx.coroutines.launch
+import java.lang.Exception
+
+/**
+ *Author:  jackiehou
+ *Time:    2022/4/7
+ *Description:
+ **/
+
+val exceptionHandler = CoroutineExceptionHandler { _, ex ->
+    Log.e("CoroutineScope", "Caught ${Log.getStackTraceString(ex)}")
+}
+
+@OptIn(ExperimentalPagerApi::class, ExperimentalMaterialApi::class)
+@Composable
+fun PagerHome() {
+    val pagerState = rememberPagerState()
+
+    val constraintsScope = rememberCoroutineScope()
+
+    val transition = updateTransition(pagerState.targetPage, label = "pagerState")
+    val backgroundColor by transition.animateColor(label = "backgroundColor") {
+        if (it == 0) Purple100 else Green300
+    }
+
+
+    val tabList = listOf("Home", "Work", "Hotel", "Library")
+    Scaffold(
+        topBar = {
+            CenterTopAppBar(title = "HorizontalPager")
+        },
+        backgroundColor = backgroundColor) {
+        Column {
+            TabBar(
+                backgroundColor = backgroundColor,
+                tabIndex = pagerState.targetPage,
+                onTabChanged = {
+                    constraintsScope.launch() {
+                        //pagerState.animateScrollToPage(it)
+                        try {
+                            coroutineScope {
+                                    pagerState.animateScrollToPage(it)
+                            }
+                        } catch (e: Exception) {
+                            Log.wtf("constraintsScope", e)
+                        }
+                    }
+                },
+                transition = transition,
+                tabList = tabList,
+                modifier = Modifier.height(40.dp)
+            )
+            HorizontalPager(count = tabList.size, state = pagerState) {
+                val state: LazyListState = rememberLazyListState()
+                val list = List(100) { "list item $it" }
+                if (it == 0) {
+                    LazyColumn(state = state, modifier = Modifier.fillMaxSize()) {
+                        items(list) { str ->
+                            ListItem(
+                                icon = {
+                                    Icon(imageVector = Icons.Default.Create,
+                                        contentDescription = "")
+                                },
+                                text = {
+                                    Text(text = str)
+                                })
+                        }
+                    }
+                } else {
+                    Column(modifier = Modifier.fillMaxSize()) {
+                        WeatherRow(null)
+                    }
+
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun TabBar(
+    modifier: Modifier = Modifier,
+    backgroundColor: Color = MaterialTheme.colors.background,
+    tabIndex: Int,
+    onTabChanged: (Int) -> Unit,
+    transition: Transition<Int>,
+    tabList: List<String>,
+) {
+    TabRow(
+        modifier = modifier,
+        selectedTabIndex = tabIndex,
+        backgroundColor = backgroundColor,
+        indicator = {
+            TabIndicator(tabPositions = it, transition = transition)
+        }
+    ) {
+        tabList.forEachIndexed { index, tabText ->
+            Text(
+                textAlign = TextAlign.Center,
+                text = tabText,
+                modifier = Modifier
+                    .clickable {
+                        onTabChanged(index)
+                    }
+                    .fillMaxHeight()
+                    .wrapContentHeight(CenterVertically))
+
+        }
+    }
+}
+
+@OptIn(ExperimentalPagerApi::class)
+@Composable
+private fun TabIndicator(
+    tabPositions: List<TabPosition>,
+    transition: Transition<Int>,
+) {
+    val indicatorLeft by transition.animateDp(label = "left") {
+        tabPositions[it].left
+    }
+    val indicatorRight by transition.animateDp(label = "right") {
+        tabPositions[it].right
+    }
+    /*val backgroundColor by transition.animateColor(label = "color") {
+        if (it == TabPage.Home.ordinal) Purple700 else Green800
+    }*/
+
+    Box(modifier = Modifier
+        .fillMaxSize()
+        .wrapContentSize(align = Alignment.BottomStart)
+        .offset(x = indicatorLeft)
+        .width(indicatorRight - indicatorLeft)
+        .fillMaxSize()
+    ) {
+        Divider(modifier = Modifier
+            .fillMaxWidth(0.6f)
+            .height(2.dp)
+            .align(BottomCenter)
+            .clip(RoundedCornerShape(0.5.dp)), color = MaterialTheme.colors.onSurface)
+    }
+
+}
+
+@Composable
+private fun HomeTab(
+    icon: ImageVector,
+    title: String,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Row(
+        modifier = modifier
+            .clickable(onClick = onClick)
+            .padding(16.dp),
+        horizontalArrangement = Arrangement.Center,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Icon(
+            imageVector = icon,
+            contentDescription = null
+        )
+        Spacer(modifier = Modifier.width(16.dp))
+        Text(text = title)
+    }
+}
+
+@Composable
+private fun WeatherRow(
+    onRefresh: (() -> Unit)?,
+) {
+    Row(
+        modifier = Modifier
+            .heightIn(min = 64.dp)
+            .padding(16.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Box(
+            modifier = Modifier
+                .size(48.dp)
+                .clip(CircleShape)
+                .background(Amber600)
+        )
+        Spacer(modifier = Modifier.width(16.dp))
+        Text(text = stringResource(R.string.temperature), fontSize = 24.sp)
+        Spacer(modifier = Modifier.weight(1f))
+        IconButton(onClick = { onRefresh?.invoke() }) {
+            Icon(
+                imageVector = Icons.Default.Refresh,
+                contentDescription = stringResource(R.string.refresh)
+            )
+        }
+    }
+}

start/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright 2021 The Android Open Source Project
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     https://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+-->
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/purple_100"/>
+    <foreground android:drawable="@drawable/ic_launcher_foreground"/>
+</adaptive-icon>

start/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright 2021 The Android Open Source Project
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     https://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+-->
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/purple_100"/>
+    <foreground android:drawable="@drawable/ic_launcher_foreground"/>
+</adaptive-icon>

start/src/main/res/values/colors.xml

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright 2021 The Android Open Source Project
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     https://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+-->
+<resources>
+    <color name="purple_100">#FFE1BEE7</color>
+    <color name="purple_500">#FF6200EE</color>
+    <color name="purple_700">#FF3700B3</color>
+</resources>

start/src/main/res/values/strings.xml

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright 2021 The Android Open Source Project
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     https://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+-->
+<resources>
+    <string name="app_name">AnimationCodelab</string>
+    <string name="home">Home</string>
+    <string name="work">Work</string>
+    <string name="weather">Weather</string>
+    <string name="temperature">18 ℃</string>
+    <string name="tasks">Tasks</string>
+    <string name="add_tasks">ADD TASKS</string>
+    <string-array name="tasks">
+        <item>Buy milk</item>
+        <item>Choose curtain</item>
+        <item>Plant rosemary</item>
+        <item>Finish the essay</item>
+        <item>Receive new packages</item>
+        <item>Take a photo</item>
+    </string-array>
+    <string name="topics">Topics</string>
+    <string-array name="topics">
+        <item>2 new packages arrived</item>
+        <item>DIY project recommendation</item>
+        <item>Festival next month</item>
+        <item>New flower seeds available</item>
+    </string-array>
+    <string name="lorem_ipsum">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</string>
+    <string name="edit">EDIT</string>
+    <string name="edit_message">Edit feature is not supported</string>
+    <string name="refresh">Refresh</string>
+</resources>

start/src/main/res/values/themes.xml

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright 2021 The Android Open Source Project
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     https://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+-->
+<resources xmlns:tools="http://schemas.android.com/tools">
+    <style name="Theme.Animation" parent="android:Theme.Material.NoActionBar">
+        <item name="android:colorPrimary">@color/purple_500</item>
+        <item name="android:colorPrimaryDark">@color/purple_700</item>
+    </style>
+</resources>