Refactors FAB APIs to accept composable lambdas instead of primitives
Now we have two APIs:
FloatingActionButton that accepts `children`, this should typically just
be an Icon although custom content is welcome
ExtendedFloatingActionButton that accepts `text` and an optional `icon`
Bug: b/150285641
Bug: b/150695521
Test: FloatingActionButtonTest, demos
Relnote: "Refactored FloatingActionButton APIs to accept composable
lambdas instead of primitives. See updated samples for usage
information."
Change-Id: I0062288bd79e894f542d53882ae125404dd29ae2
diff --git a/ui/ui-material/api/0.1.0-dev08.txt b/ui/ui-material/api/0.1.0-dev08.txt
index 403db66..670c566 100644
--- a/ui/ui-material/api/0.1.0-dev08.txt
+++ b/ui/ui-material/api/0.1.0-dev08.txt
@@ -168,9 +168,8 @@
}
public final class FloatingActionButtonKt {
- method public static void FloatingActionButton(kotlin.jvm.functions.Function0<kotlin.Unit> onClick, androidx.ui.core.Modifier modifier = Modifier.None, androidx.ui.unit.Dp minSize = androidx.ui.material.FloatingActionButtonKt.FabSize, androidx.ui.graphics.Shape shape = CircleShape, androidx.ui.graphics.Color color = MaterialTheme.colors().primary, androidx.ui.unit.Dp elevation = 6.dp, kotlin.jvm.functions.Function0<kotlin.Unit> children);
- method public static void FloatingActionButton(androidx.ui.graphics.ImageAsset icon, kotlin.jvm.functions.Function0<kotlin.Unit> onClick, androidx.ui.core.Modifier modifier = Modifier.None, androidx.ui.graphics.Shape shape = CircleShape, androidx.ui.graphics.Color color = MaterialTheme.colors().primary, androidx.ui.unit.Dp elevation = 6.dp);
- method public static void FloatingActionButton(String text, kotlin.jvm.functions.Function0<kotlin.Unit> onClick, androidx.ui.core.Modifier modifier = Modifier.None, androidx.ui.graphics.ImageAsset? icon = null, androidx.ui.text.TextStyle? textStyle = null, androidx.ui.graphics.Color color = MaterialTheme.colors().primary, androidx.ui.unit.Dp elevation = 6.dp);
+ method public static void ExtendedFloatingActionButton(kotlin.jvm.functions.Function0<kotlin.Unit> text, kotlin.jvm.functions.Function0<kotlin.Unit> onClick, androidx.ui.core.Modifier modifier = Modifier.None, kotlin.jvm.functions.Function0<kotlin.Unit>? icon = null, androidx.ui.graphics.Shape shape = CircleShape, androidx.ui.graphics.Color backgroundColor = MaterialTheme.colors().primary, androidx.ui.graphics.Color contentColor = contentColorFor(backgroundColor), androidx.ui.unit.Dp elevation = 6.dp);
+ method public static void FloatingActionButton(kotlin.jvm.functions.Function0<kotlin.Unit> onClick, androidx.ui.core.Modifier modifier = Modifier.None, androidx.ui.graphics.Shape shape = CircleShape, androidx.ui.graphics.Color backgroundColor = MaterialTheme.colors().primary, androidx.ui.graphics.Color contentColor = contentColorFor(backgroundColor), androidx.ui.unit.Dp elevation = 6.dp, kotlin.jvm.functions.Function0<kotlin.Unit> children);
}
public final class IconButtonKt {
diff --git a/ui/ui-material/api/current.txt b/ui/ui-material/api/current.txt
index 403db66..670c566 100644
--- a/ui/ui-material/api/current.txt
+++ b/ui/ui-material/api/current.txt
@@ -168,9 +168,8 @@
}
public final class FloatingActionButtonKt {
- method public static void FloatingActionButton(kotlin.jvm.functions.Function0<kotlin.Unit> onClick, androidx.ui.core.Modifier modifier = Modifier.None, androidx.ui.unit.Dp minSize = androidx.ui.material.FloatingActionButtonKt.FabSize, androidx.ui.graphics.Shape shape = CircleShape, androidx.ui.graphics.Color color = MaterialTheme.colors().primary, androidx.ui.unit.Dp elevation = 6.dp, kotlin.jvm.functions.Function0<kotlin.Unit> children);
- method public static void FloatingActionButton(androidx.ui.graphics.ImageAsset icon, kotlin.jvm.functions.Function0<kotlin.Unit> onClick, androidx.ui.core.Modifier modifier = Modifier.None, androidx.ui.graphics.Shape shape = CircleShape, androidx.ui.graphics.Color color = MaterialTheme.colors().primary, androidx.ui.unit.Dp elevation = 6.dp);
- method public static void FloatingActionButton(String text, kotlin.jvm.functions.Function0<kotlin.Unit> onClick, androidx.ui.core.Modifier modifier = Modifier.None, androidx.ui.graphics.ImageAsset? icon = null, androidx.ui.text.TextStyle? textStyle = null, androidx.ui.graphics.Color color = MaterialTheme.colors().primary, androidx.ui.unit.Dp elevation = 6.dp);
+ method public static void ExtendedFloatingActionButton(kotlin.jvm.functions.Function0<kotlin.Unit> text, kotlin.jvm.functions.Function0<kotlin.Unit> onClick, androidx.ui.core.Modifier modifier = Modifier.None, kotlin.jvm.functions.Function0<kotlin.Unit>? icon = null, androidx.ui.graphics.Shape shape = CircleShape, androidx.ui.graphics.Color backgroundColor = MaterialTheme.colors().primary, androidx.ui.graphics.Color contentColor = contentColorFor(backgroundColor), androidx.ui.unit.Dp elevation = 6.dp);
+ method public static void FloatingActionButton(kotlin.jvm.functions.Function0<kotlin.Unit> onClick, androidx.ui.core.Modifier modifier = Modifier.None, androidx.ui.graphics.Shape shape = CircleShape, androidx.ui.graphics.Color backgroundColor = MaterialTheme.colors().primary, androidx.ui.graphics.Color contentColor = contentColorFor(backgroundColor), androidx.ui.unit.Dp elevation = 6.dp, kotlin.jvm.functions.Function0<kotlin.Unit> children);
}
public final class IconButtonKt {
diff --git a/ui/ui-material/api/public_plus_experimental_0.1.0-dev08.txt b/ui/ui-material/api/public_plus_experimental_0.1.0-dev08.txt
index 403db66..670c566 100644
--- a/ui/ui-material/api/public_plus_experimental_0.1.0-dev08.txt
+++ b/ui/ui-material/api/public_plus_experimental_0.1.0-dev08.txt
@@ -168,9 +168,8 @@
}
public final class FloatingActionButtonKt {
- method public static void FloatingActionButton(kotlin.jvm.functions.Function0<kotlin.Unit> onClick, androidx.ui.core.Modifier modifier = Modifier.None, androidx.ui.unit.Dp minSize = androidx.ui.material.FloatingActionButtonKt.FabSize, androidx.ui.graphics.Shape shape = CircleShape, androidx.ui.graphics.Color color = MaterialTheme.colors().primary, androidx.ui.unit.Dp elevation = 6.dp, kotlin.jvm.functions.Function0<kotlin.Unit> children);
- method public static void FloatingActionButton(androidx.ui.graphics.ImageAsset icon, kotlin.jvm.functions.Function0<kotlin.Unit> onClick, androidx.ui.core.Modifier modifier = Modifier.None, androidx.ui.graphics.Shape shape = CircleShape, androidx.ui.graphics.Color color = MaterialTheme.colors().primary, androidx.ui.unit.Dp elevation = 6.dp);
- method public static void FloatingActionButton(String text, kotlin.jvm.functions.Function0<kotlin.Unit> onClick, androidx.ui.core.Modifier modifier = Modifier.None, androidx.ui.graphics.ImageAsset? icon = null, androidx.ui.text.TextStyle? textStyle = null, androidx.ui.graphics.Color color = MaterialTheme.colors().primary, androidx.ui.unit.Dp elevation = 6.dp);
+ method public static void ExtendedFloatingActionButton(kotlin.jvm.functions.Function0<kotlin.Unit> text, kotlin.jvm.functions.Function0<kotlin.Unit> onClick, androidx.ui.core.Modifier modifier = Modifier.None, kotlin.jvm.functions.Function0<kotlin.Unit>? icon = null, androidx.ui.graphics.Shape shape = CircleShape, androidx.ui.graphics.Color backgroundColor = MaterialTheme.colors().primary, androidx.ui.graphics.Color contentColor = contentColorFor(backgroundColor), androidx.ui.unit.Dp elevation = 6.dp);
+ method public static void FloatingActionButton(kotlin.jvm.functions.Function0<kotlin.Unit> onClick, androidx.ui.core.Modifier modifier = Modifier.None, androidx.ui.graphics.Shape shape = CircleShape, androidx.ui.graphics.Color backgroundColor = MaterialTheme.colors().primary, androidx.ui.graphics.Color contentColor = contentColorFor(backgroundColor), androidx.ui.unit.Dp elevation = 6.dp, kotlin.jvm.functions.Function0<kotlin.Unit> children);
}
public final class IconButtonKt {
diff --git a/ui/ui-material/api/public_plus_experimental_current.txt b/ui/ui-material/api/public_plus_experimental_current.txt
index 403db66..670c566 100644
--- a/ui/ui-material/api/public_plus_experimental_current.txt
+++ b/ui/ui-material/api/public_plus_experimental_current.txt
@@ -168,9 +168,8 @@
}
public final class FloatingActionButtonKt {
- method public static void FloatingActionButton(kotlin.jvm.functions.Function0<kotlin.Unit> onClick, androidx.ui.core.Modifier modifier = Modifier.None, androidx.ui.unit.Dp minSize = androidx.ui.material.FloatingActionButtonKt.FabSize, androidx.ui.graphics.Shape shape = CircleShape, androidx.ui.graphics.Color color = MaterialTheme.colors().primary, androidx.ui.unit.Dp elevation = 6.dp, kotlin.jvm.functions.Function0<kotlin.Unit> children);
- method public static void FloatingActionButton(androidx.ui.graphics.ImageAsset icon, kotlin.jvm.functions.Function0<kotlin.Unit> onClick, androidx.ui.core.Modifier modifier = Modifier.None, androidx.ui.graphics.Shape shape = CircleShape, androidx.ui.graphics.Color color = MaterialTheme.colors().primary, androidx.ui.unit.Dp elevation = 6.dp);
- method public static void FloatingActionButton(String text, kotlin.jvm.functions.Function0<kotlin.Unit> onClick, androidx.ui.core.Modifier modifier = Modifier.None, androidx.ui.graphics.ImageAsset? icon = null, androidx.ui.text.TextStyle? textStyle = null, androidx.ui.graphics.Color color = MaterialTheme.colors().primary, androidx.ui.unit.Dp elevation = 6.dp);
+ method public static void ExtendedFloatingActionButton(kotlin.jvm.functions.Function0<kotlin.Unit> text, kotlin.jvm.functions.Function0<kotlin.Unit> onClick, androidx.ui.core.Modifier modifier = Modifier.None, kotlin.jvm.functions.Function0<kotlin.Unit>? icon = null, androidx.ui.graphics.Shape shape = CircleShape, androidx.ui.graphics.Color backgroundColor = MaterialTheme.colors().primary, androidx.ui.graphics.Color contentColor = contentColorFor(backgroundColor), androidx.ui.unit.Dp elevation = 6.dp);
+ method public static void FloatingActionButton(kotlin.jvm.functions.Function0<kotlin.Unit> onClick, androidx.ui.core.Modifier modifier = Modifier.None, androidx.ui.graphics.Shape shape = CircleShape, androidx.ui.graphics.Color backgroundColor = MaterialTheme.colors().primary, androidx.ui.graphics.Color contentColor = contentColorFor(backgroundColor), androidx.ui.unit.Dp elevation = 6.dp, kotlin.jvm.functions.Function0<kotlin.Unit> children);
}
public final class IconButtonKt {
diff --git a/ui/ui-material/api/restricted_0.1.0-dev08.txt b/ui/ui-material/api/restricted_0.1.0-dev08.txt
index 403db66..670c566 100644
--- a/ui/ui-material/api/restricted_0.1.0-dev08.txt
+++ b/ui/ui-material/api/restricted_0.1.0-dev08.txt
@@ -168,9 +168,8 @@
}
public final class FloatingActionButtonKt {
- method public static void FloatingActionButton(kotlin.jvm.functions.Function0<kotlin.Unit> onClick, androidx.ui.core.Modifier modifier = Modifier.None, androidx.ui.unit.Dp minSize = androidx.ui.material.FloatingActionButtonKt.FabSize, androidx.ui.graphics.Shape shape = CircleShape, androidx.ui.graphics.Color color = MaterialTheme.colors().primary, androidx.ui.unit.Dp elevation = 6.dp, kotlin.jvm.functions.Function0<kotlin.Unit> children);
- method public static void FloatingActionButton(androidx.ui.graphics.ImageAsset icon, kotlin.jvm.functions.Function0<kotlin.Unit> onClick, androidx.ui.core.Modifier modifier = Modifier.None, androidx.ui.graphics.Shape shape = CircleShape, androidx.ui.graphics.Color color = MaterialTheme.colors().primary, androidx.ui.unit.Dp elevation = 6.dp);
- method public static void FloatingActionButton(String text, kotlin.jvm.functions.Function0<kotlin.Unit> onClick, androidx.ui.core.Modifier modifier = Modifier.None, androidx.ui.graphics.ImageAsset? icon = null, androidx.ui.text.TextStyle? textStyle = null, androidx.ui.graphics.Color color = MaterialTheme.colors().primary, androidx.ui.unit.Dp elevation = 6.dp);
+ method public static void ExtendedFloatingActionButton(kotlin.jvm.functions.Function0<kotlin.Unit> text, kotlin.jvm.functions.Function0<kotlin.Unit> onClick, androidx.ui.core.Modifier modifier = Modifier.None, kotlin.jvm.functions.Function0<kotlin.Unit>? icon = null, androidx.ui.graphics.Shape shape = CircleShape, androidx.ui.graphics.Color backgroundColor = MaterialTheme.colors().primary, androidx.ui.graphics.Color contentColor = contentColorFor(backgroundColor), androidx.ui.unit.Dp elevation = 6.dp);
+ method public static void FloatingActionButton(kotlin.jvm.functions.Function0<kotlin.Unit> onClick, androidx.ui.core.Modifier modifier = Modifier.None, androidx.ui.graphics.Shape shape = CircleShape, androidx.ui.graphics.Color backgroundColor = MaterialTheme.colors().primary, androidx.ui.graphics.Color contentColor = contentColorFor(backgroundColor), androidx.ui.unit.Dp elevation = 6.dp, kotlin.jvm.functions.Function0<kotlin.Unit> children);
}
public final class IconButtonKt {
diff --git a/ui/ui-material/api/restricted_current.txt b/ui/ui-material/api/restricted_current.txt
index 403db66..670c566 100644
--- a/ui/ui-material/api/restricted_current.txt
+++ b/ui/ui-material/api/restricted_current.txt
@@ -168,9 +168,8 @@
}
public final class FloatingActionButtonKt {
- method public static void FloatingActionButton(kotlin.jvm.functions.Function0<kotlin.Unit> onClick, androidx.ui.core.Modifier modifier = Modifier.None, androidx.ui.unit.Dp minSize = androidx.ui.material.FloatingActionButtonKt.FabSize, androidx.ui.graphics.Shape shape = CircleShape, androidx.ui.graphics.Color color = MaterialTheme.colors().primary, androidx.ui.unit.Dp elevation = 6.dp, kotlin.jvm.functions.Function0<kotlin.Unit> children);
- method public static void FloatingActionButton(androidx.ui.graphics.ImageAsset icon, kotlin.jvm.functions.Function0<kotlin.Unit> onClick, androidx.ui.core.Modifier modifier = Modifier.None, androidx.ui.graphics.Shape shape = CircleShape, androidx.ui.graphics.Color color = MaterialTheme.colors().primary, androidx.ui.unit.Dp elevation = 6.dp);
- method public static void FloatingActionButton(String text, kotlin.jvm.functions.Function0<kotlin.Unit> onClick, androidx.ui.core.Modifier modifier = Modifier.None, androidx.ui.graphics.ImageAsset? icon = null, androidx.ui.text.TextStyle? textStyle = null, androidx.ui.graphics.Color color = MaterialTheme.colors().primary, androidx.ui.unit.Dp elevation = 6.dp);
+ method public static void ExtendedFloatingActionButton(kotlin.jvm.functions.Function0<kotlin.Unit> text, kotlin.jvm.functions.Function0<kotlin.Unit> onClick, androidx.ui.core.Modifier modifier = Modifier.None, kotlin.jvm.functions.Function0<kotlin.Unit>? icon = null, androidx.ui.graphics.Shape shape = CircleShape, androidx.ui.graphics.Color backgroundColor = MaterialTheme.colors().primary, androidx.ui.graphics.Color contentColor = contentColorFor(backgroundColor), androidx.ui.unit.Dp elevation = 6.dp);
+ method public static void FloatingActionButton(kotlin.jvm.functions.Function0<kotlin.Unit> onClick, androidx.ui.core.Modifier modifier = Modifier.None, androidx.ui.graphics.Shape shape = CircleShape, androidx.ui.graphics.Color backgroundColor = MaterialTheme.colors().primary, androidx.ui.graphics.Color contentColor = contentColorFor(backgroundColor), androidx.ui.unit.Dp elevation = 6.dp, kotlin.jvm.functions.Function0<kotlin.Unit> children);
}
public final class IconButtonKt {
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 c5432aa..88e0506 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
@@ -21,7 +21,6 @@
import androidx.ui.foundation.Border
import androidx.ui.foundation.shape.GenericShape
import androidx.ui.graphics.Color
-import androidx.ui.graphics.ImageAsset
import androidx.ui.layout.Arrangement
import androidx.ui.layout.Column
import androidx.ui.layout.LayoutHeight
@@ -31,27 +30,26 @@
import androidx.ui.layout.Row
import androidx.ui.layout.Spacer
import androidx.ui.material.Button
-import androidx.ui.material.FloatingActionButton
import androidx.ui.material.MaterialTheme
import androidx.ui.material.OutlinedButton
import androidx.ui.material.samples.ButtonSample
import androidx.ui.material.samples.IconButtonSample
import androidx.ui.material.samples.IconToggleButtonSample
import androidx.ui.material.samples.OutlinedButtonSample
+import androidx.ui.material.samples.SimpleExtendedFabNoIcon
+import androidx.ui.material.samples.SimpleExtendedFabWithIcon
+import androidx.ui.material.samples.SimpleFab
import androidx.ui.material.samples.TextButtonSample
-import androidx.ui.res.imageResource
import androidx.ui.unit.dp
private val DefaultSpace = 20.dp
@Composable
fun ButtonDemo() {
- val icon = imageResource(R.drawable.ic_favorite)
-
Column(LayoutPadding(10.dp)) {
Buttons()
Spacer(LayoutHeight(DefaultSpace))
- Fabs(icon)
+ Fabs()
Spacer(LayoutHeight(DefaultSpace))
IconButtons()
Spacer(LayoutHeight(DefaultSpace))
@@ -85,19 +83,14 @@
}
@Composable
-private fun Fabs(icon: ImageAsset) {
+private fun Fabs() {
Text("Floating action buttons")
Spacer(LayoutHeight(DefaultSpace))
Row(LayoutWidth.Fill, arrangement = Arrangement.SpaceEvenly) {
- FloatingActionButton( icon = icon)
- FloatingActionButton( text = "EXTENDED")
- FloatingActionButton(
- >
- icon = icon,
- text = "ADD TO FAVS",
- color = MaterialTheme.colors().error
- )
+ SimpleFab()
+ SimpleExtendedFabNoIcon()
+ SimpleExtendedFabWithIcon()
}
}
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 f70b842..a291648 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
@@ -39,7 +39,7 @@
import androidx.ui.layout.LayoutWidth
import androidx.ui.material.BottomAppBar
import androidx.ui.material.ColorPalette
-import androidx.ui.material.FloatingActionButton
+import androidx.ui.material.ExtendedFloatingActionButton
import androidx.ui.material.MaterialTheme
import androidx.ui.material.Scaffold
import androidx.ui.material.TopAppBar
@@ -111,10 +111,9 @@
private fun Fab(scrollFraction: ScrollFraction) {
val secondary = MaterialTheme.colors().secondary
val fabText = emojiForScrollFraction(scrollFraction.fraction)
- FloatingActionButton(
- text = fabText,
- textStyle = MaterialTheme.typography().h5,
- color = secondary,
+ ExtendedFloatingActionButton(
+ text = { Text(fabText, style = MaterialTheme.typography().h5) },
+ backgroundColor = secondary,
>
)
}
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 9add38a..a09de4c 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
@@ -23,7 +23,7 @@
import androidx.ui.foundation.shape.corner.CircleShape
import androidx.ui.layout.Spacer
import androidx.ui.material.BottomAppBar
-import androidx.ui.material.FloatingActionButton
+import androidx.ui.material.ExtendedFloatingActionButton
import androidx.ui.material.IconButton
import androidx.ui.material.Scaffold
import androidx.ui.material.TopAppBar
@@ -88,9 +88,11 @@
}
},
floatingActionButton = {
- FloatingActionButton(shape = fabShape, /* doSomething() */ }) {
- Text("Click me!")
- }
+ ExtendedFloatingActionButton(
+ text = { Text("Click me!") },
+ shape = fabShape,
+ /* doSomething() */ }
+ )
},
floatingActionButtonPosition = Scaffold.FabPosition.EndDocked
) {
diff --git a/ui/ui-material/samples/src/main/java/androidx/ui/material/samples/FloatingActionButtonSamples.kt b/ui/ui-material/samples/src/main/java/androidx/ui/material/samples/FloatingActionButtonSamples.kt
index 901026b..e56240a 100644
--- a/ui/ui-material/samples/src/main/java/androidx/ui/material/samples/FloatingActionButtonSamples.kt
+++ b/ui/ui-material/samples/src/main/java/androidx/ui/material/samples/FloatingActionButtonSamples.kt
@@ -18,26 +18,35 @@
import androidx.annotation.Sampled
import androidx.compose.Composable
-import androidx.ui.foundation.Image
-import androidx.ui.graphics.ImageAsset
+import androidx.ui.core.Text
+import androidx.ui.foundation.Icon
+import androidx.ui.material.ExtendedFloatingActionButton
import androidx.ui.material.FloatingActionButton
+import androidx.ui.material.icons.Icons
+import androidx.ui.material.icons.filled.Favorite
@Sampled
@Composable
-fun FloatingActionButtonSimple(icon: ImageAsset) {
- FloatingActionButton(icon = icon, /*do something*/ })
-}
-
-@Sampled
-@Composable
-fun FloatingActionButtonCustomContent(icon: ImageAsset) {
+fun SimpleFab() {
FloatingActionButton( /*do something*/ }) {
- Image(asset = icon)
+ Icon(Icons.Filled.Favorite)
}
}
+@Composable
+fun SimpleExtendedFabNoIcon() {
+ ExtendedFloatingActionButton(
+ text = { Text("EXTENDED") },
+ >
+ )
+}
+
@Sampled
@Composable
-fun FloatingActionButtonExtended(icon: ImageAsset) {
- FloatingActionButton(icon = icon, text = "ADD TO BASKET", /*do something*/ })
+fun SimpleExtendedFabWithIcon() {
+ ExtendedFloatingActionButton(
+ icon = { Icon(Icons.Filled.Favorite) },
+ text = { Text("ADD TO BASKET") },
+ /*do something*/ }
+ )
}
diff --git a/ui/ui-material/samples/src/main/java/androidx/ui/material/samples/ScaffoldSamples.kt b/ui/ui-material/samples/src/main/java/androidx/ui/material/samples/ScaffoldSamples.kt
index e577697..8351890 100644
--- a/ui/ui-material/samples/src/main/java/androidx/ui/material/samples/ScaffoldSamples.kt
+++ b/ui/ui-material/samples/src/main/java/androidx/ui/material/samples/ScaffoldSamples.kt
@@ -30,10 +30,9 @@
import androidx.ui.foundation.shape.corner.RoundedCornerShape
import androidx.ui.graphics.Color
import androidx.ui.layout.Column
-import androidx.ui.layout.LayoutPadding
import androidx.ui.material.BottomAppBar
import androidx.ui.material.DrawerState
-import androidx.ui.material.FloatingActionButton
+import androidx.ui.material.ExtendedFloatingActionButton
import androidx.ui.material.IconButton
import androidx.ui.material.MaterialTheme
import androidx.ui.material.Scaffold
@@ -74,9 +73,10 @@
},
floatingActionButtonPosition = Scaffold.FabPosition.End,
floatingActionButton = {
- FloatingActionButton( /* fab click handler */ }) {
- Text("Inc")
- }
+ ExtendedFloatingActionButton(
+ text = { Text("Inc") },
+ /* fab click handler */ }
+ )
},
bodyContent = { modifier ->
VerticalScroller {
@@ -136,13 +136,12 @@
}
},
floatingActionButton = {
- FloatingActionButton(
+ ExtendedFloatingActionButton(
+ text = { Text("Change shape") },
>
shape = fabShape,
- color = MaterialTheme.colors().secondary
- ) {
- Text("Change shape", modifier = LayoutPadding(12.dp))
- }
+ backgroundColor = MaterialTheme.colors().secondary
+ )
},
floatingActionButtonPosition = Scaffold.FabPosition.CenterDocked,
bodyContent = { modifier ->
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 b6d0306..e7cb2991 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
@@ -23,14 +23,13 @@
import androidx.ui.foundation.isSystemInDarkTheme
import androidx.ui.graphics.Color
import androidx.ui.layout.LayoutAspectRatio
-import androidx.ui.material.FloatingActionButton
+import androidx.ui.material.ExtendedFloatingActionButton
import androidx.ui.material.MaterialTheme
import androidx.ui.material.Typography
import androidx.ui.material.darkColorPalette
import androidx.ui.material.lightColorPalette
import androidx.ui.text.TextStyle
import androidx.ui.text.font.FontFamily
-import androidx.ui.text.font.fontFamily
import androidx.ui.text.font.FontWeight
import androidx.ui.unit.sp
@@ -58,8 +57,8 @@
MaterialTheme(colors = colors, typography = typography) {
val currentTheme = if (MaterialTheme.colors().isLight) "light" else "dark"
- FloatingActionButton(
- "FAB with text style and color from $currentTheme theme",
+ ExtendedFloatingActionButton(
+ text = { Text("FAB with text style and color from $currentTheme theme") },
>
)
}
diff --git a/ui/ui-material/src/androidTest/java/androidx/ui/material/FloatingActionButtonTest.kt b/ui/ui-material/src/androidTest/java/androidx/ui/material/FloatingActionButtonTest.kt
new file mode 100644
index 0000000..29d0f83
--- /dev/null
+++ b/ui/ui-material/src/androidTest/java/androidx/ui/material/FloatingActionButtonTest.kt
@@ -0,0 +1,81 @@
+/*
+ * Copyright 2019 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package androidx.ui.material
+
+import androidx.test.filters.MediumTest
+import androidx.ui.core.Text
+import androidx.ui.foundation.Icon
+import androidx.ui.material.icons.Icons
+import androidx.ui.material.icons.filled.Favorite
+import androidx.ui.test.createComposeRule
+import androidx.ui.unit.dp
+import androidx.ui.unit.round
+import com.google.common.truth.Truth.assertThat
+import org.junit.Rule
+import org.junit.Test
+import org.junit.runner.RunWith
+import org.junit.runners.JUnit4
+
+@MediumTest
+@RunWith(JUnit4::class)
+class FloatingActionButtonTest {
+
+ @get:Rule
+ val composeTestRule = createComposeRule()
+
+ @Test
+ fun defaultFabHasSizeFromSpec() {
+ composeTestRule
+ .setMaterialContentAndCollectSizes {
+ FloatingActionButton( {
+ Icon(Icons.Filled.Favorite)
+ }
+ }
+ .assertIsSquareWithSize(56.dp)
+ }
+
+ @Test
+ fun extendedFab_longText_HasHeightFromSpec() {
+ val size = composeTestRule
+ .setMaterialContentAndGetPixelSize {
+ ExtendedFloatingActionButton(
+ text = { Text("Extended FAB Text") },
+ icon = { Icon(Icons.Filled.Favorite) },
+ >
+ )
+ }
+ with(composeTestRule.density) {
+ assertThat(size.height.round()).isEqualTo(48.dp.toIntPx())
+ assertThat(size.width.round().value).isAtLeast(48.dp.toIntPx().value)
+ }
+ }
+
+ @Test
+ fun extendedFab_shortText_HasMinimumSizeFromSpec() {
+ val size = composeTestRule
+ .setMaterialContentAndGetPixelSize {
+ ExtendedFloatingActionButton(
+ text = { Text(".") },
+ >
+ )
+ }
+ with(composeTestRule.density) {
+ assertThat(size.width.round()).isEqualTo(48.dp.toIntPx())
+ assertThat(size.height.round()).isEqualTo(48.dp.toIntPx())
+ }
+ }
+}
diff --git a/ui/ui-material/src/androidTest/java/androidx/ui/material/FloatingActionButtonUiTest.kt b/ui/ui-material/src/androidTest/java/androidx/ui/material/FloatingActionButtonUiTest.kt
deleted file mode 100644
index 8128516..0000000
--- a/ui/ui-material/src/androidTest/java/androidx/ui/material/FloatingActionButtonUiTest.kt
+++ /dev/null
@@ -1,63 +0,0 @@
-/*
- * Copyright 2019 The Android Open Source Project
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-package androidx.ui.material
-
-import androidx.test.filters.MediumTest
-import androidx.ui.graphics.ImageAsset
-import androidx.ui.graphics.ImageAssetConfig
-import androidx.ui.test.createComposeRule
-import androidx.ui.unit.dp
-import androidx.ui.unit.round
-import com.google.common.truth.Truth.assertThat
-import org.junit.Rule
-import org.junit.Test
-import org.junit.runner.RunWith
-import org.junit.runners.JUnit4
-
-@MediumTest
-@RunWith(JUnit4::class)
-class FloatingActionButtonUiTest {
-
- @get:Rule
- val composeTestRule = createComposeRule()
-
- @Test
- fun defaultFabHasSizeFromSpec() {
- composeTestRule
- .setMaterialContentAndCollectSizes {
- FloatingActionButton(icon = createImage(), >
- }
- .assertIsSquareWithSize(56.dp)
- }
-
- @Test
- fun extendedFabHasHeightFromSpec() {
- val size = composeTestRule
- .setMaterialContentAndGetPixelSize {
- FloatingActionButton(icon = createImage(), text = "Extended", >
- }
- with(composeTestRule.density) {
- assertThat(size.width.round().value).isAtLeast(48.dp.toIntPx().value)
- assertThat(size.height.round()).isEqualTo(48.dp.toIntPx())
- }
- }
-
- private fun createImage() = with(composeTestRule.density) {
- val size = 24.dp.toIntPx().value
- ImageAsset(size, size, ImageAssetConfig.Argb8888)
- }
-}
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 452bb9e..7588abb 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
@@ -21,8 +21,11 @@
import androidx.ui.core.Text
import androidx.ui.core.onPositioned
import androidx.ui.foundation.ColoredRect
+import androidx.ui.foundation.Icon
import androidx.ui.graphics.Color
import androidx.ui.layout.DpConstraints
+import androidx.ui.material.icons.Icons
+import androidx.ui.material.icons.filled.Favorite
import androidx.ui.semantics.Semantics
import androidx.ui.test.createComposeRule
import androidx.ui.test.doGesture
@@ -48,7 +51,7 @@
@get:Rule
val composeTestRule = createComposeRule(disableTransitions = true)
- val scaffoldTag = "Scaffold"
+ private val scaffoldTag = "Scaffold"
@Test
fun scaffold_onlyContent_takesWholeScreen() {
@@ -228,7 +231,9 @@
composeTestRule.setContent {
Scaffold(
floatingActionButton = {
- FloatingActionButton("text", >
+ FloatingActionButton( {
+ Icon(Icons.Filled.Favorite)
+ }
},
floatingActionButtonPosition = Scaffold.FabPosition.CenterDocked
) {
@@ -242,7 +247,9 @@
composeTestRule.setContent {
Scaffold(
floatingActionButton = {
- FloatingActionButton("text", >
+ FloatingActionButton( {
+ Icon(Icons.Filled.Favorite)
+ }
},
floatingActionButtonPosition = Scaffold.FabPosition.EndDocked
) {
@@ -260,12 +267,13 @@
Scaffold(
floatingActionButton = {
FloatingActionButton(
- "text",
modifier = onPositioned { positioned ->
fabSize = positioned.size
fabPosition = positioned.localToGlobal(positioned.positionInParent)
},
- >
+ {
+ Icon(Icons.Filled.Favorite)
+ }
},
floatingActionButtonPosition = Scaffold.FabPosition.CenterDocked,
bottomAppBar = {
@@ -295,13 +303,14 @@
Scaffold(
floatingActionButton = {
FloatingActionButton(
- "text",
modifier = onPositioned { positioned ->
fabSize = positioned.size
fabPosition = positioned.localToGlobal(positioned.positionInParent)
},
>
- )
+ ) {
+ Icon(Icons.Filled.Favorite)
+ }
},
floatingActionButtonPosition = Scaffold.FabPosition.EndDocked,
bottomAppBar = {
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 8860fb0a..5c2f3d1 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
@@ -17,153 +17,192 @@
package androidx.ui.material
import androidx.compose.Composable
+import androidx.ui.core.Constraints
import androidx.ui.core.CurrentTextStyleProvider
+import androidx.ui.core.LayoutDirection
+import androidx.ui.core.LayoutModifier
+import androidx.ui.core.Measurable
import androidx.ui.core.Modifier
-import androidx.ui.core.Text
+import androidx.ui.core.enforce
import androidx.ui.foundation.Box
import androidx.ui.foundation.Clickable
import androidx.ui.foundation.ContentGravity
-import androidx.ui.foundation.Image
import androidx.ui.foundation.shape.corner.CircleShape
import androidx.ui.graphics.Color
-import androidx.ui.graphics.ImageAsset
import androidx.ui.graphics.Shape
+import androidx.ui.layout.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.material.ripple.ripple
-import androidx.ui.text.TextStyle
+import androidx.ui.unit.Density
import androidx.ui.unit.Dp
+import androidx.ui.unit.IntPx
import androidx.ui.unit.dp
+import androidx.ui.unit.max
/**
- * A floating action button (FAB) is a [Button] to represents the primary action of a screen.
+ * A floating action button (FAB) is a button that represents the primary action of a screen.
*
- * By default it uses a circle shape and centers its content.
+ * This FAB is typically used with an [androidx.ui.foundation.Icon]:
*
- * @sample androidx.ui.material.samples.FloatingActionButtonCustomContent
+ * @sample androidx.ui.material.samples.SimpleFab
*
- * @see FloatingActionButton overload for the variants with an icon or an icon and a text.
+ * See [ExtendedFloatingActionButton] for an extended FAB that contains text and an optional icon.
*
- * @param onClick will be called when user clicked on the button
- * @param modifier Modifier to be applied to the button.
- * @param minSize Minimum size of the FAB
- * @param shape Defines the Button's shape as well its shadow. When null is provided it uses
- * the [Shapes.button] from [ShapeAmbient]
- * @param color The background color
- * @param elevation The z-coordinate at which to place this button. This controls the size
- * of the shadow below the button
+ * @param modifier [Modifier] to be applied to this FAB.
+ * @param onClick will be called when user clicked on this FAB. The FAB will be disabled
+ * when it is null.
+ * @param shape The [Shape] of this FAB
+ * @param backgroundColor The background color. Use [Color.Transparent] to have no color
+ * @param contentColor The preferred content color for content inside this FAB
+ * @param elevation The z-coordinate at which to place this FAB. This controls the size
+ * of the shadow below the button.
+ * @param children the content of this FAB
*/
@Composable
fun FloatingActionButton(
onClick: () -> Unit,
modifier: Modifier = Modifier.None,
- minSize: Dp = FabSize,
shape: Shape = CircleShape,
- color: Color = MaterialTheme.colors().primary,
+ backgroundColor: Color = MaterialTheme.colors().primary,
+ contentColor: Color = contentColorFor(backgroundColor),
elevation: Dp = 6.dp,
children: @Composable() () -> Unit
) {
- Surface(modifier = modifier, shape = shape, color = color, elevation = elevation) {
- Clickable( modifier = ripple()) {
- Box(LayoutSize.Min(minSize), gravity = ContentGravity.Center) {
- CurrentTextStyleProvider(MaterialTheme.typography().button, children)
- }
- }
- }
-}
-
-/**
- * A floating action button (FAB) is a [Button] to represents the primary action of a screen.
- *
- * It draws the [icon] in the center of the FAB.
- *
- * @sample androidx.ui.material.samples.FloatingActionButtonSimple
- *
- * @see FloatingActionButton overload for the variants with a custom content or an icon and a text.
- *
- * @param icon Image to draw in the center
- * @param onClick will be called when user clicked on the button
- * @param modifier Modifier to be applied to the button.
- * @param color The background color
- * @param elevation The z-coordinate at which to place this button. This controls the size
- * of the shadow below the button
- */
-@Composable
-fun FloatingActionButton(
- icon: ImageAsset,
- onClick: () -> Unit,
- modifier: Modifier = Modifier.None,
- shape: Shape = CircleShape,
- color: Color = MaterialTheme.colors().primary,
- elevation: Dp = 6.dp
-) {
- FloatingActionButton(
+ Surface(
modifier = modifier,
- >
shape = shape,
- color = color,
+ color = backgroundColor,
+ contentColor = contentColor,
elevation = elevation
) {
- Image(asset = icon)
+ Clickable(onClick, modifier = ripple()) {
+ CurrentTextStyleProvider(MaterialTheme.typography().button) {
+ Box(
+ modifier = MinimumFabSizeModifier,
+ gravity = ContentGravity.Center,
+ children = children
+ )
+ }
+ }
}
}
/**
- * An extended [FloatingActionButton] with an [icon] and a [text].
+ * A floating action button (FAB) is a button that represents the primary action of a screen.
*
- * @sample androidx.ui.material.samples.FloatingActionButtonExtended
+ * This extended FAB contains text and an optional icon that will be placed at the start. See
+ * [FloatingActionButton] for a FAB that just contains some content, typically an icon.
*
- * @see FloatingActionButton overload for the variants with a custom content or an icon.
+ * @sample androidx.ui.material.samples.SimpleExtendedFabWithIcon
*
- * @param text Text to display.
- * @param onClick will be called when user clicked on the button
- * @param modifier Modifier to be applied to the button.
- * @param icon Image to draw to the left of the text. It is optional
- * @param textStyle Optional [TextStyle] to apply for a [text]
- * @param color The background color
+ * @param text Text label displayed inside this FAB
+ * @param icon Optional icon for this FAB, typically this will be a [androidx.ui.foundation.Icon]
+ * @param modifier [Modifier] to be applied to this FAB
+ * @param onClick will be called when user clicked on this FAB. The FAB will be disabled
+ * when it is null.
+ * @param shape The [Shape] of this FAB
+ * @param onClick will be called when user clicked on the button. The button will be disabled
+ * when it is null.
+ * @param backgroundColor The background color. Use [Color.Transparent] to have no color
+ * @param contentColor The preferred content color. Will be used by text and iconography
* @param elevation The z-coordinate at which to place this button. This controls the size
- * if the shadow below the button.
+ * of the shadow below the button.
*/
@Composable
-fun FloatingActionButton(
- text: String,
+fun ExtendedFloatingActionButton(
+ text: @Composable() () -> Unit,
onClick: () -> Unit,
modifier: Modifier = Modifier.None,
- icon: ImageAsset? = null,
- textStyle: TextStyle? = null,
- color: Color = MaterialTheme.colors().primary,
+ icon: @Composable() (() -> Unit)? = null,
+ shape: Shape = CircleShape,
+ backgroundColor: Color = MaterialTheme.colors().primary,
+ contentColor: Color = contentColorFor(backgroundColor),
elevation: Dp = 6.dp
) {
FloatingActionButton(
- modifier = modifier,
+ modifier = modifier + LayoutSize.Min(ExtendedFabSize),
>
- color = color,
- elevation = elevation,
- minSize = ExtendedFabHeight
+ shape = shape,
+ backgroundColor = backgroundColor,
+ contentColor = contentColor,
+ elevation = elevation
) {
- if (icon == null) {
- Text(
- text = text,
- style = textStyle ?: TextStyle.Default,
- modifier = LayoutPadding(
- start = ExtendedFabTextPadding,
- end = ExtendedFabTextPadding
- )
- )
- } else {
- Row(LayoutPadding(start = ExtendedFabIconPadding, end = ExtendedFabTextPadding)) {
- Image(asset = icon)
- Spacer(LayoutWidth(ExtendedFabIconPadding))
- Text(text = text, style = textStyle ?: TextStyle.Default)
+ Box(
+ modifier = LayoutPadding(
+ start = ExtendedFabTextPadding,
+ end = ExtendedFabTextPadding
+ ),
+ gravity = ContentGravity.Center
+ ) {
+ if (icon == null) {
+ text()
+ } else {
+ Row {
+ icon()
+ Spacer(LayoutWidth(ExtendedFabIconPadding))
+ text()
+ }
}
}
}
}
+/**
+ * [LayoutModifier] that will set minimum constraints in each dimension to be [FabSize] unless
+ * there is an incoming, non-zero minimum already. This allows us to define a default minimum in
+ * [FloatingActionButton], but let [ExtendedFloatingActionButton] override it with a smaller
+ * minimum just by settings a normal [LayoutHeight.Min] modifier.
+ *
+ * TODO: b/150460257 remove after support for this is added as a SizeModifier / similar
+ */
+private object MinimumFabSizeModifier : LayoutModifier {
+ override fun Density.modifyConstraints(
+ constraints: Constraints,
+ layoutDirection: LayoutDirection
+ ): Constraints {
+ val minWidth = constraints.minWidth.takeIf { it != IntPx.Zero }
+ val minHeight = constraints.minHeight.takeIf { it != IntPx.Zero }
+ return when {
+ minWidth != null && minHeight != null -> constraints
+ else -> {
+ Constraints(
+ minWidth = minWidth ?: FabSize.toIntPx(),
+ minHeight = minHeight ?: FabSize.toIntPx()
+ ).enforce(constraints)
+ }
+ }
+ }
+
+ override fun Density.minIntrinsicWidthOf(
+ measurable: Measurable,
+ height: IntPx,
+ layoutDirection: LayoutDirection
+ ) = max(measurable.minIntrinsicWidth(height), FabSize.toIntPx())
+
+ override fun Density.minIntrinsicHeightOf(
+ measurable: Measurable,
+ width: IntPx,
+ layoutDirection: LayoutDirection
+ ) = max(measurable.minIntrinsicHeight(width), FabSize.toIntPx())
+
+ override fun Density.maxIntrinsicWidthOf(
+ measurable: Measurable,
+ height: IntPx,
+ layoutDirection: LayoutDirection
+ ) = max(measurable.maxIntrinsicWidth(height), FabSize.toIntPx())
+
+ override fun Density.maxIntrinsicHeightOf(
+ measurable: Measurable,
+ width: IntPx,
+ layoutDirection: LayoutDirection
+ ) = max(measurable.maxIntrinsicHeight(width), FabSize.toIntPx())
+}
+
private val FabSize = 56.dp
-private val ExtendedFabHeight = 48.dp
+private val ExtendedFabSize = 48.dp
private val ExtendedFabIconPadding = 12.dp
private val ExtendedFabTextPadding = 20.dp