¿Cómo hacer un teclado personalizado de Android?

Quiero hacer un teclado personalizado. No sé cómo hacerlo en xml y actividad. Esta foto es mi modelo de teclado. Solo necesita números.

enter image description here

En primer lugar, necesitará un archivo keyboard.xml que se colocará en la carpeta res/xml (si la carpeta no existe, la creó).

                      

** Tenga en cuenta que tendrá que crear el dibujable de backspace y colocarlo en la carpeta res / drawable-ldpi con un tamaño muy pequeño (como 18×18 píxeles)

Luego, en el archivo xml que desea que se use (donde se encuentra su TextView), debe agregar el siguiente código:

  .....  ......  

** Tenga en cuenta que el archivo xml en el que colocará android.inputmethodservice.KeyboardView , tiene que ser RelativeLayout para poder establecer alignParentBottom="true" (Generalmente los teclados se muestran en la parte inferior de la pantalla)

Luego, debe agregar el siguiente código en la función onCreate de la Activity que maneja el TextView que desea conectar el teclado.

  // Create the Keyboard mKeyboard= new Keyboard(this,R.xml.keyboard); // Lookup the KeyboardView mKeyboardView= (KeyboardView)findViewById(R.id.keyboardview); // Attach the keyboard to the view mKeyboardView.setKeyboard( mKeyboard ); // Do not show the preview balloons //mKeyboardView.setPreviewEnabled(false); // Install the key handler mKeyboardView.setOnKeyboardActionListener(mOnKeyboardActionListener); 

** Tenga en cuenta que mKeyboard y mKeyboardView son variables de clases privadas que debe crear.

Luego necesita la siguiente función para abrir el teclado (debe asociarlo con TextView a través de la propiedad onClick xml)

  public void openKeyboard(View v) { mKeyboardView.setVisibility(View.VISIBLE); mKeyboardView.setEnabled(true); if( v!=null)((InputMethodManager)getSystemService(Activity.INPUT_METHOD_SERVICE)).hideSoftInputFromWindow(v.getWindowToken(), 0); } 

Y finalmente necesitas OnKeyboardActionListener que manejará tus eventos

 private OnKeyboardActionListener mOnKeyboardActionListener = new OnKeyboardActionListener() { @Override public void onKey(int primaryCode, int[] keyCodes) { //Here check the primaryCode to see which key is pressed //based on the android:codes property if(primaryCode==1) { Log.i("Key","You just pressed 1 button"); } } @Override public void onPress(int arg0) { } @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() { } }; 

¡¡¡Espero que ayude!!!

La mayor parte del código encontrado aquí

Use KeyboardView :

 KeyboardView kbd = new KeyboardView(context); kbd.setKeyboard(new Keyboard(this, R.xml.custom)); kbd.setOnKeyboardActionListener(new OnKeyboardActionListener() { .... } 

ahora tienes kbd que es una vista normal.

Lo bueno de esto es que R.xml.custom refiere a /res/xml/custom.xml , que define en xml el diseño del teclado. Para obtener más información sobre este archivo, consulte aquí: Teclado , Teclado.Raíz , Teclado.Key .

Teclado del sistema

Esta respuesta explica cómo crear un teclado de sistema personalizado que se pueda usar en cualquier aplicación que el usuario haya instalado en su teléfono. Si desea hacer un teclado que solo se usará dentro de su propia aplicación, entonces vea mi otra respuesta .

El siguiente ejemplo se verá así. Puede modificarlo para cualquier distribución de teclado.

enter image description here

Los siguientes pasos muestran cómo crear un teclado de sistema personalizado que funcione. Tanto como pude intenté eliminar cualquier código innecesario. Si hay otras características que necesita, proporcioné enlaces para obtener más ayuda al final.

1. Comience un nuevo proyecto de Android

Llamé a mi proyecto “Teclado personalizado”. Llámalo como quieras No hay nada más especial aquí. Simplemente dejaré MainActivity y “Hello World!” diseño tal como es.

2. Agregue los archivos de diseño

Agregue los siguientes dos archivos a la carpeta res/layout su aplicación:

  • keyboard_view.xml
  • key_preview.xml

keyboard_view.xml

Esta vista es como un contenedor que mantendrá nuestro teclado. En este ejemplo, solo hay un teclado, pero puede agregar otros teclados e intercambiarlos dentro y fuera de este KeyboardView .

    

key_preview.xml

La vista previa de teclas es un diseño que aparece cuando presiona una tecla del teclado. Simplemente muestra qué tecla está presionando (en caso de que sus dedos gordos y grandes lo estén cubriendo). Esta no es una ventana emergente de opción múltiple. Para eso deberías echarle un vistazo a la vista Candidatos .

    

3. Agregue archivos XML de soporte

Crea una carpeta xml en tu carpeta res . (Haga clic derecho en res y elija Nuevo> Directorio ).

A continuación, agregue los siguientes dos archivos xml. (Haga clic con el botón derecho en la carpeta xml y seleccione Nuevo> archivo de recursos XML ).

  • number_pad.xml
  • method.xml

number_pad.xml

Aquí es donde comienza a ser más interesante. Este Keyboard define el diseño de las teclas .

                      

Aquí hay algunas cosas a tener en cuenta:

  • keyWidth : este es el ancho predeterminado de cada tecla. El 20%p significa que cada clave debe ocupar el 20% del ancho del p arent. Sin embargo, puede ser reemplazado por claves individuales, como puede ver con las teclas Eliminar e Intro en la tercera fila.
  • keyHeight : está codificado aquí, pero puede usar algo como @dimen/key_height para establecerlo dinámicamente para diferentes tamaños de pantalla.
  • Gap : La brecha horizontal y vertical indica cuánto espacio dejar entre las teclas. Incluso si lo configura en 0px todavía hay un pequeño espacio.
  • codes : Este puede ser un código Unicode o personalizado que determina qué sucede o qué se ingresa cuando se presiona la tecla. Consulte keyOutputText si desea ingresar una cadena Unicode más larga.
  • keyLabel : este es el texto que se muestra en la clave.
  • keyEdgeFlags : Indica a qué borde debe estar alineada la tecla.
  • isRepeatable : si mantiene presionada la tecla, seguirá repitiendo la entrada.

method.xml

Este archivo le dice al sistema los subtipos del método de entrada que están disponibles. Solo estoy incluyendo una versión mínima aquí.

     

4. Agregue el código de Java para manejar la entrada clave

Crea un nuevo archivo Java. Vamos a llamarlo MyInputMethodService . Este archivo une todo. Maneja la entrada recibida desde el teclado y la envía a cualquier vista que la esté recibiendo (un EditText , por ejemplo).

 public class MyInputMethodService extends InputMethodService implements KeyboardView.OnKeyboardActionListener { @Override public View onCreateInputView() { // get the KeyboardView and add our Keyboard layout to it KeyboardView keyboardView = (KeyboardView) getLayoutInflater().inflate(R.layout.keyboard_view, null); Keyboard keyboard = new Keyboard(this, R.xml.number_pad); keyboardView.setKeyboard(keyboard); keyboardView.setOnKeyboardActionListener(this); return keyboardView; } @Override public void onKey(int primaryCode, int[] keyCodes) { InputConnection ic = getCurrentInputConnection(); if (ic == null) return; switch (primaryCode) { case Keyboard.KEYCODE_DELETE: CharSequence selectedText = ic.getSelectedText(0); if (TextUtils.isEmpty(selectedText)) { // no selection, so delete previous character ic.deleteSurroundingText(1, 0); } else { // delete the selection ic.commitText("", 1); } ic.deleteSurroundingText(1, 0); break; default: char code = (char) primaryCode; ic.commitText(String.valueOf(code), 1); } } @Override public void onPress(int primaryCode) { } @Override public void onRelease(int primaryCode) { } @Override public void onText(CharSequence text) { } @Override public void swipeLeft() { } @Override public void swipeRight() { } @Override public void swipeDown() { } @Override public void swipeUp() { } } 

Notas:

  • OnKeyboardActionListener escucha la entrada del teclado. También se requieren todos esos métodos vacíos en este ejemplo.
  • La InputConnection es lo que se usa para enviar entradas a otra vista como EditText .

5. Actualiza el manifiesto

Puse este último en lugar de primero porque se refiere a los archivos que ya agregamos arriba. Para registrar su teclado personalizado como un teclado del sistema, debe agregar una sección de service a su archivo AndroidManifest.xml . Ponlo en la sección de la application después de la activity .

    ...          

¡Eso es! Debería poder ejecutar su aplicación ahora. Sin embargo, no verá mucho hasta que active su teclado en la configuración.

6. Habilite el teclado en Configuración

Todo usuario que quiera usar su teclado deberá habilitarlo en la configuración de Android. Para obtener instrucciones detalladas sobre cómo hacerlo, consulte el siguiente enlace:

  • Cómo configurar el teclado predeterminado en su teléfono Android

Aquí hay un resumen:

  • Vaya a Ajustes de Android> Idiomas y entrada> Teclado actual> Elegir teclados.
  • Debería ver su teclado personalizado en la lista. Permitirle.
  • Regrese y elija Teclado actual nuevamente. Debería ver su teclado personalizado en la lista. Elígelo.

Ahora debería poder usar su teclado en cualquier lugar que pueda escribir en Android.

Estudio adicional

El teclado anterior es utilizable, pero para crear un teclado que otras personas deseen usar, probablemente tendrá que agregar más funcionalidad. Estudia los enlaces a continuación para aprender cómo.

  • Crear un método de entrada (documentación de Android)
  • SoftKeyboard (código fuente de Android para un teclado personalizado de demostración)
  • Creación de un teclado Android personalizado (tutorial) ( código fuente )
  • Crear un teclado personalizado en Android (tutorial tutsplus)
  • Cómo crear un teclado personalizado para Android (video de YouTube: no tiene sonido, pero lo que sigue es cómo aprendí por primera vez cómo hacerlo).

Continuando

¿No le gusta cómo se ve y se comporta el KeyboardView estándar? Ciertamente no. Parece que no se ha actualizado desde Android 2.0. ¿Qué hay de todos esos teclados personalizados en Play Store? No se parecen en nada al feo teclado de arriba.

La buena noticia es que puedes personalizar completamente el aspecto y el comportamiento de tu propio teclado. Tendrá que hacer las siguientes cosas:

  1. Cree su propia vista de teclado personalizada que subclasifique ViewGroup . Podría llenarlo con Button s o incluso hacer sus propias vistas de clave personalizadas en la vista de subclase. Si usa vistas emergentes, anótelo .
  2. Agregue una interfaz de escucha de eventos personalizada en su teclado. Llame a sus métodos para cosas como onKeyClicked(String text) o onBackspace() .
  3. No necesita agregar el keyboard_view.xml , key_preview.xml o number_pad.xml descritos en las instrucciones anteriores, ya que estos son todos para el KeyboardView estándar. Manejará todos estos aspectos de la interfaz de usuario en su vista personalizada.
  4. En su clase MyInputMethodService , implemente el detector de teclado personalizado que definió en su clase de teclado. Esto está en lugar de KeyboardView.OnKeyboardActionListener , que ya no es necesario.
  5. En el MyInputMethodService onCreateInputView() su clase onCreateInputView() , cree y devuelva una instancia de su teclado personalizado. No olvides configurar el oyente personalizado del teclado para this .

Aquí hay un proyecto de muestra para un teclado suave.

https://developer.android.com/guide/topics/text/creating-input-method.html

Tus debe estar en las mismas líneas con un diseño diferente.

Editar: si necesita el teclado solo en su aplicación, ¡es muy simple! Cree un diseño lineal con orientación vertical y cree 3 diseños lineales en su interior con orientación horizontal. A continuación, coloque los botones de cada fila en cada uno de esos diseños lineales horizontales y asigne la propiedad de peso a los botones. Use android: layout_weight = 1 para todos ellos, de modo que se espacien de forma equitativa.

Esto resolverá. Si no obtuvo lo que esperaba, publique el código aquí, ¡y estamos aquí para ayudarlo!

Teclado en la aplicación

Esta respuesta le dice cómo hacer un teclado personalizado para usar exclusivamente dentro de su aplicación. Si desea hacer un teclado del sistema que pueda usarse en cualquier aplicación, entonces vea mi otra respuesta .

El ejemplo se verá así. Puede modificarlo para cualquier distribución de teclado.

enter image description here

1. Comience un nuevo proyecto de Android

Llamé a mi proyecto InAppKeyboard . Llama a los tuyos lo que quieras.

2. Agregue los archivos de diseño

Diseño del teclado

Agregue un archivo de res/layout carpeta res/layout . Llamé a mi keyboard . El teclado será una vista compuesta personalizada que inflará desde este archivo de diseño xml. Puede usar el diseño que desee para organizar las teclas, pero estoy usando LinearLayout . Tenga en cuenta las tags de merge .

res / layout / keyboard.xml

                       

Diseño de la actividad

Para fines de demostración, nuestra actividad tiene un solo EditText y el teclado está en la parte inferior. Llamé a mi teclado personalizado vista MyKeyboard . (Vamos a agregar este código pronto, así que ignore el error por el momento). El beneficio de poner todo nuestro código de teclado en una sola vista es que hace que sea fácil de reutilizar en otra actividad o aplicación.

res / layout / activity_main.xml

      

3. Agregue el archivo Java del teclado

Agregue un nuevo archivo Java. Llamé al mío MyKeyboard .

Lo más importante a tener en cuenta aquí es que no existe un enlace rígido a ningún EditText o Activity . Esto hace que sea fácil conectarlo a cualquier aplicación o actividad que lo necesite. Esta vista de teclado personalizada también utiliza una InputConnection , que imita la forma en que un teclado del sistema se comunica con un EditText . Así es como evitamos los enlaces duros.

MyKeyboard es una vista compuesta que infla el diseño de vista que definimos anteriormente.

MyKeyboard.java

 public class MyKeyboard extends LinearLayout implements View.OnClickListener { // constructors public MyKeyboard(Context context) { this(context, null, 0); } public MyKeyboard(Context context, AttributeSet attrs) { this(context, attrs, 0); } public MyKeyboard(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(context, attrs); } // keyboard keys (buttons) private Button mButton1; private Button mButton2; private Button mButton3; private Button mButton4; private Button mButton5; private Button mButton6; private Button mButton7; private Button mButton8; private Button mButton9; private Button mButton0; private Button mButtonDelete; private Button mButtonEnter; // This will map the button resource id to the String value that we want to // input when that button is clicked. SparseArray keyValues = new SparseArray<>(); // Our communication link to the EditText InputConnection inputConnection; private void init(Context context, AttributeSet attrs) { // initialize buttons LayoutInflater.from(context).inflate(R.layout.keyboard, this, true); mButton1 = (Button) findViewById(R.id.button_1); mButton2 = (Button) findViewById(R.id.button_2); mButton3 = (Button) findViewById(R.id.button_3); mButton4 = (Button) findViewById(R.id.button_4); mButton5 = (Button) findViewById(R.id.button_5); mButton6 = (Button) findViewById(R.id.button_6); mButton7 = (Button) findViewById(R.id.button_7); mButton8 = (Button) findViewById(R.id.button_8); mButton9 = (Button) findViewById(R.id.button_9); mButton0 = (Button) findViewById(R.id.button_0); mButtonDelete = (Button) findViewById(R.id.button_delete); mButtonEnter = (Button) findViewById(R.id.button_enter); // set button click listeners mButton1.setOnClickListener(this); mButton2.setOnClickListener(this); mButton3.setOnClickListener(this); mButton4.setOnClickListener(this); mButton5.setOnClickListener(this); mButton6.setOnClickListener(this); mButton7.setOnClickListener(this); mButton8.setOnClickListener(this); mButton9.setOnClickListener(this); mButton0.setOnClickListener(this); mButtonDelete.setOnClickListener(this); mButtonEnter.setOnClickListener(this); // map buttons IDs to input strings keyValues.put(R.id.button_1, "1"); keyValues.put(R.id.button_2, "2"); keyValues.put(R.id.button_3, "3"); keyValues.put(R.id.button_4, "4"); keyValues.put(R.id.button_5, "5"); keyValues.put(R.id.button_6, "6"); keyValues.put(R.id.button_7, "7"); keyValues.put(R.id.button_8, "8"); keyValues.put(R.id.button_9, "9"); keyValues.put(R.id.button_0, "0"); keyValues.put(R.id.button_enter, "\n"); } @Override public void onClick(View v) { // do nothing if the InputConnection has not been set yet if (inputConnection == null) return; // Delete text or input key value // All communication goes through the InputConnection if (v.getId() == R.id.button_delete) { CharSequence selectedText = inputConnection.getSelectedText(0); if (TextUtils.isEmpty(selectedText)) { // no selection, so delete previous character inputConnection.deleteSurroundingText(1, 0); } else { // delete the selection inputConnection.commitText("", 1); } } else { String value = keyValues.get(v.getId()); inputConnection.commitText(value, 1); } } // The activity (or some parent or controller) must give us // a reference to the current EditText's InputConnection public void setInputConnection(InputConnection ic) { this.inputConnection = ic; } } 

4. Dirige el teclado al EditText

Para los teclados del sistema, Android usa un InputMethodManager para apuntar el teclado al EditText enfocado. En este ejemplo, la actividad tomará su lugar al proporcionar el enlace desde EditText a nuestro teclado personalizado.

Como no estamos utilizando el teclado del sistema, debemos deshabilitarlo para evitar que aparezca cuando toquemos EditText . En segundo lugar, necesitamos obtener InputConnection de EditText y dárselo a nuestro teclado.

MainActivity.java

 public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); EditText editText = (EditText) findViewById(R.id.editText); MyKeyboard keyboard = (MyKeyboard) findViewById(R.id.keyboard); // prevent system keyboard from appearing when EditText is tapped editText.setRawInputType(InputType.TYPE_CLASS_TEXT); editText.setTextIsSelectable(true); // pass the InputConnection from the EditText to the keyboard InputConnection ic = editText.onCreateInputConnection(new EditorInfo()); keyboard.setInputConnection(ic); } } 

Si su actividad tiene múltiples EditTexts, necesitará escribir código para pasar la InputConnection correcta de InputConnection al teclado. (Puede hacer esto agregando un OnFocusChangeListener y OnClickListener a EditTexts. Consulte este artículo para ver una explicación sobre esto.) También puede ocultar o mostrar su teclado en los momentos apropiados.

Terminado

Eso es. Debería poder ejecutar la aplicación de ejemplo ahora e ingresar o eliminar texto como lo desee. El siguiente paso es modificar todo para satisfacer sus propias necesidades. Por ejemplo, en algunos de mis teclados he usado TextViews en lugar de Buttons porque es más fácil personalizarlos.

Notas

  • En el archivo de diseño xml, también podría usar un TextView lugar de un Button si desea que las teclas se vean mejor. Luego solo haga que el fondo sea un dibujante que cambie el estado de la apariencia cuando se lo presione.
  • Teclados personalizados avanzados: para obtener más flexibilidad en la apariencia del teclado y el cambio de teclado, ahora estoy haciendo vistas de clave personalizadas que subclase View y teclados personalizados que subclase ViewGroup . El teclado establece todas las teclas mediante progtwigción. Las teclas usan una interfaz para comunicarse con el teclado (similar a cómo los fragmentos se comunican con una actividad). Esto no es necesario si solo necesita un diseño de teclado único, ya que el diseño xml funciona bien para eso. Pero si quiere ver un ejemplo de lo que he estado trabajando, consulte todas las clases de Key* y Keyboard* aquí . Tenga en cuenta que también utilizo una vista de contenedor allí cuya función es intercambiar los teclados hacia adentro y hacia afuera.

Uno de los mejores ejemplos bien documentados que encontré.

http://www.fampennings.nl/maarten/android/09keyboard/index.htm

Se proporcionan el archivo XML relacionado con KeyboardView y el código fuente.

Tenía el mismo problema. Usé el diseño de la mesa al principio, pero el diseño siguió cambiando después de presionar un botón. Sin embargo, encontré esta página muy útil. http://mobile.tutsplus.com/tutorials/android/android-user-interface-design-creating-a-numeric-keypad-with-gridlayout/

Me encontré con esta publicación recientemente cuando estaba tratando de decidir qué método usar para crear mi propio teclado personalizado. Encontré que la API del sistema Android era muy limitada, así que decidí crear mi propio teclado integrado en la aplicación. Usando la respuesta de Suragch como base para mi investigación, pasé a diseñar mi propio componente de teclado . Está publicado en GitHub con una licencia de MIT. Con suerte, esto le ahorrará a alguien más mucho tiempo y dolor de cabeza.

La architecture es bastante flexible. Hay una vista principal (CustomKeyboardView) que puede inyectar con cualquier distribución de teclado y controlador que desee.

Solo tiene que declarar CustomKeyboardView en su actividad xml (también puede hacerlo programáticamente):

   

Luego registre su EditText con él y dígale qué tipo de teclado deben usar:

 override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val numberField: EditText = findViewById(R.id.testNumberField) val numberDecimalField: EditText = findViewById(R.id.testNumberDecimalField) val qwertyField: EditText = findViewById(R.id.testQwertyField) keyboard = findViewById(R.id.customKeyboardView) keyboard.registerEditText(CustomKeyboardView.KeyboardType.NUMBER, numberField) keyboard.registerEditText(CustomKeyboardView.KeyboardType.NUMBER_DECIMAL, numberDecimalField) keyboard.registerEditText(CustomKeyboardView.KeyboardType.QWERTY, qwertyField) } 

¡CustomKeyboardView maneja el rest!

Tengo la bola rodando con un teclado Number, NumberDecimal y QWERTY. Siéntase libre de descargarlo y crear sus propios diseños y controladores. Se parece a esto:

android teclado personalizado gif paisaje

enter image description here

Incluso si esta no es la architecture con la que decide trabajar, es de esperar que sea útil ver el código fuente de un teclado en la aplicación que funcione.

De nuevo, aquí está el enlace al proyecto: Teclado personalizado en la aplicación