Dropdown

396

12

AndroidPoet

Added on January 5, 2025

A customizable jetpack compose dropdown menu with cascade and animations

Dropdown

A customizable jetpack compose dropdown menu with cascade and animations

AndroidPoet

README.md

💧 A powerful and customizable Compose Multiplatform dropdown menu with cascade and animations.

Google Dev Library GitHub

Demo

Who's using Dropdown?

👉 Check out who's using Dropdown

Features

  • 🎨 Rich customization options
  • 🌊 Extensive animation library
  • 📱 Compose Multiplatform support
  • 🎯 Intuitive DSL for menu creation
  • 🔄 Cascade menu support
  • 🎭 12+ enter/exit animations
  • 🎨 Custom theming support

Include in your project

Gradle

Add the dependency below to your module's build.gradle file:

dependencies {
    implementation("io.github.androidpoet:dropdown:$version")
}

Kotlin Multiplatform

Add the dependency below to your module's build.gradle.kts file:

sourceSets {
    val commonMain by getting {
        dependencies {
            implementation("io.github.androidpoet:dropdown:$version")
        }
    }
}

Usage

Create Menu Builder

fun getMenu(): MenuItem<String> {
  val menu = dropDownMenu<String> {
    item("about", "About") {
      icon(Icons.TwoTone.Language)
    }
    item("copy", "Copy") {
      icon(Icons.TwoTone.FileCopy)
    }
    item("share", "Share") {
      icon(Icons.TwoTone.Share)
      item("to_clipboard", "To clipboard") {
        item("pdf", "PDF")
        item("epub", "EPUB")
        item("web_page", "Web page")
        item("microsoft_word", "Microsoft word")
      }
      item("as_a_file", "As a file") {
        item("pdf", "PDF")
        item("epub", "EPUB")
        item("web_page", "Web page")
        item("microsoft_word", "Microsoft word")
      }
    }
    item("remove", "Remove") {
      icon(Icons.TwoTone.DeleteSweep)
      item("yep", "Yep") {
        icon(Icons.TwoTone.Done)
      }
      item("go_back", "Go back") {
        icon(Icons.TwoTone.Close)
      }
    }
  }
  return menu
}

Create Dropdown Menu

@ExperimentalAnimationApi
@Composable
fun Menu(isOpen: Boolean = false, setIsOpen: (Boolean) -> Unit, itemSelected: (String) -> Unit) {
  val menu = getMenu()
  Dropdown(
    isOpen = isOpen,
    menu = menu,
    colors = dropDownMenuColors(Teal200, White),
    onItemSelected = itemSelected,
    onDismiss = { setIsOpen(false) },
    offset = DpOffset(8.dp, 0.dp),
    enter = EnterAnimation.ElevationScale,
    exit = ExitAnimation.ElevationScale,
    easing = Easing.FastOutSlowInEasing,
    enterDuration = 400,
    exitDuration = 400
  )
}

Supported Animations

Enter Animations

EnterAnimation.FadeIn
EnterAnimation.SharedAxisXForward
EnterAnimation.SharedAxisYForward
EnterAnimation.SharedAxisZForward
EnterAnimation.ElevationScale
EnterAnimation.SlideIn
EnterAnimation.SlideInHorizontally
EnterAnimation.SlideInVertically
EnterAnimation.ScaleIn
EnterAnimation.ExpandIn
EnterAnimation.ExpandHorizontally
EnterAnimation.ExpandVertically

Exit Animations

ExitAnimation.FadeOut
ExitAnimation.SharedAxisXBackward
ExitAnimation.SharedAxisYBackward
ExitAnimation.SharedAxisZBackward
ExitAnimation.ElevationScale
ExitAnimation.SlideOut
ExitAnimation.SlideOutHorizontally
ExitAnimation.SlideOutVertically
ExitAnimation.ScaleOut
ExitAnimation.ShrinkOut
ExitAnimation.ShrinkHorizontally
ExitAnimation.ShrinkVertically

Easing Options

Easing.FastOutSlowInEasing
Easing.LinearOutSlowInEasing
Easing.FastOutLinearInEasing
Easing.LinearEasing

Animation Examples

Fade SharedAxisX SharedAxisY SharedAxisZ
ElevationScale SlideIn(SlideOut) SlideHorizontally SlideVertically
Scale Expand Expand Horizontally Expand Vertically

List icons created by Freepik - Flaticon

Support

Find this repository useful? ❤

Support it by joining stargazers for this repository. ⭐
Also, follow me on GitHub for more cool projects! 🤩

Buy Me A Coffee

License

Copyright 2022 AndroidPoet (Ranbir Singh)

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
Related Content

Compose Rich Editor

A Rich text editor library for both Jetpack Compose, fully customizable and supports the common rich text editor features.
GitHubUpdated today

DrawBox

DrawBox is a multi-purpose tool to draw anything on canvas, written completely on jetpack compose.
GitHubUpdated 17 days ago

Sheets-Compose-Dialogs

An Android library that offers dialogs & views for various use cases - build with Jetpack Compose for Compose projects. All of the dialogs & views are easy and quick to implement.
GitHubUpdated 4 months ago

Orbitary

Jetpack Compose animation library that allows you to implement animations such as shared element transition.
GitHubUpdated 8 months ago

Flippable

A Jetpack Compose library for animating a flip transition between the front and back of something, such as a card.
GitHubUpdated 13 months ago

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.