如何在Android键盘内实现滚动布局？

Question

I have been working on custom keyboard for android. I saw a few keyboard app like Kika Keyboard which has feature to swipe from one view to another if you want to use different emoji sets. Can anyone help me how do I implement emojis in such a way? Here is one of my xml code for emojis:-

<?xml version="1.0" encoding="utf-8"?>
<Keyboard android:keyWidth="14%p" android:keyHeight="@dimen/emoji_height" android:horizontalGap="0.0px" android:verticalGap="0.0px"
xmlns:android="http://schemas.android.com/apk/res/android">
<Row>
    <Key android:keyWidth="10%p" android:codes="-21" android:keyIcon="@drawable/u1f600" />
    <Key android:keyWidth="10%p" android:codes="-31" android:keyIcon="@drawable/u1f301" />
    <Key android:keyWidth="10%p" android:codes="-41" android:keyIcon="@drawable/u2702" />
    <Key android:keyWidth="10%p" android:codes="-51" android:keyIcon="@drawable/u1f680" />
    <Key android:keyWidth="10%p" android:codes="-61" android:keyIcon="@drawable/u1f192" />
    <Key android:keyWidth="10%p" android:codes="-71" android:keyIcon="@drawable/u1f34e" />
    <Key android:keyWidth="10%p" android:codes="-81" android:keyIcon="@drawable/u1f3be" />
    <Key android:keyWidth="10%p" android:codes="-91" android:keyIcon="@drawable/u1f4be" />
    <Key android:keyWidth="10%p" android:codes="-102" android:keyIcon="@drawable/u1f417" />
    <Key android:keyWidth="10%p" android:codes="-5"  android:isRepeatable="true" android:keyIcon="@drawable/ic_backspace_white_24dp" />
</Row>
<Row>
    <Key android:codes="0x1F600" android:keyIcon="@drawable/u1f600" android:keyEdgeFlags="left" />
    <Key android:codes="0x1F601" android:keyIcon="@drawable/u1f601" />
    <Key android:codes="0x1F602" android:keyIcon="@drawable/u1f602" />
    <Key android:codes="0x1F603" android:keyIcon="@drawable/u1f603" />
    <Key android:codes="0x1F604" android:keyIcon="@drawable/u1f604" />
    <Key android:codes="0x1F605" android:keyIcon="@drawable/u1f605" />
    <Key android:codes="0x1F606" android:keyIcon="@drawable/u1f606" android:keyEdgeFlags="right"/>
</Row>
<Row>
    <Key android:codes="0x1F607" android:keyIcon="@drawable/u1f607" android:keyEdgeFlags="left" />
    <Key android:codes="0x1F608" android:keyIcon="@drawable/u1f608" />
    <Key android:codes="0x1F609" android:keyIcon="@drawable/u1f609" />
    <Key android:codes="0x1F60A" android:keyIcon="@drawable/u1f60a" />
    <Key android:codes="0x1F60B" android:keyIcon="@drawable/u1f60b" />
    <Key android:codes="0x1F60C" android:keyIcon="@drawable/u1f60c" />
    <Key android:codes="0x1F60D" android:keyIcon="@drawable/u1f60d" android:keyEdgeFlags="right"/>
</Row>
<Row>
    <Key android:codes="0x1F60E" android:keyIcon="@drawable/u1f60e" android:keyEdgeFlags="left"/>
    <Key android:codes="0x1F60F" android:keyIcon="@drawable/u1f60f" />
    <Key android:codes="0x1F610" android:keyIcon="@drawable/u1f610" />
    <Key android:codes="0x1F611" android:keyIcon="@drawable/u1f611" />
    <Key android:codes="0x1F612" android:keyIcon="@drawable/u1f612" />
    <Key android:codes="0x1F613" android:keyIcon="@drawable/u1f613" />
    <Key android:codes="0x1F614" android:keyIcon="@drawable/u1f614" android:keyEdgeFlags="right"/>
</Row>
<Row android:rowEdgeFlags="bottom">
    <Key android:keyWidth="10%p" android:codes="-3" android:keyEdgeFlags="left" android:keyIcon="@drawable/sym_keyboard_done" />
    <Key android:keyWidth="10%p" android:codes="-11" android:keyLabel="ABC" />
    <Key android:codes="-10" android:keyWidth="20%p" android:keyLabel="Emoji"/>
    <Key android:codes="-70" android:keyWidth="20%p" android:keyLabel="Sticker"/>
    <Key android:codes="-110" android:keyWidth="20%p" android:keyLabel="Pattern" />
    <Key android:keyWidth="20%p" android:codes="10" android:keyEdgeFlags="right" android:keyIcon="@drawable/sym_keyboard_return" />
</Row>
</Keyboard>

I have all of my layouts for these emojis prepared. I just want to know how to put scroll view on this.

I also have to implement vertical scrollview too so that I can add emojis of same type in the same view. Can anyone help me with that?

Answer 1

You can add Viewpager with tab layout to implement swipe between views. You can add image of emojis instead of tab name.

Answer 2

To imitate Kika bind keyboard key to inflate and replace with emoji pane. The pane can be ViewPager with tabs. Inside ViewPager use RecyclerView with StaggeredGridLayoutManager.