Upgrade compose version to 0.1.0-dev08 (#6)

vinaygaba · Apr 9, 2020 · a44eb99 · a44eb99
1 parent 19b3c22
commit a44eb99
Show file tree

Hide file tree

Showing 25 changed files with 611 additions and 437 deletions.
diff --git a/README.md b/README.md
diff --git a/app/src/main/java/com/example/jetpackcompose/animation/Animation1Activity.kt b/app/src/main/java/com/example/jetpackcompose/animation/Animation1Activity.kt
@@ -8,12 +8,13 @@ import androidx.animation.transitionDefinition
 import androidx.appcompat.app.AppCompatActivity
 import androidx.compose.Composable
 import androidx.ui.animation.Transition
+import androidx.ui.core.Modifier
 import androidx.ui.core.setContent
 import androidx.ui.foundation.Canvas
 import androidx.ui.graphics.Color
 import androidx.ui.graphics.Paint
 import androidx.ui.layout.Center
-import androidx.ui.layout.LayoutSize
+import androidx.ui.layout.preferredSize
 import androidx.ui.tooling.preview.Preview
 import androidx.ui.unit.dp
 import androidx.ui.unit.toRect
@@ -95,10 +96,14 @@ fun RotatingSquareComponent() {
             toState = "B"
         ) { state ->
             // We use the Canvas composable that gives you access to a canvas that you can draw
-            // into.
-            Canvas(modifier = LayoutSize(200.dp)) {
+            // into. We also pass it a modifier.
+
+            // You can think of Modifiers as implementations of the decorators pattern that are used
+            // to modify the composable that its applied to. In this example, we assign a size
+            // of 200dp to the Canvas using Modifier.preferredSize(200.dp).
+            Canvas(modifier = Modifier.preferredSize(200.dp)) {
                 save()
-                // translate the canvas to the center of the screen so that we can rotate at the
+                // Translate the canvas to the center of the screen so that we can rotate at the
                 // correct pivot point.
                 translate(size.width.value/2, size.height.value/2)
                 // As the Transition is changing the interpolating the value of your props based

diff --git a/app/src/main/java/com/example/jetpackcompose/animation/Animation2Activity.kt b/app/src/main/java/com/example/jetpackcompose/animation/Animation2Activity.kt
@@ -8,10 +8,11 @@ import androidx.compose.Composable
 import androidx.compose.state
 import androidx.ui.animation.ColorPropKey
 import androidx.ui.animation.Transition
+import androidx.ui.core.Modifier
 import androidx.ui.core.setContent
 import androidx.ui.foundation.Box
 import androidx.ui.graphics.Color
-import androidx.ui.layout.LayoutSize
+import androidx.ui.layout.fillMaxSize
 import androidx.ui.tooling.preview.Preview
 
 class Animation2Activity: AppCompatActivity() {
@@ -27,7 +28,11 @@ class Animation2Activity: AppCompatActivity() {
     }
 }
 
-//
+/**
+ * PropKeys are used in Jetpack Compose animations to hold properties that are going to be
+ * updated by the animation transitions. In this example, we use a [ColorPropKey] to hold a Color
+ * value that represents the value of color on screen.
+ */
 private val color = ColorPropKey()
 
 /**
@@ -122,7 +127,7 @@ fun AnimateColorComponent() {
         // state variable and access the relevant props/properties to update the relevant
         // composables/layouts. Below, we use state[color] to get get the latest value of color
         // and use it to paint the screen by setting it as the backgroundColor of the screen.
-        Box(LayoutSize.Fill, backgroundColor = state[color])
+        Box(modifier = Modifier.fillMaxSize(), backgroundColor = state[color])
     }
 }
 

diff --git a/app/src/main/java/com/example/jetpackcompose/customview/CustomViewActivity.kt b/app/src/main/java/com/example/jetpackcompose/customview/CustomViewActivity.kt
@@ -1,17 +1,18 @@
 package com.example.jetpackcompose.customview
 
 import android.os.Bundle
+import android.util.Log
 import androidx.appcompat.app.AppCompatActivity
 import androidx.compose.Composable
 import androidx.ui.core.Modifier
 import androidx.ui.core.setContent
+import androidx.ui.foundation.Box
 import androidx.ui.foundation.Canvas
 import androidx.ui.geometry.Offset
 import androidx.ui.graphics.Color
 import androidx.ui.graphics.Paint
 import androidx.ui.graphics.PaintingStyle
-import androidx.ui.layout.Container
-import androidx.ui.layout.LayoutSize
+import androidx.ui.layout.fillMaxSize
 import androidx.ui.tooling.preview.Preview
 
 class CustomViewActivity : AppCompatActivity() {
@@ -36,29 +37,28 @@ fun CustomViewComponent() {
     val paint = Paint().apply {
         style = PaintingStyle.fill
     }
-    Container(modifier = LayoutSize.Fill) {
-        Canvas(modifier = Modifier.None) {
-            paint.color = Color.Red
-            drawCircle(
-                center = Offset(size.width.value / 2, size.height.value / 2),
-                radius = 300f,
-                paint = paint
-            )
+    Canvas(modifier = Modifier.fillMaxSize()) {
+        paint.color = Color.Red
+        Log.e("size", size.width.toString() + "|" + size.height)
+        drawCircle(
+            center = Offset(size.width.value / 2, size.height.value / 2),
+            radius = 300f,
+            paint = paint
+        )
 
-            paint.color = Color.Green
-            drawCircle(
-                center = Offset(size.width.value / 2, size.height.value / 2),
-                radius = 200f,
-                paint = paint
-            )
+        paint.color = Color.Green
+        drawCircle(
+            center = Offset(size.width.value / 2, size.height.value / 2),
+            radius = 200f,
+            paint = paint
+        )
 
-            paint.color = Color.Blue
-            drawCircle(
-                center = Offset(size.width.value / 2, size.height.value / 2),
-                radius = 100f,
-                paint = paint
-            )
-        }
+        paint.color = Color.Blue
+        drawCircle(
+            center = Offset(size.width.value / 2, size.height.value / 2),
+            radius = 100f,
+            paint = paint
+        )
     }
 }
 

diff --git a/app/src/main/java/com/example/jetpackcompose/customview/CustomViewPainActivity.kt b/app/src/main/java/com/example/jetpackcompose/customview/CustomViewPainActivity.kt
@@ -3,19 +3,26 @@ package com.example.jetpackcompose.customview
 import android.os.Bundle
 import androidx.appcompat.app.AppCompatActivity
 import androidx.compose.Composable
+import androidx.compose.frames.ModelList
+import androidx.compose.frames.modelListOf
 import androidx.compose.state
 import androidx.ui.core.Modifier
-import androidx.ui.core.gesture.PressGestureDetector
+import androidx.ui.core.gesture.DragGestureDetector
+import androidx.ui.core.gesture.DragObserver
 import androidx.ui.core.setContent
+import androidx.ui.foundation.Box
 import androidx.ui.foundation.Canvas
 import androidx.ui.graphics.Color
 import androidx.ui.graphics.Paint
 import androidx.ui.graphics.PaintingStyle
 import androidx.ui.graphics.Path
 import androidx.ui.graphics.StrokeJoin
-import androidx.ui.layout.Container
-import androidx.ui.layout.LayoutSize
+import androidx.ui.layout.fillMaxSize
+import androidx.ui.unit.PxPosition
 
+/**
+ * This example needs some more work.
+ */
 class CustomViewPainActivity: AppCompatActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
@@ -40,15 +47,7 @@ fun CustomDrawableViewComponent() {
         style = PaintingStyle.stroke
         strokeJoin = StrokeJoin.round
     }
-
-    var paths by state<List<Paths>> { emptyList() }
-
-    PressGestureDetector(onPress = {
-        paths = paths + Paths(it.x.value, it.y.value)
-    }, onRelease = {
-    }) {
-        DrawingBoardComposable(paths, paint)
-    }
+    DrawingBoardComposable(paint)
 }
 
 data class Paths(
@@ -57,8 +56,16 @@ data class Paths(
 )
 
 @Composable
-fun DrawingBoardComposable(paths: List<Paths>, paint: Paint) {
-    Container(modifier = LayoutSize.Fill) {
+fun DrawingBoardComposable(paint: Paint) {
+    val paths by state<ModelList<Paths>> { modelListOf() }
+    Box(modifier = Modifier.fillMaxSize() + DragGestureDetector(
+        startDragImmediately = true,
+        dragObserver = object: DragObserver {
+            override fun onStart(downPosition: PxPosition) {
+                super.onStart(downPosition)
+                paths += Paths(downPosition.x.value, downPosition.y.value)
+            }
+        })) {
         Canvas(modifier = Modifier.None) {
             val p = Path()
             for (path in paths) {

diff --git a/app/src/main/java/com/example/jetpackcompose/image/ImageActivity.kt b/app/src/main/java/com/example/jetpackcompose/image/ImageActivity.kt
@@ -8,25 +8,41 @@ import androidx.appcompat.app.AppCompatActivity
 import androidx.compose.Composable
 import androidx.compose.onCommit
 import androidx.compose.state
-import androidx.ui.core.*
+import androidx.ui.core.Alignment
+import androidx.ui.core.ContextAmbient
+import androidx.ui.core.DrawModifier
+import androidx.ui.core.Modifier
+import androidx.ui.core.setContent
 import androidx.ui.foundation.Box
 import androidx.ui.foundation.Canvas
 import androidx.ui.foundation.Image
+import androidx.ui.foundation.Text
 import androidx.ui.foundation.VerticalScroller
 import androidx.ui.foundation.shape.corner.CornerSize
 import androidx.ui.foundation.shape.corner.RoundedCornerShape
 import androidx.ui.geometry.RRect
 import androidx.ui.geometry.Radius
 import androidx.ui.graphics.Canvas
-import androidx.ui.graphics.painter.ImagePainter
-import androidx.ui.layout.*
-import androidx.ui.material.Card
+import androidx.ui.graphics.Color
+import androidx.ui.layout.Column
+import androidx.ui.layout.fillMaxWidth
+import androidx.ui.layout.padding
+import androidx.ui.layout.preferredHeight
+import androidx.ui.layout.preferredHeightIn
+import androidx.ui.layout.preferredWidth
+import androidx.ui.layout.wrapContentSize
+import androidx.ui.material.Surface
 import androidx.ui.res.loadImageResource
 import androidx.ui.text.TextStyle
 import androidx.ui.text.font.FontFamily
 import androidx.ui.text.font.FontWeight
 import androidx.ui.tooling.preview.Preview
-import androidx.ui.unit.*
+import androidx.ui.unit.Density
+import androidx.ui.unit.Px
+import androidx.ui.unit.PxSize
+import androidx.ui.unit.dp
+import androidx.ui.unit.sp
+import androidx.ui.unit.toRect
 import com.bumptech.glide.Glide
 import com.bumptech.glide.request.target.CustomTarget
 import com.bumptech.glide.request.transition.Transition
@@ -52,8 +68,8 @@ class ImageActivity : AppCompatActivity() {
 
                 // You can think of Modifiers as implementations of the decorators pattern that are
                 // used to modify the composable that its applied to. In this example, we assign a
-                // LayoutPadding of 16dp to the Column.
-                Column(modifier = LayoutPadding(16.dp)) {
+                // padding of 16dp to the Column.
+                Column(modifier = Modifier.padding(16.dp)) {
                     DisplayImagesComponent()
                 }
             }
@@ -95,7 +111,7 @@ fun LocalResourceImageComponent(@DrawableRes resId: Int) {
         // You can think of Modifiers as implementations of the decorators pattern that are
         // used to modify the composable that its applied to. In this example, we configure the
         // Image composable to have a height of 200 dp.
-        Image(image = it, modifier = LayoutHeight.Max(200.dp))
+        Image(asset = it, modifier = Modifier.preferredHeightIn(maxHeight = 200.dp))
     }
 }
 
@@ -111,16 +127,20 @@ fun ImageWithRoundedCorners(@DrawableRes resId: Int) {
     //
     val shape = RoundedCornerShape(8.dp)
     image.resource.resource?.let {
-        // Container is a predefined convenience composable that allows you to apply common
-        // layout properties like height, width, padding, constraints, etc.
+        // Box is a predefined convenience composable that allows you to apply common draw & layout
+        // logic. In addition we also pass a few modifiers to it.
 
         // You can think of Modifiers as implementations of the decorators pattern that are
         // used to modify the composable that its applied to. In this example, we configure the
-        // Container composable to have a height of 200dp, width of 200dp, alignment as center
+        // Box composable to have a height of 200dp, width of 200dp, alignment as center
         // and a custom draw modifier to clip the corners of the image.
-        Container(modifier = LayoutAlign.Center + LayoutHeight(200.dp) + LayoutWidth(200.dp)
-                + RoundedCornerClipModifier(shape.topLeft, shape.topRight, shape.bottomLeft,
-            shape.bottomRight)) {
+        Box(
+            modifier = Modifier.wrapContentSize(Alignment.Center) +
+                    Modifier.preferredHeight(200.dp) + Modifier.preferredWidth(200.dp)
+                    + RoundedCornerClipModifier(
+                shape.topLeft, shape.topRight, shape.bottomLeft, shape.bottomRight
+            )
+        ) {
             // Image is a pre-defined composable that lays out and draws a given [ImageAsset].
             Image(it)
         }
@@ -167,19 +187,19 @@ fun NetworkImageComponentPicasso(url: String) {
     val theImage = image
     val theDrawable = drawable
     if (theImage != null) {
-        // Container is a predefined convenience composable that allows you to apply common
-        // layout properties like height, width, padding, constraints, etc.
+        // Box is a predefined convenience composable that allows you to apply common draw & layout
+        // logic. In addition we also pass a few modifiers to it.
 
         // You can think of Modifiers as implementations of the decorators pattern that are
         // used to modify the composable that its applied to. In this example, we configure the
-        // Container composable to have a max height of 200dp and fill out the entire available
+        // Box composable to have a max height of 200dp and fill out the entire available
         // width.
-        Container(modifier = LayoutWidth.Fill + LayoutHeight.Max(200.dp)) {
+        Box(modifier = Modifier.fillMaxWidth() + Modifier.preferredHeightIn(maxHeight = 200.dp)) {
             // Image is a pre-defined composable that lays out and draws a given [ImageAsset].
-            Image(image = theImage)
+            Image(asset = theImage)
         }
     } else if (theDrawable != null) {
-        Canvas(modifier = LayoutHeight(200.dp) + LayoutWidth.Fill) {
+        Canvas(modifier = Modifier.preferredHeight(200.dp) + Modifier.fillMaxWidth()) {
             theDrawable.draw(this.nativeCanvas)
         }
     }
@@ -223,19 +243,19 @@ fun NetworkImageComponentGlide(url: String) {
     val theImage = image
     val theDrawable = drawable
     if (theImage != null) {
-        // Container is a predefined convenience composable that allows you to apply common
-        // layout properties like height, width, padding, constraints, etc.
+        // Box is a predefined convenience composable that allows you to apply common draw & layout
+        // logic. In addition we also pass a few modifiers to it.
 
         // You can think of Modifiers as implementations of the decorators pattern that are
         // used to modify the composable that its applied to. In this example, we configure the
-        // Container composable to have a max height of 200dp and fill out the entire available
+        // Box composable to have a max height of 200dp and fill out the entire available
         // width.
-        Container(modifier = LayoutWidth.Fill + LayoutHeight.Max(200.dp)) {
+        Box(modifier = Modifier.fillMaxWidth() + Modifier.preferredHeightIn(maxHeight = 200.dp)) {
             // Image is a pre-defined composable that lays out and draws a given [ImageAsset].
-            Image(image = theImage)
+            Image(asset = theImage)
         }
     } else if (theDrawable != null) {
-        Canvas(modifier = LayoutHeight(200.dp) + LayoutWidth.Fill) {
+        Canvas(modifier = Modifier.preferredHeight(200.dp) + Modifier.fillMaxWidth()) {
             theDrawable.draw(this.nativeCanvas)
         }
     }
@@ -249,8 +269,16 @@ fun NetworkImageComponentGlide(url: String) {
 fun TitleComponent(title: String) {
     // Text is a predefined composable that does exactly what you'd expect it to - display text on
     // the screen. It allows you to customize its appearance using style, fontWeight, fontSize, etc.
-    Text(title, style = TextStyle(fontFamily = FontFamily.Monospace, fontWeight = FontWeight.W900,
-        fontSize = 14.sp), modifier = LayoutPadding(16.dp))
+
+    // Surface is added as a temporary workaround for an issue that causes the text to not be 
+    // visible if its next to a Card(or any surface with elevation). The fix will be available in
+    // dev09. More info here - https://kotlinlang.slack.com/archives/CJLTWPH7S/p1585774380042500
+    Surface(elevation = 1.dp) {
+        Text(title, style = TextStyle(fontFamily = FontFamily.Monospace, fontWeight = FontWeight.W900,
+            fontSize = 14.sp, color = Color.Black), modifier = Modifier.padding(16.dp) +
+                Modifier.fillMaxWidth()
+        )
+    }
 }
 
 // RoundedCornerClipModifier is a custom DrawModifier that is responsible for clipping and