Indonesian (Bahasa Indonesia) translation by Hasannudin Amin (you can also view the original English article)

Sebagian besar perangkat Android tidak memiliki keyboard fisik. Sebagai gantinya, mereka mengandalkan soft keyboard atau virtual untuk menerima masukan pengguna. Jika Anda menyukai personalisasi Android, mengetahui bagaimana membuat kustomisasi, soft keyboard bisa membawa hobi Anda ke tingkat yang baru.
Dengan menggunakan Android SDK, Anda dapat dengan cepat membuat soft keyboard dengan beberapa baris kode yang mengejutkan, karena SDK
menangani banyak tugas tingkat rendah, seperti mengenali kunci sentuhan,
menarik keyboard, dan menjalin hubungan antara keyboard dan bidang
masukan.
Dalam tutorial ini, Anda akan belajar cara membuat soft keyboard yang
berfungsi penuh yang bisa berfungsi sebagai keyboard default perangkat
Android Anda.
1. Prasyarat
Anda akan memerlukan Eclipse ADT Bundle yang terinstal. Anda bisa mendownloadnya dari situs Android Developer.
2. Membuat Proyek Baru
Jalankan Eclipse dan buat aplikasi Android baru. Sebut saja aplikasi ini, SimpleKeyboard. Pastikan Anda memilih nama paket yang unik. Tetapkan SDK minimum yang diperlukan ke Android 2.2 dan tetapkan target SDK ke Android 4.4.

Aplikasi ini tidak akan memiliki aktivitas jadi batalkan pilihan Create Activity dan klik Finish.

3. Sunting Manifest
Soft Keyboard dianggap sebagai Input Method Editor (IME) oleh sistem operasi Android. IME dinyatakan sebagai Service
di AndroidManifest.xml yang menggunakan izin BIND_INPUT_METHOD
, dan menanggapi aksi android.view.InputMethod
.
Tambahkan baris berikut ke tag application
dari manifest:
<service android:name=".SimpleIME" android:label="@string/simple_ime" android:permission="android.permission.BIND_INPUT_METHOD" > <meta-data android:name="android.view.im" android:resource="@xml/method"/> <intent-filter> <action android:name="android.view.InputMethod" /> </intent-filter> </service>
4. Membuat method.xml
Tag service
di file manifest berisi tag meta-data
yang merujuk ke file XML bernama method.xml. Tanpa file ini, sistem operasi Android tidak akan mengenali Service
kita sebagai layanan IME yang valid. File berisi rincian tentang metode input dan subtipenya. Untuk keyboard kita, kita mendefinisikan satu subtipe untuk lokal en_US. Buat direktori res/xml jika tidak ada, dan tambahkan file method.xml padanya. Isi file harus:
<?xml version="1.0" encoding="utf-8"?> <input-method xmlns:android="https://schemas.android.com/apk/res/android"> <subtype android:label="@string/subtype_en_US" android:imeSubtypeLocale="en_US" android:imeSubtypeMode="keyboard" /> </input-method>
5. Menyunting strings.xml
String yang digunakan aplikasi ini didefinisikan dalam file res /values/strings.xml. Kita membutuhkan tiga string:
- nama apliaksi
- label IME
- label subtipe IME
Perbarui strings.xml Anda sehingga memiliki isi seperti berikut:
<resources> <string name="app_name">SimpleKeyboard</string> <string name="simple_ime">Simple IME</string> <string name="subtype_en_US">English (US)</string> </resources>
6. Tentukan Layout Keyboard
Layout keyboard kita hanya berisi KeyboardView
. Atribut layout_alignParentBottom
disetel ke true
sehingga keyboard muncul di bagian bawah layar.
Buat file bernama res/layout/keyboard.xml dan ganti isinya dengan yang berikut ini:
<?xml version="1.0" encoding="UTF-8"?> <android.inputmethodservice.KeyboardView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/keyboard" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:keyPreviewLayout ="@layout/preview" />
keyPreviewLayout
adalah layout short-lived pop-up yang muncul setiap kali tombol pada keyboard ditekan. Ini berisi TextView
tunggal. Buat file bernama res/layout/preview.xml dan tambahkan berikut ini:
<?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:background="#ffff00" android:textStyle="bold" android:textSize="30sp" > </TextView>
6. Tentukan Tombol Keyboard
Rincian tombol keyboard dan posisinya ditentukan dalam file XML. Setiap tombol memiliki atribut berikut:
-
keyLabel
: Atribut ini berisi teks yang ditampilkan pada tombol. -
codes
: Atribut ini berisi nilai unicode dari karakter yang diwakili oleh tombol.
Misalnya, untuk menentukan kunci untuk huruf A, atribut codes
harus memiliki nilai 97 dan atribut keyLabel
harus ditetapkan ke A.
Jika lebih dari satu kode dikaitkan dengan sebuah tombol, maka karakter yang ditunjukkan oleh tombol akan bergantung pada jumlah ketukan yang diterima tombolnya. Misalnya, jika kunci memiliki kode 63, 33, dan 58:
- Ketuk sekali pada tombol menghasilkan karakter ?
- Dua ketukan berurutan menghasilkan karakter !
- tiga ketukan berurutan menghasilkan karakter :
Tombol juga bisa memiliki beberapa atribut opsional:
-
keyEdgeFlags
: Atribut ini bisa mengambil nilaileft
atauright
. Atribut ini biasanya ditambahkan ke tombol paling kiri dan paling kanan dalam suatu baris. -
keyWidth
: Atribut ini mendefinisikan lebar sebuah tombol. Ini biasanya didefinisikan sebagai nilai persentase. -
isRepeatable
: Jika atribut ini disetel ketrue
, lama menekan tombol akan mengulangi tindakan beberapa kali kunci. Hal ini biasanya disetel ketrue
untuk tombol delete dan spacebar.
Tombol keyboard dikelompokkan sebagai baris. Ini adalah praktik yang baik untuk membatasi jumlah tombol secara berturut-turut hingga maksimum sepuluh, dengan setiap tombol memiliki lebar yang sama dengan 10% dari keyboard. Ketinggian tombol diatur ke 60dp dalam tutorial ini. Nilai ini bisa disesuaikan, namun nilai kurang dari 48dp tidak dianjurkan. Keyboard kita akan memiliki lima baris kunci.
Kita sekarang bisa teruskan dan mendesain keyboard. Buat file baru bernama res/xml/qwerty.xml dan ganti isinya dengan yang berikut ini:
<Keyboard xmlns:android="http://schemas.android.com/apk/res/android" android:keyWidth="10%p" android:horizontalGap="0px" android:verticalGap="0px" android:keyHeight="60dp" > <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" android:keyEdgeFlags="right"/> </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"/> <Key android:codes="114" android:keyLabel="r"/> <Key android:codes="116" android:keyLabel="t"/> <Key android:codes="121" android:keyLabel="y"/> <Key android:codes="117" android:keyLabel="u"/> <Key android:codes="105" android:keyLabel="i"/> <Key android:codes="111" android:keyLabel="o"/> <Key android:codes="112" android:keyLabel="p" android:keyEdgeFlags="right"/> </Row> <Row> <Key android:codes="97" android:keyLabel="a" android:keyEdgeFlags="left"/> <Key android:codes="115" android:keyLabel="s"/> <Key android:codes="100" android:keyLabel="d"/> <Key android:codes="102" android:keyLabel="f"/> <Key android:codes="103" android:keyLabel="g"/> <Key android:codes="104" android:keyLabel="h"/> <Key android:codes="106" android:keyLabel="j"/> <Key android:codes="107" android:keyLabel="k"/> <Key android:codes="108" android:keyLabel="l"/> <Key android:codes="35,64" android:keyLabel="\# \@" android:keyEdgeFlags="right"/> </Row> <Row> <Key android:codes="-1" android:keyLabel="CAPS" android:keyEdgeFlags="left"/> <Key android:codes="122" android:keyLabel="z"/> <Key android:codes="120" android:keyLabel="x"/> <Key android:codes="99" android:keyLabel="c"/> <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="46" android:keyLabel="."/> <Key android:codes="63,33,58" android:keyLabel="\? ! :" android:keyEdgeFlags="right"/> </Row> <Row android:rowEdgeFlags="bottom"> <Key android:codes="44" android:keyLabel="," android:keyWidth="10%p" android:keyEdgeFlags="left"/> <Key android:codes="47" android:keyLabel="/" android:keyWidth="10%p" /> <Key android:codes="32" android:keyLabel="SPACE" android:keyWidth="40%p" android:isRepeatable="true"/> <Key android:codes="-5" android:keyLabel="DEL" android:keyWidth="20%p" android:isRepeatable="true"/> <Key android:codes="-4" android:keyLabel="DONE" android:keyWidth="20%p" android:keyEdgeFlags="right"/> </Row> </Keyboard>
Anda mungkin telah memperhatikan bahwa beberapa tombol memiliki nilai negatif untuk atribut codes
. Nilai negatif sama dengan konstanta yang telah ditentukan di class Keyboard
. Misalnya, nilai -5
sama dengan nilai Keyboard.KEYCODE_DELETE
.
7. Membuat Class Service
Buat class Java baru dan menyebutnya SimpleIME.java. Class harus memperpanjang class InputMethodService
dan menerapkan antarmuka OnKeyboardActionListener
. Antarmuka OnKeyboardActionListener
berisi metode yang disebut saat tombol soft keyboard diketuk atau ditekan.
Class SimpleIME
harus memiliki tiga variabel anggota:
- sebuah
KeyboardView
yang merujuk pada pandangan yang didefinisikan dalam layout - sebuah contoh
Keyboard
yang ditugaskan keKeyboardView
-
boolean
memberitahu kita jika caps lock diaktifkan.
Setelah mendeklarasikan variabel-variabel ini dan menambahkan metode antarmuka OnKeyboardActionListener
, kelas SimpleIME
akan terlihat
seperti ini:
public class SimpleIME extends InputMethodService implements OnKeyboardActionListener{ private KeyboardView kv; private Keyboard keyboard; private boolean caps = false; @Override public void onKey(int primaryCode, int[] keyCodes) { } @Override public void onPress(int primaryCode) { } @Override public void onRelease(int primaryCode) { } @Override public void onText(CharSequence text) { } @Override public void swipeDown() { } @Override public void swipeLeft() { } @Override public void swipeRight() { } @Override public void swipeUp() { } }
Saat keyboard dibuat, metode onCreateInputView
dipanggil. Semua variabel anggota Service
dapat diinisialisasi di sini. Perbarui implementasi metode onCreateInputView
seperti yang ditunjukkan di bawah ini:
@Override public View onCreateInputView() { kv = (KeyboardView)getLayoutInflater().inflate(R.layout.keyboard, null); keyboard = new Keyboard(this, R.xml.qwerty); kv.setKeyboard(keyboard); kv.setOnKeyboardActionListener(this); return kv; }
Selanjutnya, kita membuat metode yang memutar suara saat tombol ditekan. Kita menggunakan class AudioManager
untuk memutar suara. Android SDK mencakup beberapa efek suara default untuk penekanan tombol dan digunakan dalam metode playClick
.
private void playClick(int keyCode){ AudioManager am = (AudioManager)getSystemService(AUDIO_SERVICE); switch(keyCode){ case 32: am.playSoundEffect(AudioManager.FX_KEYPRESS_SPACEBAR); break; case Keyboard.KEYCODE_DONE: case 10: am.playSoundEffect(AudioManager.FX_KEYPRESS_RETURN); break; case Keyboard.KEYCODE_DELETE: am.playSoundEffect(AudioManager.FX_KEYPRESS_DELETE); break; default: am.playSoundEffect(AudioManager.FX_KEYPRESS_STANDARD); } }
Akhirnya, perbarui metode onKey
sehingga aplikasi keyboard kita dapat berkomunikasi dengan bidang masukan (biasanya tampilan EditText
) dari aplikasi lain.
Metode getCurrentInputConnection
digunakan untuk mendapatkan koneksi ke bidang input aplikasi lain. Begitu kita memiliki koneksi, kita bisa menggunakan metode berikut:
-
commitText
untuk menambahkan satu atau beberapa karakter ke kolom input -
deleteSurroundingText
untuk menghapus satu atau lebih karakter input -
sendKeyEvent
untuk mengirim acara, sepertiKEYCODE_ENTER
, ke aplikasi eksternal
Setiap kali pengguna menekan tombol pada soft keyboard, metode onKey
dipanggil dengan nilai kode unicode sebagai salah satu parameternya. Berdasarkan nilai ini, keyboard melakukan salah satu tindakan berikut:
- Jika kode itu
KEYCODE_DELETE
, satu karakter di sebelah kiri kursor akan dihapus menggunakan metodedeleteSurroundingText
. - Jika kode itu
KEYCODE_DONE
, event tombolKEYCODE_ENTER
akan dikeluarkan. - Jika kode ini
KEYCODE_SHIFT
, nilai variabelcaps
berubah dan keadaan pergeseran keyboard diperbarui menggunakan metodesetShifted
. Keyboard perlu digambar ulang saat keadaan berubah sehingga label tombol diperbarui. MetodeinvalidateAllKeys
digunakan untuk menggambar ulang semua tombol. - Untuk semua kode lainnya, kodenya diubah menjadi karakter dan dikirim ke kolom input. Jika kode tersebut mewakili huruf alfabet dan variabel
caps
disetel ketrue
, maka karakter tersebut akan dikonversi menjadi huruf besar.
Perbarui metode onKey
sehingga terlihat seperti ini:
@Override public void onKey(int primaryCode, int[] keyCodes) { InputConnection ic = getCurrentInputConnection(); playClick(primaryCode); switch(primaryCode){ case Keyboard.KEYCODE_DELETE : ic.deleteSurroundingText(1, 0); break; case Keyboard.KEYCODE_SHIFT: caps = !caps; keyboard.setShifted(caps); kv.invalidateAllKeys(); break; case Keyboard.KEYCODE_DONE: ic.sendKeyEvent(new KeyEvent(KeyEvent.ACTION_DOWN, KeyEvent.KEYCODE_ENTER)); break; default: char code = (char)primaryCode; if(Character.isLetter(code) && caps){ code = Character.toUpperCase(code); } ic.commitText(String.valueOf(code),1); } }
8. Menguji Keyboard
Soft keyboard sekarang siap untuk diuji. Kompilasi dan jalankan di perangkat Android. Aplikasi ini tidak memiliki Activity
, yang berarti tidak akan muncul di launcher. Untuk menggunakannya, pertama-tama harus diaktifkan di Settings perangkat.

Setelah mengaktifkan Simple IME, buka aplikasi apa pun yang
memungkinkan masukan teks (misalnya, aplikasi perpesanan) dan klik salah satu bidang masukannya. Anda harus melihat ikon keyboard muncul di area notifikasi. Bergantung pada perangkat Anda, Anda dapat mengklik ikon itu atau menyeret bilah pemberitahuan ke bawah dan memilih Simple IME sebagai metode masukan. Anda sekarang harus bisa mengetik menggunakan keyboard baru Anda.

Kesimpulan
Dalam tutorial ini, Anda telah belajar bagaimana membuat aplikasi keyboard kustom dari awal. Untuk mengubah tampilan dan nuansa keyboard Anda, yang harus Anda lakukan adalah menambahkan styling ekstra ke file res/layout/keyboard.xml dan res/layout/preview.xml. Untuk mengubah posisi tombol, perbarui file res/xml/qwerty.xml. Untuk menambahkan lebih banyak fitur ke keyboard Anda, lihat dokumentasi pengembang.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post