• Stars
    star
    3,841
  • Rank 11,439 (Top 0.3 %)
  • Language
    Kotlin
  • License
    Apache License 2.0
  • Created almost 10 years ago
  • Updated about 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

You can easily add awesome animated context menu to your app.

Android Arsenal Yalantis

ContextMenu

You can easily add awesome animated context menu to your app.

Check this project on dribbble

Check this project on Behance

Usage:

For a working implementation, have a look at the app module

1. Clone repository and add sources into your project or use Gradle:

Add it in your root build.gradle at the end of repositories:

	allprojects {
		repositories {
			...
			maven { url 'https://jitpack.io' }
		}
	}

Add the dependency

	dependencies {
	        implementation 'com.github.Yalantis:Context-Menu.Android:1.1.4'
	}

2. Create list of MenuObject, which consists of icon or icon and description.

You can use any drawable, resource, bitmap, color as image:

    menuObject.drawable = ...
    menuObject.setResourceValue(...)
    menuObject.setBitmapValue(...)
    menuObject.setColorValue(...)

You can set image ScaleType:

    menuObject.scaleType = ScaleType.FIT_XY

You can use any resource, drawable, color as background:

    menuObject.setBgResourceValue(...)
    menuObject.setBgDrawable(...)
    menuObject.setBgColorValue(...)

Now You can easily add text appearance style for menu titles:

	In your project styles create style for text appearance
	(For better visual effect extend it from TextView.DefaultStyle):
	
	<style name="TextViewStyle" parent="TextView.DefaultStyle">
        	<item name="android:textStyle">italic|bold</item>
        	<item name="android:textColor">#26D0EB</item>
	</style>

	And set it's id to your MenuObject :	
    
        val bitmapDrawable = BitmapDrawable(
                resources,
                BitmapFactory.decodeResource(resources, R.drawable.icn_3)
        )

        val menuObject = MenuObject("Add to friends").apply {
            drawable = bitmapDrawable
            menuTextAppearanceStyle = R.style.TextViewStyle
        }

You can use any color as text color:

    menuObject.textColor = ...

You can set any color as divider color:

    menuObject.dividerColor = ...

Example:

    val close = MenuObject().apply { setResourceValue(R.drawable.icn_close) }

    val send = MenuObject("Send message").apply { setResourceValue(R.drawable.icn_1) }
    
    val addFriend = MenuObject("Add to friends").apply {
            drawable = BitmapDrawable(
                    resources,
                    BitmapFactory.decodeResource(resources, R.drawable.icn_3)
            )
    }

    val menuObjects = mutableListOf<MenuObject>().apply {
            add(close)
            add(send)
            add(addFriend)
    }

3. Create newInstance of ContextMenuDialogFragment, which received MenuParams object.

    val menuParams = MenuParams(
    	actionBarSize = resources.getDimension(R.dimen.tool_bar_height).toInt(),
    	menuObjects = getMenuObjects(),
    	isClosableOutside = false
    	// set other settings to meet your needs
    )
    
    // If you want to change the side you need to add 'gravity' parameter,
    // by default it is MenuGravity.END.
    
    // For example:
    
    val menuParams = MenuParams(
    	actionBarSize = resources.getDimension(R.dimen.tool_bar_height).toInt(),
    	menuObjects = getMenuObjects(),
    	isClosableOutside = false,
    	gravity = MenuGravity.START
    )
    
    val contextMenuDialogFragment = ContextMenuDialogFragment.newInstance(menuParams)

4. Set menu with button, which will open ContextMenuDialogFragment.

    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        menuInflater.inflate(R.menu.menu_main, menu)
        return true
    }

    override fun onOptionsItemSelected(item: MenuItem?): Boolean {
        item?.let {
            when (it.itemId) {
                R.id.context_menu -> {
                    showContextMenuDialogFragment()
                }
            }
        }

        return super.onOptionsItemSelected(item)
    }

5. Add menu item listeners.

    contextMenuDialogFragment = menuItemClickListener = { view, position ->
    	// do something here
    }
	    
    contextMenuDialogFragment = menuItemLongClickListener = { view, position ->
    	// do something here
    }

Customization:

For better experience menu item size should be equal to ActionBar height.

newInstance of ContextMenuDialogFragment receives MenuParams object that has the fields:

menuObjects - list of MenuObject objects,

animationDelay - delay in millis after fragment opening and before closing, which will make animation smoother on slow devices,

animationDuration - duration of every piece of animation in millis,

isClosableOutside - if menu can be closed on touch to non-button area,

isFitSystemWindows - if true, then the default implementation of fitSystemWindows(Rect) will be executed,

isClipToPadding - true to clip children to the padding of the group, false otherwise.

The last two parameters may be useful if you use Translucent parameters in your theme:

    <item name="android:windowTranslucentStatus">true</item>

To stay Context Menu below Status Bar set fitSystemWindows to true and clipToPadding to false.

Compatibility

  • Android KitKat 4.4+

Changelog

Version: 1.1.4

  • added background color animation

Version: 1.1.2

  • added animation on close outside menu

Version: 1.1.1

  • bug with menuObject.textColor was fixed

Version: 1.1.0

  • library rewrited on Kotlin
  • added rtl support
  • added gravity parameter for MenuParams

Version: 1.0.8

  • added transparent menu background support
  • dependencies actualized

Version: 1.0.7

  • Text in menu now also clickable
  • Support libs and gradle updated

Version: 1.0.6

  • com.android.tools.build:gradle:1.5.0
  • Support libs and sdk updated to 23

Version: 1.0.5

  • Fixed setClosableOutside issue.
  • Fixed setAnimationDuration doesnΒ΄t work for open event issue.
  • Fixed menu item listener setting mechanism. It can be not activity but any class that implements listeners now. Issue. Attention! You have to set listeners to the context fragment manually. Check block 5 in the Usage.

Version: 1.0.4

  • Old ContextMenuDialogFragment newInstance methods are deprecated. Use new universal one that received MenuParams.
  • Added possibility to dismiss menu by clicking on non-button area. See MenuParams.setClosableOutside(boolean).

Version: 1.0.3

  • Added menu text appearence style. (Note: other text style methods are deprecated).

Version: 1.0.2

  • Changed MenuObject constructors. Image setting is moved to methods
  • Added styling of MenuObject image, background, text color, divider color
  • Added possibility to interact with translucent Status Bar

Version: 1.0.1

  • Added OnMenuItemLongClickListener (usage: the same as OnMenuItemClickListener, check sample app)
  • Renamed:
com.yalantis.contextmenu.lib.ContextMenuDialogFragment.ItemClickListener ->
com.yalantis.contextmenu.lib.interfaces.OnMenuItemClickListener

com.yalantis.contextmenu.lib.ContextMenuDialogFragment.ItemClickListener.onItemClick(...) ->
com.yalantis.contextmenu.lib.interfaces.OnMenuItemClickListener.onMenuItemClick(...)

Version: 1.0

  • Pilot version

Let us know!

We’d be really happy if you sent us links to your projects where you use our component. Just send an email to [email protected] And do let us know if you have any questions or suggestion regarding the animation.

P.S. We’re going to publish more awesomeness wrapped in code and a tutorial on how to make UI for Android (iOS) better than better. Stay tuned!

License

Copyright 2019, Yalantis

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.

More Repositories

1

uCrop

Image Cropping Library for Android
Java
11,656
star
2

Koloda

KolodaView is a class designed to simplify the implementation of Tinder like cards on iOS.
Swift
5,268
star
3

Side-Menu.Android

Side menu with some categories to choose.
Java
5,218
star
4

Phoenix

Phoenix Pull-to-Refresh
Java
4,024
star
5

StarWars.iOS

This component implements transition animation to crumble view-controller into tiny pieces.
Swift
3,761
star
6

FoldingTabBar.iOS

Folding Tab Bar and Tab Bar Controller
Objective-C
3,672
star
7

Persei

Animated top menu for UITableView / UICollectionView / UIScrollView written in Swift
Swift
3,451
star
8

GuillotineMenu

Our Guillotine Menu Transitioning Animation implemented in Swift reminds a bit of a notorious killing machine.
Swift
2,919
star
9

GuillotineMenu-Android

Neat library, that provides a simple way to implement guillotine-styled animation
Java
2,735
star
10

Side-Menu.iOS

Animated side menu with customizable UI
Swift
2,714
star
11

Segmentio

Animated top/bottom segmented control written in Swift.
Swift
2,504
star
12

DisplaySwitcher

Custom transition between two collection view layouts
Swift
2,326
star
13

Euclid

User Profile Interface Animation
Java
2,237
star
14

Horizon

Horizon - Simple visual equaliser for Android
Java
2,208
star
15

Pull-to-Refresh.Rentals-iOS

This project aims to provide a simple and customizable pull to refresh implementation. Made in Yalantis
Objective-C
2,143
star
16

StarWars.Android

This component implements transition animation to crumble view into tiny pieces.
Java
1,941
star
17

PullToMakeSoup

Custom animated pull-to-refresh that can be easily added to UIScrollView
Objective-C
1,924
star
18

Context-Menu.iOS

You can easily add awesome animated context menu to your app.
Objective-C
1,843
star
19

FlipViewPager.Draco

This project aims to provide a working page flip implementation for usage in ListView.
Java
1,839
star
20

Taurus

A little more fun for the pull-to-refresh interaction.
Java
1,671
star
21

SearchFilter

Implementing Search Filter Animation in Kotlin for Quora Meets LinkedIn, Our App Design Concept
Kotlin
1,657
star
22

ToDoList

Micro-Transitions for Smooth Android To-Do List Animations
Java
1,621
star
23

JellyToolbar

Kotlin
1,491
star
24

pull-to-make-soup

Custom animated pull-to-refresh that can be easily added to RecyclerView
Java
1,446
star
25

ColorMatchTabs

This is a Review posting app that let user find interesting places near them
Swift
1,382
star
26

Multi-Selection

Multiselection Solution for Android in Kotlin
Kotlin
1,373
star
27

PixPic

PixPic, a Photo Editing App
Swift
1,337
star
28

PullToRefresh

This component implements pure pull-to-refresh logic and you can use it for developing your own pull-to-refresh animations
Swift
1,250
star
29

Preloader.Ophiuchus

Custom Label to apply animations on whole text or letters.
Objective-C
882
star
30

CameraModule

Simple camera module for android applications
Java
684
star
31

ForceBlur

ForceBlur Animation for iOS Messaging Apps
Swift
670
star
32

EatFit

Eat fit is a component for attractive data representation inspired by Google Fit
Swift
655
star
33

FastEasyMapping

A tool for fast serializing & deserializing of JSON
Objective-C
553
star
34

PullToMakeFlight

Custom animated pull-to-refresh that can be easily added to UIScrollView
Swift
499
star
35

OfficialFoldingTabBar.Android

Kotlin
451
star
36

Watchface-Constructor

This is simple watchface constructor demo
Java
279
star
37

CloudKit-Demo.Swift

Swift
253
star
38

Koloda-Android

Kotlin
248
star
39

e-contact-android

Java
223
star
40

FitTrack

Concept of a fitness app.
Swift
168
star
41

ColorMatchTabsAndroid

Kotlin
152
star
42

iOS-Guidelines

iOS Guidelines used in Yalantis ;)
145
star
43

CloudKit-Demo.Objective-C

Objective-C
135
star
44

AppearanceNavigationController

Example with advanced configuration of the navigation controller's appearance
Swift
98
star
45

GLata

Android library for creating OpenGL animations
Kotlin
84
star
46

VishnuCalendar

Kotlin
75
star
47

YACalendar

Yalantis Calendar
Swift
72
star
48

e-contact-ios

Swift
49
star
49

APIClient

Swift
40
star
50

YALConsole

Objective-C
40
star
51

DBClient

Swift
28
star
52

go-config

Go
8
star
53

android-styler

Java
5
star
54

go-pool

Go
4
star
55

go-monitoring

Go
2
star
56

go-influx

Go
2
star
57

Result

Swift
2
star
58

go-graphql

Go
1
star