Skip to content

A nice Android bottom sheet dialog populated with AndroidX EmojiCompat supported emojis.

License

Notifications You must be signed in to change notification settings

withplum/EmojiBottomSheetDialog

Repository files navigation

Maven Central

EmojiBottomSheetDialog

A nice Android bottom sheet dialog populated with AndroidX EmojiCompat supported emojis.

EmojiBottomSheetDialog gif

Usage

Add the dependency

dependencies {
    implementation("com.withplum:emojiBottomSheetDialog:<latest-version>)
}

Style customization

The appearance of the Bottom Sheet can be customised by providing a custom style like this example:

<resources>

    <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowBackground">@color/white</item>
        <item name="bottomSheetDialogTheme">@style/ModalBottomSheetDialog</item>
    </style>

    <style name="ModalBottomSheetDialog" parent="ThemeOverlay.MaterialComponents.BottomSheetDialog">
        <item name="colorSurface">@color/white</item>
        <item name="emojiBottomSheetTitleTextAppearance">@style/MyCustomEmojiBottomTitleTextAppearance</item>
        <item name="emojiBottomSheetSectionHeaderTextAppearance">@style/MyCustomEmojiBottomSheetSectionHeaderTextAppearance
        </item>
    </style>

    <style name="MyCustomEmojiBottomTitleTextAppearance" parent="TextAppearance.MaterialComponents.Headline6">
        <item name="android:textColor">@color/greyDark</item>
    </style>

    <style name="MyCustomEmojiBottomSheetSectionHeaderTextAppearance" parent="TextAppearance.MaterialComponents.Body1">
        <item name="android:textColor">@color/greyMid</item>
    </style>
</resources>

The title and section headers can be styled by providing custom text appearances in the style.

Element Attribute Default value
Title emojiBottomSheetTitleTextAppearance @style/TextAppearance.MaterialComponents.Headline6
Section Header emojiBottomSheetSectionHeaderTextAppearance TextAppearance.MaterialComponents.Body1
Background colorSurface ?android:attr/colorSurface

Initialize the dialog

    private fun initializeEmojiCategoriesPreferred() {
        emojiItemViewList = EmojiCategoryTransformer().transform(initializeEmojiCategoryList())
    }

    private fun initializeEmojiCategoryList(): List<Category> {
        return listOf(
            ActivitiesCategory(getString(R.string.activitiesCategoryTitle)),
            AnimalsNatureCategory(getString(R.string.animalsAndNatureTitle)),
            FoodDrinkCategory(getString(R.string.foodAndDrinkTitle)),
            FlagsCategory(getString(R.string.flagsTitle)),
            ObjectsCategory(getString(R.string.objectsTitle)),
            SmileysPeopleCategory(getString(R.string.smileysAndPeopleTitle)),
            SymbolsCategory(getString(R.string.symbolsTitle)),
            TravelPlacesCategory(getString(R.string.travelAndPlacesTitle))
        )
    }

    private fun showEmojiDialog() {
        EmojiPickerDialog.Builder(this@MainActivity, emojiItemViewList)
            .dismissWithAnimation(true)
            .title(getString(R.string.emojiDialogTitle))
            .cancelable(true)
            .listener(object : EmojiClickListener {
                override fun emojiClicked(unicode: EmojiItemView) {
                    selectedEmoji.text = unicode.value
                    selectedEmojiName.text = unicode.name
                }
            }).build().show()
    }

Breaking changes of version 3.0.0

  1. Certain APIs have become internal.
  2. In version 3.0.0 the library uses Java 17. You'll have to add the following to your build file:
android {
    compileOptions {
        sourceCompatibility = JavaVersion.VERSION_17
        targetCompatibility = JavaVersion.VERSION_17
    }

    kotlinOptions {
        jvmTarget = "17"
    }
}

Breaking changes of version 2.0.0

In version 2.0.0 we migrated to Emoji2. This results in the removal of:

  • EmojiCompatUtils
  • EmojInitListener
  • EmojiValues which was mostly used internally.

Initialization now happens internally via the Emoji2. If you still need an initialization listener you should use the official API as described here. The whole document Support modern emoji - Android Developers provides further details.

The same document will help you if you rely on AppCompat version lower than 1.4.0-alpha01 or on the Emoji library itself which provides these custom views for compatibility.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Publishing

The project uses gradle-maven-publish-plugin to publish artifacts to maven central.

To upload archives use the command (after having put the appropriate credentials in gradle properties or env variables):

./gradlew clean build emojiBottomSheetDialog:publish