Android equivalence of iOS ActionSheet

Question

What is the Android equivalence of the UIActionSheet in the iOS SDK? I am working on a React-Native project and need to maintain the use of native controls where possible. I have not come across an npm package or other that makes use of the respective plartform 'actionsheet'. They all seem to use native actionsheet in iOS, and a javascript mock of the iOS actionsheet for Android (which makes it non-native on Android). If I can know what android shows where iOS shows an actionsheet then I can make use of the RN Android component for android and actionsheet for iOS. I hope this is a clear question.

Rori

What does actionsheet do in ios? – Squall

@AbhishekSingh it gives the user multiple options for example user clicks on more button and an actionsheet appears with the following options (delete, move, cope, cancel). eg appcoda.com/wp-content/uploads/2014/05/… – Rori

ok see my answer below – Squall

You don't really have to go for a library. You can simply use a bottom sheet dialog (modal bottom sheet). Read this article – Neumeyer

The native mechanism for prompting a user with a number of options on Android is (simplest: use a single-choice list alert dialog developer.android.com/guide/topics/ui/dialogs#AddingAList) or (more work, but more modern and better UX principles: bottom sheets material.io/design/components/sheets-bottom.html#) – Joniejonina

Answer 1

We use BottomSheetDialog to do the same work in Android. Not exactly the same and may require a bit more code to write compared to iOS. But the end result is similar.

References:

https://developer.android.com/reference/android/support/design/widget/BottomSheetDialog.html https://medium.com/glucosio-project/15fb8d140295

Assets

This is not the Android equivalent. This is just "the same iOS implementation in Android", but it is NOT the Android Equivalent. – Complice

@BrodaNoel What is the Android equivalent then if "the same iOS implementation in Android" is not? – Boatright

@Boatright "the same iOS implementation in Android" means: "The same UX and UI. The same design". But Action Sheets are ABSOLUTELY different in Android. If you spend some time reading some UX books about Android UX, you'll learn that the ActionSheets should be displayed on the TopRight corner, or in a center modal, depending on the content to show. But it never is a list of options from the bottom. Maybe it changed in the past Android Versions, but I don't think so. So, please, remember: UI is not UX. – Complice

@BrodaNoel This answer specifically mentions BottomSheetDialog which is automatically presented from the bottom of the screen even in a stock implementation of the Android SDK class. Here's a reference from Google's Material Design for proper use of the class. BottomSheetDialog is definitely the proper Android alternative for an iOS ActionSheet. No UI / UX misunderstanding here. Also worth mentioning there is no such thing as an ActionSheet in Android SDK. – Boatright

@BrodaNoel your answers are completely irrelevant, and neither answer the question at hand nor show any understanding of the underlying UX problem. He is looking for a way to solve how to prompt the user with a dynamic number of choices in a UI-blocking fashion. On Android this is either (1: traditional & simplest: use a single-choice list alert dialog developer.android.com/guide/topics/ui/dialogs#AddingAList) or (2: more modern & better UX, but unfortunately higher effort: bottom sheets material.io/design/components/sheets-bottom.html#) – Joniejonina

Answer 2

I had implement similar functionality using BottomSheetDialog in Android.

BottomSheetDialog mBottomDialogNotificationAction;

private void showDialogNotificationAction() {
    try {
        View sheetView = mActivity.getLayoutInflater().inflate(R.layout.dialog_bottom_notification_action, null);
        mBottomDialogNotificationAction = new BottomSheetDialog(mActivity);
        mBottomDialogNotificationAction.setContentView(sheetView);
        mBottomDialogNotificationAction.show();

        // Remove default white color background
        FrameLayout bottomSheet = (FrameLayout) mBottomDialogNotificationAction.findViewById(android.support.design.R.id.design_bottom_sheet);
        bottomSheet.setBackground(null);
    } catch (Exception e) {
        e.printStackTrace();
    }
}

dialog_bottom_notification_action.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="10dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/rounded_corner"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clickable="true"
            android:foreground="?attr/selectableItemBackground"
            android:orientation="vertical"
            android:padding="15dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Apply Leave"
                android:textColor="#1E82FF"
                android:textSize="16sp" />
        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="#E5E5E5" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clickable="true"
            android:foreground="?attr/selectableItemBackground"
            android:orientation="vertical"
            android:padding="15dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Regularisation"
                android:textColor="#1E82FF"
                android:textSize="16sp" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:background="@drawable/rounded_corner"
        android:clickable="true"
        android:foreground="?attr/selectableItemBackground"
        android:orientation="vertical"
        android:padding="15dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Close"
            android:textColor="#1E82FF"
            android:textSize="16sp"
            android:textStyle="bold" />
    </LinearLayout>
</LinearLayout>

rounded_corner.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ffffff" />

    <corners android:radius="@dimen/size_10dp" />
</shape>

Rosanne

To remove the background for AndroidX use com.google.android.material.R.id.design_bottom_sheet – Aculeate

Smooth and Easy implementation. Thanks – Cerebellum

You should not do this. This is using an iOS design style and you likely want an Android design style like: m3.material.io/components/bottom-sheets/overview – Hasty

Just because you can doesn't mean you should. – Reynaldoreynard

Answer 3

For ActionSheet like in IOS you can use This Library

Usage

Add this dependency to your app level grsadle

dependencies {
    compile 'com.baoyz.actionsheet:library:1.1.7'
}

Create ActionSheet and show

ActionSheet.createBuilder(this, getSupportFragmentManager())
            .setCancelButtonTitle("Cancel")
            .setOtherButtonTitles("Item1", "Item2", "Item3", "Item4")
            .setCancelableOnTouchOutside(true)
            .setListener(this).show();

Methods

• setCancelButtonTitle() Cancel button title, (String)
• setOtherButtonTitles() Item buttons title，(String[])
• setCancelableOnTouchOutside() Touch outside to close, (boolean)
• setListener() set a Listener to listen event
• show() Show ActionSheet, return ActionSheet Object，call dismiss() method of ActionSheet to close.

Squall

This is exactly what I am avoiding, as I mentioned in my post. I want to use a native control for both iOS and Android. If you look at the screenshots in your link you will see that for Android the library does not use a native Android SDK control. It uses a mock/imitation of the iOS actionsheet. Whether its a native implementation or javascript implementation. I want to use something standard for Android. – Rori

I have already mentioned in my post that I came accross these sort of libraries. – Rori

@Rori it uses java not javascript. how can usung a libary makes project non-native? – Squall

if you can customize enough use Dialog use custom-view and animation you would be able to achieve same. P.S. you need to customize dialog position also – Squall

Thats why I m saying about dialog you can customize android dialog. exact equivalent control is not available – Squall

Okay, could you send me a link to an android dialogue that contains multiple options (more than two). A link to an image for example, What im finding in google looks like a prompt with multiple buttons. – Rori

yes Follow This Tutorial exactly matches your need. – Squall

That also mimics the iOS actionsheet, I need something standard on Android. I do not want a mimic, no javascript implementation, no custom Android implementation, just a standard control in the Android sdk that is used to show multiple options (more than 2). Thanks for your help but I just want a standard Android control, nothing else. – Rori

look at This Question – Squall

Answer 4

Simliar to iOS's action sheet equivalent in Kotlin

import com.google.android.material.bottomsheet.BottomSheetDialog


override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    val bottomSheetDialog = BottomSheetDialog(this)
    val bottomSheetView = this.layoutInflater.inflate(R.layout.bottom_sheet_layout, null)
    bottomSheetDialog.setContentView(bottomSheetView)

    actionSheetButton.setOnClickListener {
        showDialogNotificationAction(bottomSheetDialog)
    }

    bottomSheetView.button1.setOnClickListener {
        Toast.makeText(this, "Button 1 Clicked", Toast.LENGTH_LONG).show()
    }
    bottomSheetView.button2.setOnClickListener {
        Toast.makeText(this, "Button 2 Clicked", Toast.LENGTH_LONG).show()
    }
    bottomSheetView.button3.setOnClickListener {
        Toast.makeText(this, "Button 3 Clicked", Toast.LENGTH_LONG).show()
    }
    bottomSheetView.button4.setOnClickListener {
        Toast.makeText(this, "Button 4 Clicked", Toast.LENGTH_LONG).show()
    }
    bottomSheetView.cancelAttachment.setOnClickListener {
        bottomSheetDialog.dismiss()
    }
}

private fun showDialogNotificationAction(bottomSheetDialog: BottomSheetDialog) {
    bottomSheetDialog.show()

    val bottomSheetDialogFrameLayout =
        bottomSheetDialog.findViewById<FrameLayout>(com.google.android.material.R.id.design_bottom_sheet)
    bottomSheetDialogFrameLayout?.background = null
}

bottom_sheet_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="10dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bottom_sheet_rounded_corner"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="41dp"
            android:foreground="?attr/selectableItemBackground"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="14dp"
                android:text="Android Action Sheet"
                android:textColor="#909090"
                android:textSize="12sp" />
        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="#D1D1CF" />

        <LinearLayout
            android:id="@+id/button1"
            android:layout_width="match_parent"
            android:layout_height="52dp"
            android:clickable="true"
            android:foreground="?attr/selectableItemBackground"
            android:orientation="vertical"
            android:padding="15dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Button 1"
                android:textColor="#007CFE"
                android:textSize="18sp" />

        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="#D1D1CF" />

        <LinearLayout
            android:id="@+id/button2"
            android:layout_width="match_parent"
            android:layout_height="52dp"
            android:clickable="true"
            android:foreground="?attr/selectableItemBackground"
            android:orientation="vertical"
            android:padding="15dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Button 2"
                android:textColor="#007CFE"
                android:textSize="18sp" />

        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="#D1D1CF" />

        <LinearLayout
            android:id="@+id/button3"
            android:layout_width="match_parent"
            android:layout_height="52dp"
            android:clickable="true"
            android:foreground="?attr/selectableItemBackground"
            android:orientation="vertical"
            android:padding="15dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Button 3"
                android:textColor="#007CFE"
                android:textSize="18sp" />

        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="#D1D1CF" />

        <LinearLayout
            android:id="@+id/button4"
            android:layout_width="match_parent"
            android:layout_height="52dp"
            android:clickable="true"
            android:foreground="?attr/selectableItemBackground"
            android:orientation="vertical"
            android:padding="15dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Button 4"
                android:textColor="#007CFE"
                android:textSize="18sp" />
        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/cancelAttachment"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:background="@drawable/bottom_sheet_rounded_corner"
        android:clickable="true"
        android:foreground="?attr/selectableItemBackground"
        android:orientation="vertical"
        android:padding="15dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Cancel"
            android:textColor="#FFFFFF"
            android:textSize="16sp" />
    </LinearLayout>
</LinearLayout>

bottom_sheet_rounded_corner.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ffffff" />

    <corners android:radius="10dp" />
</shape>

Lizzettelizzie

Answer 5

There is also ModalBottomSheetLayout, e.g.:

@Composable
fun appView(viewModel: AppViewModel) {
    ModalBottomSheetLayout(
            sheetContent = { modalSheetView(viewModel) },
            sheetState = viewModel.bottomModalState
    ) {
        // Rest of the app goes here.
    }
}

@Composable
fun modalSheetView(viewModel: AppViewModel) {

    val buttonModifier = Modifier.padding(all = 20.dp).fillMaxWidth()
    val buttonTextStyle = TextStyle(fontSize = 20.sp)

    Column(horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxWidth())
    {
        TextButton(onClick = { /* Handle click */ },
                modifier = buttonModifier)
        {
            Text("Do something", style = buttonTextStyle)
        }
        TextButton(onClick = { /* Handle click */ },
                modifier = buttonModifier)
        {
            Text("Something else", style = buttonTextStyle)
        }
        Spacer(modifier = Modifier.height(20.dp))
        TextButton(onClick = { /* Handle click */ },
                modifier = buttonModifier)
        {
            Text("Cancel", style = buttonTextStyle)
        }
    }


}

Kaddish