Reputation: 661
I've developed a custom keyboard app on Android. For now, my keyboard looks like this:
What I like to do is to have some space on the left for the first key and on right for the last key on the row. In other words, I'd like to center the keys on row. It needs to be like this:
I've tried using different android:keyWidth settings, also the android:horizontalGap but they did not work for this specific design decision.
My keys_layout_dark_theme file. I've three different themes so only change between one and another is on colors, icons.
<?xml version="1.0" encoding="utf-8"?>
<Keyboard xmlns:android="http://schemas.android.com/apk/res/android"
android:keyWidth="10%p"
android:horizontalGap="2dp"
android:verticalGap="2dp"
android:keyHeight="55dp"
android:keyTextColor="@color/colorAccent"
android:keyBackground="@drawable/key_background_dark_theme">
<Row>
<Key android:codes="49" android:keyLabel="1" android:keyEdgeFlags="left"/>
<Key android:codes="50" android:keyLabel="2"/>
<Key android:codes="51" android:keyLabel="3"/>
<Key android:codes="52" android:keyLabel="4"/>
<Key android:codes="53" android:keyLabel="5"/>
<Key android:codes="54" android:keyLabel="6"/>
<Key android:codes="55" android:keyLabel="7"/>
<Key android:codes="56" android:keyLabel="8"/>
<Key android:codes="57" android:keyLabel="9"/>
<Key android:codes="48" android:keyLabel="0"/>
</Row>
<Row>
<Key android:codes="113" android:keyLabel="q" android:keyEdgeFlags="left"/>
<Key android:codes="119" android:keyLabel="w"/>
<Key android:codes="101" android:keyLabel="e"
android:popupKeyboard="@xml/popup_keyboard_dark_theme"
android:popupCharacters="é"/>
<Key android:codes="114" android:keyLabel="r"/>
<Key android:codes="116" android:keyLabel="t"
android:popupKeyboard="@xml/popup_keyboard_dark_theme"
android:popupCharacters="ṫ"/>
<Key android:codes="121" android:keyLabel="y"/>
<Key android:codes="117" android:keyLabel="u"
android:popupKeyboard="@xml/popup_keyboard_dark_theme"/>
<Key android:codes="305" android:keyLabel="ı"/>
<Key android:codes="111" android:keyLabel="o"
android:popupKeyboard="@xml/popup_keyboard_dark_theme"/>
<Key android:codes="112" android:keyLabel="p"
android:popupKeyboard="@xml/popup_keyboard_dark_theme"
android:popupCharacters="ṕ"/>
<Key android:codes="287" android:keyLabel="ğ"/>
<Key android:codes="252" android:keyLabel="ü"
android:keyEdgeFlags="right"/>
</Row>
<Row>
<Key android:codes="97" android:keyLabel="a"
android:keyEdgeFlags="left"
android:popupKeyboard="@xml/popup_keyboard_dark_theme"
android:popupCharacters="á"/>
<Key android:codes="115" android:keyLabel="s"
android:popupKeyboard="@xml/popup_keyboard_dark_theme"
android:popupCharacters="šś"/>
<Key android:codes="100" android:keyLabel="d"/>
<Key android:codes="102" android:keyLabel="f"
android:popupKeyboard="@xml/popup_keyboard_dark_theme"
android:popupCharacters="ḟ"/>
<Key android:codes="103" android:keyLabel="g"
android:popupKeyboard="@xml/popup_keyboard_dark_theme"
android:popupCharacters="ǵ"/>
<Key android:codes="104" android:keyLabel="h"
android:popupKeyboard="@xml/popup_keyboard_dark_theme"
android:popupCharacters="ḣ"/>
<Key android:codes="106" android:keyLabel="j"
android:popupKeyboard="@xml/popup_keyboard_dark_theme"
android:popupCharacters="ĵ"/>
<Key android:codes="107" android:keyLabel="k"
android:popupKeyboard="@xml/popup_keyboard_dark_theme"
android:popupCharacters="ḱ"/>
<Key android:codes="108" android:keyLabel="l"
android:popupKeyboard="@xml/popup_keyboard_dark_theme"
android:popupCharacters="ĺ"/>
<Key android:codes="351" android:keyLabel="ş"
android:popupKeyboard="@xml/popup_keyboard_dark_theme"
android:popupCharacters="ṩ"/>
<Key android:codes="105" android:keyLabel="i"
android:popupKeyboard="@xml/popup_keyboard_dark_theme"
android:popupCharacters="İ"
android:keyEdgeFlags="right"/>
</Row>
<Row>
<Key android:codes="-1" android:keyEdgeFlags="left"
android:keyIcon="@drawable/ic_cap_letters"
android:keyWidth="15%p"/>
<Key android:codes="122" android:keyLabel="z"
android:popupKeyboard="@xml/popup_keyboard_dark_theme"
android:popupCharacters="ź"/>
<Key android:codes="120" android:keyLabel="x"/>
<Key android:codes="99" android:keyLabel="c"
android:popupKeyboard="@xml/popup_keyboard_dark_theme"
android:popupCharacters="ć"/>
<Key android:codes="118" android:keyLabel="v"/>
<Key android:codes="98" android:keyLabel="b"/>
<Key android:codes="110" android:keyLabel="n"/>
<Key android:codes="109" android:keyLabel="m"/>
<Key android:codes="246" android:keyLabel="ö"/>
<Key android:codes="231" android:keyLabel="ç"
android:popupKeyboard="@xml/popup_keyboard_dark_theme"
android:popupCharacters="ḉ"/>
<Key android:codes="-5" android:keyIcon="@drawable/ic_clear"
android:keyWidth="15%p"
android:isRepeatable="true"
android:keyEdgeFlags="right"/>
</Row>
<Row android:rowEdgeFlags="bottom">
<Key android:codes="-2" android:keyWidth="15%p"
android:keyIcon="@drawable/ic_symbols"
android:keyEdgeFlags="left"/>
<Key android:codes="44" android:keyLabel="," android:keyWidth="10%p"/>
<Key android:codes="46" android:keyLabel="."/>
<Key android:codes="32" android:keyLabel="SPACE"
android:keyWidth="50%p"
android:isRepeatable="true"/>
<Key android:codes="39" android:keyLabel="'"/>
<Key android:codes="-4" android:keyBackground="@color/colorPrimary"
android:keyIcon="@drawable/ic_success"
android:keyWidth="15%p"
android:keyEdgeFlags="right"/>
</Row>
</Keyboard>
Upvotes: 2
Views: 864
Reputation: 686
You should add the android:verticalGap
and android:horizontalGap
attributes in your rows or in your keys.
It will look more or less like this:
<Row android:verticalGap="1%p"
android:horizontalGap="0.5%p">
There's a few more attributes that could help you when creating a custom keyboard layout. Take a look on this question.
If you want a margin in only one side, combine the keyEdgeFlags
and horizontalGap
attributes:
<Key android:keyEdgeFlags="left" horizontalGap="1%p"/>
Otherwise, if you don't want to use it, there is also two workarounds: The first option is to add a custom drawable for the key with a blank space in the image, the second option is to add an empty key and set the size of the margin with the android:horizontalGap
of the empty key.
UPDATE
gap
and edgeFlags
got deprecated in API 29, now you should use horizontalGap
and keyEdgeFlags
I updated the answer to use those, for more info see the Android Dev Doc.
Upvotes: 1