Implement your own keyboard for Android Wear app

6/14 2015 on Android, Android Wear, Programming

Problem – Key Input in Android Wear

The question is, “how do you take key inputs on Android Wear app?”. I worked on a Wear app that needs to take number inputs. I needed a calculator-like number keyboard with keys for 0-9, -(negative sign), .(decimal), x(backspace), and C(clear).

If you encounter a similar need, this article might help you get an idea for your solution.

Approach – DialogFragment as Keyboard

We can make use of a DialogFragment to represent a keyboard.

keyboard_wear




Declare an interface to use as callbacks to the caller Activity. The callbacks I implemented are onDialogDismiss() and onKeyPress(String key).

onKeyPress(String key) as the name indicates, it’s used to catch the key press. By using this callback, we can update the displayed input on Activity as user types. In the example code below, I have it return String type, but you can define your own classes to represent each key by using Strategy design pattern.

onDialogDismiss() is used as a hook for closing our keyboard to update UI or perform any wanted actions on Activity.

Since I want to let the users see what they are typing, I made the DialogFragment stick to the bottom and give a height of about half the screen.

Implementation

NumberKeyboardDialogFragment.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

public class NumberKeyboardDialogFragment extends DialogFragment 
        implements AdapterView.OnItemClickListener {
 
    private NumberKeyboardDialogFragment listener;
 
    public interface NumberKeyboardListener {
        void onKeyPress(String key);
        void onDialogDismiss();
    }
 
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_number_keyboard, container, false);
 
        GridView gridView = (GridView) view.findViewById(R.id.gridview);
        gridView.setAdapter(new NumberKeyboardGridAdapter(getActivity()));
 
        return view;
    }
 
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        String buttonText = ((Button) view).getText().toString();
        listener.onKeyPress(buttonText);
    }
 
    @Override
    public void onResume() {
        super.onStart();
        adjustHeight();
    }
 
    // For example, to make it look like a keyboard, 
    // you can make the fragment appear from bottom up to a certain height
    private void adjustHeight() {
        Window window = getDialog().getWindow();
        window.setGravity(Gravity.BOTTOM|Gravity.CENTER_HORIZONTAL);
        window.setLayout(LinearLayout.LayoutParams.MATCH_PARENT, 120);
    }
 
    @Override
    public void onDismiss(DialogInterface dialog) {
        super.onDismiss(dialog);
        listener.onDialogDismiss();
    }
 
    @Override
    public void onAttach(Activity activity) {
        super.onAttach(activity);
        listener = (NumberKeyboardListener) activity;
    }
 
    @Override
    public void onDetach() {
        super.onDetach();
        listener = null;
    }
}

fragment_number_keyboard.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
 
    <GridView
        android:id="@+id/gridview"
        android:layout_width="@dimen/number_keyboard_gridview_width"
        android:layout_height="match_parent"
        android:numColumns="3"
        android:stretchMode="columnWidth"
        android:gravity="center" />
 
</LinearLayout>

MainActivity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

public class MainActivity extends Activity 
        implements NumberInputDialogFragment.NumberInputDialogListener {
 
    ...
 
    @Override
    public void onKeyPress(String key) {
        // Key is entered
    }
 
    @Override
    public void onDialogDismiss() {
        // Keyboard is closed
    }
}

Comments are closed.

Recent Posts

Categories