Android CharacterPickerDialog Tutorial

View more Tutorials:

1- Android CharacterPickerDialog

Android CharacterPickerDialog is a dialog box that permits the user to select "accented characters" of a base character. Oftentimes, the CharacterPickerDialog is useful because not all of the phones have the Keyboard Layout that is appropriate for a particular language.
For example, Vietnamese language has a list of many accented characters, which probably look strange for you:

a á à ã ả ạ ă ắ ằ ẵ ẳ ặ â ấ ầ ẫ ẩ ậ
A Á À Ã Ả Ạ Ă Ắ Ằ Ẵ Ẳ Ặ Â Ấ Ầ Ẫ Ẩ Ậ
d đ
D Đ
e é è ẽ ẻ ẹ ê ế ề ễ ể ệ
E É È Ẽ Ẻ Ẹ Ê Ế Ề Ễ Ể Ệ
i í ì ĩ ỉ ị
I Í Ì Ĩ Ỉ Ị
o ó ò õ ỏ ọ ô ố ồ ỗ ổ ộ ơ ớ ờ ỡ ở ợ
O Ó Ò Õ Ỏ Ọ Ô Ố Ồ Ỗ Ổ Ộ Ơ Ớ Ờ Ỡ Ở Ợ
u ú ù ũ ủ ụ ư ứ ừ ữ ử ự
U Ú Ù Ũ Ủ Ụ Ư Ứ Ừ Ữ Ử Ự
y ý ỳ ỹ ỷ ỵ
Y Ý Ỳ Ỹ Ỷ Ỵ

Here are some special characters in German:
  

ä ö ü ß

And some special characters in French:

à â æ ç é è ê ë ï î ô œ ù û ü ÿ

2- Example of CharacterPickerDialog

Here is a simple application that uses CharacterPickerDialog to assist the user to select the special characters in Vietnamese.
Create a new project on Android Studio:
  • File > New > New Project > Empty Activity
    • Name: CharacterPickerDialogExample
    • Package name: org.o7planning.characterpickerexample
    • Language: Java
This is what the interface of the application looks like:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="32dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="Enter your name:"
        android:textSize="22sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/editText"
        android:layout_width="0dp"
        android:layout_height="51dp"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:ems="10"
        android:inputType="textPersonName"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />
</androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.java
package org.o7planning.characterpickerdialogexample;

import android.os.Bundle;
import android.text.Editable;
import android.text.method.CharacterPickerDialog;
import android.util.Log;
import android.view.KeyEvent;
import android.view.View;
import android.widget.AdapterView;
import android.widget.EditText;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private static final String LOG_TAG  = "AndroidExample";

    private EditText editText;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        this.editText = this.findViewById(R.id.editText);
        this.editText.setOnKeyListener(new View.OnKeyListener() {
            @Override
            public boolean onKey(View v, int keyCode, KeyEvent event) {
                return handleOnKey(  keyCode,   event);
            }
        });
    }

    private boolean handleOnKey(int keyCode, KeyEvent event)  {
        if(event.getAction() == KeyEvent.ACTION_DOWN) {
            return false;
        }

        char base = (char) event.getUnicodeChar();
        Log.i(LOG_TAG, "keyCode: " + keyCode + ", Base character: " + base);

        final String accentedString = AccentedStringUtils.getAccentedString(base);
        if(accentedString == null)  {
            return false;
        }
        final Editable editable = this.editText.getText();

        CharacterPickerDialog dialog= new CharacterPickerDialog(this, new View(this), editable, accentedString,false) {
            // User click on Cancel button.
            @Override
            public void onClick (View v) {
                // Do something here
                // ...
                super.onClick(v);
            }

            // User click on Character button.
            @Override
            public void onItemClick(AdapterView parent, View view, int position, long id){
                // Do something here
                // ...
                super.onItemClick(parent, view, position, id);
            }
        };
        dialog.show();

        return false;
    }

}
AccentedStringUtils.java
package org.o7planning.characterpickerdialogexample;

public class AccentedStringUtils {

    //
    // Vietnamese special characters.
    //
    private static final String[] ACCENTED_STRINGS = {
            "aáàãảạăắằẵẳặâấầẫẩậ",
            "AÁÀÃẢẠĂẮẰẴẲẶÂẤẦẪẨẬ",
            "dđ",
            "DĐ",
            "eéèẽẻẹêếềễểệ",
            "EÉÈẼẺẸÊẾỀỄỂỆ",
            "iíìĩỉị",
            "IÍÌĨỈỊ",
            "oóòõỏọôốồỗổộơớờỡởợ",
            "OÓÒÕỎỌÔỐỒỖỔỘƠỚỜỠỞỢ",
            "uúùũủụưứừữửự",
            "UÚÙŨỦỤƯỨỪỮỬỰ",
            "yýỳỹỷỵ",
            "YÝỲỸỶỴ"
    };

    public static String getAccentedString(char base)  {
         for(int i = 0; i< ACCENTED_STRINGS.length; i++) {
             String accentedString = ACCENTED_STRINGS[i];
             if(accentedString.charAt(0) == base)  {
                 return accentedString;
             }
         }
         return null;
    }
}

View more Tutorials: