B4A Library AXEmojiView

Hello World!

AXEmojiView is an advanced Android Library
which adds emoji,sticker,... support to your Android application ?
Demo • GitHub

​

AXEmojiView 1.2.0
Screenshots :

Usage

Install Emoji Provider
First step, you should install EmojiView with your EmojiProvider!

Dim EmojiManager As AX_EmojiManager
Dim Provider As AX_IOSEmojiProvider
Provider.Initialize
EmojiManager.Install(Provider)

Custom Emoji Provider

If you wanna display your own Emojis you can create your own implementation of EmojiProvider and pass it to AXEmojiManager.install.




Basic Usage

Create an AXEmojiEditText in your layout.

you should create a Page. Current pages are :

• EmojiView
• SingleEmojiView
• StickerView

Let's try EmojiView first :

Dim EmojiView As AX_EmojiView
EmojiView.Initialize("Amir")
EmojiView.EditText = YourEditText

And add this page to AXEmojiPopup :

Dim EmojiPopup As AXEmojiPopup
EmojiPopup.Initialize(EmojiView,"Amir")

EmojiPopup.Toggle ' Toggles visibility of the Popup.
EmojiPopup.Show ' Shows the Popup.
EmojiPopup.Dismiss ' Dismisses the Popup.
EmojiPopup.IsShowing ' Returns true when Popup is showing.

And we are done! ? Result :



AXEmojiPopupLayout

you can also create an AXEmojiPopupLayout instead of AXEmojiPopup! i believe that AXEmojiPopupLayout has a better performance.

1. create an AXEmojiPopupLayout in your layout. (Using FrameLayout - See Sample Code)

1. add the created page to AXEmojiPopupLayout.

Layout.InitPopupView(EmojiView)

Layout.Toggle ' Toggles visibility of the Popup.
Layout.Show ' Shows the Popup.
Layout.Dismiss ' Dismisses the Popup.
Layout.HideAndOpenKeyboard ' Hides the popup
Layout.IsShowing ' Returns true when Popup is showing.

Result is just same as AXEmojiPopup result!

Single Emoji View

SingleEmojiView is a RecyclerView and all emojis will load in one page (Same As Telegram Inc)

Dim SingleEmojiView As AX_SingleEmojiView
SingleEmojiView.Initialize("")
SingleEmojiView.EditText = YourEditText

Result :



StickerView

StickerView : you have to create your StickerProvider and load all your Stickers (from Url,Res,Bitmap or anything you want!) see example

Dim StickerView As AX_StickerView
Dim StickerProvider As MyStickerProvider
StickerProvider.Initialize
StickerView.Initialize("Sticker","Stickers",StickerProvider.Provider)

Result :




Also you can create your custom pages in StickerProvider . see example : ShopStickers

Result :



AXEmojiPager - Use Multiple Pages Together!

you can create an AXEmojiPager and add all your pages (EmojiView,StickerView,...) to the EmojiPager

Result :



Create Your Custom Pages

Create an AXEmojiBase (ViewGroup) and load your page layout And add your CustomPage to emojiPager

Result :


Customization

Customize theme with AXEmojiTheme.

EmojiManager.EmojiViewTheme.FooterEnabled = true
EmojiManager.EmojiViewTheme.SelectionColor = 0xFFFF4081
EmojiManager.EmojiViewTheme.FooterSelectedItemColor = 0xFFFF4081
EmojiManager.EmojiViewTheme.SelectionColor = Colors.Transparent
EmojiManager.EmojiViewTheme.SelectedColor = 0xFFFF4081
EmojiManager.EmojiViewTheme.CategoryColor = Colors.White
EmojiManager.EmojiViewTheme.FooterBackgroundColor = Colors.White
EmojiManager.EmojiViewTheme.AlwaysShowDivider = True
        
EmojiManager.StickerViewTheme.SelectionColor = 0xFFFF4081
EmojiManager.StickerViewTheme.SelectedColor = 0xFFFF4081
EmojiManager.StickerViewTheme.CategoryColor = Colors.White
EmojiManager.StickerViewTheme.AlwaysShowDivider = True

Result :



Custom Footer

Result :


DarkMode



Views

• AXEmojiPopupLayout
• AXEmojiBase / AXEmojiLayout
• AXEmojiView
• AXSingleEmojiView
• AXStickerView
• AXEmojiEditText
• AXEmojiMultiAutoCompleteTextView
• AXEmojiButton
• AXEmojiImageView
• AXEmojiTextView
• AXEmojiCheckBox

Replace String With Emojis

RecentManager And VariantManager

you can add your custom recentManager for emojis and stickers . implements to RecentEmoji/RecentSticker

Variant View
you can also create your own VariantPopupView ! but you don't need to, the default one is also nice

The Default Variant:

Download Lib+Sample
FileSize : 6MB
See more in GitHub

 

[AC_Lover]

thank you ?❤

 

[DonManfred]

Impressive! Thank you very much for sharing.

Interpret i correctly when i see WhatsappProvider.bar and WhatsappSticker.bas that it also can be used to define new Stickerpacks for Whatsapp?

 

[User242424]

Impressive! Thank you very much for sharing.

Hi, Thanks

WhatsappProvider.bar and WhatsappSticker.bas that it also can be used to define new Stickerpacks for Whatsapp?

No, this is not about WhatsApp stickers, i just set this name for my class because im using WhatsApp Cuppy pack Stickers for the AXEmojiView sample.

 

[DonManfred]

No, this is not about WhatsApp stickers, i just set this name for my class because im using WhatsApp Cuppy pack Stickers for the AXEmojiView sample.

Ohh, i see. Thank you. No problem.

 

[alimanam3386]

Perfect ?

 

[Salar82]

A wonderful library
Great

?????

 

[asales]

Wow! ?
Thank you very much.

 

[AnandGupta]

Sometime I wonder "What we can not do in B4X !"

Thanks a lot @User242424 .

Regards,

Anand

 

[mzelecom]

on simulator emoji pop up not shown.
how to fix it?

 

[Ibrahim Saleh]

Great library, just what i was looking for. Can we use the PopupLayout in our own activity and our own EditText. If yes can you give me an example on how to do that.

 

[User242424]

Great library, just what i was looking for. Can we use the PopupLayout in our own activity and our own EditText. If yes can you give me an example on how to do that.

Hi,
As you can see Activity,EditText are not part of library (just see the sample), yes there is AXEmojiEditText, you should use it for showing emoji in editText but also there is other ways to do that with other TextViews.
PopupLayout is only a simple way to use AXEmojiView kinda as a keyboard, you can customize everything you want.

Good news: new version is coming soon.

 

[Ibrahim Saleh]

Can you tell me what am doing wrong in this code below. The problem is the Emoji keyboard layout doesn't pop up. but also I don't get any errors

Sub Process_Globals
    Private xui As XUI
    Dim Provider As AX_IOSEmojiProvider
End Sub

Sub Globals
    Dim ChView As ChatView
    
    
    Dim EmojiManager As AX_EmojiManager
    Dim EmojiPager As AX_EmojiPager
    Private Popup As AX_EmojiPopupLayout
    
    Private IsShowing As Boolean
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Dim EmojiManagers As AX_EmojiManager
    Provider.Initialize
    EmojiManagers.Install(Provider)
    
    Activity.Color = xui.Color_RGB(228,228,228)
    ChView.Initialize("ChatView", Activity, True)
    ChView.DrawView(Activity)
    
    FixLayout
    
    EmojiPager.Initialize("Pager")
    Dim EmojiView As AX_EmojiView
    EmojiView.Initialize("")
    EmojiPager.AddPage(EmojiView,EmojiManager.GetDrawableResourceID("ic_msg_panel_smiles"))
    EmojiPager.EditText = ChView.TextField
    
    EmojiPager.SwipeWithFingerEnabled = True
    EmojiPager.LeftIcon = EmojiManager.GetDrawableResourceID("ic_ab_search")
    Popup.InitPopupView(EmojiPager,"Popup")
    
End Sub

Sub Activity_Resume
    Dim Utils As AX_EmojiUtils
    Provider.PreloadEmoji2(Utils.getEmojiUnicode(0x1F60D),"Amir")
End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub ChatView_SendMessage(Message As MessageData)
    Log("To Send: " & Message.MessageContent)
    If Rnd(0,2) = 0 Then
        ChView.DrawBallon(Message, False)
    Else
        ChView.DrawBallon(Message, True)
    End If   
End Sub

Sub ChatView_EmojiClick(TextField As EditText)
    Log("EmojiClick" )
    If IsShowing Then
        Popup.OpenKeyboard
    Else
        Popup.show
    End If
End Sub

Private Sub Amir_onEmojiLoaded(Emoji As  AX_IOSEmoji)
    
End Sub



Sub Popup_onShow
    UpdateButton(True)
    UpdateHeight(Popup.PopupHeight)
End Sub

Sub Popup_onDismiss
    UpdateButton(False)
    UpdateHeight(0)
End Sub

Private Sub Popup_onKeyboardOpened (Height As Int)
    UpdateButton(False)
    UpdateHeight(Height)
End Sub

Private Sub Popup_onKeyboardClosed
    UpdateButton(Popup.IsShowing)
    If Popup.IsShowing Then UpdateHeight(Popup.PopupHeight) Else UpdateHeight(0)
End Sub

Sub UpdateHeight (NewHeight As Int)
    Log("UpdateHeight " & NewHeight)
End Sub

Private Sub UpdateButton (showin As Boolean)
    IsShowing = showin
    If showin Then
        
    Else
        
    End If
End Sub

Private Sub Activity_KeyPress (KeyCode As Int) As Boolean 'Return True to consume the event
    If KeyCode = KeyCodes.KEYCODE_BACK And Popup.BackPressed Then Return True
    Return False
End Sub

Public Sub FixLayout
    Dim Context As JavaObject
    Context.InitializeContext
    Dim FrameLayout As JavaObject
    FrameLayout.InitializeNewInstance("android.widget.FrameLayout",Array(Context))
    Activity.AddView(FrameLayout,0,0,-1,-1)
    
    Popup.Initialize
    Dim LP As JavaObject
    LP.InitializeNewInstance("android.widget.FrameLayout.LayoutParams",Array(-1,-2))
    LP.SetField("gravity",Gravity.BOTTOM)
    FrameLayout.RunMethod("addView",Array(Popup,LP))
End Sub

 

[User242424]

Can you tell me what am doing wrong in this code below. The problem is the Emoji keyboard layout doesn't pop up. but also I don't get any errors

Hi, are you using simulators?
if yes, make sure your simulator supports the software keyboard.
if no, attach a simple project, i'll fix it.

 

[ArminKh1993]

JUST AMZINGGGGGGG ?