Custom keyboard layout not fits on screen

Question

I got a custom keyboard made for playing a text based game. Problem is keys not fits when I put a verticalGap and horizontalGap to have a small key gap. The cause of the keys that not fits screen is because, I have a key(main key) with height of 3 rows. So I made 2nd and 3rd row keys 40%p for my main key (which has 40%p width). My keyboard xml for keys is: res/xml/drpgkeys.xml

<Keyboard xmlns:android="http://schemas.android.com/apk/res/android"
android:horizontalGap="5dp"
android:keyHeight="9%p"
android:keyWidth="10%p"
android:verticalGap="5dp">

<Row>
    <Key
        android:codes="888"
        android:keyEdgeFlags="left"
        android:keyHeight="27%p"
        android:keyLabel="ADV"
        android:keyWidth="40%p" />

    <Key
        android:codes="907"
        android:keyLabel="MINE"
        android:keyWidth="30%p" />
    <Key
        android:codes="905"
        android:keyEdgeFlags="right"
        android:keyLabel="CHOP"
        android:keyWidth="30%p" />
</Row>
<Row>
    <Key
        android:codes="906"
        android:horizontalGap="40%p"
        android:keyLabel="FORAGE"
        android:keyWidth="30%p" />
    <Key
        android:codes="908"
        android:keyEdgeFlags="right"
        android:keyLabel="FISH"
        android:keyWidth="30%p" />
</Row>

<Row android:keyHeight="8%p">
    <Key
        android:codes="201"
        android:horizontalGap="40%p"
        android:keyLabel="O.o"
        android:keyWidth="12%p"
        android:popupKeyboard="@xml/inv" />
    <Key
        android:codes="334"
        android:keyLabel="Undefined"
        android:keyWidth="36%p"
        android:popupKeyboard="@xml/market" />
    <Key
        android:codes="202"
        android:keyEdgeFlags="right"
        android:keyLabel="o.O"
        android:keyWidth="12%p"
        android:popupKeyboard="@xml/ginv" />


</Row>
<Row
    android:keyHeight="8%p"
    android:rowEdgeFlags="bottom">
    <Key
        android:codes="900"
        android:keyEdgeFlags="left"
        android:keyLabel="STATS"
        android:keyWidth="20%p"
        android:popupKeyboard="@xml/stats" />
    <Key
        android:codes="901"
        android:keyLabel="PET"
        android:keyWidth="20%p" />
    <Key
        android:codes="903"
        android:keyLabel="HEAL"
        android:keyWidth="20%p" />
    <Key
        android:codes="904"
        android:keyLabel="PHEAL"
        android:keyWidth="20%p" />
    <Key
        android:codes="333"
        android:keyEdgeFlags="right"
        android:keyIcon="@drawable/key_icon"
        android:keyWidth="20%p"
        android:popupKeyboard="@xml/optionkey" />
</Row>
</Keyboard>

and my keyboard layout is: res/layout/keyboard.xml

<?xml version="1.0" encoding="UTF-8"?>
<drpg.ddkeys.ddKeysView 
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:fitsSystemWindows="true"
android:keyBackground="@drawable/key_background"
android:keyPreviewLayout="@null"
android:keyTextColor="#99b3c4"
android:popupLayout="@layout/popupkeys" />

my key_backgroud drawable normal state keyboard is https://pastebin.com/raw/hTLJ8PZu Keyboard photo: https://i.imgur.com/Sf6DVad.jpg where, ADV key's height is smaller to 3rd row keys and 2nd and 3rd rows are outside screen.

couldn't add drawable file with this too, shows some error when formatting to code — user10111962
I did resolved my issue by decresing 2nd and 3rd row keys sizes and increasing ADV keys height. But that doesn't compatible with every devices. — user10111962
Searched all over and found something called GridLayout. I don't know how to implement that here.. ¯_(ツ)_/¯ — user10111962

Unknown Unknown · Accepted Answer · 2018-09-11T03:42:37

I have resolved my issue by removing android:horizontalGap from Keyboard level and applied to Key level. And made horizontalGap in %p and adjusted every key size so my total keywidth should get 100%p.

<Keyboard xmlns:android="http://schemas.android.com/apk/res/android"
android:keyHeight="9%p"
android:keyWidth="10%p"
android:verticalGap="0.55%p">

<Row>
    <Key
        android:codes="888"
        android:keyEdgeFlags="left"
        android:keyHeight="27%p"
        android:keyLabel="ADV"
        android:keyWidth="40%p" />

    <Key
        android:codes="907"
        android:horizontalGap="1%p"
        android:keyLabel="MINE"
        android:keyWidth="29%p" />
    <Key
        android:codes="905"
        android:horizontalGap="1%p"
        android:keyEdgeFlags="right"
        android:keyLabel="CHOP"
        android:keyWidth="29%p" />
</Row>

<Row>
    <Key
        android:codes="906"
        android:horizontalGap="41%p"
        android:keyLabel="FORAGE"
        android:keyWidth="29%p" />
    <Key
        android:codes="908"
        android:horizontalGap="1%p"
        android:keyEdgeFlags="right"
        android:keyLabel="FISH"
        android:keyWidth="29%p" />
</Row>

<Row
    android:keyHeight="8%p"
    android:keyboardMode="@integer/default_keys">
    <Key
        android:codes="201"
        android:horizontalGap="41%p"
        android:keyLabel="O.o"
        android:keyWidth="11%p"
        android:popupKeyboard="@xml/inv" />
    <Key
        android:codes="334"
        android:horizontalGap="1%p"
        android:keyLabel="Undefined"
        android:keyWidth="35%p"
        android:popupKeyboard="@xml/market" />
    <Key
        android:codes="202"
        android:horizontalGap="1%p"
        android:keyEdgeFlags="right"
        android:keyLabel="o.O"
        android:keyWidth="11%p"
        android:popupKeyboard="@xml/ginv" />
</Row>

<Row
    android:keyHeight="8%p"
    android:keyboardMode="@integer/custom_keys">
    <Key
        android:codes="201"
        android:horizontalGap="41%p"
        android:keyLabel="O_o"
        android:keyWidth="11%p"
        android:popupKeyboard="@xml/customkeys_left" />
    <Key
        android:codes="334"
        android:horizontalGap="1%p"
        android:keyLabel="Undefined"
        android:keyWidth="35%p"
        android:popupKeyboard="@xml/market" />
    <Key
        android:codes="202"
        android:horizontalGap="1%p"
        android:keyEdgeFlags="right"
        android:keyLabel="o_O"
        android:keyWidth="11%p"
        android:popupKeyboard="@xml/customkeys_right" />
</Row>

<Row
    android:keyHeight="8%p"
    android:rowEdgeFlags="bottom">
    <Key
        android:codes="900"
        android:keyEdgeFlags="left"
        android:keyLabel="STATS"
        android:keyWidth="19.2%p"
      android:popupKeyboard="@xml/stats" />
    <Key
        android:codes="901"
        android:keyLabel="PET"
        android:keyWidth="19.2%p" 
        android:horizontalGap="1%p"/>
    <Key
        android:codes="903"
        android:keyLabel="HEAL"
        android:keyWidth="19.2%p"
        android:horizontalGap="1%p" />
    <Key
        android:codes="904"
        android:keyLabel="PHEAL"
        android:keyWidth="19.2%p"
        android:horizontalGap="1%p" />
    <Key
        android:codes="333"
        android:keyEdgeFlags="right"
        android:keyIcon="@drawable/key_icon"
        android:keyWidth="19.2%p"
        android:popupKeyboard="@xml/optionkey" 
        android:horizontalGap="1%p"/>
 </Row>
 </Keyboard>

Custom keyboard layout not fits on screen

1 Answers