[go: nahoru, domu]

Replace Container with Box for material components

Bug: 151407926
Test: should pass
Change-Id: I6a30fa9d9786f37a9e67f34bd9181e720aad565c
diff --git a/ui/ui-material/src/androidTest/java/androidx/ui/material/AppBarTest.kt b/ui/ui-material/src/androidTest/java/androidx/ui/material/AppBarTest.kt
index 9db6e36..b0b4d5c 100644
--- a/ui/ui-material/src/androidTest/java/androidx/ui/material/AppBarTest.kt
+++ b/ui/ui-material/src/androidTest/java/androidx/ui/material/AppBarTest.kt
@@ -26,10 +26,10 @@
 import androidx.ui.core.globalPosition
 import androidx.ui.core.onChildPositioned
 import androidx.ui.core.onPositioned
+import androidx.ui.foundation.Box
 import androidx.ui.foundation.Icon
 import androidx.ui.graphics.Color
 import androidx.ui.graphics.painter.ColorPainter
-import androidx.ui.layout.Container
 import androidx.ui.test.assertIsDisplayed
 import androidx.ui.test.createComposeRule
 import androidx.ui.test.findByText
@@ -85,7 +85,7 @@
         var titleLastBaselineRelativePosition: Px? = null
         var actionCoords: LayoutCoordinates? = null
         composeTestRule.setMaterialContent {
-            Container(onChildPositioned { appBarCoords = it }) {
+            Box(onChildPositioned { appBarCoords = it }) {
                 TopAppBar(
                     navigationIcon = {
                         FakeIcon(onPositioned { navigationIconCoords = it })
@@ -152,7 +152,7 @@
         var titleCoords: LayoutCoordinates? = null
         var actionCoords: LayoutCoordinates? = null
         composeTestRule.setMaterialContent {
-            Container(onChildPositioned { appBarCoords = it }) {
+            Box(onChildPositioned { appBarCoords = it }) {
                 TopAppBar(
                     title = {
                         Text("title", onPositioned { titleCoords = it })
@@ -183,7 +183,7 @@
         var textStyle: TextStyle? = null
         var h6Style: TextStyle? = null
         composeTestRule.setMaterialContent {
-            Container {
+            Box {
                 TopAppBar(
                     title = {
                         Text("App Bar Title")
@@ -213,7 +213,7 @@
         var appBarCoords: LayoutCoordinates? = null
         var childCoords: LayoutCoordinates? = null
         composeTestRule.setMaterialContent {
-            Container(onChildPositioned { appBarCoords = it }) {
+            Box(onChildPositioned { appBarCoords = it }) {
                 BottomAppBar {
                     FakeIcon(onPositioned { childCoords = it })
                 }
diff --git a/ui/ui-material/src/androidTest/java/androidx/ui/material/DrawerTest.kt b/ui/ui-material/src/androidTest/java/androidx/ui/material/DrawerTest.kt
index beccd9e..9794f24 100644
--- a/ui/ui-material/src/androidTest/java/androidx/ui/material/DrawerTest.kt
+++ b/ui/ui-material/src/androidTest/java/androidx/ui/material/DrawerTest.kt
@@ -22,8 +22,9 @@
 import androidx.test.filters.MediumTest
 import androidx.ui.core.TestTag
 import androidx.ui.core.onPositioned
+import androidx.ui.foundation.Box
 import androidx.ui.foundation.Clickable
-import androidx.ui.layout.Container
+import androidx.ui.layout.LayoutSize
 import androidx.ui.semantics.Semantics
 import androidx.ui.test.createComposeRule
 import androidx.ui.test.doGesture
@@ -63,13 +64,9 @@
         var position: PxPosition? = null
         composeTestRule.setMaterialContent {
             ModalDrawerLayout(DrawerState.Opened, {}, drawerContent = {
-                Container(
-                    onPositioned { coords ->
-                        position = coords.localToGlobal(PxPosition.Origin)
-                    },
-                    expanded = true
-                ) {
-                }
+                Box(LayoutSize.Fill + onPositioned { coords ->
+                    position = coords.localToGlobal(PxPosition.Origin)
+                })
             }, bodyContent = emptyContent())
         }
         composeTestRule.runOnIdleCompose {
@@ -82,13 +79,9 @@
         var position: PxPosition? = null
         composeTestRule.setMaterialContent {
             ModalDrawerLayout(DrawerState.Closed, {}, drawerContent = {
-                Container(
-                    onPositioned { coords ->
-                        position = coords.localToGlobal(PxPosition.Origin)
-                    },
-                    expanded = true
-                ) {
-                }
+                Box(LayoutSize.Fill + onPositioned { coords ->
+                    position = coords.localToGlobal(PxPosition.Origin)
+                })
             }, bodyContent = emptyContent())
         }
         val width = composeTestRule.displayMetrics.widthPixels
@@ -102,13 +95,7 @@
         var size: IntPxSize? = null
         composeTestRule.setMaterialContent {
             ModalDrawerLayout(DrawerState.Opened, {}, drawerContent = {
-                Container(
-                    onPositioned { coords ->
-                        size = coords.size
-                    },
-                    expanded = true
-                ) {
-                }
+                Box(LayoutSize.Fill + onPositioned { coords -> size = coords.size })
             }, bodyContent = emptyContent())
         }
 
@@ -124,13 +111,9 @@
         var position: PxPosition? = null
         composeTestRule.setMaterialContent {
             BottomDrawerLayout(DrawerState.Opened, {}, drawerContent = {
-                Container(
-                    onPositioned { coords ->
-                        position = coords.localToGlobal(PxPosition.Origin)
-                    },
-                    expanded = true
-                ) {
-                }
+                Box(LayoutSize.Fill + onPositioned { coords ->
+                    position = coords.localToGlobal(PxPosition.Origin)
+                })
             }, bodyContent = emptyContent())
         }
 
@@ -148,13 +131,9 @@
         var position: PxPosition? = null
         composeTestRule.setMaterialContent {
             BottomDrawerLayout(DrawerState.Closed, {}, drawerContent = {
-                Container(
-                    onPositioned { coords ->
-                        position = coords.localToGlobal(PxPosition.Origin)
-                    },
-                    expanded = true
-                ) {
-                }
+                Box(LayoutSize.Fill + onPositioned { coords ->
+                    position = coords.localToGlobal(PxPosition.Origin)
+                })
             }, bodyContent = emptyContent())
         }
         val height = composeTestRule.displayMetrics.heightPixels
@@ -168,7 +147,7 @@
         composeTestRule
             .setMaterialContentAndCollectSizes {
                 StaticDrawer {
-                    Container(expanded = true, children = emptyContent())
+                    Box(LayoutSize.Fill)
                 }
             }
             .assertWidthEqualsTo(256.dp)
@@ -186,10 +165,8 @@
                 Semantics(container = true) {
                     ModalDrawerLayout(drawerState.state, { drawerState.state = it },
                         drawerContent = {
-                            Container(
-                                expanded = true,
-                                children = emptyContent(),
-                                modifier = onPositioned { info ->
+                            Box(
+                                LayoutSize.Fill + onPositioned { info ->
                                     val pos = info.localToGlobal(PxPosition.Origin)
                                     if (pos.x == 0.px) {
                                         // If fully opened, mark the openedLatch if present
@@ -202,11 +179,7 @@
                             )
                         },
                         bodyContent = {
-                            Container(
-                                expanded = true,
-                                children = emptyContent(),
-                                modifier = onPositioned { contentWidth = it.size.width }
-                            )
+                            Box(LayoutSize.Fill + onPositioned { contentWidth = it.size.width })
                         })
                 }
             }
@@ -243,12 +216,12 @@
                     ModalDrawerLayout(drawerState.state, { drawerState.state = it },
                         drawerContent = {
                             Clickable( drawerClicks += 1 }) {
-                                Container(expanded = true, children = emptyContent())
+                                Box(LayoutSize.Fill, children = emptyContent())
                             }
                         },
                         bodyContent = {
                             Clickable( bodyClicks += 1 }) {
-                                Container(expanded = true, children = emptyContent())
+                                Box(LayoutSize.Fill, children = emptyContent())
                             }
                         })
                 }
@@ -292,30 +265,22 @@
                 Semantics(container = true) {
                     BottomDrawerLayout(drawerState.state, { drawerState.state = it },
                         drawerContent = {
-                            Container(
-                                expanded = true,
-                                children = emptyContent(),
-                                modifier = onPositioned { info ->
-                                    val pos = info.localToGlobal(PxPosition.Origin)
-                                    if (pos.y.round() == openedHeight) {
-                                        // If fully opened, mark the openedLatch if present
-                                        openedLatch?.countDown()
-                                    } else if (pos.y.round() == contentHeight) {
-                                        // If fully closed, mark the closedLatch if present
-                                        closedLatch?.countDown()
-                                    }
+                            Box(LayoutSize.Fill + onPositioned { info ->
+                                val pos = info.localToGlobal(PxPosition.Origin)
+                                if (pos.y.round() == openedHeight) {
+                                    // If fully opened, mark the openedLatch if present
+                                    openedLatch?.countDown()
+                                } else if (pos.y.round() == contentHeight) {
+                                    // If fully closed, mark the closedLatch if present
+                                    closedLatch?.countDown()
                                 }
-                            )
+                            })
                         },
                         bodyContent = {
-                            Container(
-                                expanded = true,
-                                children = emptyContent(),
-                                modifier = onPositioned {
-                                    contentHeight = it.size.height
-                                    openedHeight = it.size.height * BottomDrawerOpenFraction
-                                }
-                            )
+                            Box(LayoutSize.Fill + onPositioned {
+                                contentHeight = it.size.height
+                                openedHeight = it.size.height * BottomDrawerOpenFraction
+                            })
                         }
                     )
                 }
@@ -353,12 +318,12 @@
                     BottomDrawerLayout(drawerState.state, { drawerState.state = it },
                         drawerContent = {
                             Clickable( drawerClicks += 1 }) {
-                                Container(expanded = true, children = emptyContent())
+                                Box(LayoutSize.Fill, children = emptyContent())
                             }
                         },
                         bodyContent = {
                             Clickable( bodyClicks += 1 }) {
-                                Container(expanded = true, children = emptyContent())
+                                Box(LayoutSize.Fill, children = emptyContent())
                             }
                         })
                 }
diff --git a/ui/ui-material/src/androidTest/java/androidx/ui/material/ElevationOverlayTest.kt b/ui/ui-material/src/androidTest/java/androidx/ui/material/ElevationOverlayTest.kt
index 320b6a4..d003b17 100644
--- a/ui/ui-material/src/androidTest/java/androidx/ui/material/ElevationOverlayTest.kt
+++ b/ui/ui-material/src/androidTest/java/androidx/ui/material/ElevationOverlayTest.kt
@@ -17,12 +17,12 @@
 package androidx.ui.material
 
 import android.os.Build
-import androidx.compose.emptyContent
 import androidx.test.filters.LargeTest
 import androidx.test.filters.SdkSuppress
 import androidx.ui.core.TestTag
+import androidx.ui.foundation.Box
 import androidx.ui.graphics.Color
-import androidx.ui.layout.Container
+import androidx.ui.layout.LayoutSize
 import androidx.ui.semantics.Semantics
 import androidx.ui.test.assertPixels
 import androidx.ui.test.captureToBitmap
@@ -95,15 +95,16 @@
         with(composeTestRule.density) {
             composeTestRule.setContent {
                 MaterialTheme(colorPalette) {
-                    Container {
+                    Box {
                         Surface(elevation = elevation) {
                             // Make the surface size small so we compare less pixels
                             TestTag(Tag) {
                                 Semantics(container = true) {
-                                    Container(
-                                        width = SurfaceSize.width.toDp(),
-                                        height = SurfaceSize.height.toDp(),
-                                        children = emptyContent()
+                                    Box(
+                                        LayoutSize(
+                                            SurfaceSize.width.toDp(),
+                                            SurfaceSize.height.toDp()
+                                        )
                                     )
                                 }
                             }
diff --git a/ui/ui-material/src/androidTest/java/androidx/ui/material/ListItemTest.kt b/ui/ui-material/src/androidTest/java/androidx/ui/material/ListItemTest.kt
index a6d56a7..041e62b 100644
--- a/ui/ui-material/src/androidTest/java/androidx/ui/material/ListItemTest.kt
+++ b/ui/ui-material/src/androidTest/java/androidx/ui/material/ListItemTest.kt
@@ -17,15 +17,14 @@
 package androidx.ui.material
 
 import androidx.test.filters.SmallTest
-import androidx.ui.core.Alignment
 import androidx.ui.core.FirstBaseline
 import androidx.ui.core.Modifier
 import androidx.ui.core.Ref
 import androidx.ui.core.Text
 import androidx.ui.core.onPositioned
+import androidx.ui.foundation.Box
 import androidx.ui.foundation.Image
 import androidx.ui.graphics.ImageAsset
-import androidx.ui.layout.Container
 import androidx.ui.test.createComposeRule
 import androidx.ui.unit.Dp
 import androidx.ui.unit.IntPxSize
@@ -195,7 +194,7 @@
         val trailingPosition = Ref<PxPosition>()
         val trailingSize = Ref<IntPxSize>()
         composeTestRule.setMaterialContent {
-            Container(alignment = Alignment.TopStart) {
+            Box {
                 ListItem(
                     text = { Text("Primary text", saveLayout(textPosition, textSize)) },
                     trailing = {
@@ -231,7 +230,7 @@
         val iconPosition = Ref<PxPosition>()
         val iconSize = Ref<IntPxSize>()
         composeTestRule.setMaterialContent {
-            Container(alignment = Alignment.TopStart) {
+            Box {
                 ListItem(
                     text = { Text("Primary text", saveLayout(textPosition, textSize)) },
                     icon = { Image(icon24x24, saveLayout(iconPosition, iconSize)) }
@@ -270,7 +269,7 @@
         val trailingBaseline = Ref<Px>()
         val trailingSize = Ref<IntPxSize>()
         composeTestRule.setMaterialContent {
-            Container(alignment = Alignment.TopStart) {
+            Box {
                 ListItem(
                     text = {
                         Text("Primary text", saveLayout(textPosition, textSize, textBaseline))
@@ -329,7 +328,7 @@
         val iconPosition = Ref<PxPosition>()
         val iconSize = Ref<IntPxSize>()
         composeTestRule.setMaterialContent {
-            Container(alignment = Alignment.TopStart) {
+            Box {
                 ListItem(
                     text = {
                         Text("Primary text", saveLayout(textPosition, textSize, textBaseline))
@@ -392,7 +391,7 @@
         val trailingPosition = Ref<PxPosition>()
         val trailingSize = Ref<IntPxSize>()
         composeTestRule.setMaterialContent {
-            Container(alignment = Alignment.TopStart) {
+            Box {
                 ListItem(
                     text = {
                         Text("Primary text", saveLayout(textPosition, textSize, textBaseline))
@@ -465,7 +464,7 @@
         val trailingPosition = Ref<PxPosition>()
         val trailingSize = Ref<IntPxSize>()
         composeTestRule.setMaterialContent {
-            Container(alignment = Alignment.TopStart) {
+            Box {
                 ListItem(
                     text = {
                         Text("Primary text", saveLayout(textPosition, textSize, textBaseline))
@@ -544,7 +543,7 @@
         val trailingSize = Ref<IntPxSize>()
         val trailingBaseline = Ref<Px>()
         composeTestRule.setMaterialContent {
-            Container(alignment = Alignment.TopStart) {
+            Box {
                 ListItem(
                     overlineText = {
                         Text(
diff --git a/ui/ui-material/src/androidTest/java/androidx/ui/material/RippleEffectTest.kt b/ui/ui-material/src/androidTest/java/androidx/ui/material/RippleEffectTest.kt
index 5abf5ab..3ca3a92 100644
--- a/ui/ui-material/src/androidTest/java/androidx/ui/material/RippleEffectTest.kt
+++ b/ui/ui-material/src/androidTest/java/androidx/ui/material/RippleEffectTest.kt
@@ -19,15 +19,15 @@
 import androidx.compose.Composable
 import androidx.compose.Model
 import androidx.compose.Providers
-import androidx.compose.emptyContent
 import androidx.test.filters.MediumTest
 import androidx.ui.core.LayoutCoordinates
 import androidx.ui.core.TestTag
+import androidx.ui.foundation.Box
 import androidx.ui.foundation.Clickable
 import androidx.ui.graphics.Canvas
 import androidx.ui.graphics.Color
-import androidx.ui.layout.Container
 import androidx.ui.layout.LayoutPadding
+import androidx.ui.layout.LayoutSize
 import androidx.ui.layout.Row
 import androidx.ui.layout.Stack
 import androidx.ui.material.ripple.RippleThemeAmbient
@@ -71,7 +71,7 @@
                 latch.countDown()
             }) {
                 Card {
-                    Container(LayoutPadding(padding)) {
+                    Box(LayoutPadding(padding)) {
                         TestTag(tag = "ripple") {
                             RippleButton()
                         }
@@ -268,7 +268,7 @@
     private fun RippleButton(size: Dp? = null, color: Color? = null, enabled: Boolean = true) {
         Ripple(bounded = false, color = color, enabled = enabled) {
             Clickable( {
-                Container(width = size, height = size, children = emptyContent())
+                Box(LayoutSize.Min(size ?: 0.dp))
             }
         }
     }
diff --git a/ui/ui-material/src/androidTest/java/androidx/ui/material/TabTest.kt b/ui/ui-material/src/androidTest/java/androidx/ui/material/TabTest.kt
index b390c03..1af0bc4 100644
--- a/ui/ui-material/src/androidTest/java/androidx/ui/material/TabTest.kt
+++ b/ui/ui-material/src/androidTest/java/androidx/ui/material/TabTest.kt
@@ -18,15 +18,14 @@
 import androidx.compose.Composable
 import androidx.compose.state
 import androidx.test.filters.LargeTest
-import androidx.ui.core.Alignment
 import androidx.ui.core.LayoutCoordinates
 import androidx.ui.core.Text
 import androidx.ui.core.onChildPositioned
 import androidx.ui.core.onPositioned
+import androidx.ui.foundation.Box
 import androidx.ui.foundation.ColoredRect
 import androidx.ui.foundation.Icon
 import androidx.ui.graphics.Color
-import androidx.ui.layout.Container
 import androidx.ui.material.icons.Icons
 import androidx.ui.material.icons.filled.Favorite
 import androidx.ui.material.samples.ScrollingTextTabs
@@ -63,7 +62,7 @@
     fun textTab_height() {
         composeTestRule
             .setMaterialContentAndCollectSizes {
-                Container {
+                Box {
                     Surface {
                         Tab(text = { Text("Text") }, selected = true, >
                     }
@@ -76,7 +75,7 @@
     fun iconTab_height() {
         composeTestRule
             .setMaterialContentAndCollectSizes {
-                Container {
+                Box {
                     Surface {
                         Tab(icon = { Icon(icon) }, selected = true, >
                     }
@@ -89,7 +88,7 @@
     fun textAndIconTab_height() {
         composeTestRule
             .setMaterialContentAndCollectSizes {
-                Container {
+                Box {
                     Surface {
                         Tab(
                             text = { Text("Text and Icon") },
@@ -110,38 +109,35 @@
         var indicatorCoords: LayoutCoordinates? = null
 
         composeTestRule.setMaterialContent {
-                // TODO: Go back to delegate syntax when b/141741358 is fixed
-                val (state, setState) = state { 0 }
-                val titles = listOf("TAB 1", "TAB 2")
+            // TODO: Go back to delegate syntax when b/141741358 is fixed
+            val (state, setState) = state { 0 }
+            val titles = listOf("TAB 1", "TAB 2")
 
-                val indicatorContainer = @Composable { tabPositions: List<TabRow.TabPosition> ->
-                    TabRow.IndicatorContainer(tabPositions, state) {
-                        ColoredRect(
-                            Color.Red,
-                            onPositioned { indicatorCoords = it },
-                            height = indicatorHeight
-                        )
-                    }
-                }
-
-                Container(
-                    onChildPositioned { tabRowCoords = it },
-                    alignment = Alignment.TopCenter
-                ) {
-                    TabRow(
-                        items = titles,
-                        selectedIndex = state,
-                        indicatorContainer = indicatorContainer
-                    ) { index, text ->
-                        Tab(
-                            text = { Text(text) },
-                            selected = state == index,
-                             setState(index) }
-                        )
-                    }
+            val indicatorContainer = @Composable { tabPositions: List<TabRow.TabPosition> ->
+                TabRow.IndicatorContainer(tabPositions, state) {
+                    ColoredRect(
+                        Color.Red,
+                        onPositioned { indicatorCoords = it },
+                        height = indicatorHeight
+                    )
                 }
             }
 
+            Box(onChildPositioned { tabRowCoords = it }) {
+                TabRow(
+                    items = titles,
+                    selectedIndex = state,
+                    indicatorContainer = indicatorContainer
+                ) { index, text ->
+                    Tab(
+                        text = { Text(text) },
+                        selected = state == index,
+                         setState(index) }
+                    )
+                }
+            }
+        }
+
         val (tabRowWidth, tabRowHeight) = composeTestRule.runOnIdleComposeWithDensity {
             val tabRowWidth = tabRowCoords!!.size.width
             val tabRowHeight = tabRowCoords!!.size.height
@@ -198,7 +194,7 @@
                 }
             }
 
-            Container(onChildPositioned { tabRowCoords = it }, alignment = Alignment.TopCenter) {
+            Box(onChildPositioned { tabRowCoords = it }) {
                 TabRow(
                     items = titles,
                     scrollable = true,
diff --git a/ui/ui-material/src/main/java/androidx/ui/material/Button.kt b/ui/ui-material/src/main/java/androidx/ui/material/Button.kt
index 0698548..3a81b7d6 100644
--- a/ui/ui-material/src/main/java/androidx/ui/material/Button.kt
+++ b/ui/ui-material/src/main/java/androidx/ui/material/Button.kt
@@ -23,12 +23,12 @@
 import androidx.ui.core.Modifier
 import androidx.ui.core.Text
 import androidx.ui.foundation.Border
+import androidx.ui.foundation.Box
 import androidx.ui.foundation.Clickable
 import androidx.ui.graphics.Color
 import androidx.ui.graphics.Shape
-import androidx.ui.layout.Container
-import androidx.ui.layout.DpConstraints
 import androidx.ui.layout.EdgeInsets
+import androidx.ui.layout.LayoutSize
 import androidx.ui.material.ripple.Ripple
 import androidx.ui.semantics.Semantics
 import androidx.ui.unit.Dp
@@ -89,7 +89,13 @@
         ) {
             Ripple(bounded = true, enabled = enabled) {
                 Clickable( enabled = enabled) {
-                    Container(constraints = ButtonConstraints, padding = innerPadding) {
+                    Box(
+                        ButtonConstraints,
+                        paddingStart = innerPadding.left,
+                        paddingTop = innerPadding.top,
+                        paddingEnd = innerPadding.right,
+                        paddingBottom = innerPadding.bottom
+                    ) {
                         CurrentTextStyleProvider(
                             value = MaterialTheme.typography().button,
                             children = children
@@ -215,10 +221,7 @@
 )
 
 // Specification for Material Button:
-private val ButtonConstraints = DpConstraints(
-    minWidth = 64.dp,
-    minHeight = 36.dp
-)
+private val ButtonConstraints = LayoutSize.Min(64.dp, 36.dp)
 
 /**
  * Contains the default values used by [Button]
diff --git a/ui/ui-material/src/main/java/androidx/ui/material/Checkbox.kt b/ui/ui-material/src/main/java/androidx/ui/material/Checkbox.kt
index 7b4cc77..29c77fa 100644
--- a/ui/ui-material/src/main/java/androidx/ui/material/Checkbox.kt
+++ b/ui/ui-material/src/main/java/androidx/ui/material/Checkbox.kt
@@ -27,6 +27,7 @@
 import androidx.ui.foundation.Box
 import androidx.ui.foundation.Canvas
 import androidx.ui.foundation.CanvasScope
+import androidx.ui.foundation.ContentGravity
 import androidx.ui.foundation.selection.ToggleableState
 import androidx.ui.foundation.selection.TriStateToggleable
 import androidx.ui.geometry.Offset
@@ -39,7 +40,6 @@
 import androidx.ui.graphics.Paint
 import androidx.ui.graphics.PaintingStyle
 import androidx.ui.graphics.StrokeCap
-import androidx.ui.layout.Container
 import androidx.ui.layout.LayoutPadding
 import androidx.ui.layout.LayoutSize
 import androidx.ui.material.ripple.Ripple
@@ -101,7 +101,7 @@
     color: Color = MaterialTheme.colors().secondary
 ) {
     Semantics(container = true, mergeAllDescendants = true) {
-        Container(modifier) {
+        Box(modifier, gravity = ContentGravity.Center) {
             Ripple(bounded = false) {
                 TriStateToggleable(value = value,  {
                     Box(LayoutPadding(CheckboxDefaultPadding)) {
@@ -178,8 +178,10 @@
         val clipRect = outer.shrink(strokeWidth / 2 - offset).outerRect()
         save()
         clipRect(clipRect, ClipOp.difference)
-        drawRoundRect(outer.left, outer.top, outer.right, outer.bottom, outerRadius,
-            outerRadius, paint)
+        drawRoundRect(
+            outer.left, outer.top, outer.right, outer.bottom, outerRadius,
+            outerRadius, paint
+        )
         restore()
 
         save()
@@ -189,8 +191,10 @@
         drawRect(outer.shrink(innerHalfStrokeWidth - offset).outerRect(), paint)
         restore()
     } else {
-        drawRoundRect(outer.left, outer.top, outer.right, outer.bottom, outerRadius,
-            outerRadius, paint)
+        drawRoundRect(
+            outer.left, outer.top, outer.right, outer.bottom, outerRadius,
+            outerRadius, paint
+        )
     }
 }
 
diff --git a/ui/ui-material/src/main/java/androidx/ui/material/DataTable.kt b/ui/ui-material/src/main/java/androidx/ui/material/DataTable.kt
index a306273..d80b6f0 100644
--- a/ui/ui-material/src/main/java/androidx/ui/material/DataTable.kt
+++ b/ui/ui-material/src/main/java/androidx/ui/material/DataTable.kt
@@ -25,8 +25,10 @@
 import androidx.ui.core.ParentData
 import androidx.ui.core.Text
 import androidx.ui.foundation.Border
+import androidx.ui.foundation.Box
 import androidx.ui.foundation.Clickable
 import androidx.ui.foundation.ColoredRect
+import androidx.ui.foundation.ContentGravity
 import androidx.ui.foundation.Image
 import androidx.ui.foundation.drawBorders
 import androidx.ui.foundation.selection.ToggleableState
@@ -34,9 +36,9 @@
 import androidx.ui.graphics.ImageAsset
 import androidx.ui.layout.Arrangement
 import androidx.ui.layout.Column
-import androidx.ui.layout.Container
 import androidx.ui.layout.EdgeInsets
 import androidx.ui.layout.LayoutGravity
+import androidx.ui.layout.LayoutHeight
 import androidx.ui.layout.LayoutSize
 import androidx.ui.layout.LayoutWidth
 import androidx.ui.layout.Row
@@ -364,7 +366,14 @@
             if (header != null) {
                 tableRow {
                     if (showCheckboxes) {
-                        Container(height = headerRowHeight, padding = cellSpacing) {
+                        Box(
+                            LayoutHeight(headerRowHeight),
+                            paddingStart = cellSpacing.left,
+                            paddingTop = cellSpacing.top,
+                            paddingEnd = cellSpacing.right,
+                            paddingBottom = cellSpacing.bottom,
+                            gravity = ContentGravity.Center
+                        ) {
                             val parentState = when (selectableRows.count { it.selected }) {
                                 selectableRows.size -> ToggleableState.On
                                 0 -> ToggleableState.Off
@@ -381,7 +390,14 @@
                         }
                     }
                     for (j in 0 until columns) {
-                        Container(height = headerRowHeight, padding = cellSpacing) {
+                        Box(
+                            LayoutHeight(headerRowHeight),
+                            paddingStart = cellSpacing.left,
+                            paddingTop = cellSpacing.top,
+                            paddingEnd = cellSpacing.right,
+                            paddingBottom = cellSpacing.bottom,
+                            gravity = ContentGravity.Center
+                        ) {
                             var fontWeight = FontWeight.W500
                             var >
                             var enabled = false
@@ -425,12 +441,26 @@
             visibleRows.forEach { row ->
                 tableRow {
                     if (showCheckboxes) {
-                        Container(height = dataRowHeight, padding = cellSpacing) {
+                        Box(
+                            LayoutHeight(dataRowHeight),
+                            paddingStart = cellSpacing.left,
+                            paddingTop = cellSpacing.top,
+                            paddingEnd = cellSpacing.right,
+                            paddingBottom = cellSpacing.bottom,
+                            gravity = ContentGravity.Center
+                        ) {
                             Checkbox(row.selected, row.onSelectedChange)
                         }
                     }
                     for (j in 0 until columns) {
-                        Container(height = dataRowHeight, padding = cellSpacing) {
+                        Box(
+                            LayoutHeight(dataRowHeight),
+                            paddingStart = cellSpacing.left,
+                            paddingTop = cellSpacing.top,
+                            paddingEnd = cellSpacing.right,
+                            paddingBottom = cellSpacing.bottom,
+                            gravity = ContentGravity.Center
+                        ) {
                             row.children(index = j)
                         }
                     }
@@ -485,7 +515,14 @@
     } else {
         Column {
             table()
-            Container(height = dataRowHeight, padding = cellSpacing) {
+            Box(
+                LayoutHeight(dataRowHeight),
+                paddingStart = cellSpacing.left,
+                paddingTop = cellSpacing.top,
+                paddingEnd = cellSpacing.right,
+                paddingBottom = cellSpacing.bottom,
+                gravity = ContentGravity.Center
+            ) {
                 Row(LayoutSize.Fill, arrangement = Arrangement.End) {
                     val pages = (rows.size - 1) / pagination.rowsPerPage + 1
                     val startRow = pagination.rowsPerPage * pagination.page
@@ -505,7 +542,7 @@
                     Spacer(LayoutWidth(32.dp))
 
                     // TODO(calintat): Replace this with an image button with chevron_left icon.
-                    Container(modifier = modifier) {
+                    Box(modifier = modifier) {
                         Ripple(bounded = false) {
                             Clickable(>
                                 val newPage = pagination.page - 1
@@ -520,7 +557,7 @@
                     Spacer(LayoutWidth(24.dp))
 
                     // TODO(calintat): Replace this with an image button with chevron_right icon.
-                    Container(modifier = modifier) {
+                    Box(modifier = modifier) {
                         Ripple(bounded = false) {
                             Clickable(>
                                 val newPage = pagination.page + 1
diff --git a/ui/ui-material/src/main/java/androidx/ui/material/Drawer.kt b/ui/ui-material/src/main/java/androidx/ui/material/Drawer.kt
index 6d458a8..2f7f632 100644
--- a/ui/ui-material/src/main/java/androidx/ui/material/Drawer.kt
+++ b/ui/ui-material/src/main/java/androidx/ui/material/Drawer.kt
@@ -32,10 +32,10 @@
 import androidx.ui.foundation.gestures.DragDirection
 import androidx.ui.graphics.Paint
 import androidx.ui.graphics.PaintingStyle
-import androidx.ui.layout.Container
 import androidx.ui.layout.DpConstraints
-import androidx.ui.layout.EdgeInsets
+import androidx.ui.layout.LayoutHeight
 import androidx.ui.layout.LayoutSize
+import androidx.ui.layout.LayoutWidth
 import androidx.ui.layout.Stack
 import androidx.ui.material.internal.StateDraggable
 import androidx.ui.unit.IntPx
@@ -78,7 +78,7 @@
 fun StaticDrawer(
     drawerContent: @Composable() () -> Unit
 ) {
-    Container(width = StaticDrawerWidth, expanded = true, children = drawerContent)
+    Box(LayoutWidth(StaticDrawerWidth) + LayoutHeight.Fill, children = drawerContent)
 }
 
 /**
@@ -110,7 +110,7 @@
     drawerContent: @Composable() () -> Unit,
     bodyContent: @Composable() () -> Unit
 ) {
-    Container(expanded = true) {
+    Box(LayoutSize.Fill) {
         WithConstraints { pxConstraints, _ ->
             // TODO : think about Infinite max bounds case
             if (!pxConstraints.hasBoundedWidth) {
@@ -177,7 +177,7 @@
     drawerContent: @Composable() () -> Unit,
     bodyContent: @Composable() () -> Unit
 ) {
-    Container(expanded = true) {
+    Box(LayoutSize.Fill) {
         WithConstraints { pxConstraints, _ ->
             // TODO : think about Infinite max bounds case
             if (!pxConstraints.hasBoundedHeight) {
@@ -236,16 +236,18 @@
     children: @Composable() () -> Unit
 ) {
     WithOffset(xOffset = xOffset) {
-        Container(
-            constraints = constraints,
-            padding = EdgeInsets(right = VerticalDrawerPadding)
+        Box(
+            LayoutSize.Constrain(
+                constraints.minWidth,
+                constraints.minHeight,
+                constraints.maxWidth,
+                constraints.maxHeight
+            ),
+            paddingEnd = VerticalDrawerPadding
         ) {
             // remove Container when we will support multiply children
             Surface {
-                Container(
-                    expanded = true,
-                    children = children
-                )
+                Box(LayoutSize.Fill, children = children)
             }
         }
     }
@@ -258,13 +260,17 @@
     children: @Composable() () -> Unit
 ) {
     WithOffset(yOffset = yOffset) {
-        Container(constraints = constraints) {
+        Box(
+            LayoutSize.Constrain(
+                constraints.minWidth,
+                constraints.minHeight,
+                constraints.maxWidth,
+                constraints.maxHeight
+            )
+        ) {
             // remove Container when we will support multiply children
             Surface {
-                Container(
-                    expanded = true,
-                    children = children
-                )
+                Box(LayoutSize.Fill, children = children)
             }
         }
     }
diff --git a/ui/ui-material/src/main/java/androidx/ui/material/FloatingActionButton.kt b/ui/ui-material/src/main/java/androidx/ui/material/FloatingActionButton.kt
index 633c146..2a6c5114 100644
--- a/ui/ui-material/src/main/java/androidx/ui/material/FloatingActionButton.kt
+++ b/ui/ui-material/src/main/java/androidx/ui/material/FloatingActionButton.kt
@@ -20,15 +20,16 @@
 import androidx.ui.core.CurrentTextStyleProvider
 import androidx.ui.core.Modifier
 import androidx.ui.core.Text
+import androidx.ui.foundation.Box
 import androidx.ui.foundation.Clickable
+import androidx.ui.foundation.ContentGravity
 import androidx.ui.foundation.Image
 import androidx.ui.foundation.shape.corner.CircleShape
 import androidx.ui.graphics.Color
 import androidx.ui.graphics.ImageAsset
 import androidx.ui.graphics.Shape
-import androidx.ui.layout.Container
-import androidx.ui.layout.DpConstraints
 import androidx.ui.layout.LayoutPadding
+import androidx.ui.layout.LayoutSize
 import androidx.ui.layout.LayoutWidth
 import androidx.ui.layout.Row
 import androidx.ui.layout.Spacer
@@ -68,7 +69,7 @@
     Surface(modifier = modifier, shape = shape, color = color, elevation = elevation) {
         Ripple(bounded = true) {
             Clickable( {
-                Container(constraints = DpConstraints(minWidth = minSize, minHeight = minSize)) {
+                Box(LayoutSize.Min(minSize), gravity = ContentGravity.Center) {
                     CurrentTextStyleProvider(MaterialTheme.typography().button, children)
                 }
             }
@@ -143,7 +144,8 @@
         >
         color = color,
         elevation = elevation,
-        minSize = ExtendedFabHeight) {
+        minSize = ExtendedFabHeight
+    ) {
         if (icon == null) {
             Text(
                 text = text,
diff --git a/ui/ui-material/src/main/java/androidx/ui/material/ListItem.kt b/ui/ui-material/src/main/java/androidx/ui/material/ListItem.kt
index a598fd5..155f4cc 100644
--- a/ui/ui-material/src/main/java/androidx/ui/material/ListItem.kt
+++ b/ui/ui-material/src/main/java/androidx/ui/material/ListItem.kt
@@ -24,15 +24,16 @@
 import androidx.ui.core.Layout
 import androidx.ui.core.Modifier
 import androidx.ui.core.Text
+import androidx.ui.foundation.Box
 import androidx.ui.foundation.Clickable
+import androidx.ui.foundation.ContentGravity
 import androidx.ui.foundation.Image
 import androidx.ui.graphics.ImageAsset
-import androidx.ui.layout.Container
-import androidx.ui.layout.DpConstraints
-import androidx.ui.layout.EdgeInsets
 import androidx.ui.layout.LayoutGravity
 import androidx.ui.layout.LayoutHeight
 import androidx.ui.layout.LayoutPadding
+import androidx.ui.layout.LayoutSize
+import androidx.ui.layout.LayoutWidth
 import androidx.ui.layout.Row
 import androidx.ui.material.ripple.Ripple
 import androidx.ui.text.TextStyle
@@ -199,32 +200,26 @@
         val minHeight = if (icon == null) MinHeight else MinHeightWithIcon
         Row(LayoutHeight.Min(minHeight)) {
             if (icon != null) {
-                Container(
-                    modifier = LayoutGravity.Center,
-                    alignment = Alignment.CenterStart,
-                    constraints = DpConstraints(
-                        minWidth = IconLeftPadding + IconMinPaddedWidth
-                    ),
-                    padding = EdgeInsets(
-                        // TODO(popam): remove left padding for wide icons
-                        left = IconLeftPadding,
-                        top = IconVerticalPadding,
-                        bottom = IconVerticalPadding
-                    ),
+                Box(
+                    modifier = LayoutGravity.Center +
+                            LayoutWidth.Min(IconLeftPadding + IconMinPaddedWidth),
+                    gravity = ContentGravity.CenterStart,
+                    paddingStart = IconLeftPadding,
+                    paddingTop = IconVerticalPadding,
+                    paddingBottom = IconVerticalPadding,
                     children = icon
                 )
             }
-            Container(
+            Box(
                 modifier = LayoutWeight(1f) + LayoutGravity.Center +
                         LayoutPadding(start = ContentLeftPadding, end = ContentRightPadding),
-                alignment = Alignment.CenterStart,
+                gravity = ContentGravity.CenterStart,
                 children = text
             )
             if (trailing != null) {
-                Container(
-                    modifier = LayoutGravity.Center,
-                    alignment = Alignment.Center,
-                    padding = EdgeInsets(right = TrailingRightPadding),
+                Box(
+                    LayoutGravity.Center,
+                    paddingEnd = TrailingRightPadding,
                     children = trailing
                 )
             }
@@ -268,18 +263,12 @@
             )
 
             if (icon != null) {
-                Container(
-                    alignment = Alignment.TopStart,
-                    constraints = DpConstraints(
-                        // TODO(popam): remove minHeight with cross axis alignment per child
-                        minHeight = minHeight,
-                        minWidth = IconLeftPadding + IconMinPaddedWidth
-                    ),
-                    padding = EdgeInsets(
-                        left = IconLeftPadding,
-                        top = IconVerticalPadding,
-                        bottom = IconVerticalPadding
-                    ),
+                Box(
+                    LayoutSize.Min(IconLeftPadding + IconMinPaddedWidth, minHeight),
+                    gravity = ContentGravity.TopStart,
+                    paddingStart = IconLeftPadding,
+                    paddingTop = IconVerticalPadding,
+                    paddingBottom = IconVerticalPadding,
                     children = icon
                 )
             }
@@ -320,9 +309,10 @@
                         PrimaryBaselineOffsetNoIcon
                     }
                 ) {
-                    Container(
+                    Box(
                         // TODO(popam): find way to center and wrap content without minHeight
                         LayoutHeight.Min(minHeight) + LayoutPadding(end = TrailingRightPadding),
+                        gravity = ContentGravity.Center,
                         children = trailing
                     )
                 }
@@ -358,16 +348,12 @@
     ) {
         Row(LayoutHeight.Min(MinHeight)) {
             if (icon != null) {
-                Container(
-                    alignment = Alignment.CenterStart,
-                    constraints = DpConstraints(
-                        minWidth = IconLeftPadding + IconMinPaddedWidth
-                    ),
-                    padding = EdgeInsets(
-                        left = IconLeftPadding,
-                        top = IconThreeLineVerticalPadding,
-                        bottom = IconThreeLineVerticalPadding
-                    ),
+                Box(
+                    LayoutSize.Min(IconLeftPadding + IconMinPaddedWidth),
+                    gravity = ContentGravity.CenterStart,
+                    paddingStart = IconLeftPadding,
+                    paddingTop = IconThreeLineVerticalPadding,
+                    paddingBottom = IconThreeLineVerticalPadding,
                     children = icon
                 )
             }
@@ -435,6 +421,7 @@
         }
     }
 }
+
 /**
  * Layout that takes a child and adds the necessary padding such that the first baseline of the
  * child is at a specific offset from the top of the container. If the child does not have
diff --git a/ui/ui-material/src/main/java/androidx/ui/material/RadioButton.kt b/ui/ui-material/src/main/java/androidx/ui/material/RadioButton.kt
index 7307255..186702c 100644
--- a/ui/ui-material/src/main/java/androidx/ui/material/RadioButton.kt
+++ b/ui/ui-material/src/main/java/androidx/ui/material/RadioButton.kt
@@ -33,7 +33,6 @@
 import androidx.ui.graphics.Paint
 import androidx.ui.graphics.PaintingStyle
 import androidx.ui.layout.Column
-import androidx.ui.layout.Container
 import androidx.ui.layout.LayoutPadding
 import androidx.ui.layout.LayoutSize
 import androidx.ui.layout.LayoutWidth
@@ -129,7 +128,7 @@
         children: @Composable() () -> Unit
     ) {
         Semantics(container = true, mergeAllDescendants = true) {
-            Container {
+            Box {
                 Ripple(bounded = true) {
                     MutuallyExclusiveSetItem(
                         selected = selected,