Cómo ajustar el diseño cuando aparece el teclado virtual

Me gustaría ajustar / cambiar el tamaño del diseño cuando se activa el teclado virtual, como se muestra a continuación:

Antes y después de:

enter image description hereenter image description here


Recursos encontrados en pareja en SO:

  1. Cómo mantener visibles todos los campos y textos mientras se muestra el teclado virtual
  2. el teclado suave de Android estropea el diseño cuando aparece
  3. Ajustar el diseño cuando el teclado está encendido

Pero las preguntas y respuestas son bastante ambiguas, esta es la pregunta con una imagen más clara de lo que quiero.

Requisitos:

  • Debería funcionar en el teléfono con cualquier tamaño de pantalla.
  • Notó que el espacio de margen / relleno en “FACEBOOK” y “Registrarse en Facebook” ha cambiado antes y después.
  • No hay vista de desplazamiento involucrada.

Solo agrega

android:windowSoftInputMode="adjustResize" 

en su AndroidManifest.xml donde declara esta actividad particular y esto ajustará la opción de cambio de tamaño del diseño.

enter image description here

algún código fuente a continuación para el diseño del diseño

           

Hace unos años, esta pregunta se planteó y “Secret Andro Geni” tiene una buena explicación de base y “tir38” también hizo un buen bash por encontrar la solución completa, pero lamentablemente no hay una solución completa publicada aquí. He pasado un par de horas descifrando cosas y aquí está mi solución completa con una explicación detallada en la parte inferior:

                          

Y en AndroidManifest.xml , no te olvides de configurar:

 android:windowSoftInputMode="adjustResize" 

en la etiqueta que desea dicho diseño.

Pensamientos:

Me di cuenta de que RelativeLayout son los diseños que abarcan todo el espacio disponible y luego se redimensionan cuando aparece el teclado.

Y LinearLayout son diseños que no se redimensionan en el proceso de cambio de tamaño.

Es por eso que necesita tener 1 RelativeLayout inmediatamente después de ScrollView para abarcar todo el espacio disponible en la pantalla. Y necesita tener un LinearLayout dentro de RelativeLayout si no, su interior se aplastará cuando ocurra el redimensionamiento. Un buen ejemplo es “headerLayout”. Si no hubiera un LinearLayout dentro de ese RelativeLayout texto “facebook” se aplastaría y no se mostraría.

En las fotos de inicio de sesión de “facebook” publicadas en la pregunta, también noté que toda la parte de inicio de sesión (mainLayout) está centrada verticalmente en relación con toda la pantalla, de ahí el atributo:

 android:layout_centerVertical="true" 

en el diseño de LinearLayout . Y debido a que mainLayout está dentro de LinearLayout esto significa que esa parte no se redimensiona (de nuevo, vea la imagen en cuestión).

Agregue esta línea en su Manifiesto donde se llama su actividad

 android:windowSoftInputMode="adjustPan|adjustResize" 

o

puedes agregar esta línea en tu onCreate

 getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_VISIBLE|WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE); 

Android Developer tiene la respuesta correcta, pero el código fuente provisto es muy detallado y no implementa el patrón descrito en el diagtwig.

Aquí hay una mejor plantilla:

            

Depende de usted decidir qué vistas usará para las partes de “desplazamiento” y “pie de página”. También sepa que probablemente tenga que configurar ScrollView s fillViewPort .

Puede funcionar para todo tipo de diseño.

  1. agréguelo a su etiqueta de actividad en AndroidManyfest.xml android: windowSoftInputMode = “adjustResize” por ejemplo:

  2. agrégalo a tu etiqueta de diseño en activitypage.xml que cambiará su posición. android: fitsSystemWindows = “true” y android: layout_alignParentBottom = “true” por ejemplo:

En mi caso, ayudó.

main_layout.xml

         

Use esto en el archivo de manifest

  

¡Ahora la parte más importante! Use un tema como este en Activity o Application tag.

 android:theme="@style/AppTheme" 

Y el tema se tomó así

  

Entonces me estaba perdiendo el tema. Lo que me hizo frustrado todo el día.

Simplemente puede establecer estas opciones en el archivo AndroidManifest.xml.

  

El uso de adjustPan no es recomendado por Google porque el usuario puede necesitar cerrar el teclado para ver todos los campos de entrada.

Más información: Android App Manifest

Esto hace posible mostrar cualquier diseño deseado previamente oculto por el teclado.

Agregue esto a la etiqueta de actividad en AndroidManifest.xml

android: windowSoftInputMode = “adjustResize”

Rodee su vista raíz con un ScrollView, preferiblemente con barras de desplazamiento = none. El ScrollView no cambiará nada con su diseño, salvo que se lo utilice para resolver este problema.

Y luego configure fitsSystemWindows = “true” en la vista que desea que se muestre completamente arriba del teclado. Esto hará que su EditText sea visible sobre el teclado, y posibilitará desplazarse hacia abajo a las partes debajo de EditText pero en la vista con fitsSystemWindows = “true”.

android: fitsSystemWindows = “true”

Por ejemplo:

   ...   

Si desea mostrar la parte completa de la vista fitsSystemWindows = “true” sobre el teclado en el momento en que aparece el teclado, necesitará algún código para desplazar la vista hacia abajo:

 // Code is in Kotlin setupKeyboardListener(scrollView) // call in OnCreate or similar private fun setupKeyboardListener(view: View) { view.viewTreeObserver.addOnGlobalLayoutListener { val r = Rect() view.getWindowVisibleDisplayFrame(r) if (Math.abs(view.rootView.height - (r.bottom - r.top)) > 100) { // if more than 100 pixels, its probably a keyboard... onKeyboardShow() } } } private fun onKeyboardShow() { scrollView.scrollToBottomWithoutFocusChange() } fun ScrollView.scrollToBottomWithoutFocusChange() { // Kotlin extension to scrollView val lastChild = getChildAt(childCount - 1) val bottom = lastChild.bottom + paddingBottom val delta = bottom - (scrollY + height) smoothScrollBy(0, delta) } 

Ejemplo de diseño completo:

                

Para mí funcionaba con esta línea de código:

 getActivity().getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN); 

Simplemente colóquelo en el método Crear. ¡Mejor!