ComposeActionMenu

Additional

Language
Kotlin
Version
2.0.0 (Jan 11, 2024)
Created
Dec 27, 2021
Updated
Jan 11, 2024
Owner
Jacob Ras (jacobras)
Contributors
dependabot[bot]
Jacob Ras (jacobras)
2
Activity
Badge
Generate
Download
Source code

Advertisement

Compose Action Menu

This multi-platform library provides an easy-to-use action menu for Compose, since Compose doesn't offer this by default.

Features

  • Icons (optional);
  • Selectable/checkable items;
  • Nested sub menus;
  • Automatic overflow for items that don't fit the specified maximum;
  • Kotlin Multiplatform (KMP) since version 2.0.0, supporting Android, iOS and JVM (desktop).

Installation

dependencies {
    implementation("nl.jacobras:compose-action-menu:2.0.0")
}

Note: version 2 and newer are available from Maven Central, whereas previous versions were distributed through JitPack.

See also: Migrating to V2.

Compose version

Each version depends on specific Compose dependencies.

Compose 1.1.0-rc01
Compose 1.3.3
Compose 1.4.3
Compose Multiplatform 1.5.1

Usage

val toolbarActions = listOf(
    RegularActionItem(
        key = "search",
        title = stringResource(R.string.search),
        iconVector = Icons.Filled.Search,
        onClick = { /* TODO: Open search screen */ }
    )
)

TopAppBar(
    actions = { ActionMenu(items = toolbarActions) }
)

Supported item types

Several different type of actions can be used. These are all sub classes of ActionItem.

  • Regular item: RegularActionItem;
  • Checkable item: CheckableActionItem;
  • Radio-toggleable item: RadioActionItem;
  • Groups: GroupActionItem.

Creating a group

Is as simple as:

val subOption1 = RegularActionItem(key = "subOption1", /* ... */)
val subOption2 = RegularActionItem(key = "subOption2", /* ... */)
val subOption3 = RegularActionItem(key = "subOption3", /* ... */)

val group = GroupActionItem(
    key = "myGroup",
    title = stringResource(R.string.group_title),
    childOptions = listOf(subOption1, subOption2, subOption3)
)

Customisation

ActionMenu takes some parameters:

  • maxNumberOfIcons Number of icons to show, including overflow menu icon (if needed);
  • colors Optional color configuration.

ActionItems can be customised too:

  • Use iconVector or iconDrawable to show an icon next to the item's title;
  • Set showAsAction to change if an item will be shown as an icon or in the overflow menu.

Testing

Every menu item has a test tag attached to it which is a combination of a "ActionMenu" prefix and the item's key. Example test usage:

// Menu configuration:
val item = RegularActionItem(key = "myKey", /* ... */)

// Test:
composeTestRule.onNodeWithTag("ActionMenu#myKey").performClick()

There's a reserved key for the overflow icon: "ActionMenu#overflow".

Migrating from v1 to v2

Compose Action Menu version 2 is built using KMP. Android-specific resource support is replaced with broader string + Painter support.

1.x:

RegularActionItem(
    titleResId = R.string.search,
    iconDrawable = R.drawable.search
)

2.x:

RegularActionItem(
    title = stringResource(R.string.search),
    icon = painterResource(R.drawable.search)
)

Sample apps

The repository contains two sample apps.

  • Run Android: gradlew sample-app:installDebug
  • Run Desktop: gradlew sample-desktop:run

Production example

My note taking app uses ComposeActionMenu:

https://play.google.com/store/apps/details?id=nl.jacobras.notes