Membuat Keyboard Kustom di Android

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

Final product image — What You'll Be Creating

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 nilai left atau right. 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 ke true, lama menekan tombol akan mengulangi tindakan beberapa kali kunci. Hal ini biasanya disetel ke true 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 ke KeyboardView
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, seperti KEYCODE_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 metode deleteSurroundingText.
Jika kode itu KEYCODE_DONE, event tombol KEYCODE_ENTER akan dikeluarkan.
Jika kode ini KEYCODE_SHIFT, nilai variabel caps berubah dan keadaan pergeseran keyboard diperbarui menggunakan metode setShifted. Keyboard perlu digambar ulang saat keadaan berubah sehingga label tombol diperbarui. Metode invalidateAllKeys 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 ke true, 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.