1

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. Image Description...

2
  • Are you looking to do this in Compose or in Views? It is achievable in both with MotionLayout.
    – hoford
    Mar 3 at 15:49
  • Both are acceptable Compose or Views Mar 4 at 9:01

3 Answers 3

2

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>

Circle Menu using MotionLayout

1

This is how we can make this , check the below code 👇

enter image description here

@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.

0

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 :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.