[go: nahoru, domu]

Fluent modifiers

Address feedback from UX research study on Compose UI Modifiers.
This change explores moving the preferred modifier construction
mechanism to fluent extension functions acting as factories, downplaying
the use of the overloaded operator plus outside of the implementation of
these extension factories. This makes modifiers more discoverable via
autocomplete and helps emphasize the significance of modifier ordering.

Relnote: Replaced Modifier plus operator with factory extension functions
Test: existing tests refactored to use new API

Change-Id: I225e444f50956d84e15ca4f1378b7f805d54e0ca
diff --git a/ui/ui-material/icons/core/samples/src/main/java/androidx/ui/material/icons/samples/IconSamples.kt b/ui/ui-material/icons/core/samples/src/main/java/androidx/ui/material/icons/samples/IconSamples.kt
index 393fa53..8cbee3a 100644
--- a/ui/ui-material/icons/core/samples/src/main/java/androidx/ui/material/icons/samples/IconSamples.kt
+++ b/ui/ui-material/icons/core/samples/src/main/java/androidx/ui/material/icons/samples/IconSamples.kt
@@ -18,7 +18,8 @@
 
 import androidx.annotation.Sampled
 import androidx.compose.Composable
-import androidx.ui.core.asModifier
+import androidx.ui.core.Modifier
+import androidx.ui.core.paint
 import androidx.ui.foundation.Box
 import androidx.ui.foundation.Icon
 import androidx.ui.graphics.vector.VectorAsset
@@ -42,5 +43,5 @@
 
 @Composable
 private fun SomeComposable(icon: VectorAsset) {
-    Box(modifier = VectorPainter(icon).asModifier())
+    Box(Modifier.paint(VectorPainter(icon)))
 }
diff --git a/ui/ui-material/icons/extended/src/androidTest/java/androidx/ui/material/icons/test/IconComparisonTest.kt b/ui/ui-material/icons/extended/src/androidTest/java/androidx/ui/material/icons/test/IconComparisonTest.kt
index 6695fc7..fa199e1 100644
--- a/ui/ui-material/icons/extended/src/androidTest/java/androidx/ui/material/icons/test/IconComparisonTest.kt
+++ b/ui/ui-material/icons/extended/src/androidTest/java/androidx/ui/material/icons/test/IconComparisonTest.kt
@@ -24,10 +24,12 @@
 import androidx.test.filters.LargeTest
 import androidx.test.filters.SdkSuppress
 import androidx.test.rule.ActivityTestRule
+import androidx.ui.core.Alignment
 import androidx.ui.core.ContextAmbient
 import androidx.ui.core.DensityAmbient
+import androidx.ui.core.Modifier
 import androidx.ui.core.TestTag
-import androidx.ui.core.asModifier
+import androidx.ui.core.paint
 import androidx.ui.core.setContent
 import androidx.ui.foundation.Box
 import androidx.ui.graphics.Color
@@ -35,9 +37,8 @@
 import androidx.ui.graphics.vector.VectorAsset
 import androidx.ui.graphics.vector.VectorPainter
 import androidx.ui.layout.Column
-import androidx.ui.layout.LayoutGravity
-import androidx.ui.layout.LayoutSize
 import androidx.ui.layout.Stack
+import androidx.ui.layout.preferredSize
 import androidx.ui.res.vectorResource
 import androidx.ui.semantics.Semantics
 import androidx.ui.test.captureToBitmap
@@ -169,24 +170,22 @@
         // Using ipx directly ensures that we will always have a consistent layout / drawing
         // story, so anti-aliasing should be identical.
         val layoutSize = with(DensityAmbient.current) {
-            LayoutSize(72.ipx.toDp())
+            Modifier.preferredSize(72.ipx.toDp())
         }
-        Column(LayoutGravity.Center) {
+        Column(Modifier.gravity(Alignment.Center)) {
             TestTag(ProgrammaticTestTag) {
                 Semantics(container = true) {
                     Box(
-                        modifier = layoutSize +
-                                VectorPainter(programmaticVector)
-                                    .asModifier(colorFilter = ColorFilter.tint(Color.Red))
+                        modifier = layoutSize.paint(VectorPainter(programmaticVector),
+                            colorFilter = ColorFilter.tint(Color.Red))
                     )
                 }
             }
             TestTag(XmlTestTag) {
                 Semantics(container = true) {
                     Box(
-                        modifier = layoutSize +
-                                VectorPainter(xmlVector)
-                                    .asModifier(colorFilter = ColorFilter.tint(Color.Red))
+                        modifier = layoutSize.paint(VectorPainter(xmlVector),
+                            colorFilter = ColorFilter.tint(Color.Red))
                     )
                 }
             }
diff --git a/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/AppBarDemo.kt b/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/AppBarDemo.kt
index 3a90c2c..ea5c90f 100644
--- a/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/AppBarDemo.kt
+++ b/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/AppBarDemo.kt
@@ -17,6 +17,7 @@
 package androidx.ui.material.demos
 
 import androidx.compose.Composable
+import androidx.ui.core.Modifier
 import androidx.ui.layout.Column
 import androidx.ui.layout.Spacer
 import androidx.ui.material.samples.SimpleBottomAppBar
@@ -26,7 +27,7 @@
 fun AppBarDemo() {
     Column {
         SimpleTopAppBar()
-        Spacer(LayoutWeight(1f))
+        Spacer(Modifier.weight(1f, true))
         SimpleBottomAppBar()
     }
 }
diff --git a/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/BottomNavigationDemo.kt b/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/BottomNavigationDemo.kt
index d0548ac..5407ba6 100644
--- a/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/BottomNavigationDemo.kt
+++ b/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/BottomNavigationDemo.kt
@@ -18,10 +18,12 @@
 
 import androidx.compose.Composable
 import androidx.compose.state
+import androidx.ui.core.Modifier
 import androidx.ui.layout.Arrangement
 import androidx.ui.layout.Column
-import androidx.ui.layout.LayoutHeight
 import androidx.ui.layout.Spacer
+import androidx.ui.layout.fillMaxHeight
+import androidx.ui.layout.preferredHeight
 import androidx.ui.material.RadioGroup
 import androidx.ui.material.samples.BottomNavigationSample
 import androidx.ui.material.samples.BottomNavigationWithOnlySelectedLabelsSample
@@ -31,7 +33,7 @@
 fun BottomNavigationDemo() {
     var alwaysShowLabels by state { false }
 
-    Column(LayoutHeight.Fill, arrangement = Arrangement.Bottom) {
+    Column(Modifier.fillMaxHeight(), arrangement = Arrangement.Bottom) {
         RadioGroup {
             RadioGroupTextItem(
                 selected = !alwaysShowLabels,
@@ -45,7 +47,7 @@
             )
         }
 
-        Spacer(LayoutHeight(50.dp))
+        Spacer(Modifier.preferredHeight(50.dp))
 
         if (alwaysShowLabels) {
             BottomNavigationSample()
diff --git a/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/ButtonDemo.kt b/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/ButtonDemo.kt
index f2f1bfb7..4646b44 100644
--- a/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/ButtonDemo.kt
+++ b/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/ButtonDemo.kt
@@ -17,18 +17,19 @@
 package androidx.ui.material.demos
 
 import androidx.compose.Composable
+import androidx.ui.core.Modifier
 import androidx.ui.foundation.Border
 import androidx.ui.foundation.Text
 import androidx.ui.foundation.shape.GenericShape
 import androidx.ui.graphics.Color
 import androidx.ui.layout.Arrangement
 import androidx.ui.layout.Column
-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.layout.Spacer
+import androidx.ui.layout.fillMaxWidth
+import androidx.ui.layout.padding
+import androidx.ui.layout.preferredHeight
+import androidx.ui.layout.preferredSize
 import androidx.ui.material.Button
 import androidx.ui.material.MaterialTheme
 import androidx.ui.material.OutlinedButton
@@ -46,13 +47,13 @@
 
 @Composable
 fun ButtonDemo() {
-    Column(LayoutPadding(10.dp)) {
+    Column(Modifier.padding(10.dp)) {
         Buttons()
-        Spacer(LayoutHeight(DefaultSpace))
+        Spacer(Modifier.preferredHeight(DefaultSpace))
         Fabs()
-        Spacer(LayoutHeight(DefaultSpace))
+        Spacer(Modifier.preferredHeight(DefaultSpace))
         IconButtons()
-        Spacer(LayoutHeight(DefaultSpace))
+        Spacer(Modifier.preferredHeight(DefaultSpace))
         CustomShapeButton()
     }
 }
@@ -60,16 +61,16 @@
 @Composable
 private fun Buttons() {
     Text("Buttons")
-    Spacer(LayoutHeight(DefaultSpace))
-    Row(LayoutWidth.Fill, arrangement = Arrangement.SpaceEvenly) {
+    Spacer(Modifier.preferredHeight(DefaultSpace))
+    Row(Modifier.fillMaxWidth(), arrangement = Arrangement.SpaceEvenly) {
         ButtonSample()
         OutlinedButtonSample()
         TextButtonSample()
     }
 
-    Spacer(LayoutHeight(DefaultSpace))
+    Spacer(Modifier.preferredHeight(DefaultSpace))
 
-    Row(LayoutWidth.Fill, arrangement = Arrangement.SpaceEvenly) {
+    Row(Modifier.fillMaxWidth(), arrangement = Arrangement.SpaceEvenly) {
         Button( backgroundColor = MaterialTheme.colors.secondary) {
             Text("Secondary Color")
         }
@@ -85,9 +86,9 @@
 @Composable
 private fun Fabs() {
     Text("Floating action buttons")
-    Spacer(LayoutHeight(DefaultSpace))
+    Spacer(Modifier.preferredHeight(DefaultSpace))
 
-    Row(LayoutWidth.Fill, arrangement = Arrangement.SpaceEvenly) {
+    Row(Modifier.fillMaxWidth(), arrangement = Arrangement.SpaceEvenly) {
         SimpleFab()
         SimpleExtendedFabNoIcon()
         SimpleExtendedFabWithIcon()
@@ -97,7 +98,7 @@
 @Composable
 private fun IconButtons() {
     Text("Icon buttons")
-    Spacer(LayoutHeight(DefaultSpace))
+    Spacer(Modifier.preferredHeight(DefaultSpace))
 
     Row {
         IconButtonSample()
@@ -108,10 +109,10 @@
 @Composable
 private fun CustomShapeButton() {
     Text("Custom shape button")
-    Spacer(LayoutHeight(DefaultSpace))
+    Spacer(Modifier.preferredHeight(DefaultSpace))
     OutlinedButton(
         >
-        modifier = LayoutSize(100.dp),
+        modifier = Modifier.preferredSize(100.dp),
         shape = TriangleShape,
         backgroundColor = Color.Yellow,
         border = Border(size = 2.dp, color = Color.Black)
diff --git a/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/ColorPickerDemo.kt b/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/ColorPickerDemo.kt
index 30661a9..6a4101f 100644
--- a/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/ColorPickerDemo.kt
+++ b/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/ColorPickerDemo.kt
@@ -50,15 +50,17 @@
 import androidx.ui.graphics.SolidColor
 import androidx.ui.graphics.toArgb
 import androidx.ui.layout.Column
-import androidx.ui.layout.LayoutAspectRatio
-import androidx.ui.layout.LayoutHeight
-import androidx.ui.layout.LayoutOffset
-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
 import androidx.ui.layout.Stack
+import androidx.ui.layout.aspectRatio
+import androidx.ui.layout.fillMaxHeight
+import androidx.ui.layout.fillMaxSize
+import androidx.ui.layout.fillMaxWidth
+import androidx.ui.layout.offset
+import androidx.ui.layout.padding
+import androidx.ui.layout.preferredHeight
+import androidx.ui.layout.preferredSize
 import androidx.ui.material.Surface
 import androidx.ui.material.TopAppBar
 import androidx.ui.text.style.TextAlign
@@ -85,8 +87,11 @@
 
 @Composable
 private fun ColorPicker(onColorChange: (Color) -> Unit) {
-    WithConstraints(LayoutPadding(50.dp) + LayoutSize.Fill +
-            LayoutAspectRatio(1f)) { constraints, _ ->
+    WithConstraints(
+        Modifier.padding(50.dp)
+            .fillMaxSize()
+            .aspectRatio(1f)
+    ) { constraints, _ ->
         val diameter = constraints.maxWidth.value
         var position by state { PxPosition.Origin }
         val colorWheel = remember(diameter) { ColorWheel(diameter) }
@@ -106,7 +111,7 @@
              isDragging = it }
         )
 
-        Stack(LayoutSize.Fill) {
+        Stack(Modifier.fillMaxSize()) {
             Image(modifier = inputModifier, asset = colorWheel.image)
             val color = colorWheel.colorForPosition(position)
             if (color != null) {
@@ -160,7 +165,7 @@
 @Composable
 private fun Magnifier(visible: Boolean, position: PxPosition, color: Color) {
     val offset = with(DensityAmbient.current) {
-        LayoutOffset(
+        Modifier.offset(
             position.x.toDp() - MagnifierWidth / 2,
             // Align with the center of the selection circle
             position.y.toDp() - (MagnifierHeight - (SelectionCircleDiameter / 2))
@@ -173,20 +178,18 @@
     ) { labelWidth: Dp, selectionDiameter: Dp,
         opacity: Float ->
         Column(
-            modifier = offset + LayoutSize(
-                width = MagnifierWidth,
-                height = MagnifierHeight
-            ) + drawOpacity(opacity)
+            offset.preferredSize(width = MagnifierWidth, height = MagnifierHeight)
+                .drawOpacity(opacity)
         ) {
-            Box(LayoutWidth.Fill, gravity = ContentGravity.Center) {
-                MagnifierLabel(LayoutSize(labelWidth, MagnifierLabelHeight), color)
+            Box(Modifier.fillMaxWidth(), gravity = ContentGravity.Center) {
+                MagnifierLabel(Modifier.preferredSize(labelWidth, MagnifierLabelHeight), color)
             }
-            Spacer(LayoutWeight(1f))
+            Spacer(Modifier.weight(1f))
             Box(
-                LayoutWidth.Fill + LayoutHeight(SelectionCircleDiameter),
+                Modifier.fillMaxWidth().preferredHeight(SelectionCircleDiameter),
                 gravity = ContentGravity.Center
             ) {
-                MagnifierSelectionCircle(LayoutSize(selectionDiameter), color)
+                MagnifierSelectionCircle(Modifier.preferredSize(selectionDiameter), color)
             }
         }
     }
@@ -252,13 +255,13 @@
 private fun MagnifierLabel(modifier: Modifier, color: Color) {
     Surface(shape = MagnifierPopupShape, elevation = 4.dp) {
         Row(modifier) {
-            Box(LayoutWeight(0.25f) + LayoutHeight.Fill, backgroundColor = color)
+            Box(Modifier.weight(0.25f).fillMaxHeight(), backgroundColor = color)
             // Add `#` and drop alpha characters
             val text = "#" + Integer.toHexString(color.toArgb()).toUpperCase(Locale.ROOT).drop(2)
             val textStyle = currentTextStyle().copy(textAlign = TextAlign.Center)
             Text(
                 text = text,
-                modifier = LayoutWeight(0.75f) + LayoutPadding(bottom = 20.dp, top = 10.dp),
+                modifier = Modifier.weight(0.75f).padding(top = 10.dp, bottom = 20.dp),
                 style = textStyle,
                 maxLines = 1
             )
diff --git a/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/DynamicThemeActivity.kt b/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/DynamicThemeActivity.kt
index 32b8176..a7135c1 100644
--- a/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/DynamicThemeActivity.kt
+++ b/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/DynamicThemeActivity.kt
@@ -22,6 +22,7 @@
 import androidx.compose.Composable
 import androidx.compose.Model
 import androidx.compose.remember
+import androidx.ui.core.Modifier
 import androidx.ui.core.setContent
 import androidx.ui.foundation.Box
 import androidx.ui.foundation.ContentGravity
@@ -34,9 +35,9 @@
 import androidx.ui.graphics.lerp
 import androidx.ui.graphics.toArgb
 import androidx.ui.layout.Column
-import androidx.ui.layout.LayoutHeight
-import androidx.ui.layout.LayoutPadding
-import androidx.ui.layout.LayoutWidth
+import androidx.ui.layout.fillMaxWidth
+import androidx.ui.layout.padding
+import androidx.ui.layout.preferredHeight
 import androidx.ui.material.BottomAppBar
 import androidx.ui.material.ColorPalette
 import androidx.ui.material.ExtendedFloatingActionButton
@@ -126,7 +127,7 @@
     // colour from the Material theme to work out text colour, so we end up doing a
     // large amount of work here when the top level theme changes
     Box(
-        LayoutPadding(25.dp) + LayoutWidth.Fill + LayoutHeight(150.dp),
+        Modifier.padding(25.dp).fillMaxWidth().preferredHeight(150.dp),
         shape = RoundedCornerShape(10.dp),
         backgroundColor = shapeColor,
         gravity = ContentGravity.Center
diff --git a/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/ElevationDemo.kt b/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/ElevationDemo.kt
index 12be3b1..530d023 100644
--- a/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/ElevationDemo.kt
+++ b/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/ElevationDemo.kt
@@ -17,6 +17,7 @@
 package androidx.ui.material.demos
 
 import androidx.compose.Composable
+import androidx.ui.core.Modifier
 import androidx.ui.foundation.Border
 import androidx.ui.foundation.Box
 import androidx.ui.foundation.Clickable
@@ -26,10 +27,10 @@
 import androidx.ui.foundation.shape.corner.RoundedCornerShape
 import androidx.ui.graphics.Color
 import androidx.ui.layout.Column
-import androidx.ui.layout.LayoutHeight
-import androidx.ui.layout.LayoutPadding
-import androidx.ui.layout.LayoutSize
-import androidx.ui.layout.LayoutWidth
+import androidx.ui.layout.fillMaxSize
+import androidx.ui.layout.fillMaxWidth
+import androidx.ui.layout.padding
+import androidx.ui.layout.preferredHeight
 import androidx.ui.material.Card
 import androidx.ui.material.MaterialTheme
 import androidx.ui.material.ripple.ripple
@@ -39,12 +40,12 @@
 @Composable
 fun ElevationDemo() {
     Column {
-        Box(LayoutPadding(20.dp) + LayoutWidth.Fill, gravity = ContentGravity.Center) {
+        Box(Modifier.padding(20.dp).fillMaxWidth(), gravity = ContentGravity.Center) {
             val text = getMessage(MaterialTheme.colors.isLight)
             Text(text)
         }
         VerticalScroller {
-            Column(LayoutPadding(25.dp) + LayoutSize.Fill) {
+            Column(Modifier.padding(25.dp).fillMaxSize()) {
                 elevations.forEach { elevation ->
                     ElevatedCard(elevation)
                 }
@@ -56,13 +57,13 @@
 @Composable
 private fun ElevatedCard(elevation: Dp) {
     Card(
-        LayoutPadding(start = 10.dp, end = 10.dp, top = 20.dp, bottom = 20.dp),
+        Modifier.padding(start = 10.dp, top = 20.dp, end = 10.dp, bottom = 20.dp),
         shape = RoundedCornerShape(4.dp),
         border = if (elevation == 0.dp) Border(1.dp, Color.Gray) else null,
         elevation = elevation
     ) {
         Clickable( modifier = ripple()) {
-            Box(LayoutWidth.Fill + LayoutHeight(150.dp), gravity = ContentGravity.Center) {
+            Box(Modifier.fillMaxWidth().preferredHeight(150.dp), gravity = ContentGravity.Center) {
                 Text("$elevation", style = MaterialTheme.typography.h4)
             }
         }
diff --git a/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/MaterialThemeDemo.kt b/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/MaterialThemeDemo.kt
index 191f9ef..fd26fd5 100644
--- a/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/MaterialThemeDemo.kt
+++ b/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/MaterialThemeDemo.kt
@@ -17,16 +17,17 @@
 package androidx.ui.material.demos
 
 import androidx.compose.Composable
+import androidx.ui.core.Modifier
 import androidx.ui.layout.Arrangement
 import androidx.ui.layout.Column
-import androidx.ui.layout.LayoutHeight
+import androidx.ui.layout.fillMaxHeight
 import androidx.ui.material.samples.MaterialThemeSample
 import androidx.ui.material.samples.ThemeColorSample
 import androidx.ui.material.samples.ThemeTextStyleSample
 
 @Composable
 fun MaterialThemeDemo() {
-    Column(modifier = LayoutHeight.Fill, arrangement = Arrangement.SpaceAround) {
+    Column(Modifier.fillMaxHeight(), arrangement = Arrangement.SpaceAround) {
         MaterialThemeSample()
         ThemeTextStyleSample()
         ThemeColorSample()
diff --git a/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/ProgressIndicatorDemo.kt b/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/ProgressIndicatorDemo.kt
index 0641710..3c60925 100644
--- a/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/ProgressIndicatorDemo.kt
+++ b/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/ProgressIndicatorDemo.kt
@@ -22,12 +22,14 @@
 import androidx.compose.onActive
 import androidx.compose.onDispose
 import androidx.compose.remember
+import androidx.ui.core.Modifier
 import androidx.ui.graphics.Color
-import androidx.ui.layout.Column
 import androidx.ui.layout.Arrangement
-import androidx.ui.layout.LayoutGravity
-import androidx.ui.layout.LayoutWidth
+import androidx.ui.layout.Column
+import androidx.ui.layout.ColumnAlign
 import androidx.ui.layout.Row
+import androidx.ui.layout.RowAlign
+import androidx.ui.layout.fillMaxWidth
 import androidx.ui.material.CircularProgressIndicator
 import androidx.ui.material.LinearProgressIndicator
 
@@ -39,29 +41,29 @@
     onDispose { state.stop() }
 
     Column {
-        val modifier = LayoutWeight(1f) + LayoutGravity.Center + LayoutWidth.Fill
-        Row(modifier = modifier, arrangement = Arrangement.SpaceEvenly) {
+        val modifier = Modifier.weight(1f, true).gravity(ColumnAlign.Center).fillMaxWidth()
+        Row(modifier, arrangement = Arrangement.SpaceEvenly) {
             // Determinate indicators
-            LinearProgressIndicator(progress = state.progress, modifier = LayoutGravity.Center)
-            CircularProgressIndicator(progress = state.progress, modifier = LayoutGravity.Center)
+            LinearProgressIndicator(state.progress, Modifier.gravity(RowAlign.Center))
+            CircularProgressIndicator(state.progress, Modifier.gravity(RowAlign.Center))
         }
-        Row(modifier = modifier, arrangement = Arrangement.SpaceEvenly) {
+        Row(modifier, arrangement = Arrangement.SpaceEvenly) {
             // Fancy colours!
             LinearProgressIndicator(
                 progress = (state.progress),
                 color = state.generateColor(),
-                modifier = LayoutGravity.Center
+                modifier = Modifier.gravity(RowAlign.Center)
             )
             CircularProgressIndicator(
                 progress = (state.progress),
                 color = state.generateColor(),
-                modifier = LayoutGravity.Center
+                modifier = Modifier.gravity(RowAlign.Center)
             )
         }
-        Row(modifier = modifier, arrangement = Arrangement.SpaceEvenly) {
+        Row(modifier, arrangement = Arrangement.SpaceEvenly) {
             // Indeterminate indicators
-            LinearProgressIndicator(modifier = LayoutGravity.Center)
-            CircularProgressIndicator(modifier = LayoutGravity.Center)
+            LinearProgressIndicator(Modifier.gravity(RowAlign.Center))
+            CircularProgressIndicator(Modifier.gravity(RowAlign.Center))
         }
     }
 }
diff --git a/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/SelectionControlsDemo.kt b/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/SelectionControlsDemo.kt
index 358729c..6793017 100644
--- a/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/SelectionControlsDemo.kt
+++ b/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/SelectionControlsDemo.kt
@@ -17,10 +17,11 @@
 package androidx.ui.material.demos
 
 import androidx.compose.Composable
+import androidx.ui.core.Modifier
 import androidx.ui.foundation.Text
 import androidx.ui.layout.Arrangement
 import androidx.ui.layout.Column
-import androidx.ui.layout.LayoutPadding
+import androidx.ui.layout.padding
 import androidx.ui.material.MaterialTheme
 import androidx.ui.material.samples.CustomRadioGroupSample
 import androidx.ui.material.samples.DefaultRadioGroupSample
@@ -32,7 +33,7 @@
 @Composable
 fun SelectionControlsDemo() {
     val headerStyle = MaterialTheme.typography.h6
-    Column(LayoutPadding(10.dp), arrangement = Arrangement.SpaceEvenly) {
+    Column(Modifier.padding(10.dp), arrangement = Arrangement.SpaceEvenly) {
         Text(text = "Checkbox", style = headerStyle)
         TriStateCheckboxSample()
         Text(text = "Switch", style = headerStyle)
diff --git a/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/SliderDemo.kt b/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/SliderDemo.kt
index 794c1ca..93c46cd 100644
--- a/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/SliderDemo.kt
+++ b/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/SliderDemo.kt
@@ -17,15 +17,16 @@
 package androidx.ui.material.demos
 
 import androidx.compose.Composable
+import androidx.ui.core.Modifier
 import androidx.ui.layout.Column
-import androidx.ui.layout.LayoutPadding
+import androidx.ui.layout.padding
 import androidx.ui.material.samples.SliderSample
 import androidx.ui.material.samples.StepsSliderSample
 import androidx.ui.unit.dp
 
 @Composable
 fun SliderDemo() {
-    Column(LayoutPadding(10.dp)) {
+    Column(Modifier.padding(10.dp)) {
         SliderSample()
         StepsSliderSample()
     }
diff --git a/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/SnackbarDemo.kt b/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/SnackbarDemo.kt
index 960524c..a605bce 100644
--- a/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/SnackbarDemo.kt
+++ b/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/SnackbarDemo.kt
@@ -17,9 +17,10 @@
 package androidx.ui.material.demos
 
 import androidx.compose.Composable
+import androidx.ui.core.Modifier
 import androidx.ui.foundation.Text
 import androidx.ui.layout.Column
-import androidx.ui.layout.LayoutPadding
+import androidx.ui.layout.padding
 import androidx.ui.material.MaterialTheme
 import androidx.ui.material.Snackbar
 import androidx.ui.material.TextButton
@@ -29,8 +30,8 @@
 
 @Composable
 fun SnackbarDemo() {
-    Column(LayoutPadding(start = 12.dp, end = 12.dp)) {
-        val textSpacing = LayoutPadding(top = 12.dp, bottom = 12.dp)
+    Column(Modifier.padding(12.dp, 0.dp, 12.dp, 0.dp)) {
+        val textSpacing = Modifier.padding(top = 12.dp, bottom = 12.dp)
         Text("Default Snackbar", modifier = textSpacing)
         SimpleSnackbar()
         Text("Snackbar with long text", modifier = textSpacing)
diff --git a/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/TabDemo.kt b/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/TabDemo.kt
index a5fefb7..4e2dd08 100644
--- a/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/TabDemo.kt
+++ b/ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/TabDemo.kt
@@ -18,13 +18,15 @@
 
 import androidx.compose.Composable
 import androidx.compose.state
+import androidx.ui.core.Modifier
 import androidx.ui.foundation.Text
 import androidx.ui.graphics.Color
 import androidx.ui.layout.Arrangement
 import androidx.ui.layout.Column
-import androidx.ui.layout.LayoutGravity
-import androidx.ui.layout.LayoutHeight
+import androidx.ui.layout.ColumnAlign
 import androidx.ui.layout.Spacer
+import androidx.ui.layout.fillMaxHeight
+import androidx.ui.layout.preferredHeight
 import androidx.ui.material.Button
 import androidx.ui.material.samples.FancyIndicatorContainerTabs
 import androidx.ui.material.samples.FancyIndicatorTabs
@@ -38,7 +40,7 @@
 
 @Composable
 fun TabDemo() {
-    Column(modifier = LayoutHeight.Fill, arrangement = Arrangement.SpaceBetween) {
+    Column(Modifier.fillMaxHeight(), arrangement = Arrangement.SpaceBetween) {
         val showingSimple = state { true }
         val buttonText = "Show ${if (showingSimple.value) "custom" else "simple"} tabs"
 
@@ -54,7 +56,7 @@
             ScrollingFancyIndicatorContainerTabs()
         }
         Button(
-            modifier = LayoutGravity.Center,
+            modifier = Modifier.gravity(ColumnAlign.Center),
             >
                 showingSimple.value = !showingSimple.value
             },
@@ -62,6 +64,6 @@
         ) {
             Text(buttonText)
         }
-        Spacer(LayoutHeight(50.dp))
+        Spacer(Modifier.preferredHeight(50.dp))
     }
 }
diff --git a/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/AccountsScreen.kt b/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/AccountsScreen.kt
index fda1ead..6c3cde1 100644
--- a/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/AccountsScreen.kt
+++ b/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/AccountsScreen.kt
@@ -17,16 +17,18 @@
 package androidx.ui.material.studies.rally
 
 import androidx.compose.Composable
+import androidx.ui.core.Alignment
+import androidx.ui.core.Modifier
 import androidx.ui.foundation.Text
 import androidx.ui.foundation.VerticalScroller
 import androidx.ui.graphics.Color
 import androidx.ui.layout.Column
-import androidx.ui.layout.LayoutGravity
-import androidx.ui.layout.LayoutHeight
-import androidx.ui.layout.LayoutPadding
-import androidx.ui.layout.LayoutWidth
+import androidx.ui.layout.ColumnAlign
 import androidx.ui.layout.Spacer
 import androidx.ui.layout.Stack
+import androidx.ui.layout.fillMaxWidth
+import androidx.ui.layout.padding
+import androidx.ui.layout.preferredHeight
 import androidx.ui.material.Card
 import androidx.ui.material.MaterialTheme
 import androidx.ui.unit.dp
@@ -38,31 +40,31 @@
 fun AccountsBody() {
     VerticalScroller {
         Column {
-            Stack(LayoutPadding(16.dp)) {
+            Stack(Modifier.padding(16.dp)) {
                 val accountsProportion = listOf(0.595f, 0.045f, 0.095f, 0.195f, 0.045f)
                 val colors = listOf(0xFF1EB980, 0xFF005D57, 0xFF04B97F, 0xFF37EFBA, 0xFFFAFFBF)
                     .map { Color(it) }
                 AnimatedCircle(
-                    LayoutHeight(300.dp) + LayoutGravity.Center + LayoutWidth.Fill,
+                    Modifier.preferredHeight(300.dp).gravity(Alignment.Center).fillMaxWidth(),
                     accountsProportion,
                     colors
                 )
-                Column(modifier = LayoutGravity.Center) {
+                Column(modifier = Modifier.gravity(Alignment.Center)) {
                     Text(
                         text = "Total",
                         style = MaterialTheme.typography.body1,
-                        modifier = LayoutGravity.Center
+                        modifier = Modifier.gravity(ColumnAlign.Center)
                     )
                     Text(
                         text = "$12,132.49",
                         style = MaterialTheme.typography.h2,
-                        modifier = LayoutGravity.Center
+                        modifier = Modifier.gravity(ColumnAlign.Center)
                     )
                 }
             }
-            Spacer(LayoutHeight(10.dp))
+            Spacer(Modifier.preferredHeight(10.dp))
             Card {
-                Column(modifier = LayoutPadding(12.dp)) {
+                Column(modifier = Modifier.padding(12.dp)) {
                     UserData.accounts.forEach { account ->
                         AccountRow(
                             name = account.name,
diff --git a/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/BillsScreen.kt b/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/BillsScreen.kt
index 11266e3..eb894e4 100644
--- a/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/BillsScreen.kt
+++ b/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/BillsScreen.kt
@@ -17,16 +17,18 @@
 package androidx.ui.material.studies.rally
 
 import androidx.compose.Composable
+import androidx.ui.core.Alignment
+import androidx.ui.core.Modifier
 import androidx.ui.foundation.Text
 import androidx.ui.foundation.VerticalScroller
 import androidx.ui.graphics.Color
 import androidx.ui.layout.Column
-import androidx.ui.layout.LayoutGravity
-import androidx.ui.layout.LayoutHeight
-import androidx.ui.layout.LayoutPadding
-import androidx.ui.layout.LayoutWidth
+import androidx.ui.layout.ColumnAlign
 import androidx.ui.layout.Spacer
 import androidx.ui.layout.Stack
+import androidx.ui.layout.fillMaxWidth
+import androidx.ui.layout.padding
+import androidx.ui.layout.preferredHeight
 import androidx.ui.material.Card
 import androidx.ui.material.MaterialTheme
 import androidx.ui.unit.dp
@@ -38,32 +40,32 @@
 fun BillsBody() {
     VerticalScroller {
         Column {
-            Stack(LayoutPadding(16.dp)) {
+            Stack(Modifier.padding(16.dp)) {
                 val accountsProportion = listOf(0.65f, 0.25f, 0.03f, 0.05f)
                 val colors = listOf(0xFF1EB980, 0xFF005D57, 0xFF04B97F, 0xFF37EFBA).map {
                     Color(it)
                 }
                 AnimatedCircle(
-                    LayoutGravity.Center + LayoutHeight(300.dp) + LayoutWidth.Fill,
+                    Modifier.gravity(Alignment.Center).preferredHeight(300.dp).fillMaxWidth(),
                     accountsProportion,
                     colors
                 )
-                Column(modifier = LayoutGravity.Center) {
+                Column(modifier = Modifier.gravity(Alignment.Center)) {
                     Text(
                         text = "Due",
                         style = MaterialTheme.typography.body1,
-                        modifier = LayoutGravity.Center
+                        modifier = Modifier.gravity(ColumnAlign.Center)
                     )
                     Text(
                         text = "$1,810.00",
                         style = MaterialTheme.typography.h2,
-                        modifier = LayoutGravity.Center
+                        modifier = Modifier.gravity(ColumnAlign.Center)
                     )
                 }
             }
-            Spacer(LayoutHeight(10.dp))
+            Spacer(Modifier.preferredHeight(10.dp))
             Card {
-                Column(modifier = LayoutPadding(12.dp)) {
+                Column(modifier = Modifier.padding(12.dp)) {
                     UserData.bills.forEach { bill ->
                         BillRow(
                             name = bill.name,
diff --git a/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/CommonUi.kt b/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/CommonUi.kt
index a8f4bfd..c61dd62 100644
--- a/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/CommonUi.kt
+++ b/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/CommonUi.kt
@@ -23,11 +23,11 @@
 import androidx.ui.graphics.Color
 import androidx.ui.layout.Arrangement
 import androidx.ui.layout.Column
-import androidx.ui.layout.LayoutGravity
-import androidx.ui.layout.LayoutHeight
-import androidx.ui.layout.LayoutWidth
 import androidx.ui.layout.Row
+import androidx.ui.layout.RowAlign
 import androidx.ui.layout.Spacer
+import androidx.ui.layout.preferredHeight
+import androidx.ui.layout.preferredWidth
 import androidx.ui.material.Divider
 import androidx.ui.material.MaterialTheme
 import androidx.ui.material.icons.Icons
@@ -70,35 +70,35 @@
     amount: Float,
     negative: Boolean
 ) {
-    Row(LayoutHeight(68.dp)) {
+    Row(Modifier.preferredHeight(68.dp)) {
         val typography = MaterialTheme.typography
-        AccountIndicator(color = color, modifier = LayoutGravity.Center)
-        Spacer(LayoutWidth(8.dp))
-        Column(LayoutGravity.Center) {
+        AccountIndicator(color = color, modifier = Modifier.gravity(RowAlign.Center))
+        Spacer(Modifier.preferredWidth(8.dp))
+        Column(Modifier.gravity(RowAlign.Center)) {
             Text(text = title, style = typography.body1)
             Text(text = subtitle, style = typography.subtitle1)
         }
-        Spacer(LayoutWeight(1f))
+        Spacer(Modifier.weight(1f))
         Row(
-            modifier = LayoutGravity.Center + LayoutWidth(113.dp),
+            modifier = Modifier.gravity(RowAlign.Center).preferredWidth(113.dp),
             arrangement = Arrangement.SpaceBetween
         ) {
             Text(
                 text = if (negative) "–$ " else "$ ",
                 style = typography.h6,
-                modifier = LayoutGravity.Center
+                modifier = Modifier.gravity(RowAlign.Center)
             )
             Text(
                 text = formatAmount(amount),
                 style = typography.h6,
-                modifier = LayoutGravity.Center
+                modifier = Modifier.gravity(RowAlign.Center)
             )
         }
-        Spacer(LayoutWidth(16.dp))
+        Spacer(Modifier.preferredWidth(16.dp))
         Icon(
             Icons.Filled.ArrowForwardIos,
             tintColor = Color.White.copy(alpha = 0.6f),
-            modifier = LayoutGravity.Center,
+            modifier = Modifier.gravity(RowAlign.Center),
             size = 12.dp
         )
     }
diff --git a/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/Icons.kt b/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/Icons.kt
index 0d97552..adad8d0 100644
--- a/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/Icons.kt
+++ b/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/Icons.kt
@@ -18,14 +18,13 @@
 
 import androidx.compose.Composable
 import androidx.ui.core.Modifier
-import androidx.ui.core.asModifier
+import androidx.ui.core.paint
 import androidx.ui.foundation.Box
 import androidx.ui.graphics.Color
 import androidx.ui.graphics.ColorFilter
 import androidx.ui.graphics.vector.VectorAsset
 import androidx.ui.graphics.vector.VectorPainter
-import androidx.ui.layout.LayoutHeight
-import androidx.ui.layout.LayoutWidth
+import androidx.ui.layout.preferredSize
 import androidx.ui.material.icons.Icons
 import androidx.ui.material.icons.lazyMaterialIcon
 import androidx.ui.material.icons.materialPath
@@ -45,10 +44,11 @@
     size: Dp = 24.dp
 ) {
     Box(
-        modifier = LayoutHeight(size) + LayoutWidth(size) + modifier +
-                VectorPainter(vectorImage).asModifier(
-                    colorFilter = ColorFilter.tint(tintColor)
-                )
+        Modifier.preferredSize(size)
+            .plus(modifier)
+            .paint(
+                VectorPainter(vectorImage), colorFilter = ColorFilter.tint(tintColor)
+            )
     )
 }
 
diff --git a/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/OverviewScreen.kt b/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/OverviewScreen.kt
index 7f26450..08db65e 100644
--- a/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/OverviewScreen.kt
+++ b/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/OverviewScreen.kt
@@ -19,17 +19,18 @@
 import android.annotation.SuppressLint
 import androidx.compose.Composable
 import androidx.compose.state
+import androidx.ui.core.Modifier
 import androidx.ui.foundation.Text
 import androidx.ui.foundation.VerticalScroller
 import androidx.ui.layout.Arrangement
 import androidx.ui.layout.Column
 import androidx.ui.layout.EdgeInsets
-import androidx.ui.layout.LayoutGravity
-import androidx.ui.layout.LayoutHeight
-import androidx.ui.layout.LayoutPadding
-import androidx.ui.layout.LayoutWidth
 import androidx.ui.layout.Row
+import androidx.ui.layout.RowAlign
 import androidx.ui.layout.Spacer
+import androidx.ui.layout.fillMaxWidth
+import androidx.ui.layout.padding
+import androidx.ui.layout.preferredHeight
 import androidx.ui.material.Card
 import androidx.ui.material.Divider
 import androidx.ui.material.IconButton
@@ -42,11 +43,11 @@
 @Composable
 fun OverviewBody() {
     VerticalScroller {
-        Column(modifier = LayoutPadding(16.dp)) {
+        Column(Modifier.padding(16.dp)) {
             AlertCard()
-            Spacer(LayoutHeight(RallyDefaultPadding))
+            Spacer(Modifier.preferredHeight(RallyDefaultPadding))
             AccountsCard()
-            Spacer(LayoutHeight(RallyDefaultPadding))
+            Spacer(Modifier.preferredHeight(RallyDefaultPadding))
             BillsCard()
         }
     }
@@ -71,9 +72,9 @@
     }
     Card {
         Column {
-            AlertHeader({ openDialog = true })
+            AlertHeader { openDialog = true }
             RallyDivider(
-                modifier = LayoutPadding(start = RallyDefaultPadding, end = RallyDefaultPadding)
+                modifier = Modifier.padding(start = RallyDefaultPadding, end = RallyDefaultPadding)
             )
             AlertItem(alertMessage)
         }
@@ -83,18 +84,18 @@
 @Composable
 private fun AlertHeader(onClickSeeAll: () -> Unit) {
     Row(
-        modifier = LayoutPadding(RallyDefaultPadding) + LayoutWidth.Fill,
+        modifier = Modifier.padding(RallyDefaultPadding).fillMaxWidth(),
         arrangement = Arrangement.SpaceBetween
     ) {
         Text(
             text = "Alerts",
             style = MaterialTheme.typography.subtitle2,
-            modifier = LayoutGravity.Center
+            modifier = Modifier.gravity(RowAlign.Center)
         )
         TextButton(
             >
             innerPadding = EdgeInsets(0.dp),
-            modifier = LayoutGravity.Center
+            modifier = Modifier.gravity(RowAlign.Center)
         ) {
             Text("SEE ALL")
         }
@@ -105,17 +106,17 @@
 private fun AlertItem(message: String) {
     // TODO: Make alerts into a data structure
     Row(
-        modifier = LayoutPadding(RallyDefaultPadding),
+        modifier = Modifier.padding(RallyDefaultPadding),
         arrangement = Arrangement.SpaceBetween
     ) {
         Text(
             style = MaterialTheme.typography.h3,
-            modifier = LayoutWeight(1f),
+            modifier = Modifier.weight(1f),
             text = message
         )
         IconButton(
             >
-            modifier = LayoutGravity.Top
+            modifier = Modifier.gravity(RowAlign.Top)
         ) {
             Icon(Icons.Filled.Sort)
         }
@@ -136,13 +137,13 @@
 ) {
     Card {
         Column {
-            Column(modifier = LayoutPadding(RallyDefaultPadding)) {
+            Column(Modifier.padding(RallyDefaultPadding)) {
                 Text(text = title, style = MaterialTheme.typography.subtitle2)
                 val amountText = "$" + formatAmount(amount)
                 Text(text = amountText, style = MaterialTheme.typography.h2)
             }
             Divider(color = rallyGreen, height = 1.dp)
-            Column(LayoutPadding(start = 16.dp, top = 4.dp, end = 8.dp)) {
+            Column(Modifier.padding(start = 16.dp, top = 4.dp, end = 8.dp)) {
                 data.take(3).forEach { row(it) }
                 SeeAllButton(>
             }
@@ -200,7 +201,7 @@
 private fun SeeAllButton(onClick: () -> Unit) {
     TextButton(
         >
-        modifier = LayoutHeight(44.dp) + LayoutWidth.Fill
+        modifier = Modifier.preferredHeight(44.dp).fillMaxWidth()
     ) {
         Text("SEE ALL")
     }
diff --git a/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/RallyAlertDialog.kt b/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/RallyAlertDialog.kt
index 08efbb3..9b90e95 100644
--- a/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/RallyAlertDialog.kt
+++ b/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/RallyAlertDialog.kt
@@ -17,12 +17,13 @@
 package androidx.ui.material.studies.rally
 
 import androidx.compose.Composable
+import androidx.ui.core.Modifier
 import androidx.ui.foundation.Text
 import androidx.ui.foundation.shape.RectangleShape
 import androidx.ui.layout.Column
 import androidx.ui.layout.EdgeInsets
-import androidx.ui.layout.LayoutPadding
-import androidx.ui.layout.LayoutWidth
+import androidx.ui.layout.fillMaxWidth
+import androidx.ui.layout.padding
 import androidx.ui.material.AlertDialog
 import androidx.ui.material.Divider
 import androidx.ui.material.MaterialTheme
@@ -42,14 +43,14 @@
             buttons = {
                 Column {
                     Divider(
-                        LayoutPadding(start = 12.dp, end = 12.dp),
+                        Modifier.padding(12.dp, 0.dp, 12.dp, 0.dp),
                         color = MaterialTheme.colors.onSurface.copy(alpha = 0.2f)
                     )
                     TextButton(
                         >
                         shape = RectangleShape,
                         innerPadding = EdgeInsets(16.dp),
-                        modifier = LayoutWidth.Fill
+                        modifier = Modifier.fillMaxWidth()
                     ) {
                         Text(buttonText)
                     }
diff --git a/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/TopAppBar.kt b/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/TopAppBar.kt
index 7348e06..6c45ddd 100644
--- a/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/TopAppBar.kt
+++ b/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/TopAppBar.kt
@@ -22,16 +22,18 @@
 import androidx.compose.remember
 import androidx.ui.animation.ColorPropKey
 import androidx.ui.animation.Transition
+import androidx.ui.core.Modifier
 import androidx.ui.foundation.Box
 import androidx.ui.foundation.Text
 import androidx.ui.foundation.selection.MutuallyExclusiveSetItem
 import androidx.ui.graphics.Color
 import androidx.ui.graphics.vector.VectorAsset
-import androidx.ui.layout.LayoutHeight
-import androidx.ui.layout.LayoutPadding
-import androidx.ui.layout.LayoutWidth
 import androidx.ui.layout.Row
 import androidx.ui.layout.Spacer
+import androidx.ui.layout.fillMaxWidth
+import androidx.ui.layout.padding
+import androidx.ui.layout.preferredHeight
+import androidx.ui.layout.preferredWidth
 import androidx.ui.material.MaterialTheme
 import androidx.ui.material.Surface
 import androidx.ui.material.ripple.ripple
@@ -45,7 +47,7 @@
     onTabSelected: (RallyScreenState) -> Unit,
     currentScreen: RallyScreenState
 ) {
-    Surface(modifier = LayoutHeight(TabHeight) + LayoutWidth.Fill) {
+    Surface(Modifier.preferredHeight(TabHeight).fillMaxWidth()) {
         Row {
             allScreens.forEachIndexed { index, screen ->
                 RallyTab(
@@ -67,7 +69,7 @@
     selected: Boolean
 ) {
     TabTransition(selected = selected) { tabTintColor ->
-        Box(LayoutPadding(16.dp) + LayoutHeight(TabHeight)) {
+        Box(Modifier.padding(16.dp).preferredHeight(TabHeight)) {
             MutuallyExclusiveSetItem(
                 selected = selected,
                 >
@@ -76,7 +78,7 @@
                 Row {
                     Icon(vectorImage = icon, tintColor = tabTintColor)
                     if (selected) {
-                        Spacer(modifier = LayoutWidth(12.dp))
+                        Spacer(Modifier.preferredWidth(12.dp))
                         Text(text, style = TextStyle(color = tabTintColor))
                     }
                 }
diff --git a/ui/ui-material/samples/src/main/java/androidx/ui/material/samples/AppBarSamples.kt b/ui/ui-material/samples/src/main/java/androidx/ui/material/samples/AppBarSamples.kt
index 08976df..468153e 100644
--- a/ui/ui-material/samples/src/main/java/androidx/ui/material/samples/AppBarSamples.kt
+++ b/ui/ui-material/samples/src/main/java/androidx/ui/material/samples/AppBarSamples.kt
@@ -18,6 +18,7 @@
 
 import androidx.annotation.Sampled
 import androidx.compose.Composable
+import androidx.ui.core.Modifier
 import androidx.ui.foundation.Icon
 import androidx.ui.foundation.Text
 import androidx.ui.foundation.shape.corner.CircleShape
@@ -61,7 +62,7 @@
             Icon(Icons.Filled.Menu)
         }
         // The actions should be at the end of the BottomAppBar
-        Spacer(LayoutWeight(1f))
+        Spacer(Modifier.weight(1f, true))
         IconButton( /* doSomething() */ }) {
             Icon(Icons.Filled.Favorite)
         }
diff --git a/ui/ui-material/samples/src/main/java/androidx/ui/material/samples/DrawerSamples.kt b/ui/ui-material/samples/src/main/java/androidx/ui/material/samples/DrawerSamples.kt
index 7580314..b704d91 100644
--- a/ui/ui-material/samples/src/main/java/androidx/ui/material/samples/DrawerSamples.kt
+++ b/ui/ui-material/samples/src/main/java/androidx/ui/material/samples/DrawerSamples.kt
@@ -19,17 +19,19 @@
 import androidx.annotation.Sampled
 import androidx.compose.Composable
 import androidx.compose.state
+import androidx.ui.core.Modifier
 import androidx.ui.foundation.Box
 import androidx.ui.foundation.ColoredRect
 import androidx.ui.foundation.ContentGravity
 import androidx.ui.foundation.Text
 import androidx.ui.graphics.Color
 import androidx.ui.layout.Column
-import androidx.ui.layout.LayoutHeight
-import androidx.ui.layout.LayoutSize
-import androidx.ui.layout.LayoutWidth
 import androidx.ui.layout.Row
 import androidx.ui.layout.Spacer
+import androidx.ui.layout.fillMaxHeight
+import androidx.ui.layout.fillMaxSize
+import androidx.ui.layout.fillMaxWidth
+import androidx.ui.layout.preferredHeight
 import androidx.ui.material.BottomDrawerLayout
 import androidx.ui.material.Button
 import androidx.ui.material.DrawerState
@@ -40,7 +42,7 @@
 @Sampled
 @Composable
 fun StaticDrawerSample() {
-    Row(LayoutWidth.Fill) {
+    Row(Modifier.fillMaxWidth()) {
         StaticDrawer {
             Text("Drawer Content")
         }
@@ -79,10 +81,10 @@
 
 @Composable
 private fun YourDrawerContent(onStateChange: (DrawerState) -> Unit) {
-    Box(LayoutSize.Fill, gravity = ContentGravity.Center) {
-        Column(LayoutHeight.Fill) {
+    Box(Modifier.fillMaxSize(), gravity = ContentGravity.Center) {
+        Column(Modifier.fillMaxHeight()) {
             Text(text = "Drawer Content")
-            Spacer(LayoutHeight(20.dp))
+            Spacer(Modifier.preferredHeight(20.dp))
             Button( onStateChange(DrawerState.Closed) }) {
                 Text("Close Drawer")
             }
@@ -92,9 +94,9 @@
 
 @Composable
 private fun YourAppContent(text: String, onDrawerStateChange: (DrawerState) -> Unit) {
-    Column(LayoutHeight.Fill) {
+    Column(Modifier.fillMaxHeight()) {
         Text(text = text)
-        Spacer(LayoutHeight(20.dp))
+        Spacer(Modifier.preferredHeight(20.dp))
         Button( onDrawerStateChange(DrawerState.Opened) }) {
             Text("Click to open")
         }
diff --git a/ui/ui-material/samples/src/main/java/androidx/ui/material/samples/SelectionControlsSamples.kt b/ui/ui-material/samples/src/main/java/androidx/ui/material/samples/SelectionControlsSamples.kt
index 27e871f..9e8b595 100644
--- a/ui/ui-material/samples/src/main/java/androidx/ui/material/samples/SelectionControlsSamples.kt
+++ b/ui/ui-material/samples/src/main/java/androidx/ui/material/samples/SelectionControlsSamples.kt
@@ -20,13 +20,14 @@
 import androidx.compose.Composable
 import androidx.compose.remember
 import androidx.compose.state
+import androidx.ui.core.Modifier
 import androidx.ui.foundation.Box
 import androidx.ui.foundation.Text
 import androidx.ui.foundation.selection.ToggleableState
 import androidx.ui.graphics.Color
 import androidx.ui.layout.Column
-import androidx.ui.layout.LayoutPadding
 import androidx.ui.layout.Row
+import androidx.ui.layout.padding
 import androidx.ui.material.Checkbox
 import androidx.ui.material.RadioButton
 import androidx.ui.material.RadioGroup
@@ -56,7 +57,7 @@
         }
 
         TriStateCheckbox(state = parentState,  color = Color.Black)
-        Column(LayoutPadding(start = 10.dp)) {
+        Column(Modifier.padding(10.dp, 0.dp, 0.dp, 0.dp)) {
             Checkbox(state, onStateChange)
             Checkbox(state2, onStateChange2)
         }
@@ -130,7 +131,7 @@
                      onOptionSelected(text) }) {
                     // TODO: remove Box when Ripple becomes a modifier
                     Box {
-                        Column(modifier = LayoutPadding(10.dp)) {
+                        Column(modifier = Modifier.padding(10.dp)) {
                             RadioButton(
                                 selected = selected,
                                  onOptionSelected(text) })
diff --git a/ui/ui-material/samples/src/main/java/androidx/ui/material/samples/TabSamples.kt b/ui/ui-material/samples/src/main/java/androidx/ui/material/samples/TabSamples.kt
index 401eae1..ba10137 100644
--- a/ui/ui-material/samples/src/main/java/androidx/ui/material/samples/TabSamples.kt
+++ b/ui/ui-material/samples/src/main/java/androidx/ui/material/samples/TabSamples.kt
@@ -26,24 +26,27 @@
 import androidx.ui.animation.PxPropKey
 import androidx.ui.animation.Transition
 import androidx.ui.core.DensityAmbient
+import androidx.ui.core.Modifier
 import androidx.ui.foundation.Border
 import androidx.ui.foundation.Box
 import androidx.ui.foundation.ContentGravity
-import androidx.ui.foundation.DrawBackground
 import androidx.ui.foundation.DrawBorder
 import androidx.ui.foundation.Icon
 import androidx.ui.foundation.Text
+import androidx.ui.foundation.drawBackground
 import androidx.ui.foundation.shape.corner.RoundedCornerShape
 import androidx.ui.graphics.Color
 import androidx.ui.layout.Arrangement
 import androidx.ui.layout.Column
-import androidx.ui.layout.LayoutGravity
-import androidx.ui.layout.LayoutHeight
-import androidx.ui.layout.LayoutOffset
-import androidx.ui.layout.LayoutPadding
-import androidx.ui.layout.LayoutSize
-import androidx.ui.layout.LayoutWidth
+import androidx.ui.layout.ColumnAlign
 import androidx.ui.layout.Stack
+import androidx.ui.layout.fillMaxSize
+import androidx.ui.layout.fillMaxWidth
+import androidx.ui.layout.offset
+import androidx.ui.layout.padding
+import androidx.ui.layout.preferredHeight
+import androidx.ui.layout.preferredSize
+import androidx.ui.layout.preferredWidth
 import androidx.ui.material.MaterialTheme
 import androidx.ui.material.Tab
 import androidx.ui.material.TabRow
@@ -62,7 +65,7 @@
             Tab(text = { Text(text) }, selected = state == index,  state = index })
         }
         Text(
-            modifier = LayoutGravity.Center,
+            modifier = Modifier.gravity(ColumnAlign.Center),
             text = "Text tab ${state + 1} selected",
             style = MaterialTheme.typography.body1
         )
@@ -78,7 +81,7 @@
             Tab(icon = { Icon(icon) }, selected = state == index,  state = index })
         }
         Text(
-            modifier = LayoutGravity.Center,
+            modifier = Modifier.gravity(ColumnAlign.Center),
             text = "Icon tab ${state + 1} selected",
             style = MaterialTheme.typography.body1
         )
@@ -103,7 +106,7 @@
             )
         }
         Text(
-            modifier = LayoutGravity.Center,
+            modifier = Modifier.gravity(ColumnAlign.Center),
             text = "Text and icon tab ${state + 1} selected",
             style = MaterialTheme.typography.body1
         )
@@ -130,7 +133,7 @@
             Tab(text = { Text(text) }, selected = state == index,  state = index })
         }
         Text(
-            modifier = LayoutGravity.Center,
+            modifier = Modifier.gravity(ColumnAlign.Center),
             text = "Scrolling text tab ${state + 1} selected",
             style = MaterialTheme.typography.body1
         )
@@ -147,7 +150,7 @@
             FancyTab(title = title,  state = index }, selected = (index == state))
         }
         Text(
-            modifier = LayoutGravity.Center,
+            modifier = Modifier.gravity(ColumnAlign.Center),
             text = "Fancy tab ${state + 1} selected",
             style = MaterialTheme.typography.body1
         )
@@ -176,7 +179,7 @@
             Tab(text = { Text(text) }, selected = state == index,  state = index })
         }
         Text(
-            modifier = LayoutGravity.Center,
+            modifier = Modifier.gravity(ColumnAlign.Center),
             text = "Fancy indicator tab ${state + 1} selected",
             style = MaterialTheme.typography.body1
         )
@@ -202,7 +205,7 @@
             Tab(text = { Text(text) }, selected = state == index,  state = index })
         }
         Text(
-            modifier = LayoutGravity.Center,
+            modifier = Modifier.gravity(ColumnAlign.Center),
             text = "Fancy transition tab ${state + 1} selected",
             style = MaterialTheme.typography.body1
         )
@@ -238,7 +241,7 @@
             Tab(text = { Text(text) }, selected = state == index,  state = index })
         }
         Text(
-            modifier = LayoutGravity.Center,
+            modifier = Modifier.gravity(ColumnAlign.Center),
             text = "Scrolling fancy transition tab ${state + 1} selected",
             style = MaterialTheme.typography.body1
         )
@@ -250,19 +253,19 @@
 fun FancyTab(title: String, onClick: () -> Unit, selected: Boolean) {
     Tab(selected, onClick) {
         Column(
-            LayoutPadding(10.dp) + LayoutHeight(50.dp) + LayoutWidth.Fill,
+            Modifier.padding(10.dp).preferredHeight(50.dp).fillMaxWidth(),
             arrangement = Arrangement.SpaceBetween
         ) {
             Box(
-                LayoutSize(10.dp) + LayoutGravity.Center + DrawBackground(
-                    color = if (selected) Color.Red else Color.White
-                ),
+                Modifier.preferredSize(10.dp)
+                    .gravity(ColumnAlign.Center)
+                    .drawBackground(color = if (selected) Color.Red else Color.White),
                 children = emptyContent()
             )
             Text(
                 text = title,
                 style = MaterialTheme.typography.body1,
-                modifier = LayoutGravity.Center
+                modifier = Modifier.gravity(ColumnAlign.Center)
             )
         }
     }
@@ -274,10 +277,14 @@
     // Draws a rounded rectangular with border around the Tab, with a 5.dp padding from the edges
     // Color is passed in as a parameter [color]
     Stack(
-        LayoutPadding(5.dp) + LayoutSize.Fill + DrawBorder(
-            Border(2.dp, color),
-            RoundedCornerShape(5.dp)
-        )
+        Modifier.padding(5.dp)
+            .fillMaxSize()
+            .plus(
+                DrawBorder(
+                    Border(2.dp, color),
+                    RoundedCornerShape(5.dp)
+                )
+            )
     ) {}
 }
 
@@ -325,7 +332,7 @@
 
     // Fill up the entire TabRow with this container, and place children at the left so we can use
     // Padding to set the 'offset'
-    Box(LayoutSize.Fill, gravity = ContentGravity.BottomStart) {
+    Box(Modifier.fillMaxSize(), gravity = ContentGravity.BottomStart) {
         Transition(transitionDefinition, selectedIndex) { state ->
             val density = DensityAmbient.current
             val offset = with(density) { state[indicatorStart].toDp() }
@@ -333,7 +340,7 @@
                 (state[indicatorEnd] - state[indicatorStart]).toDp()
             }
             Box(
-                LayoutOffset(x = offset, y = 0.dp) + LayoutWidth(width),
+                Modifier.offset(x = offset, y = 0.dp).preferredWidth(width),
                 gravity = ContentGravity.Center
             ) {
                 // Pass the current color to the indicator
diff --git a/ui/ui-material/samples/src/main/java/androidx/ui/material/samples/ThemeSamples.kt b/ui/ui-material/samples/src/main/java/androidx/ui/material/samples/ThemeSamples.kt
index 2b9b57f..f0bc09d 100644
--- a/ui/ui-material/samples/src/main/java/androidx/ui/material/samples/ThemeSamples.kt
+++ b/ui/ui-material/samples/src/main/java/androidx/ui/material/samples/ThemeSamples.kt
@@ -18,11 +18,12 @@
 
 import androidx.annotation.Sampled
 import androidx.compose.Composable
+import androidx.ui.core.Modifier
 import androidx.ui.foundation.ColoredRect
 import androidx.ui.foundation.Text
 import androidx.ui.foundation.isSystemInDarkTheme
 import androidx.ui.graphics.Color
-import androidx.ui.layout.LayoutAspectRatio
+import androidx.ui.layout.aspectRatio
 import androidx.ui.material.ExtendedFloatingActionButton
 import androidx.ui.material.MaterialTheme
 import androidx.ui.material.Typography
@@ -68,7 +69,7 @@
 @Composable
 fun ThemeColorSample() {
     val colors = MaterialTheme.colors
-    ColoredRect(color = colors.primary, modifier = LayoutAspectRatio(1f))
+    ColoredRect(color = colors.primary, modifier = Modifier.aspectRatio(1f))
 }
 
 @Sampled
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 ef31c0b..6f3f62c 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
@@ -85,20 +85,20 @@
         var titleLastBaselineRelativePosition: Px? = null
         var actionCoords: LayoutCoordinates? = null
         composeTestRule.setMaterialContent {
-            Box(onChildPositioned { appBarCoords = it }) {
+            Box(Modifier.onChildPositioned { appBarCoords = it }) {
                 TopAppBar(
                     navigationIcon = {
-                        FakeIcon(onPositioned { navigationIconCoords = it })
+                        FakeIcon(Modifier.onPositioned { navigationIconCoords = it })
                     },
                     title = {
-                        Text("title", onPositioned { coords ->
+                        Text("title", Modifier.onPositioned { coords: LayoutCoordinates ->
                             titleCoords = coords
                             titleLastBaselineRelativePosition =
                                 coords[LastBaseline]!!.toPx()
                         })
                     },
                     actions = {
-                        FakeIcon(onPositioned { actionCoords = it })
+                        FakeIcon(Modifier.onPositioned { actionCoords = it })
                     }
                 )
             }
@@ -152,13 +152,14 @@
         var titleCoords: LayoutCoordinates? = null
         var actionCoords: LayoutCoordinates? = null
         composeTestRule.setMaterialContent {
-            Box(onChildPositioned { appBarCoords = it }) {
+            Box(Modifier.onChildPositioned { appBarCoords = it }) {
                 TopAppBar(
                     title = {
-                        Text("title", onPositioned { titleCoords = it })
+                        Text("title",
+                            Modifier.onPositioned { titleCoords = it })
                     },
                     actions = {
-                        FakeIcon(onPositioned { actionCoords = it })
+                        FakeIcon(Modifier.onPositioned { actionCoords = it })
                     }
                 )
             }
@@ -213,9 +214,9 @@
         var appBarCoords: LayoutCoordinates? = null
         var childCoords: LayoutCoordinates? = null
         composeTestRule.setMaterialContent {
-            Box(onChildPositioned { appBarCoords = it }) {
+            Box(Modifier.onChildPositioned { appBarCoords = it }) {
                 BottomAppBar {
-                    FakeIcon(onPositioned { childCoords = it })
+                    FakeIcon(Modifier.onPositioned { childCoords = it })
                 }
             }
         }
diff --git a/ui/ui-material/src/androidTest/java/androidx/ui/material/BottomNavigationTest.kt b/ui/ui-material/src/androidTest/java/androidx/ui/material/BottomNavigationTest.kt
index 510a510..9671718 100644
--- a/ui/ui-material/src/androidTest/java/androidx/ui/material/BottomNavigationTest.kt
+++ b/ui/ui-material/src/androidTest/java/androidx/ui/material/BottomNavigationTest.kt
@@ -18,6 +18,7 @@
 import androidx.test.filters.LargeTest
 import androidx.ui.core.LastBaseline
 import androidx.ui.core.LayoutCoordinates
+import androidx.ui.core.Modifier
 import androidx.ui.core.globalPosition
 import androidx.ui.core.onPositioned
 import androidx.ui.foundation.Box
@@ -57,14 +58,13 @@
     fun bottomNavigation_size() {
         lateinit var parentCoords: LayoutCoordinates
         val height = 56.dp
-        composeTestRule
-            .setMaterialContentAndCollectSizes(modifier =
-                onPositioned { coords ->
-                    parentCoords = coords
-                }
-            ) {
-                BottomNavigationSample()
+        composeTestRule.setMaterialContentAndCollectSizes(
+            modifier = Modifier.onPositioned { coords: LayoutCoordinates ->
+                parentCoords = coords
             }
+        ) {
+            BottomNavigationSample()
+        }
             .assertWidthEqualsTo { parentCoords.size.width }
             .assertHeightEqualsTo(height)
     }
@@ -73,7 +73,7 @@
     fun bottomNavigationItem_sizeAndPositions() {
         lateinit var parentCoords: LayoutCoordinates
         val itemCoords = mutableMapOf<Int, LayoutCoordinates>()
-        composeTestRule.setMaterialContent(modifier = onPositioned { coords ->
+        composeTestRule.setMaterialContent(Modifier.onPositioned { coords: LayoutCoordinates ->
             parentCoords = coords
         }) {
             Box {
@@ -84,7 +84,9 @@
                             text = { Text("Item $index") },
                             selected = index == 0,
                             >
-                            modifier = onPositioned { coords -> itemCoords[index] = coords }
+                            modifier = Modifier.onPositioned { coords: LayoutCoordinates ->
+                                itemCoords[index] = coords
+                            }
                         )
                     }
                 }
@@ -117,12 +119,18 @@
             Box {
                 BottomNavigation {
                     BottomNavigationItem(
-                        modifier = onPositioned { coords -> itemCoords = coords },
+                        modifier = Modifier.onPositioned { coords: LayoutCoordinates ->
+                            itemCoords = coords
+                        },
                         icon = {
-                            Icon(Icons.Filled.Favorite, onPositioned { iconCoords = it })
+                            Icon(Icons.Filled.Favorite,
+                                Modifier.onPositioned { iconCoords = it }
+                            )
                         },
                         text = {
-                            Text("Item", onPositioned { textCoords = it })
+                            Text("Item",
+                                Modifier.onPositioned { textCoords = it }
+                            )
                         },
                         selected = true,
                         >
@@ -164,9 +172,13 @@
             Box {
                 BottomNavigation {
                     BottomNavigationItem(
-                        modifier = onPositioned { coords -> itemCoords = coords },
+                        modifier = Modifier.onPositioned { coords: LayoutCoordinates ->
+                            itemCoords = coords
+                        },
                         icon = {
-                            Icon(Icons.Filled.Favorite, onPositioned { iconCoords = it })
+                            Icon(Icons.Filled.Favorite,
+                                Modifier.onPositioned { iconCoords = it }
+                            )
                         },
                         text = {
                             // TODO: b/149477576 we need a boundary here so that we don't
@@ -207,9 +219,13 @@
             Box {
                 BottomNavigation {
                     BottomNavigationItem(
-                        modifier = onPositioned { coords -> itemCoords = coords },
+                        modifier = Modifier.onPositioned { coords: LayoutCoordinates ->
+                            itemCoords = coords
+                        },
                         icon = {
-                            Icon(Icons.Filled.Favorite, onPositioned { iconCoords = it })
+                            Icon(Icons.Filled.Favorite,
+                                Modifier.onPositioned { iconCoords = it }
+                            )
                         },
                         text = {},
                         selected = false,
diff --git a/ui/ui-material/src/androidTest/java/androidx/ui/material/ButtonTest.kt b/ui/ui-material/src/androidTest/java/androidx/ui/material/ButtonTest.kt
index 00b1508..a301e16 100644
--- a/ui/ui-material/src/androidTest/java/androidx/ui/material/ButtonTest.kt
+++ b/ui/ui-material/src/androidTest/java/androidx/ui/material/ButtonTest.kt
@@ -20,6 +20,7 @@
 import androidx.compose.state
 import androidx.test.filters.MediumTest
 import androidx.ui.core.LayoutCoordinates
+import androidx.ui.core.Modifier
 import androidx.ui.core.TestTag
 import androidx.ui.core.onChildPositioned
 import androidx.ui.core.onPositioned
@@ -290,9 +291,11 @@
         var parentCoordinates: LayoutCoordinates? = null
         var childCoordinates: LayoutCoordinates? = null
         composeTestRule.setMaterialContent {
-            Stack(onChildPositioned { parentCoordinates = it }) {
+            Stack(Modifier.onChildPositioned { parentCoordinates = it }) {
                 button {
-                    Text("Test button", onPositioned { childCoordinates = it })
+                    Text("Test button",
+                        Modifier.onPositioned { childCoordinates = 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 9794f24..acc6cfd 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
@@ -20,11 +20,13 @@
 import androidx.compose.Model
 import androidx.compose.emptyContent
 import androidx.test.filters.MediumTest
+import androidx.ui.core.LayoutCoordinates
+import androidx.ui.core.Modifier
 import androidx.ui.core.TestTag
 import androidx.ui.core.onPositioned
 import androidx.ui.foundation.Box
 import androidx.ui.foundation.Clickable
-import androidx.ui.layout.LayoutSize
+import androidx.ui.layout.fillMaxSize
 import androidx.ui.semantics.Semantics
 import androidx.ui.test.createComposeRule
 import androidx.ui.test.doGesture
@@ -64,7 +66,7 @@
         var position: PxPosition? = null
         composeTestRule.setMaterialContent {
             ModalDrawerLayout(DrawerState.Opened, {}, drawerContent = {
-                Box(LayoutSize.Fill + onPositioned { coords ->
+                Box(Modifier.fillMaxSize().onPositioned { coords: LayoutCoordinates ->
                     position = coords.localToGlobal(PxPosition.Origin)
                 })
             }, bodyContent = emptyContent())
@@ -79,7 +81,7 @@
         var position: PxPosition? = null
         composeTestRule.setMaterialContent {
             ModalDrawerLayout(DrawerState.Closed, {}, drawerContent = {
-                Box(LayoutSize.Fill + onPositioned { coords ->
+                Box(Modifier.fillMaxSize().onPositioned { coords: LayoutCoordinates ->
                     position = coords.localToGlobal(PxPosition.Origin)
                 })
             }, bodyContent = emptyContent())
@@ -95,7 +97,9 @@
         var size: IntPxSize? = null
         composeTestRule.setMaterialContent {
             ModalDrawerLayout(DrawerState.Opened, {}, drawerContent = {
-                Box(LayoutSize.Fill + onPositioned { coords -> size = coords.size })
+                Box(Modifier.fillMaxSize().onPositioned { coords: LayoutCoordinates ->
+                    size = coords.size
+                })
             }, bodyContent = emptyContent())
         }
 
@@ -111,7 +115,7 @@
         var position: PxPosition? = null
         composeTestRule.setMaterialContent {
             BottomDrawerLayout(DrawerState.Opened, {}, drawerContent = {
-                Box(LayoutSize.Fill + onPositioned { coords ->
+                Box(Modifier.fillMaxSize().onPositioned { coords: LayoutCoordinates ->
                     position = coords.localToGlobal(PxPosition.Origin)
                 })
             }, bodyContent = emptyContent())
@@ -131,7 +135,7 @@
         var position: PxPosition? = null
         composeTestRule.setMaterialContent {
             BottomDrawerLayout(DrawerState.Closed, {}, drawerContent = {
-                Box(LayoutSize.Fill + onPositioned { coords ->
+                Box(Modifier.fillMaxSize().onPositioned { coords: LayoutCoordinates ->
                     position = coords.localToGlobal(PxPosition.Origin)
                 })
             }, bodyContent = emptyContent())
@@ -147,7 +151,7 @@
         composeTestRule
             .setMaterialContentAndCollectSizes {
                 StaticDrawer {
-                    Box(LayoutSize.Fill)
+                    Box(Modifier.fillMaxSize())
                 }
             }
             .assertWidthEqualsTo(256.dp)
@@ -166,7 +170,7 @@
                     ModalDrawerLayout(drawerState.state, { drawerState.state = it },
                         drawerContent = {
                             Box(
-                                LayoutSize.Fill + onPositioned { info ->
+                                Modifier.fillMaxSize().onPositioned { info: LayoutCoordinates ->
                                     val pos = info.localToGlobal(PxPosition.Origin)
                                     if (pos.x == 0.px) {
                                         // If fully opened, mark the openedLatch if present
@@ -179,7 +183,8 @@
                             )
                         },
                         bodyContent = {
-                            Box(LayoutSize.Fill + onPositioned { contentWidth = it.size.width })
+                            Box(Modifier.fillMaxSize()
+                                .onPositioned { contentWidth = it.size.width })
                         })
                 }
             }
@@ -216,12 +221,12 @@
                     ModalDrawerLayout(drawerState.state, { drawerState.state = it },
                         drawerContent = {
                             Clickable( drawerClicks += 1 }) {
-                                Box(LayoutSize.Fill, children = emptyContent())
+                                Box(Modifier.fillMaxSize(), children = emptyContent())
                             }
                         },
                         bodyContent = {
                             Clickable( bodyClicks += 1 }) {
-                                Box(LayoutSize.Fill, children = emptyContent())
+                                Box(Modifier.fillMaxSize(), children = emptyContent())
                             }
                         })
                 }
@@ -265,7 +270,7 @@
                 Semantics(container = true) {
                     BottomDrawerLayout(drawerState.state, { drawerState.state = it },
                         drawerContent = {
-                            Box(LayoutSize.Fill + onPositioned { info ->
+                            Box(Modifier.fillMaxSize().onPositioned { info: LayoutCoordinates ->
                                 val pos = info.localToGlobal(PxPosition.Origin)
                                 if (pos.y.round() == openedHeight) {
                                     // If fully opened, mark the openedLatch if present
@@ -277,7 +282,7 @@
                             })
                         },
                         bodyContent = {
-                            Box(LayoutSize.Fill + onPositioned {
+                            Box(Modifier.fillMaxSize().onPositioned {
                                 contentHeight = it.size.height
                                 openedHeight = it.size.height * BottomDrawerOpenFraction
                             })
@@ -318,12 +323,12 @@
                     BottomDrawerLayout(drawerState.state, { drawerState.state = it },
                         drawerContent = {
                             Clickable( drawerClicks += 1 }) {
-                                Box(LayoutSize.Fill, children = emptyContent())
+                                Box(Modifier.fillMaxSize(), children = emptyContent())
                             }
                         },
                         bodyContent = {
                             Clickable( bodyClicks += 1 }) {
-                                Box(LayoutSize.Fill, children = emptyContent())
+                                Box(Modifier.fillMaxSize(), 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 d003b17..ba4eeb7 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
@@ -19,10 +19,11 @@
 import android.os.Build
 import androidx.test.filters.LargeTest
 import androidx.test.filters.SdkSuppress
+import androidx.ui.core.Modifier
 import androidx.ui.core.TestTag
 import androidx.ui.foundation.Box
 import androidx.ui.graphics.Color
-import androidx.ui.layout.LayoutSize
+import androidx.ui.layout.preferredSize
 import androidx.ui.semantics.Semantics
 import androidx.ui.test.assertPixels
 import androidx.ui.test.captureToBitmap
@@ -101,7 +102,7 @@
                             TestTag(Tag) {
                                 Semantics(container = true) {
                                     Box(
-                                        LayoutSize(
+                                        Modifier.preferredSize(
                                             SurfaceSize.width.toDp(),
                                             SurfaceSize.height.toDp()
                                         )
diff --git a/ui/ui-material/src/androidTest/java/androidx/ui/material/IconButtonTest.kt b/ui/ui-material/src/androidTest/java/androidx/ui/material/IconButtonTest.kt
index 85613ed..c6ce9f2 100644
--- a/ui/ui-material/src/androidTest/java/androidx/ui/material/IconButtonTest.kt
+++ b/ui/ui-material/src/androidTest/java/androidx/ui/material/IconButtonTest.kt
@@ -18,11 +18,10 @@
 import androidx.compose.emptyContent
 import androidx.test.filters.LargeTest
 import androidx.ui.core.LayoutCoordinates
+import androidx.ui.core.Modifier
 import androidx.ui.core.onPositioned
 import androidx.ui.foundation.Box
-import androidx.ui.layout.LayoutHeight
-import androidx.ui.layout.LayoutSize
-import androidx.ui.layout.LayoutWidth
+import androidx.ui.layout.preferredSize
 import androidx.ui.material.samples.IconButtonSample
 import androidx.ui.material.samples.IconToggleButtonSample
 import androidx.ui.test.assertIsOff
@@ -69,7 +68,7 @@
             Box {
                 IconButton( {
                     Box(
-                        LayoutSize(diameter) + onPositioned { iconCoords = it },
+                        Modifier.preferredSize(diameter).onPositioned { iconCoords = it },
                         children = emptyContent()
                     )
                 }
@@ -94,8 +93,7 @@
             Box {
                 IconButton( {
                     Box(
-                        LayoutWidth(width) + LayoutHeight(height) +
-                        onPositioned { iconCoords = it },
+                        Modifier.preferredSize(width, height).onPositioned { iconCoords = it },
                         children = emptyContent()
                     )
                 }
@@ -134,7 +132,7 @@
             Box {
                 IconToggleButton(checked = false,  {
                     Box(
-                        LayoutSize(diameter) + onPositioned { iconCoords = it },
+                        Modifier.preferredSize(diameter).onPositioned { iconCoords = it },
                         children = emptyContent()
                     )
                 }
@@ -159,8 +157,7 @@
             Box {
                 IconToggleButton(checked = false,  {
                     Box(
-                        LayoutWidth(width) + LayoutHeight(height) +
-                                onPositioned { iconCoords = it },
+                        Modifier.preferredSize(width, height).onPositioned { iconCoords = it },
                         children = emptyContent())
                 }
             }
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 d40e108..892480f 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
@@ -18,6 +18,7 @@
 
 import androidx.test.filters.SmallTest
 import androidx.ui.core.FirstBaseline
+import androidx.ui.core.LayoutCoordinates
 import androidx.ui.core.Modifier
 import androidx.ui.core.Ref
 import androidx.ui.core.onPositioned
@@ -633,7 +634,7 @@
         coords: Ref<PxPosition>,
         size: Ref<IntPxSize>,
         baseline: Ref<Px> = Ref()
-    ): Modifier = onPositioned { coordinates ->
+    ): Modifier = Modifier.onPositioned { coordinates: LayoutCoordinates ->
         coords.value = coordinates.localToGlobal(PxPosition.Origin)
         baseline.value = coordinates[FirstBaseline]?.toPx()?.let {
             it + coords.value!!.y
diff --git a/ui/ui-material/src/androidTest/java/androidx/ui/material/RippleTest.kt b/ui/ui-material/src/androidTest/java/androidx/ui/material/RippleTest.kt
index 440f8ab..a5bc064 100644
--- a/ui/ui-material/src/androidTest/java/androidx/ui/material/RippleTest.kt
+++ b/ui/ui-material/src/androidTest/java/androidx/ui/material/RippleTest.kt
@@ -23,23 +23,24 @@
 import androidx.compose.mutableStateOf
 import androidx.test.filters.MediumTest
 import androidx.test.filters.SdkSuppress
+import androidx.ui.core.Modifier
 import androidx.ui.core.TestTag
 import androidx.ui.foundation.Box
 import androidx.ui.foundation.Clickable
 import androidx.ui.foundation.ContentGravity
-import androidx.ui.foundation.DrawBackground
+import androidx.ui.foundation.drawBackground
 import androidx.ui.foundation.shape.RectangleShape
 import androidx.ui.geometry.Rect
 import androidx.ui.graphics.Canvas
 import androidx.ui.graphics.Color
 import androidx.ui.graphics.Paint
-import androidx.ui.layout.LayoutPadding
-import androidx.ui.layout.LayoutSize
 import androidx.ui.layout.Row
-import androidx.ui.material.ripple.RippleThemeAmbient
+import androidx.ui.layout.padding
+import androidx.ui.layout.preferredSize
 import androidx.ui.material.ripple.RippleEffect
 import androidx.ui.material.ripple.RippleEffectFactory
 import androidx.ui.material.ripple.RippleTheme
+import androidx.ui.material.ripple.RippleThemeAmbient
 import androidx.ui.material.ripple.ripple
 import androidx.ui.test.assertShape
 import androidx.ui.test.captureToBitmap
@@ -80,10 +81,10 @@
             DrawRectRippleCallback {
                 TestTag(contentTag) {
                     Box(
-                        modifier = DrawBackground(Color.Blue),
+                        modifier = Modifier.drawBackground(Color.Blue),
                         gravity = ContentGravity.Center
                     ) {
-                        Box(LayoutSize(10.dp) + ripple())
+                        Box(Modifier.preferredSize(10.dp) + ripple())
                     }
                 }
             }
@@ -112,15 +113,15 @@
             DrawRectRippleCallback {
                 TestTag(contentTag) {
                     Box(
-                        modifier = DrawBackground(Color.Blue),
+                        modifier = Modifier.drawBackground(Color.Blue),
                         gravity = ContentGravity.Center
                     ) {
                         Box(
-                            LayoutSize(30.dp) +
-                                    LayoutPadding(5.dp) +
-                                    ripple() +
-                                    // this padding should not affect the size of the ripple
-                                    LayoutPadding(5.dp)
+                            Modifier.preferredSize(30.dp)
+                                .padding(5.dp)
+                                .plus(ripple())
+                                // this padding should not affect the size of the ripple
+                                .padding(5.dp)
                         )
                     }
                 }
@@ -150,10 +151,10 @@
             DrawRectRippleCallback {
                 TestTag(contentTag) {
                     Box(
-                        modifier = DrawBackground(Color.Blue),
+                        modifier = Modifier.drawBackground(Color.Blue),
                         gravity = ContentGravity.Center
                     ) {
-                        Box(LayoutSize(10.dp) + ripple(bounded = false))
+                        Box(Modifier.preferredSize(10.dp) + ripple(bounded = false))
                     }
                 }
             }
@@ -180,10 +181,14 @@
             DrawRectRippleCallback {
                 TestTag(contentTag) {
                     Box(
-                        modifier = DrawBackground(Color.Blue),
+                        modifier = Modifier.drawBackground(Color.Blue),
                         gravity = ContentGravity.Center
                     ) {
-                        Box(LayoutSize(10.dp) + ripple() + DrawBackground(Color.Blue))
+                        Box(
+                            Modifier.preferredSize(10.dp)
+                                .plus(ripple())
+                                .drawBackground(Color.Blue)
+                        )
                     }
                 }
             }
@@ -360,7 +365,7 @@
             >
             modifier = ripple(bounded = false, color = color, enabled = enabled)
         ) {
-            Box(LayoutSize(size))
+            Box(Modifier.preferredSize(size))
         }
     }
 
diff --git a/ui/ui-material/src/androidTest/java/androidx/ui/material/ScaffoldTest.kt b/ui/ui-material/src/androidTest/java/androidx/ui/material/ScaffoldTest.kt
index b38d1bb..ece5919 100644
--- a/ui/ui-material/src/androidTest/java/androidx/ui/material/ScaffoldTest.kt
+++ b/ui/ui-material/src/androidTest/java/androidx/ui/material/ScaffoldTest.kt
@@ -17,6 +17,8 @@
 package androidx.ui.material
 
 import androidx.test.filters.MediumTest
+import androidx.ui.core.LayoutCoordinates
+import androidx.ui.core.Modifier
 import androidx.ui.core.TestTag
 import androidx.ui.core.onPositioned
 import androidx.ui.foundation.ColoredRect
@@ -72,8 +74,12 @@
         lateinit var child2: PxPosition
         composeTestRule.setMaterialContent {
             Scaffold {
-                Text("One", onPositioned { child1 = it.positionInParent })
-                Text("Two", onPositioned { child2 = it.positionInParent })
+                Text("One",
+                    Modifier.onPositioned { child1 = it.positionInParent }
+                )
+                Text("Two",
+                    Modifier.onPositioned { child2 = it.positionInParent }
+                )
             }
         }
         assertThat(child1.y).isEqualTo(child2.y)
@@ -90,7 +96,7 @@
                 topAppBar = {
                         ColoredRect(
                             Color.Red,
-                            onPositioned { positioned ->
+                            Modifier.onPositioned { positioned: LayoutCoordinates ->
                                 appbarPosition = positioned.localToGlobal(PxPosition.Origin)
                                 appbarSize = positioned.size
                             },
@@ -100,7 +106,7 @@
             ) {
                 ColoredRect(
                     Color.Blue,
-                    onPositioned { contentPosition = it.localToGlobal(PxPosition.Origin) },
+                    Modifier.onPositioned { contentPosition = it.localToGlobal(PxPosition.Origin) },
                     height = 50.dp)
             }
         }
@@ -118,7 +124,7 @@
                 bottomAppBar = {
                     ColoredRect(
                         Color.Red,
-                        onPositioned { positioned ->
+                        Modifier.onPositioned { positioned: LayoutCoordinates ->
                             appbarPosition = positioned.positionInParent
                             appbarSize = positioned.size
                         },
@@ -128,7 +134,7 @@
             ) {
                 ColoredRect(
                     Color.Blue,
-                    onPositioned { positioned ->
+                    Modifier.onPositioned { positioned: LayoutCoordinates ->
                         contentPosition = positioned.positionInParent
                         contentSize = positioned.size
                     },
@@ -154,7 +160,7 @@
                         drawerContent = {
                             ColoredRect(
                                 Color.Blue,
-                                onPositioned { positioned ->
+                                Modifier.onPositioned { positioned: LayoutCoordinates ->
                                     drawerChildPosition = positioned.positionInParent
                                 },
                                 height = 50.dp
@@ -203,7 +209,7 @@
                         drawerContent = {
                             ColoredRect(
                                 Color.Blue,
-                                onPositioned { positioned ->
+                                Modifier.onPositioned { positioned: LayoutCoordinates ->
                                     drawerChildPosition = positioned.positionInParent
                                 },
                                 height = 50.dp
@@ -267,7 +273,7 @@
             Scaffold(
                 floatingActionButton = {
                     FloatingActionButton(
-                        modifier = onPositioned { positioned ->
+                        modifier = Modifier.onPositioned { positioned: LayoutCoordinates ->
                             fabSize = positioned.size
                             fabPosition = positioned.localToGlobal(positioned.positionInParent)
                         },
@@ -279,7 +285,7 @@
                 bottomAppBar = {
                     ColoredRect(
                         Color.Red,
-                        onPositioned { positioned ->
+                        Modifier.onPositioned { positioned: LayoutCoordinates ->
                             bottomBarPosition =
                                 positioned.localToGlobal(positioned.positionInParent)
                         },
@@ -303,7 +309,7 @@
             Scaffold(
                 floatingActionButton = {
                     FloatingActionButton(
-                        modifier = onPositioned { positioned ->
+                        modifier = Modifier.onPositioned { positioned: LayoutCoordinates ->
                             fabSize = positioned.size
                             fabPosition = positioned.localToGlobal(positioned.positionInParent)
                         },
@@ -316,7 +322,7 @@
                 bottomAppBar = {
                     ColoredRect(
                         Color.Red,
-                        onPositioned { positioned ->
+                        Modifier.onPositioned { positioned: LayoutCoordinates ->
                             bottomBarPosition =
                                 positioned.localToGlobal(positioned.positionInParent)
                         },
diff --git a/ui/ui-material/src/androidTest/java/androidx/ui/material/SnackbarTest.kt b/ui/ui-material/src/androidTest/java/androidx/ui/material/SnackbarTest.kt
index 71655f6..de41ad5 100644
--- a/ui/ui-material/src/androidTest/java/androidx/ui/material/SnackbarTest.kt
+++ b/ui/ui-material/src/androidTest/java/androidx/ui/material/SnackbarTest.kt
@@ -20,6 +20,7 @@
 import androidx.ui.core.FirstBaseline
 import androidx.ui.core.LastBaseline
 import androidx.ui.core.LayoutCoordinates
+import androidx.ui.core.Modifier
 import androidx.ui.core.globalPosition
 import androidx.ui.core.onPositioned
 import androidx.ui.foundation.Text
@@ -82,7 +83,9 @@
         ) {
             Snackbar(
                 text = {
-                    Text("Message", onPositioned { textCoords = it })
+                    Text("Message",
+                        Modifier.onPositioned { textCoords = it }
+                    )
                 }
             )
         }
@@ -111,13 +114,20 @@
             parentConstraints = DpConstraints(maxWidth = 300.dp)
         ) {
             Snackbar(
-                modifier = onPositioned { snackCoords = it },
+                modifier = Modifier.onPositioned { snackCoords = it },
                 text = {
-                    Text("Message", onPositioned { textCoords = it })
+                    Text("Message",
+                        Modifier.onPositioned { textCoords = it }
+                    )
                 },
                 action = {
-                    TextButton( modifier = onPositioned { buttonCoords = it }) {
-                        Text("Undo", onPositioned { buttonTextCoords = it })
+                    TextButton(
+                        >
+                        modifier = Modifier.onPositioned { buttonCoords = it }
+                    ) {
+                        Text("Undo",
+                            Modifier.onPositioned { buttonTextCoords = it }
+                        )
                     }
                 }
             )
@@ -163,7 +173,8 @@
         ) {
             Snackbar(
                 text = {
-                    Text(longText, onPositioned { textCoords = it }, maxLines = 2)
+                    Text(longText,
+                        Modifier.onPositioned { textCoords = it }, maxLines = 2)
                 }
             )
         }
@@ -192,12 +203,16 @@
             parentConstraints = DpConstraints(maxWidth = 300.dp)
         ) {
             Snackbar(
-                modifier = onPositioned { snackCoords = it },
+                modifier = Modifier.onPositioned { snackCoords = it },
                 text = {
-                    Text(longText, onPositioned { textCoords = it }, maxLines = 2)
+                    Text(longText,
+                        Modifier.onPositioned { textCoords = it }, maxLines = 2)
                 },
                 action = {
-                    TextButton(modifier = onPositioned { buttonCoords = it },  {
+                    TextButton(
+                        modifier = Modifier.onPositioned { buttonCoords = it },
+                        >
+                    ) {
                         Text("Undo")
                     }
                 }
@@ -243,12 +258,17 @@
             parentConstraints = DpConstraints(maxWidth = 300.dp)
         ) {
             Snackbar(
-                modifier = onPositioned { snackCoords = it },
+                modifier = Modifier.onPositioned { snackCoords = it },
                 text = {
-                    Text("Message", onPositioned { textCoords = it })
+                    Text("Message",
+                        Modifier.onPositioned { textCoords = it }
+                    )
                 },
                 action = {
-                    TextButton( modifier = onPositioned { buttonCoords = it }) {
+                    TextButton(
+                        >
+                        modifier = Modifier.onPositioned { buttonCoords = it }
+                    ) {
                         Text("Undo")
                     }
                 },
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 f59fb2a..c34c259 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
@@ -20,6 +20,7 @@
 import androidx.test.filters.LargeTest
 import androidx.ui.core.LastBaseline
 import androidx.ui.core.LayoutCoordinates
+import androidx.ui.core.Modifier
 import androidx.ui.core.onChildPositioned
 import androidx.ui.core.onPositioned
 import androidx.ui.foundation.Box
@@ -27,7 +28,7 @@
 import androidx.ui.foundation.Icon
 import androidx.ui.foundation.Text
 import androidx.ui.graphics.Color
-import androidx.ui.layout.LayoutWidth
+import androidx.ui.layout.preferredWidth
 import androidx.ui.material.icons.Icons
 import androidx.ui.material.icons.filled.Favorite
 import androidx.ui.material.samples.ScrollingTextTabs
@@ -115,13 +116,13 @@
                 TabRow.IndicatorContainer(tabPositions, state) {
                     ColoredRect(
                         Color.Red,
-                        onPositioned { indicatorCoords = it },
+                        Modifier.onPositioned { indicatorCoords = it },
                         height = indicatorHeight
                     )
                 }
             }
 
-            Box(onChildPositioned { tabRowCoords = it }) {
+            Box(Modifier.onChildPositioned { tabRowCoords = it }) {
                 TabRow(
                     items = titles,
                     selectedIndex = state,
@@ -181,13 +182,13 @@
 
             Box {
                 TabRow(
-                    modifier = onPositioned { tabRowCoords = it },
+                    modifier = Modifier.onPositioned { tabRowCoords = it },
                     items = titles,
                     selectedIndex = state
                 ) { index, text ->
                     Tab(
                         text = {
-                            Text(text, onPositioned { coords ->
+                            Text(text, Modifier.onPositioned { coords: LayoutCoordinates ->
                                 textCoords = coords
                                 textBaseline = coords[LastBaseline]!!.toPx()
                             })
@@ -226,13 +227,13 @@
 
             Box {
                 TabRow(
-                    modifier = onPositioned { tabRowCoords = it },
+                    modifier = Modifier.onPositioned { tabRowCoords = it },
                     items = titles,
                     selectedIndex = state
                 ) { index, text ->
                     Tab(
                         text = {
-                            Text(text, onPositioned { coords ->
+                            Text(text, Modifier.onPositioned { coords: LayoutCoordinates ->
                                 textCoords = coords
                                 textBaseline = coords[LastBaseline]!!.toPx()
                             })
@@ -272,13 +273,13 @@
 
             Box {
                 TabRow(
-                    modifier = onPositioned { tabRowCoords = it },
+                    modifier = Modifier.onPositioned { tabRowCoords = it },
                     items = titles,
                     selectedIndex = state
                 ) { index, text ->
                     Tab(
                         text = {
-                            Text(text, LayoutWidth(100.dp) + onPositioned { coords ->
+                            Text(text, Modifier.preferredWidth(100.dp).onPositioned { coords ->
                                 textCoords = coords
                                 textBaseline = coords[LastBaseline]!!.toPx()
                             }, maxLines = 2)
@@ -321,7 +322,7 @@
                 TabRow.IndicatorContainer(tabPositions, state) {
                     ColoredRect(
                         Color.Red,
-                        onPositioned { indicatorCoords = it },
+                        Modifier.onPositioned { indicatorCoords = it },
                         height = indicatorHeight
                     )
                 }
@@ -329,7 +330,7 @@
 
             Box {
                 TabRow(
-                    modifier = onPositioned { tabRowCoords = it },
+                    modifier = Modifier.onPositioned { tabRowCoords = it },
                     items = titles,
                     scrollable = true,
                     selectedIndex = state,
diff --git a/ui/ui-material/src/main/java/androidx/ui/material/AlertDialog.kt b/ui/ui-material/src/main/java/androidx/ui/material/AlertDialog.kt
index 5b17c17..8cbaca2 100644
--- a/ui/ui-material/src/main/java/androidx/ui/material/AlertDialog.kt
+++ b/ui/ui-material/src/main/java/androidx/ui/material/AlertDialog.kt
@@ -17,6 +17,7 @@
 package androidx.ui.material
 
 import androidx.compose.Composable
+import androidx.ui.core.Modifier
 import androidx.ui.foundation.Box
 import androidx.ui.foundation.ContentGravity
 import androidx.ui.foundation.Dialog
@@ -24,12 +25,13 @@
 import androidx.ui.foundation.shape.corner.RoundedCornerShape
 import androidx.ui.layout.Arrangement
 import androidx.ui.layout.Column
-import androidx.ui.layout.LayoutGravity
-import androidx.ui.layout.LayoutHeight
-import androidx.ui.layout.LayoutPadding
-import androidx.ui.layout.LayoutWidth
+import androidx.ui.layout.ColumnAlign
 import androidx.ui.layout.Row
 import androidx.ui.layout.Spacer
+import androidx.ui.layout.fillMaxWidth
+import androidx.ui.layout.padding
+import androidx.ui.layout.preferredHeight
+import androidx.ui.layout.preferredWidth
 import androidx.ui.material.AlertDialogButtonLayout.SideBySide
 import androidx.ui.material.AlertDialogButtonLayout.Stacked
 import androidx.ui.unit.dp
@@ -114,13 +116,13 @@
     Dialog( {
         MaterialTheme(colors = currentColors, typography = currentTypography) {
             Surface(
-                modifier = LayoutWidth(AlertDialogWidth),
+                modifier = AlertDialogWidth,
                 shape = AlertDialogShape
             ) {
                 val emphasisLevels = MaterialTheme.emphasisLevels
                 Column {
                     if (title != null) {
-                        Box(modifier = TitlePadding + LayoutGravity.Start) {
+                        Box(TitlePadding.gravity(ColumnAlign.Start)) {
                             ProvideEmphasis(emphasisLevels.high) {
                                 val textStyle = MaterialTheme.typography.h6
                                 ProvideTextStyle(textStyle, title)
@@ -129,16 +131,16 @@
                     } else {
                         // TODO(b/138924683): Temporary until padding for the Text's
                         //  baseline
-                        Spacer(LayoutHeight(NoTitleExtraHeight))
+                        Spacer(NoTitleExtraHeight)
                     }
 
-                    Box(modifier = TextPadding + LayoutGravity.Start) {
+                    Box(TextPadding.gravity(ColumnAlign.Start)) {
                         ProvideEmphasis(emphasisLevels.medium) {
                             val textStyle = MaterialTheme.typography.body1
                             ProvideTextStyle(textStyle, text)
                         }
                     }
-                    Spacer(LayoutHeight(TextToButtonsHeight))
+                    Spacer(TextToButtonsHeight)
                     buttons()
                 }
             }
@@ -165,12 +167,12 @@
     dismissButton: @Composable() (() -> Unit)?,
     buttonLayout: AlertDialogButtonLayout
 ) {
-    Box(LayoutWidth.Fill + ButtonsPadding, gravity = ContentGravity.CenterEnd) {
+    Box(ButtonsBoxModifier, gravity = ContentGravity.CenterEnd) {
         if (buttonLayout == SideBySide) {
             Row(arrangement = Arrangement.End) {
                 if (dismissButton != null) {
                     dismissButton()
-                    Spacer(LayoutWidth(ButtonsWidthSpace))
+                    Spacer(ButtonsWidthSpace)
                 }
 
                 confirmButton()
@@ -180,7 +182,7 @@
                 confirmButton()
 
                 if (dismissButton != null) {
-                    Spacer(LayoutHeight(ButtonsHeightSpace))
+                    Spacer(ButtonsHeightSpace)
                     dismissButton()
                 }
             }
@@ -188,17 +190,17 @@
     }
 }
 
-private val AlertDialogWidth = 280.dp
-private val ButtonsPadding = LayoutPadding(all = 8.dp)
-private val ButtonsWidthSpace = 8.dp
-private val ButtonsHeightSpace = 12.dp
+private val AlertDialogWidth = Modifier.preferredWidth(280.dp)
+private val ButtonsBoxModifier = Modifier.fillMaxWidth().padding(all = 8.dp)
+private val ButtonsWidthSpace = Modifier.preferredWidth(8.dp)
+private val ButtonsHeightSpace = Modifier.preferredHeight(12.dp)
 // TODO(b/138924683): Top padding should be actually be a distance between the Text baseline and
 //  the Title baseline
-private val TextPadding = LayoutPadding(start = 24.dp, top = 20.dp, end = 24.dp, bottom = 0.dp)
+private val TextPadding = Modifier.padding(start = 24.dp, top = 20.dp, end = 24.dp, bottom = 0.dp)
 // TODO(b/138924683): Top padding should be actually be relative to the Text baseline
-private val TitlePadding = LayoutPadding(start = 24.dp, top = 24.dp, end = 24.dp, bottom = 0.dp)
+private val TitlePadding = Modifier.padding(start = 24.dp, top = 24.dp, end = 24.dp, bottom = 0.dp)
 // The height difference of the padding between a Dialog with a title and one without a title
-private val NoTitleExtraHeight = 2.dp
-private val TextToButtonsHeight = 28.dp
+private val NoTitleExtraHeight = Modifier.preferredHeight(2.dp)
+private val TextToButtonsHeight = Modifier.preferredHeight(28.dp)
 // TODO: The corner radius should be customizable
 private val AlertDialogShape = RoundedCornerShape(4.dp)
\ No newline at end of file
diff --git a/ui/ui-material/src/main/java/androidx/ui/material/AppBar.kt b/ui/ui-material/src/main/java/androidx/ui/material/AppBar.kt
index 1a1ea27..5e9cd38 100644
--- a/ui/ui-material/src/main/java/androidx/ui/material/AppBar.kt
+++ b/ui/ui-material/src/main/java/androidx/ui/material/AppBar.kt
@@ -35,13 +35,15 @@
 import androidx.ui.graphics.addOutline
 import androidx.ui.layout.AlignmentLineOffset
 import androidx.ui.layout.Arrangement
-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.layout.RowScope
 import androidx.ui.layout.Spacer
+import androidx.ui.layout.fillMaxHeight
+import androidx.ui.layout.fillMaxSize
+import androidx.ui.layout.fillMaxWidth
+import androidx.ui.layout.padding
+import androidx.ui.layout.preferredHeight
+import androidx.ui.layout.preferredWidth
 import androidx.ui.material.BottomAppBar.FabConfiguration
 import androidx.ui.semantics.Semantics
 import androidx.ui.unit.Density
@@ -87,19 +89,16 @@
     AppBar(color, contentColor, elevation, RectangleShape, modifier) {
         val emphasisLevels = MaterialTheme.emphasisLevels
         if (navigationIcon == null) {
-            Spacer(LayoutWidth(TitleInsetWithoutIcon))
+            Spacer(TitleInsetWithoutIcon)
         } else {
             // TODO: make this a row after b/148014745 is fixed
-            Box(
-                LayoutHeight.Fill + LayoutWidth(TitleInsetWithIcon),
-                gravity = ContentGravity.CenterStart
-            ) {
+            Box(TitleIconModifier, gravity = ContentGravity.CenterStart) {
                 ProvideEmphasis(emphasisLevels.high, navigationIcon)
             }
         }
 
         // TODO(soboleva): rework this once AlignmentLineOffset is a modifier
-        Box(LayoutHeight.Fill + LayoutWeight(1f), gravity = ContentGravity.BottomStart) {
+        Box(Modifier.fillMaxHeight().weight(1f), gravity = ContentGravity.BottomStart) {
             val baselineOffset = with(DensityAmbient.current) { TitleBaselineOffset.toDp() }
             AlignmentLineOffset(alignmentLine = LastBaseline, after = baselineOffset) {
                 Semantics(container = true) {
@@ -113,7 +112,7 @@
         }
 
         // TODO: remove box and center align row's children after b/148014745 is fixed
-        Box(modifier = LayoutHeight.Fill, gravity = ContentGravity.CenterEnd) {
+        Box(Modifier.fillMaxHeight(), gravity = ContentGravity.CenterEnd) {
             Row(arrangement = Arrangement.End) {
                 ProvideEmphasis(emphasisLevels.medium) {
                     actions()
@@ -243,9 +242,9 @@
     }
     AppBar(color, contentColor, BottomAppBarElevation, shape, modifier) {
         // TODO: remove box and inline row's children after b/148014745 is fixed
-        Box(LayoutSize.Fill, gravity = ContentGravity.Center) {
+        Box(Modifier.fillMaxSize(), gravity = ContentGravity.Center) {
             // TODO: b/150609566 clarify emphasis for children
-            Row(LayoutWidth.Fill, children = children)
+            Row(Modifier.fillMaxWidth(), children = children)
         }
     }
 }
@@ -501,10 +500,9 @@
         modifier = modifier
     ) {
         Row(
-            LayoutWidth.Fill + LayoutPadding(
-                start = AppBarHorizontalPadding,
-                end = AppBarHorizontalPadding
-            ) + LayoutHeight(AppBarHeight),
+            Modifier.fillMaxWidth()
+                .padding(start = AppBarHorizontalPadding, end = AppBarHorizontalPadding)
+                .preferredHeight(AppBarHeight),
             arrangement = Arrangement.SpaceBetween,
             children = children
         )
@@ -515,9 +513,10 @@
 // TODO: this should probably be part of the touch target of the start and end icons, clarify this
 private val AppBarHorizontalPadding = 4.dp
 // Start inset for the title when there is no navigation icon provided
-private val TitleInsetWithoutIcon = 16.dp - AppBarHorizontalPadding
+private val TitleInsetWithoutIcon = Modifier.preferredWidth(16.dp - AppBarHorizontalPadding)
 // Start inset for the title when there is a navigation icon provided
-private val TitleInsetWithIcon = 72.dp - AppBarHorizontalPadding
+private val TitleIconModifier = Modifier.fillMaxHeight()
+    .preferredWidth(72.dp - AppBarHorizontalPadding)
 // The baseline distance for the title from the bottom of the app bar
 private val TitleBaselineOffset = 20.sp
 
diff --git a/ui/ui-material/src/main/java/androidx/ui/material/BottomNavigation.kt b/ui/ui-material/src/main/java/androidx/ui/material/BottomNavigation.kt
index 1d86eee..96d0c0dd 100644
--- a/ui/ui-material/src/main/java/androidx/ui/material/BottomNavigation.kt
+++ b/ui/ui-material/src/main/java/androidx/ui/material/BottomNavigation.kt
@@ -25,7 +25,6 @@
 import androidx.ui.core.Constraints
 import androidx.ui.core.LastBaseline
 import androidx.ui.core.Layout
-import androidx.ui.core.LayoutTag
 import androidx.ui.core.MeasureScope
 import androidx.ui.core.Modifier
 import androidx.ui.core.Placeable
@@ -40,10 +39,10 @@
 import androidx.ui.graphics.Color
 import androidx.ui.graphics.lerp
 import androidx.ui.layout.Arrangement
-import androidx.ui.layout.LayoutHeight
-import androidx.ui.layout.LayoutWidth
 import androidx.ui.layout.Row
 import androidx.ui.layout.RowScope
+import androidx.ui.layout.fillMaxWidth
+import androidx.ui.layout.preferredHeight
 import androidx.ui.material.ripple.ripple
 import androidx.ui.text.style.TextAlign
 import androidx.ui.unit.Dp
@@ -93,7 +92,7 @@
         modifier = modifier
     ) {
         Row(
-            LayoutWidth.Fill + LayoutHeight(BottomNavigationHeight),
+            Modifier.fillMaxWidth().preferredHeight(BottomNavigationHeight),
             arrangement = Arrangement.SpaceBetween,
             children = children
         )
@@ -141,7 +140,8 @@
         ProvideTextStyle(style, children = text)
     }
     MutuallyExclusiveSetItem(selected = selected,  modifier = ripple()) {
-        Box(modifier + RowScope.LayoutWeight(1f), gravity = ContentGravity.Center) {
+        // TODO This composable has magic behavior within a Row; reconsider this behavior later
+        Box(with(RowScope) { modifier.weight(1f) }, gravity = ContentGravity.Center) {
             BottomNavigationTransition(activeColor, inactiveColor, selected) { progress ->
                 val animationProgress = if (alwaysShowLabels) 1f else progress
 
@@ -204,9 +204,9 @@
 ) {
     Layout(
         {
-            Box(LayoutTag("icon"), children = icon)
+            Box(Modifier.tag("icon"), children = icon)
             Box(
-                LayoutTag("text") + drawOpacity(iconPositionAnimationProgress),
+                Modifier.tag("text").drawOpacity(iconPositionAnimationProgress),
                 paddingStart = BottomNavigationItemHorizontalPadding,
                 paddingEnd = BottomNavigationItemHorizontalPadding,
                 children = text
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 f0291f0..c246821 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
@@ -28,7 +28,7 @@
 import androidx.ui.graphics.Color
 import androidx.ui.graphics.Shape
 import androidx.ui.layout.EdgeInsets
-import androidx.ui.layout.LayoutSize
+import androidx.ui.layout.preferredSizeIn
 import androidx.ui.material.ripple.ripple
 import androidx.ui.semantics.Semantics
 import androidx.ui.unit.Dp
@@ -223,7 +223,7 @@
 )
 
 // Specification for Material Button:
-private val ButtonConstraints = LayoutSize.Min(64.dp, 36.dp)
+private val ButtonConstraints = Modifier.preferredSizeIn(minWidth = 64.dp, minHeight = 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 e37f36a..6b1c1d9 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
@@ -40,8 +40,8 @@
 import androidx.ui.graphics.Paint
 import androidx.ui.graphics.PaintingStyle
 import androidx.ui.graphics.StrokeCap
-import androidx.ui.layout.LayoutPadding
-import androidx.ui.layout.LayoutSize
+import androidx.ui.layout.padding
+import androidx.ui.layout.preferredSize
 import androidx.ui.material.ripple.ripple
 import androidx.ui.semantics.Semantics
 import androidx.ui.unit.dp
@@ -116,7 +116,7 @@
                 DrawCheckbox(
                     value = state,
                     activeColor = color,
-                    modifier = LayoutPadding(CheckboxDefaultPadding)
+                    modifier = CheckboxDefaultPadding
                 )
             }
         }
@@ -131,7 +131,7 @@
     }
     val checkboxPaint = remember { Paint() }
     Transition(definition = definition, toState = value) { state ->
-        Canvas(modifier = modifier + LayoutSize(CheckboxSize)) {
+        Canvas(modifier.preferredSize(CheckboxSize)) {
             drawBox(
                 color = state[BoxColorProp],
                 innerRadiusFraction = state[InnerRadiusFractionProp],
@@ -329,7 +329,7 @@
     }
 }
 
-private val CheckboxDefaultPadding = 2.dp
+private val CheckboxDefaultPadding = Modifier.padding(2.dp)
 private val CheckboxSize = 20.dp
 private val StrokeWidth = 2.dp
 private val RadiusSize = 2.dp
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 54e15ce..e97ac2b 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
@@ -21,7 +21,7 @@
 import androidx.ui.core.Alignment
 import androidx.ui.core.Constraints
 import androidx.ui.core.Layout
-import androidx.ui.core.LayoutTag
+import androidx.ui.core.Modifier
 import androidx.ui.core.tag
 import androidx.ui.foundation.Border
 import androidx.ui.foundation.Box
@@ -38,14 +38,14 @@
 import androidx.ui.layout.Arrangement
 import androidx.ui.layout.Column
 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
+import androidx.ui.layout.RowAlign
 import androidx.ui.layout.Spacer
 import androidx.ui.layout.Table
 import androidx.ui.layout.TableColumnWidth
+import androidx.ui.layout.fillMaxSize
+import androidx.ui.layout.preferredHeight
+import androidx.ui.layout.preferredWidth
 import androidx.ui.material.ripple.ripple
 import androidx.ui.text.TextStyle
 import androidx.ui.text.font.FontWeight
@@ -216,7 +216,7 @@
             } else {
                 Row {
                     Image(asset = image)
-                    Spacer(LayoutWidth(2.dp))
+                    Spacer(DataTableWidthSpacerModifier)
                     Text(text = text(j))
                 }
             }
@@ -261,7 +261,7 @@
             } else {
                 Row {
                     Image(asset = image)
-                    Spacer(LayoutWidth(2.dp))
+                    Spacer(DataTableWidthSpacerModifier)
                     Text(text = text(j))
                 }
             }
@@ -368,7 +368,7 @@
                 tableRow {
                     if (showCheckboxes) {
                         Box(
-                            LayoutHeight(headerRowHeight),
+                            Modifier.preferredHeight(headerRowHeight),
                             paddingStart = cellSpacing.left,
                             paddingTop = cellSpacing.top,
                             paddingEnd = cellSpacing.right,
@@ -392,7 +392,7 @@
                     }
                     for (j in 0 until columns) {
                         Box(
-                            LayoutHeight(headerRowHeight),
+                            Modifier.preferredHeight(headerRowHeight),
                             paddingStart = cellSpacing.left,
                             paddingTop = cellSpacing.top,
                             paddingEnd = cellSpacing.right,
@@ -414,7 +414,7 @@
                                     headerDecoration = {
                                         // TODO(calintat): Replace with animated arrow icons.
                                         Text(text = if (sorting.ascending) "↑" else "↓")
-                                        Spacer(LayoutWidth(2.dp))
+                                        Spacer(DataTableWidthSpacerModifier)
                                     }
                                 } else {
                                     >
@@ -445,7 +445,7 @@
                 tableRow {
                     if (showCheckboxes) {
                         Box(
-                            LayoutHeight(dataRowHeight),
+                            Modifier.preferredHeight(dataRowHeight),
                             paddingStart = cellSpacing.left,
                             paddingTop = cellSpacing.top,
                             paddingEnd = cellSpacing.right,
@@ -457,7 +457,7 @@
                     }
                     for (j in 0 until columns) {
                         Box(
-                            LayoutHeight(dataRowHeight),
+                            Modifier.preferredHeight(dataRowHeight),
                             paddingStart = cellSpacing.left,
                             paddingTop = cellSpacing.top,
                             paddingEnd = cellSpacing.right,
@@ -477,7 +477,7 @@
                         if (row. null) return@forEachIndexed
                         Clickable(
                              row.onSelectedChange.invoke(!row.selected) },
-                            modifier = LayoutTag(index) + ripple()
+                            modifier = Modifier.tag(index) + ripple()
                         ) {
                             ColoredRect(
                                 color = if (row.selected) {
@@ -516,33 +516,33 @@
         Column {
             table()
             Box(
-                LayoutHeight(dataRowHeight),
+                Modifier.preferredHeight(dataRowHeight),
                 paddingStart = cellSpacing.left,
                 paddingTop = cellSpacing.top,
                 paddingEnd = cellSpacing.right,
                 paddingBottom = cellSpacing.bottom,
                 gravity = ContentGravity.Center
             ) {
-                Row(LayoutSize.Fill, arrangement = Arrangement.End) {
+                Row(Modifier.fillMaxSize(), arrangement = Arrangement.End) {
                     val pages = (rows.size - 1) / pagination.rowsPerPage + 1
                     val startRow = pagination.rowsPerPage * pagination.page
                     val endRow = (startRow + pagination.rowsPerPage).coerceAtMost(rows.size)
-                    val modifier = LayoutGravity.Center
+                    val center = Modifier.gravity(RowAlign.Center)
 
                     // TODO(calintat): Replace this with a dropdown menu whose items are taken
                     //  from availableRowsPerPage (filtered to those that are in the range
                     //  0 until rows.size). When an item is selected, it should invoke
                     //  onRowsPerPageChange with the appropriate value.
-                    Text(text = "Rows per page: ${pagination.rowsPerPage}", modifier = modifier)
+                    Text(text = "Rows per page: ${pagination.rowsPerPage}", modifier = center)
 
-                    Spacer(LayoutWidth(32.dp))
+                    Spacer(DataTableTextSpacerModifier)
 
-                    Text(text = "${startRow + 1}-$endRow of ${rows.size}", modifier = modifier)
+                    Text(text = "${startRow + 1}-$endRow of ${rows.size}", modifier = center)
 
-                    Spacer(LayoutWidth(32.dp))
+                    Spacer(DataTableTextSpacerModifier)
 
                     // TODO(calintat): Replace this with an image button with chevron_left icon.
-                    Box(modifier = modifier) {
+                    Box(center) {
                         Clickable(
                             >
                                 val newPage = pagination.page - 1
@@ -555,10 +555,10 @@
                         }
                     }
 
-                    Spacer(LayoutWidth(24.dp))
+                    Spacer(DataTableNextSpacerModifier)
 
                     // TODO(calintat): Replace this with an image button with chevron_right icon.
-                    Box(modifier = modifier) {
+                    Box(center) {
                         Clickable(
                             >
                                 val newPage = pagination.page + 1
@@ -581,3 +581,6 @@
 private val CellSpacing = EdgeInsets(left = 16.dp, right = 16.dp)
 private val BorderColor = Color(0xFFC6C6C6)
 private val BorderWidth = 1.dp
+private val DataTableWidthSpacerModifier = Modifier.preferredWidth(2.dp)
+private val DataTableTextSpacerModifier = Modifier.preferredWidth(32.dp)
+private val DataTableNextSpacerModifier = Modifier.preferredWidth(24.dp)
\ No newline at end of file
diff --git a/ui/ui-material/src/main/java/androidx/ui/material/Divider.kt b/ui/ui-material/src/main/java/androidx/ui/material/Divider.kt
index 4a28b88..4a28182 100644
--- a/ui/ui-material/src/main/java/androidx/ui/material/Divider.kt
+++ b/ui/ui-material/src/main/java/androidx/ui/material/Divider.kt
@@ -20,7 +20,7 @@
 import androidx.ui.core.Modifier
 import androidx.ui.foundation.ColoredRect
 import androidx.ui.graphics.Color
-import androidx.ui.layout.LayoutPadding
+import androidx.ui.layout.padding
 import androidx.ui.unit.Dp
 import androidx.ui.unit.dp
 
@@ -38,6 +38,6 @@
     height: Dp = 1.dp,
     indent: Dp = 0.dp
 ) {
-    val indentMod = if (indent.value != 0f) LayoutPadding(start = indent) else Modifier.None
+    val indentMod = if (indent.value != 0f) Modifier.padding(start = indent) else Modifier.None
     ColoredRect(color, modifier + indentMod, height = height)
 }
\ No newline at end of file
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 f337c3c..3dfa417 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
@@ -21,9 +21,10 @@
 import androidx.compose.Composable
 import androidx.compose.remember
 import androidx.ui.core.DensityAmbient
-import androidx.ui.core.DrawClipToBounds
 import androidx.ui.core.Layout
+import androidx.ui.core.Modifier
 import androidx.ui.core.WithConstraints
+import androidx.ui.core.clipToBounds
 import androidx.ui.core.hasBoundedHeight
 import androidx.ui.core.hasBoundedWidth
 import androidx.ui.foundation.Box
@@ -33,10 +34,11 @@
 import androidx.ui.graphics.Paint
 import androidx.ui.graphics.PaintingStyle
 import androidx.ui.layout.DpConstraints
-import androidx.ui.layout.LayoutHeight
-import androidx.ui.layout.LayoutSize
-import androidx.ui.layout.LayoutWidth
 import androidx.ui.layout.Stack
+import androidx.ui.layout.fillMaxHeight
+import androidx.ui.layout.fillMaxSize
+import androidx.ui.layout.preferredSizeIn
+import androidx.ui.layout.preferredWidth
 import androidx.ui.material.internal.StateDraggable
 import androidx.ui.unit.IntPx
 import androidx.ui.unit.Px
@@ -78,7 +80,7 @@
 fun StaticDrawer(
     drawerContent: @Composable() () -> Unit
 ) {
-    Box(LayoutWidth(StaticDrawerWidth) + LayoutHeight.Fill, children = drawerContent)
+    Box(StaticDrawerModifier, children = drawerContent)
 }
 
 /**
@@ -110,7 +112,7 @@
     drawerContent: @Composable() () -> Unit,
     bodyContent: @Composable() () -> Unit
 ) {
-    Box(LayoutSize.Fill) {
+    Box(Modifier.fillMaxSize()) {
         WithConstraints { pxConstraints, _ ->
             // TODO : think about Infinite max bounds case
             if (!pxConstraints.hasBoundedWidth) {
@@ -177,7 +179,7 @@
     drawerContent: @Composable() () -> Unit,
     bodyContent: @Composable() () -> Unit
 ) {
-    Box(LayoutSize.Fill) {
+    Box(Modifier.fillMaxSize()) {
         WithConstraints { pxConstraints, _ ->
             // TODO : think about Infinite max bounds case
             if (!pxConstraints.hasBoundedHeight) {
@@ -237,7 +239,7 @@
 ) {
     WithOffset(xOffset = xOffset) {
         Box(
-            LayoutSize.Constrain(
+            Modifier.preferredSizeIn(
                 constraints.minWidth,
                 constraints.minHeight,
                 constraints.maxWidth,
@@ -247,7 +249,7 @@
         ) {
             // remove Container when we will support multiply children
             Surface {
-                Box(LayoutSize.Fill, children = children)
+                Box(Modifier.fillMaxSize(), children = children)
             }
         }
     }
@@ -261,7 +263,7 @@
 ) {
     WithOffset(yOffset = yOffset) {
         Box(
-            LayoutSize.Constrain(
+            Modifier.preferredSizeIn(
                 constraints.minWidth,
                 constraints.minHeight,
                 constraints.maxWidth,
@@ -270,7 +272,7 @@
         ) {
             // remove Container when we will support multiply children
             Surface {
-                Box(LayoutSize.Fill, children = children)
+                Box(Modifier.fillMaxSize(), children = children)
             }
         }
     }
@@ -289,7 +291,7 @@
     val scrimContent = @Composable {
         val paint = remember { Paint().apply { style = PaintingStyle.fill } }
         val color = MaterialTheme.colors.onSurface
-        Canvas(LayoutSize.Fill) {
+        Canvas(Modifier.fillMaxSize()) {
             val scrimAlpha = fraction() * ScrimDefaultOpacity
             paint.color = color.copy(alpha = scrimAlpha)
             drawRect(size.toRect(), paint)
@@ -310,7 +312,7 @@
     child: @Composable() () -> Unit
 ) {
     Layout(children = {
-        Box(modifier = DrawClipToBounds, children = child)
+        Box(Modifier.clipToBounds(), children = child)
     }) { measurables, constraints, _ ->
         if (measurables.size > 1) {
             throw IllegalStateException("Only one child is allowed")
@@ -334,16 +336,15 @@
     }
 }
 
-private val ScrimDefaultOpacity = 0.32f
+private const val ScrimDefaultOpacity = 0.32f
 private val VerticalDrawerPadding = 56.dp
 
-// drawer children specs
-private val StaticDrawerWidth = 256.dp
-private val DrawerStiffness = 1000f
+private val StaticDrawerModifier = Modifier.preferredWidth(256.dp).fillMaxHeight()
+private const val DrawerStiffness = 1000f
 
 private val AnimationBuilder =
     PhysicsBuilder<Float>().apply {
         stiffness = DrawerStiffness
     }
 
-internal val BottomDrawerOpenFraction = 0.5f
+internal const val BottomDrawerOpenFraction = 0.5f
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 027452a..caeb50e 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
@@ -30,12 +30,11 @@
 import androidx.ui.foundation.shape.corner.CircleShape
 import androidx.ui.graphics.Color
 import androidx.ui.graphics.Shape
-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.layout.Spacer
+import androidx.ui.layout.padding
+import androidx.ui.layout.preferredSizeIn
+import androidx.ui.layout.preferredWidth
 import androidx.ui.material.ripple.ripple
 import androidx.ui.unit.Density
 import androidx.ui.unit.Dp
@@ -124,7 +123,10 @@
     elevation: Dp = 6.dp
 ) {
     FloatingActionButton(
-        modifier = modifier + LayoutSize.Min(ExtendedFabSize),
+        modifier = modifier.preferredSizeIn(
+            minWidth = ExtendedFabSize,
+            minHeight = ExtendedFabSize
+        ),
         >
         shape = shape,
         backgroundColor = backgroundColor,
@@ -132,7 +134,7 @@
         elevation = elevation
     ) {
         Box(
-            modifier = LayoutPadding(
+            modifier = Modifier.padding(
                 start = ExtendedFabTextPadding,
                 end = ExtendedFabTextPadding
             ),
@@ -143,7 +145,7 @@
             } else {
                 Row {
                     icon()
-                    Spacer(LayoutWidth(ExtendedFabIconPadding))
+                    Spacer(Modifier.preferredWidth(ExtendedFabIconPadding))
                     text()
                 }
             }
diff --git a/ui/ui-material/src/main/java/androidx/ui/material/IconButton.kt b/ui/ui-material/src/main/java/androidx/ui/material/IconButton.kt
index 5d67d41..9815b6d 100644
--- a/ui/ui-material/src/main/java/androidx/ui/material/IconButton.kt
+++ b/ui/ui-material/src/main/java/androidx/ui/material/IconButton.kt
@@ -22,7 +22,7 @@
 import androidx.ui.foundation.Clickable
 import androidx.ui.foundation.ContentGravity
 import androidx.ui.foundation.selection.Toggleable
-import androidx.ui.layout.LayoutSize
+import androidx.ui.layout.preferredSize
 import androidx.ui.material.ripple.ripple
 import androidx.ui.unit.dp
 
@@ -102,4 +102,4 @@
 // TODO: b/149691127 investigate our strategy around accessibility touch targets, and remove
 // per-component definitions of this size.
 // Diameter of the IconButton, to allow for correct minimum touch target size for accessibility
-private val IconButtonSizeModifier = LayoutSize(48.dp)
+private val IconButtonSizeModifier = Modifier.preferredSize(48.dp)
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 9317581..0faccab 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
@@ -29,12 +29,12 @@
 import androidx.ui.foundation.ProvideTextStyle
 import androidx.ui.foundation.Text
 import androidx.ui.graphics.ImageAsset
-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.layout.RowAlign
+import androidx.ui.layout.padding
+import androidx.ui.layout.preferredHeightIn
+import androidx.ui.layout.preferredSizeIn
+import androidx.ui.layout.preferredWidthIn
 import androidx.ui.material.ripple.ripple
 import androidx.ui.text.TextStyle
 import androidx.ui.text.style.TextOverflow
@@ -196,11 +196,11 @@
         trailing: @Composable() (() -> Unit)?
     ) {
         val minHeight = if (icon == null) MinHeight else MinHeightWithIcon
-        Row(LayoutHeight.Min(minHeight)) {
+        Row(Modifier.preferredHeightIn(minHeight = minHeight)) {
             if (icon != null) {
                 Box(
-                    modifier = LayoutGravity.Center +
-                            LayoutWidth.Min(IconLeftPadding + IconMinPaddedWidth),
+                    Modifier.gravity(RowAlign.Center)
+                        .preferredWidthIn(minWidth = IconLeftPadding + IconMinPaddedWidth),
                     gravity = ContentGravity.CenterStart,
                     paddingStart = IconLeftPadding,
                     paddingTop = IconVerticalPadding,
@@ -209,14 +209,15 @@
                 )
             }
             Box(
-                modifier = LayoutWeight(1f) + LayoutGravity.Center +
-                        LayoutPadding(start = ContentLeftPadding, end = ContentRightPadding),
+                Modifier.weight(1f)
+                    .gravity(RowAlign.Center)
+                    .padding(start = ContentLeftPadding, end = ContentRightPadding),
                 gravity = ContentGravity.CenterStart,
                 children = text
             )
             if (trailing != null) {
                 Box(
-                    LayoutGravity.Center,
+                    Modifier.gravity(RowAlign.Center),
                     paddingEnd = TrailingRightPadding,
                     children = trailing
                 )
@@ -254,15 +255,16 @@
         trailing: @Composable() (() -> Unit)?
     ) {
         val minHeight = if (icon == null) MinHeight else MinHeightWithIcon
-        Row(LayoutHeight.Min(minHeight)) {
-            val modifier = LayoutWeight(1f) + LayoutPadding(
-                start = ContentLeftPadding,
-                end = ContentRightPadding
-            )
+        Row(Modifier.preferredHeightIn(minHeight = minHeight)) {
+            val modifier = Modifier.weight(1f)
+                .padding(start = ContentLeftPadding, end = ContentRightPadding)
 
             if (icon != null) {
                 Box(
-                    LayoutSize.Min(IconLeftPadding + IconMinPaddedWidth, minHeight),
+                    Modifier.preferredSizeIn(
+                        minWidth = IconLeftPadding + IconMinPaddedWidth,
+                        minHeight = minHeight
+                    ),
                     gravity = ContentGravity.TopStart,
                     paddingStart = IconLeftPadding,
                     paddingTop = IconVerticalPadding,
@@ -309,7 +311,8 @@
                 ) {
                     Box(
                         // TODO(popam): find way to center and wrap content without minHeight
-                        LayoutHeight.Min(minHeight) + LayoutPadding(end = TrailingRightPadding),
+                        Modifier.preferredHeightIn(minHeight = minHeight)
+                            .padding(end = TrailingRightPadding),
                         gravity = ContentGravity.Center,
                         children = trailing
                     )
@@ -344,10 +347,11 @@
         overlineText: @Composable() (() -> Unit)?,
         trailing: @Composable() (() -> Unit)?
     ) {
-        Row(LayoutHeight.Min(MinHeight)) {
+        Row(Modifier.preferredHeightIn(minHeight = MinHeight)) {
             if (icon != null) {
+                val minSize = IconLeftPadding + IconMinPaddedWidth
                 Box(
-                    LayoutSize.Min(IconLeftPadding + IconMinPaddedWidth),
+                    Modifier.preferredSizeIn(minWidth = minSize, minHeight = minSize),
                     gravity = ContentGravity.CenterStart,
                     paddingStart = IconLeftPadding,
                     paddingTop = IconThreeLineVerticalPadding,
@@ -361,8 +365,8 @@
                     ThreeLineBaselineSecondOffset,
                     ThreeLineBaselineThirdOffset
                 ),
-                LayoutWeight(1f) +
-                        LayoutPadding(start = ContentLeftPadding, end = ContentRightPadding)
+                Modifier.weight(1f)
+                    .padding(start = ContentLeftPadding, end = ContentRightPadding)
             ) {
                 if (overlineText != null) overlineText()
                 text()
@@ -371,7 +375,7 @@
             if (trailing != null) {
                 OffsetToBaselineOrCenter(
                     ThreeLineBaselineFirstOffset - ThreeLineTrailingTopPadding,
-                    LayoutPadding(top = ThreeLineTrailingTopPadding, end = TrailingRightPadding),
+                    Modifier.padding(top = ThreeLineTrailingTopPadding, end = TrailingRightPadding),
                     trailing
                 )
             }
diff --git a/ui/ui-material/src/main/java/androidx/ui/material/ProgressIndicator.kt b/ui/ui-material/src/main/java/androidx/ui/material/ProgressIndicator.kt
index ac62427..27e1d0ec 100644
--- a/ui/ui-material/src/main/java/androidx/ui/material/ProgressIndicator.kt
+++ b/ui/ui-material/src/main/java/androidx/ui/material/ProgressIndicator.kt
@@ -38,8 +38,8 @@
 import androidx.ui.graphics.PaintingStyle
 import androidx.ui.graphics.StrokeCap
 import androidx.ui.graphics.vectormath.degrees
-import androidx.ui.layout.LayoutPadding
-import androidx.ui.layout.LayoutSize
+import androidx.ui.layout.padding
+import androidx.ui.layout.preferredSize
 import androidx.ui.unit.dp
 import kotlin.math.abs
 import kotlin.math.max
@@ -63,7 +63,7 @@
             color.copy(alpha = BackgroundOpacity),
             StrokeCap.butt
         )
-        Canvas(modifier + LayoutSize(LinearIndicatorWidth, StrokeWidth)) {
+        Canvas(modifier.preferredSize(LinearIndicatorWidth, StrokeWidth)) {
             drawLinearIndicatorBackground(backgroundPaint)
             drawLinearIndicator(0f, progress, paint)
         }
@@ -95,7 +95,7 @@
             color.copy(alpha = BackgroundOpacity),
             StrokeCap.butt
         )
-        Canvas(modifier + LayoutSize(LinearIndicatorWidth, StrokeWidth)) {
+        Canvas(modifier.preferredSize(LinearIndicatorWidth, StrokeWidth)) {
             drawLinearIndicatorBackground(backgroundPaint)
             if (firstLineHead - firstLineTail > 0) {
                 drawLinearIndicator(firstLineHead, firstLineTail, paint)
@@ -143,8 +143,9 @@
 ) {
     DeterminateProgressIndicator(progress = progress) {
         val paint = paint(color, StrokeCap.butt)
-        Canvas(modifier = modifier + LayoutPadding(CircularIndicatorPadding) +
-                LayoutSize(CircularIndicatorDiameter)
+        Canvas(
+            modifier.padding(CircularIndicatorPadding)
+                .preferredSize(CircularIndicatorDiameter)
         ) {
             // Start at 12 O'clock
             val startAngle = 270f
@@ -185,8 +186,9 @@
         startAngle += StartAngleOffset + currentRotationAngleOffset
         startAngle += baseRotation
 
-        Canvas(modifier = modifier + LayoutPadding(CircularIndicatorPadding) +
-                LayoutSize(CircularIndicatorDiameter)
+        Canvas(
+            modifier.padding(CircularIndicatorPadding)
+                .preferredSize(CircularIndicatorDiameter)
         ) {
             drawIndeterminateCircularIndicator(startAngle, sweep, paint)
         }
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 b6db517..cefcff2 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
@@ -23,6 +23,7 @@
 import androidx.ui.animation.ColorPropKey
 import androidx.ui.animation.DpPropKey
 import androidx.ui.animation.Transition
+import androidx.ui.core.Modifier
 import androidx.ui.foundation.Box
 import androidx.ui.foundation.Canvas
 import androidx.ui.foundation.CanvasScope
@@ -33,11 +34,11 @@
 import androidx.ui.graphics.Paint
 import androidx.ui.graphics.PaintingStyle
 import androidx.ui.layout.Column
-import androidx.ui.layout.LayoutPadding
-import androidx.ui.layout.LayoutSize
-import androidx.ui.layout.LayoutWidth
 import androidx.ui.layout.Row
 import androidx.ui.layout.Stack
+import androidx.ui.layout.fillMaxWidth
+import androidx.ui.layout.padding
+import androidx.ui.layout.preferredSize
 import androidx.ui.material.ripple.ripple
 import androidx.ui.semantics.Semantics
 import androidx.ui.text.TextStyle
@@ -160,12 +161,12 @@
         RadioGroupItem(selected = selected,  {
             // TODO: remove this Box when Ripple becomes a modifier.
             Box {
-                Row(LayoutWidth.Fill + LayoutPadding(DefaultRadioItemPadding)) {
+                Row(Modifier.fillMaxWidth().padding(DefaultRadioItemPadding)) {
                     RadioButton(selected = selected,  color = radioColor)
                     Text(
                         text = text,
                         style = MaterialTheme.typography.body1.merge(textStyle),
-                        modifier = LayoutPadding(start = DefaultRadioLabelOffset)
+                        modifier = Modifier.padding(start = DefaultRadioLabelOffset)
                     )
                 }
             }
@@ -205,7 +206,7 @@
                 generateTransitionDefinition(color, unselectedColor)
             }
             Transition(definition = definition, toState = selected) { state ->
-                Canvas(modifier = LayoutPadding(RadioButtonPadding) + LayoutSize(RadioButtonSize)) {
+                Canvas(Modifier.padding(RadioButtonPadding).preferredSize(RadioButtonSize)) {
                     drawRadio(
                         state[ColorProp],
                         state[OuterRadiusProp],
@@ -261,10 +262,10 @@
 private val GapProp = DpPropKey()
 private val ColorProp = ColorPropKey()
 
-private val RadiusClosureDuration = 150
-private val PulseDuration = 100
-private val GapDuration = 150
-private val TotalDuration = RadiusClosureDuration + PulseDuration + GapDuration
+private const val RadiusClosureDuration = 150
+private const val PulseDuration = 100
+private const val GapDuration = 150
+private const val TotalDuration = RadiusClosureDuration + PulseDuration + GapDuration
 
 private fun generateTransitionDefinition(
     selectedColor: Color,
@@ -328,7 +329,7 @@
 private val RadioStrokeWidth = 2.dp
 // TODO(malkov): random numbers for now to produce radio as in material comp.
 private val DefaultGap = 3.dp
-private val UnselectedOpacity = 0.6f
+private const val UnselectedOpacity = 0.6f
 
 // for animations
 private val OuterOffsetDuringAnimation = 2.dp
diff --git a/ui/ui-material/src/main/java/androidx/ui/material/Scaffold.kt b/ui/ui-material/src/main/java/androidx/ui/material/Scaffold.kt
index 750b570..a021b61 100644
--- a/ui/ui-material/src/main/java/androidx/ui/material/Scaffold.kt
+++ b/ui/ui-material/src/main/java/androidx/ui/material/Scaffold.kt
@@ -20,16 +20,17 @@
 import androidx.compose.Model
 import androidx.compose.onDispose
 import androidx.compose.remember
+import androidx.ui.core.Alignment
 import androidx.ui.core.DensityAmbient
 import androidx.ui.core.Layout
 import androidx.ui.core.Modifier
 import androidx.ui.core.onPositioned
 import androidx.ui.layout.Column
-import androidx.ui.layout.LayoutGravity
-import androidx.ui.layout.LayoutPadding
-import androidx.ui.layout.LayoutSize
-import androidx.ui.layout.LayoutWidth
+import androidx.ui.layout.ColumnAlign
 import androidx.ui.layout.Stack
+import androidx.ui.layout.fillMaxSize
+import androidx.ui.layout.fillMaxWidth
+import androidx.ui.layout.padding
 import androidx.ui.material.BottomAppBar.FabConfiguration
 import androidx.ui.material.BottomAppBar.FabDockedPosition
 import androidx.ui.material.Scaffold.FabPosition
@@ -131,12 +132,12 @@
 ) {
     val child = @Composable {
         Surface(color = MaterialTheme.colors.background) {
-            Column(LayoutSize.Fill) {
+            Column(Modifier.fillMaxSize()) {
                 if (topAppBar != null) ScaffoldSlot(children = topAppBar)
-                Stack(modifier = LayoutWeight(1f, fill = true)) {
-                    ScaffoldContent(LayoutSize.Fill, scaffoldState, bodyContent)
+                Stack(Modifier.weight(1f, fill = true)) {
+                    ScaffoldContent(Modifier.fillMaxSize(), scaffoldState, bodyContent)
                     ScaffoldBottom(
-                        modifier = LayoutGravity.BottomCenter,
+                        Modifier.gravity(Alignment.BottomCenter),
                         scaffoldState = scaffoldState,
                         fabPos = floatingActionButtonPosition,
                         fab = floatingActionButton,
@@ -160,6 +161,9 @@
     }
 }
 
+private fun FabPosition.toColumnAlign() =
+    if (this == FabPosition.End) ColumnAlign.End else ColumnAlign.Center
+
 /**
  * Scaffold part that is on the bottom. Includes FAB and BottomBar
  */
@@ -172,13 +176,15 @@
     bottomBar: @Composable() ((FabConfiguration?) -> Unit)? = null
 ) {
     if (fabPos != FabPosition.CenterDocked && fabPos != FabPosition.EndDocked) {
-        Column(modifier = modifier + LayoutWidth.Fill) {
+        Column(modifier.fillMaxWidth()) {
             if (fab != null) {
-                val fabSpacing =
-                    LayoutPadding(bottom = FabSpacing, start = FabSpacing, end = FabSpacing)
-                val gravity =
-                    if (fabPos == FabPosition.End) LayoutGravity.End else LayoutGravity.Center
-                FabContainer(fabPos, gravity + fabSpacing, scaffoldState, fab)
+                FabContainer(
+                    fabPos,
+                    Modifier.gravity(fabPos.toColumnAlign())
+                        .padding(start = FabSpacing, end = FabSpacing, bottom = FabSpacing),
+                    scaffoldState,
+                    fab
+                )
             }
             if (bottomBar != null) {
                 BottomBarContainer(scaffoldState, bottomBar)
@@ -249,7 +255,7 @@
         val bottomSpace = with(DensityAmbient.current) {
             scaffoldState.bottomBarSize?.height?.toDp() ?: 0.dp
         }
-        content(LayoutPadding(bottom = bottomSpace))
+        content(Modifier.padding(bottom = bottomSpace))
     }
 }
 
@@ -260,7 +266,7 @@
 ) {
     onDispose(callback = { scaffoldState.bottomBarSize = null })
     ScaffoldSlot(
-        modifier = onPositioned {
+        modifier = Modifier.onPositioned {
             if (scaffoldState.bottomBarSize != it.size) scaffoldState.bottomBarSize = it.size
         },
         children = {
@@ -276,26 +282,28 @@
     scaffoldState: ScaffoldState,
     fab: @Composable() () -> Unit
 ) {
-    onDispose(callback = { scaffoldState.fabConfiguration = null })
-    val  { coords ->
-        // TODO(mount): This should probably use bounding box rather than position/size
-        val position = coords.parentCoordinates?.childToLocal(coords, PxPosition.Origin)
-            ?: PxPosition.Origin
-        val config =
-            when (fabPos) {
-                FabPosition.CenterDocked -> {
-                    FabConfiguration(coords.size, position, FabDockedPosition.Center)
+    onDispose { scaffoldState.fabConfiguration = null }
+    ScaffoldSlot(
+        modifier = modifier.onPositioned { coords ->
+            // TODO(mount): This should probably use bounding box rather than position/size
+            val position = coords.parentCoordinates?.childToLocal(coords, PxPosition.Origin)
+                ?: PxPosition.Origin
+            val config =
+                when (fabPos) {
+                    FabPosition.CenterDocked -> {
+                        FabConfiguration(coords.size, position, FabDockedPosition.Center)
+                    }
+                    FabPosition.EndDocked -> {
+                        FabConfiguration(coords.size, position, FabDockedPosition.End)
+                    }
+                    else -> {
+                        null
+                    }
                 }
-                FabPosition.EndDocked -> {
-                    FabConfiguration(coords.size, position, FabDockedPosition.End)
-                }
-                else -> {
-                    null
-                }
-            }
-        if (scaffoldState.fabConfiguration != config) scaffoldState.fabConfiguration = config
-    }
-    ScaffoldSlot(modifier = modifier + onPositioned, children = fab)
+            if (scaffoldState.fabConfiguration != config) scaffoldState.fabConfiguration = config
+        },
+        children = fab
+    )
 }
 
 /**
diff --git a/ui/ui-material/src/main/java/androidx/ui/material/Slider.kt b/ui/ui-material/src/main/java/androidx/ui/material/Slider.kt
index 3ad0f50..15c86e8 100644
--- a/ui/ui-material/src/main/java/androidx/ui/material/Slider.kt
+++ b/ui/ui-material/src/main/java/androidx/ui/material/Slider.kt
@@ -26,6 +26,7 @@
 import androidx.compose.state
 import androidx.ui.animation.AnimatedFloatModel
 import androidx.ui.animation.asDisposableClock
+import androidx.ui.core.Alignment
 import androidx.ui.core.AnimationClockAmbient
 import androidx.ui.core.DensityAmbient
 import androidx.ui.core.Modifier
@@ -44,13 +45,13 @@
 import androidx.ui.graphics.PaintingStyle
 import androidx.ui.graphics.PointMode
 import androidx.ui.graphics.StrokeCap
-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.Spacer
 import androidx.ui.layout.Stack
+import androidx.ui.layout.fillMaxSize
+import androidx.ui.layout.padding
+import androidx.ui.layout.preferredHeightIn
+import androidx.ui.layout.preferredSize
+import androidx.ui.layout.preferredWidthIn
 import androidx.ui.material.ripple.ripple
 import androidx.ui.semantics.Semantics
 import androidx.ui.semantics.accessibilityValue
@@ -255,15 +256,16 @@
             val thumbSize = ThumbRadius * 2
             val fraction = with(position) { calcFraction(startValue, endValue, this.value) }
             val offset = (widthDp - thumbSize) * fraction
-            Track(LayoutGravity.CenterStart + LayoutSize.Fill, color, position)
-            Box(LayoutGravity.CenterStart + LayoutPadding(start = offset)) {
+            val center = Modifier.gravity(Alignment.CenterStart)
+            Track(center.fillMaxSize(), color, position)
+            Box(center.padding(start = offset)) {
                 Surface(
                     shape = CircleShape,
                     color = color,
                     elevation = if (pressed) 6.dp else 1.dp,
                     modifier = ripple(bounded = false)
                 ) {
-                    Spacer(LayoutSize(thumbSize, thumbSize))
+                    Spacer(Modifier.preferredSize(thumbSize, thumbSize))
                 }
             }
         }
@@ -346,7 +348,8 @@
 private val SliderHeight = 48.dp
 private val SliderMinWidth = 144.dp // TODO: clarify min width
 private val DefaultSliderConstraints =
-    LayoutWidth.Min(SliderMinWidth) + LayoutHeight.Max(SliderHeight)
+    Modifier.preferredWidthIn(minWidth = SliderMinWidth)
+        .preferredHeightIn(maxHeight = SliderHeight)
 private val InactiveTrackColorAlpha = 0.24f
 private val TickColorAlpha = 0.54f
 private val SliderToTickAnimation = TweenBuilder<Float>().apply { duration = 100 }
diff --git a/ui/ui-material/src/main/java/androidx/ui/material/Snackbar.kt b/ui/ui-material/src/main/java/androidx/ui/material/Snackbar.kt
index 14a25cf..3cbf972 100644
--- a/ui/ui-material/src/main/java/androidx/ui/material/Snackbar.kt
+++ b/ui/ui-material/src/main/java/androidx/ui/material/Snackbar.kt
@@ -20,7 +20,6 @@
 import androidx.ui.core.FirstBaseline
 import androidx.ui.core.LastBaseline
 import androidx.ui.core.Layout
-import androidx.ui.core.LayoutTag
 import androidx.ui.core.Modifier
 import androidx.ui.core.tag
 import androidx.ui.foundation.Box
@@ -30,9 +29,9 @@
 import androidx.ui.graphics.compositeOver
 import androidx.ui.layout.AlignmentLineOffset
 import androidx.ui.layout.Column
-import androidx.ui.layout.LayoutGravity
-import androidx.ui.layout.LayoutPadding
-import androidx.ui.layout.LayoutWidth
+import androidx.ui.layout.ColumnAlign
+import androidx.ui.layout.fillMaxWidth
+import androidx.ui.layout.padding
 import androidx.ui.unit.IntPx
 import androidx.ui.unit.dp
 import androidx.ui.unit.ipx
@@ -94,7 +93,7 @@
 private fun TextOnlySnackbar(text: @Composable() () -> Unit) {
     Layout(
         text,
-        modifier = LayoutPadding(start = HorizontalSpacing, end = HorizontalSpacing)
+        modifier = Modifier.padding(start = HorizontalSpacing, end = HorizontalSpacing)
     ) { measurables, constraints, _ ->
         require(measurables.size == 1) {
             "text for Snackbar expected to have exactly only one child"
@@ -117,18 +116,19 @@
     action: @Composable() () -> Unit
 ) {
     Column(
-        modifier = LayoutWidth.Fill + LayoutPadding(
-            start = HorizontalSpacing,
-            end = HorizontalSpacingButtonSide,
-            bottom = SeparateButtonExtraY
-        )
+        modifier = Modifier.fillMaxWidth()
+            .padding(
+                start = HorizontalSpacing,
+                end = HorizontalSpacingButtonSide,
+                bottom = SeparateButtonExtraY
+            )
     ) {
         AlignmentLineOffset(alignmentLine = LastBaseline, after = LongButtonVerticalOffset) {
             AlignmentLineOffset(alignmentLine = FirstBaseline, before = HeightToFirstLine) {
-                Box(LayoutPadding(end = HorizontalSpacingButtonSide), children = text)
+                Box(Modifier.padding(end = HorizontalSpacingButtonSide), children = text)
             }
         }
-        Box(modifier = LayoutGravity.End, children = action)
+        Box(Modifier.gravity(ColumnAlign.End), children = action)
     }
 }
 
@@ -141,10 +141,10 @@
     val actionTag = "action"
     Layout(
         {
-            Box(LayoutTag(textTag), children = text)
-            Box(LayoutTag(actionTag), children = action)
+            Box(Modifier.tag(textTag), children = text)
+            Box(Modifier.tag(actionTag), children = action)
         },
-        modifier = LayoutPadding(start = HorizontalSpacing, end = HorizontalSpacingButtonSide)
+        modifier = Modifier.padding(start = HorizontalSpacing, end = HorizontalSpacingButtonSide)
     ) { measurables, constraints, _ ->
         val buttonPlaceable = measurables.first { it.tag == actionTag }.measure(constraints)
         val textMaxWidth =
diff --git a/ui/ui-material/src/main/java/androidx/ui/material/Surface.kt b/ui/ui-material/src/main/java/androidx/ui/material/Surface.kt
index b1b8b17..cc550355 100644
--- a/ui/ui-material/src/main/java/androidx/ui/material/Surface.kt
+++ b/ui/ui-material/src/main/java/androidx/ui/material/Surface.kt
@@ -19,14 +19,14 @@
 import androidx.compose.Composable
 import androidx.ui.core.Layout
 import androidx.ui.core.Modifier
-import androidx.ui.core.drawClip
+import androidx.ui.core.clip
 import androidx.ui.core.drawShadow
 import androidx.ui.foundation.Border
-import androidx.ui.foundation.DrawBackground
 import androidx.ui.foundation.DrawBorder
 import androidx.ui.foundation.ProvideContentColor
 import androidx.ui.foundation.ProvideTextStyle
 import androidx.ui.foundation.Text
+import androidx.ui.foundation.drawBackground
 import androidx.ui.foundation.shape.RectangleShape
 import androidx.ui.graphics.Color
 import androidx.ui.graphics.Shape
@@ -86,12 +86,15 @@
     elevation: Dp = 0.dp,
     children: @Composable() () -> Unit
 ) {
-    val borderModifier = if (border != null) DrawBorder(border, shape) else Modifier.None
-    val shadowModifier = drawShadow(shape = shape, elevation = elevation, clipToOutline = false)
-    val backgroundColor = getBackgroundColorForElevation(color, elevation)
-    val background = DrawBackground(shape = shape, color = backgroundColor)
-    val clip = drawClip(shape)
-    SurfaceLayout(modifier + shadowModifier + borderModifier + background + clip) {
+    SurfaceLayout(
+        modifier.drawShadow(shape = shape, elevation = elevation, clipToOutline = false)
+            .plus(if (border != null) DrawBorder(border, shape) else Modifier.None)
+            .drawBackground(
+                color = getBackgroundColorForElevation(color, elevation),
+                shape = shape
+            )
+            .clip(shape)
+    ) {
         ProvideContentColor(contentColor, children)
     }
 }
diff --git a/ui/ui-material/src/main/java/androidx/ui/material/Switch.kt b/ui/ui-material/src/main/java/androidx/ui/material/Switch.kt
index d6c534a..0daa58b 100644
--- a/ui/ui-material/src/main/java/androidx/ui/material/Switch.kt
+++ b/ui/ui-material/src/main/java/androidx/ui/material/Switch.kt
@@ -29,9 +29,9 @@
 import androidx.ui.graphics.Color
 import androidx.ui.graphics.Paint
 import androidx.ui.graphics.StrokeCap
-import androidx.ui.layout.LayoutPadding
-import androidx.ui.layout.LayoutSize
 import androidx.ui.layout.Stack
+import androidx.ui.layout.padding
+import androidx.ui.layout.preferredSize
 import androidx.ui.material.internal.StateDraggable
 import androidx.ui.material.ripple.ripple
 import androidx.ui.semantics.Semantics
@@ -64,7 +64,7 @@
                 enabled = enabled,
                 modifier = ripple(bounded = false, enabled = enabled)
             ) {
-                SwitchImpl(checked, onCheckedChange, color, LayoutPadding(DefaultSwitchPadding))
+                SwitchImpl(checked, onCheckedChange, color, Modifier.padding(DefaultSwitchPadding))
             }
         }
     }
@@ -110,7 +110,7 @@
     } else {
         MaterialTheme.colors.onSurface.copy(alpha = UncheckedTrackOpacity)
     }
-    Canvas(modifier + LayoutSize(SwitchWidth, SwitchHeight)) {
+    Canvas(modifier.preferredSize(SwitchWidth, SwitchHeight)) {
         drawTrack(trackColor)
         drawThumb(thumbValue.value, thumbColor)
     }
@@ -146,8 +146,8 @@
     drawCircle(Offset(x, centerHeight.value), thumbRadius, paint)
 }
 
-private val CheckedTrackOpacity = 0.54f
-private val UncheckedTrackOpacity = 0.38f
+private const val CheckedTrackOpacity = 0.54f
+private const val UncheckedTrackOpacity = 0.38f
 
 private val TrackWidth = 34.dp
 private val TrackStrokeWidth = 14.dp
diff --git a/ui/ui-material/src/main/java/androidx/ui/material/Tab.kt b/ui/ui-material/src/main/java/androidx/ui/material/Tab.kt
index 957015e..f9276de 100644
--- a/ui/ui-material/src/main/java/androidx/ui/material/Tab.kt
+++ b/ui/ui-material/src/main/java/androidx/ui/material/Tab.kt
@@ -26,12 +26,12 @@
 import androidx.ui.animation.ColorPropKey
 import androidx.ui.animation.PxPropKey
 import androidx.ui.animation.Transition
+import androidx.ui.core.Alignment
 import androidx.ui.core.Constraints
 import androidx.ui.core.DensityAmbient
 import androidx.ui.core.FirstBaseline
 import androidx.ui.core.LastBaseline
 import androidx.ui.core.Layout
-import androidx.ui.core.LayoutTag
 import androidx.ui.core.Modifier
 import androidx.ui.core.Placeable
 import androidx.ui.core.WithConstraints
@@ -46,12 +46,12 @@
 import androidx.ui.foundation.contentColor
 import androidx.ui.foundation.selection.MutuallyExclusiveSetItem
 import androidx.ui.graphics.Color
-import androidx.ui.layout.LayoutGravity
-import androidx.ui.layout.LayoutPadding
-import androidx.ui.layout.LayoutSize
-import androidx.ui.layout.LayoutWidth
 import androidx.ui.layout.Row
 import androidx.ui.layout.Stack
+import androidx.ui.layout.fillMaxSize
+import androidx.ui.layout.fillMaxWidth
+import androidx.ui.layout.padding
+import androidx.ui.layout.preferredWidth
 import androidx.ui.material.TabRow.TabPosition
 import androidx.ui.material.ripple.ripple
 import androidx.ui.text.style.TextAlign
@@ -191,12 +191,12 @@
         }
     }
 
-    Stack(LayoutWidth.Fill) {
+    Stack(Modifier.fillMaxWidth()) {
         Row {
-            tabs(LayoutWeight(1f))
+            tabs(Modifier.weight(1f))
         }
-        Box(LayoutGravity.BottomCenter + LayoutWidth.Fill, children = divider)
-        Box(LayoutGravity.Stretch) {
+        Box(Modifier.gravity(Alignment.BottomCenter).fillMaxWidth(), children = divider)
+        Box(Modifier.matchParent()) {
             indicatorContainer(tabPositions)
         }
     }
@@ -231,15 +231,15 @@
 
     HorizontalScroller(
         scrollerPosition = scrollableTabData.position,
-        modifier = LayoutWidth.Fill
+        modifier = Modifier.fillMaxWidth()
     ) {
         val indicatorTag = "indicator"
         val dividerTag = "divider"
         Layout(
             {
                 tabs()
-                Box(LayoutTag(indicatorTag), children = indicator)
-                Box(LayoutTag(dividerTag), children = divider)
+                Box(Modifier.tag(indicatorTag), children = indicator)
+                Box(Modifier.tag(dividerTag), children = divider)
             }
         ) { measurables, constraints, _ ->
             val tabPlaceables = mutableListOf<Pair<Placeable, IntPx>>()
@@ -382,11 +382,11 @@
             tabPositions[selectedIndex].width.toDp()
         }
 
-        Box(LayoutSize.Fill, gravity = ContentGravity.BottomStart) {
+        Box(Modifier.fillMaxSize(), gravity = ContentGravity.BottomStart) {
             IndicatorTransition(tabPositions, selectedIndex) { indicatorOffset ->
                 val offset = with(DensityAmbient.current) { indicatorOffset.toDp() }
                 Box(
-                    modifier = LayoutPadding(start = offset) + LayoutWidth(currentTabWidth),
+                    Modifier.padding(start = offset).preferredWidth(currentTabWidth),
                     children = indicator
                 )
             }
@@ -508,7 +508,7 @@
     children: @Composable() () -> Unit
 ) {
     MutuallyExclusiveSetItem(selected = selected,  modifier = ripple()) {
-        Box(modifier + LayoutWidth.Fill, gravity = ContentGravity.Center, children = children)
+        Box(modifier.fillMaxWidth(), gravity = ContentGravity.Center, children = children)
     }
 }
 
@@ -570,12 +570,12 @@
     Layout(
         {
             Box(
-                LayoutTag("text"),
+                Modifier.tag("text"),
                 paddingStart = HorizontalTextPadding,
                 paddingEnd = HorizontalTextPadding,
                 children = text
             )
-            Box(LayoutTag("icon"), children = icon)
+            Box(Modifier.tag("icon"), children = icon)
         }
     ) { measurables, constraints, _ ->
         val textPlaceable = measurables.first { it.tag == "text" }.measure(