An easy to use action/overflow menu for Jetpack Compose.

Overview

Compose Action Menu

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

Animated preview image

Installation

repositories {
    google()
    maven { url "https://jitpack.io" }
}
dependencies {
    implementation "com.github.jacobras:ComposeActionMenu:1.0.0"
}

Usage

val toolbarActions = listOf(
    RegularActionItem(
        key = "settings",
        titleResId = R.string.settings,
        onClick = { /* TODO: Open settings 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 = 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".

Production example

Here's a production example to check out: the next update of my note taking app uses ComposeActionMenu. It's not released yet but when it is, this text will be updated.

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

License

MIT License

Copyright (c) 2021 Jacob Ras

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
You might also like...
A simple authentication application using Jetpack compose to illustrate signin and sign up using Mvvm, Kotlin and jetpack compose
A simple authentication application using Jetpack compose to illustrate signin and sign up using Mvvm, Kotlin and jetpack compose

Authentication A simple authentication application using Jetpack compose to illustrate signin and sign up using Mvvm, Kotlin and jetpack compose Scree

A particle view library written in kotlin, easy to use
A particle view library written in kotlin, easy to use

particle 中文介绍 This is a handy android library for particle effect. To start with, you need to add it in your root build.gradle at the end of repositor

This repos one of the ways hows how to use Jetpack Compose Navigation along with Dagger 2
This repos one of the ways hows how to use Jetpack Compose Navigation along with Dagger 2

Dagger 2 and Jetpack Compose Integration This repository is about a way how to use Dagger 2 for projects which using Jetpack Compose. Here is an artic

A simple path finding visualizer mobile app to demonstrate the use of Jetpack Compose UI toolkit in Android.
A simple path finding visualizer mobile app to demonstrate the use of Jetpack Compose UI toolkit in Android.

Path Finding Visualizer App using Jetpack Compose A simple path finding visualizer mobile app to demonstrate the use of Jetpack Compose UI toolkit in

How to use Jetpack Compose’s theming APIs to style your application
How to use Jetpack Compose’s theming APIs to style your application

Jetpack Compose Theming Codelab This folder contains the source code for the Jetpack Compose Theming codelab. In this codelab you will learn how to us

ComposeImageBlurhash is a Jetpack Compose component with the necessary implementation to display a blurred image while the real image is loaded from the internet. Use blurhash and coil to ensure good performance.

compose-image-blurhash ComposeImageBlurhash is a Jetpack Compose component with the necessary implementation to display a blurred image while the real

A library that you can use in 4 different types toast written with Jetpack Compose
A library that you can use in 4 different types toast written with Jetpack Compose

Composable Sweet Toast A library that you can use in 4 different types(Success, Error, Warning, Info) written with Jetpack Compose. You can use this t

A Clean Architecture App to show use of multi module architecture in a Jetpack Compose
A Clean Architecture App to show use of multi module architecture in a Jetpack Compose

Nextflix-Composable A Clean Architecture App to show use of multi-module-archite

Google CodeLab: learn how to use some Animation APIs in Jetpack Compose.
Google CodeLab: learn how to use some Animation APIs in Jetpack Compose.

Compose Animation Codelab This folder contains the source code for the Compose Animation codelab. In this codelab, you will learn how to use some Anim

Releases(1.0.0)
Owner
Jacob Ras
Jacob Ras
Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Android’s modern toolkit for building native UI.

Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Android’s modern toolkit for building native UI.

MindOrks 382 Jan 5, 2023
A Kotlin library to use Jetpack Compose in Android and iOS. Allow to write UI for both in Kotin. Still experimental as many compose features are not yet available.

Multiplatform Compose A Kotlin library to use Jetpack Compose in Android and iOS. Allow to write UI for both in Kotin. Still experimental as many comp

Clément Beffa 548 Jan 7, 2023
Easy zoom in with drag support for Jetpack Compose

ComposeZoomableImage Jetpack Compose Zoomable Image Android Library Easy zoom in with drag support for Jetpack Compose Demo Setup Add Jitpack maven {

Umut Soysal 61 Nov 23, 2022
Jetpack Compose Boids | Flocking Insect 🐜. bird or Fish simulation using Jetpack Compose Desktop 🚀, using Canvas API 🎨

?? ?? ?? Compose flocking Ants(boids) ?? ?? ?? Jetpack compose Boids | Flocking Insect. bird or Fish simulation using Jetpack Compose Desktop ?? , usi

Chetan Gupta 38 Sep 25, 2022
A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!

Why Not Compose! A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!

Md. Mahmudul Hasan Shohag 186 Jan 1, 2023
This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Compose.

JetBMICalculator This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Co

BHAVNA THACKER 3 Dec 31, 2022
Jetpack-Compose-Demo - Instagram Profile UI using Jetpack Compose

Jetpack-Compose-Demo Instagram Profile UI using Jetpack Compose

omar 1 Aug 11, 2022
Jetpack-compose-animations-examples - Cool animations implemented with Jetpack compose

Jetpack-compose-animations-examples This repository consists of 4 animations: St

Canopas Software 180 Jan 2, 2023
Compose-navigation - Set of utils to help with integrating Jetpack Compose and Jetpack's Navigation

Jetpack Compose Navigation Set of utils to help with integrating Jetpack Compose

Adam Kobus 5 Apr 5, 2022
Jetpack-compose-uis - A collection of some UIs using Jetpack Compose. built using Katalog

Jetpack Compose UIs This is a collection of some UIs using Jetpack Compose. It i

Mori Atsushi 3 Dec 15, 2022