I want to develope a view which open on click to floating action button. Basically i need to develope a design which i attached below.
-
Are you looking to do this in Compose or in Views? It is achievable in both with MotionLayout.– hofordMar 3 at 15:49
-
Both are acceptable Compose or Views– Ehsan UllahMar 4 at 9:01
3 Answers
This is how you would do it in Views using MotionLayout
Layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFF"
app:layoutDescription="@xml/circularmenu_scene">
<androidx.constraintlayout.utils.widget.ImageFilterView
android:id="@+id/background"
android:layout_width="500dp"
android:layout_height="500dp"
android:background="#0178d9"
app:layout_constraintBottom_toBottomOf="@+id/imageButton"
app:layout_constraintEnd_toEndOf="@+id/imageButton"
app:layout_constraintStart_toStartOf="@+id/imageButton"
app:layout_constraintTop_toTopOf="@+id/imageButton"
app:roundPercent="1" />
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#0000"
android:drawableTop="@drawable/power"
android:text="Logout"
android:textAllCaps="false"
app:layout_constraintCircle="@id/background"
app:layout_constraintCircleAngle="270"
app:layout_constraintCircleRadius="180dp" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#0000"
android:drawableTop="@drawable/search"
android:text="Search"
android:textAllCaps="false"
app:layout_constraintCircle="@id/background"
app:layout_constraintCircleAngle="330"
app:layout_constraintCircleRadius="200dp" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#0000"
android:drawableTop="@drawable/cart"
android:text="Wishlist"
android:textAllCaps="false"
app:layout_constraintCircle="@id/background"
app:layout_constraintCircleAngle="300"
app:layout_constraintCircleRadius="200dp" />
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#0000"
android:drawableTop="@drawable/list"
android:text="Dashboard"
android:textAllCaps="false"
app:layout_constraintCircle="@id/background"
app:layout_constraintCircleAngle="0"
app:layout_constraintCircleRadius="200dp" />
<androidx.constraintlayout.utils.widget.ImageFilterButton
android:id="@+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="64dp"
android:layout_marginBottom="64dp"
android:rotation="45"
android:scaleX="2"
android:scaleY="2"
android:src="@drawable/add_circle"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:srcCompat="@drawable/add_circle" />
</androidx.constraintlayout.motion.widget.MotionLayout>
MotionScene:
<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto">
<Transition
motion:constraintSetEnd="@+id/end"
motion:constraintSetStart="@id/start"
motion:duration="500"
motion:motionInterpolator="overshoot"
motion:staggered="0.4">
<OnClick motion:targetId="@+id/imageButton" />
</Transition>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
motion:layout_constraintCircle="@id/background"
motion:layout_constraintCircleAngle="270"
motion:layout_constraintCircleRadius="0dp"
motion:motionStagger="1" />
<Constraint
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
motion:layout_constraintCircle="@id/background"
motion:layout_constraintCircleAngle="332"
motion:layout_constraintCircleRadius="0dp"
motion:motionStagger="1" />
<Constraint
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
motion:layout_constraintCircle="@id/background"
motion:layout_constraintCircleAngle="300"
motion:layout_constraintCircleRadius="0dp"
motion:motionStagger="1" />
<Constraint
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
motion:layout_constraintCircle="@id/background"
motion:layout_constraintCircleAngle="0"
motion:layout_constraintCircleRadius="0dp"
motion:motionStagger="1" />
<Constraint
android:id="@+id/background"
android:layout_width="10dp"
android:layout_height="10dp"
motion:layout_constraintBottom_toBottomOf="@+id/imageButton"
motion:layout_constraintEnd_toEndOf="@+id/imageButton"
motion:layout_constraintStart_toStartOf="@+id/imageButton"
motion:layout_constraintTop_toTopOf="@+id/imageButton"
motion:motionStagger="2" />
<Constraint
android:id="@+id/imageButton"
android:scaleX="2"
android:scaleY="2"
motion:layout_constraintEnd_toEndOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
motion:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="64dp"
android:layout_marginEnd="64dp"
android:rotation="45" >
<CustomAttribute
motion:attributeName="colorFilter"
motion:customColorValue="#0178d9" />
</Constraint>
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@+id/imageButton"
android:scaleX="2"
android:scaleY="2"
motion:layout_constraintEnd_toEndOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
motion:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="64dp"
android:layout_marginEnd="64dp"
android:rotation="215" >
<CustomAttribute
motion:attributeName="colorFilter"
motion:customColorValue="#FFF" />
</Constraint>
</ConstraintSet>
</MotionScene>
This is how we can make this , check the below code 👇
@Composable
fun CircularFloatingActionMenu() {
var iconState by remember { mutableStateOf(false) }
Box(modifier = Modifier.fillMaxSize()) {
AnimatedVisibility(
visible = iconState, modifier = Modifier
.align(BottomEnd)
) {
Box(
modifier = Modifier
.align(BottomEnd)
.clip(
RoundedCornerShape(
topStartPercent = 100,
)
)
.background(Color.Blue.copy(alpha = 0.7f))
) {
Box(
modifier = Modifier
.width(220.dp)
.padding(20.dp)
) {
ConstraintLayout(
modifier = Modifier
.fillMaxWidth()
.padding(start = 20.dp)
) {
val (dashboard, search, wishlist, logout) = createRefs()
AppContent(
icon = Icons.Default.MailOutline,
text = "Dashboard",
modifier = Modifier.constrainAs(dashboard) {
top.linkTo(parent.top)
end.linkTo(parent.end)
}
)
AppContent(
icon = Icons.Default.Search,
text = "Search",
modifier = Modifier
.constrainAs(search) {
top.linkTo(parent.top)
start.linkTo(parent.start)
}
.padding(top = 30.dp, start = 40.dp)
)
AppContent(
icon = Icons.Default.ShoppingCart, text = "Wishlist",
modifier = Modifier
.constrainAs(wishlist) {
top.linkTo(search.bottom)
start.linkTo(parent.start)
}
.padding(top = 15.dp)
)
AppContent(
icon = Icons.Default.ExitToApp, text = "Logout",
modifier = Modifier
.constrainAs(logout) {
top.linkTo(wishlist.bottom)
start.linkTo(parent.start)
}
.padding(top = 20.dp, start = 10.dp)
)
}
}
}
}
Box(
modifier = Modifier
.align(BottomEnd)
.padding(20.dp)
) {
FloatingActionButton(onClick = {
iconState = !iconState
}, backgroundColor = Color.White) {
Icon(
imageVector =
if (!iconState) Icons.Default.Add else Icons.Default.Close,
contentDescription = "",
modifier = Modifier.graphicsLayer(
rotationZ = animateFloatAsState(targetValue = if(iconState) 180f else 0f).value
),
tint = Color.Blue
)
}
}
}
}
@Composable
fun AppContent(
modifier: Modifier = Modifier,
icon: ImageVector,
text: String
) {
Box(modifier = modifier) {
Column() {
Icon(
imageVector = icon,
contentDescription = "",
tint = Color.White,
modifier = Modifier.align(CenterHorizontally)
)
Spacer(modifier = Modifier.height(5.dp))
Text(
text = text, style = TextStyle(
color = Color.White,
fontWeight = FontWeight.Normal,
fontSize = 14.sp
)
)
}
}
}
you can modify according to your need. Hope it helps you.
I don't think someone will answer this for many reasons:
- There's certainly an reveal animation effect that's not mentioned;
- It will take a lot of effort, even if you mention the effect;
- Is a very specfic thing;
- You did not mention what you've already tried.
And I'm not saying this to upset you, but rather help you how to make a better question.
I also tried to find some examples that are not what you expect, but that have a similar context (a fab that reveals other buttons once you click it).
One tutorial:
https://www.sitepoint.com/animating-android-floating-action-button
Two github projects:
https://github.com/Clans/FloatingActionButton
https://github.com/markormesher/android-fab
One SO answer
fab button works different in different phones
There's even an example for Jetpack Compose with Material 3:
https://androidexample365.com/android-library-providing-an-implementation-of-the-material-design-floating-action-button-speed-dial
I hope it helps :)