Pregunta 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 margen / espacio de relleno en "FACEBOOK" y "Registrarse para Facebook "ha cambiado antes y después.
  • No hay vista de desplazamiento involucrada.

117
2018-05-07 04:08


origen


Respuestas:


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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:text="FaceBook"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView1"
        android:layout_marginTop="30dp"
        android:ems="10"
        android:hint="username" >

        <requestFocus />
    </EditText>

    <EditText
        android:id="@+id/editText2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/editText1"
        android:layout_marginTop="20dp"
        android:ems="10"
        android:hint="password" />

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/editText2"
        android:layout_centerHorizontal="true"
        android:layout_marginLeft="18dp"
        android:layout_marginTop="20dp"
        android:text="Log In" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginTop="17dp"
        android:gravity="center"
        android:text="Sign up for facebook"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

149
2018-05-07 04:14



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 intento 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:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@+id/mainLayout"
            android:layout_alignParentTop="true"
            android:id="@+id/headerLayout">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:gravity="center_horizontal">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/textView1"
                    android:text="facebook"
                    android:textStyle="bold"
                    android:ellipsize="marquee"
                    android:singleLine="true"
                    android:textAppearance="?android:attr/textAppearanceLarge" />

            </LinearLayout>

        </RelativeLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:id="@+id/mainLayout"
            android:orientation="vertical">

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/editText1"
                android:ems="10"
                android:hint="Email or Phone"
                android:inputType="textVisiblePassword">

                <requestFocus />
            </EditText>

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:id="@+id/editText2"
                android:ems="10"
                android:hint="Password"
                android:inputType="textPassword" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:id="@+id/button1"
                android:text="Log In"
                android:onClick="login" />

        </LinearLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_below="@+id/mainLayout"
            android:id="@+id/footerLayout">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/textView2"
                        android:text="Sign Up for Facebook"
                        android:layout_centerHorizontal="true"
                        android:layout_alignBottom="@+id/helpButton"
                        android:ellipsize="marquee"
                        android:singleLine="true"
                        android:textAppearance="?android:attr/textAppearanceSmall" />

                    <Button
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentRight="true"
                        android:id="@+id/helpButton"
                        android:text="\?"
                        android:onClick="help" />

                </RelativeLayout>

            </LinearLayout>

        </RelativeLayout>

    </RelativeLayout>

</ScrollView>

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

android:windowSoftInputMode="adjustResize"

sobre el <activity> etiqueta que quieres ese diseño.

Pensamientos:

Me di cuenta de eso RelativeLayout son los diseños que se extienden a través de 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 necesitas tener 1 RelativeLayout inmediatamente despues ScrollView para abarcar todo el espacio de pantalla disponible. Y necesitas tener un LinearLayout dentro de una RelativeLayout de lo contrario, tu interior se aplastaría cuando ocurra el redimensionamiento. Un buen ejemplo es "headerLayout". Si no hubiera un LinearLayout dentro de eso RelativeLayout El texto de "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"

sobre el LinearLayout diseño. Y porque mainLayout está dentro de una LinearLayout esto significa que esa parte no se vuelve a clasificar según el tamaño (otra vez vea la imagen en la pregunta).


24
2018-02-01 15:12



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);

13
2017-07-28 12:42



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

Aquí hay una mejor plantilla:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fillViewport="true">

    <RelativeLayout android:layout_width="match_parent"
                    android:layout_height="match_parent">

        <LinearLayout android:layout_width="match_parent"
                      android:layout_height="wrap_content"
                      android:orientation="vertical">

                <!-- stuff to scroll -->

        </LinearLayout>

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true">

            <!-- footer -->

        </FrameLayout>

    </RelativeLayout>

</ScrollView>

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 el ScrollViews fillViewPort .


9
2018-06-24 20:09



Puede funcionar para todo tipo de diseño.

  1. agregue esto 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:


2
2018-01-11 06:44



En mi caso, ayudó.

main_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main2"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context="com.livewallpaper.profileview.loginact.Main2Activity">

<TextView
    android:layout_weight="1"
    android:layout_width="match_parent"
    android:text="Title"
    android:gravity="center"
    android:layout_height="0dp" />
<LinearLayout
    android:layout_weight="1"
    android:layout_width="match_parent"
    android:layout_height="0dp">
    <EditText
        android:hint="enter here"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>
<TextView
    android:layout_weight="1"
    android:text="signup for App"
    android:gravity="bottom|center_horizontal"
    android:layout_width="match_parent"
    android:layout_height="0dp" />
</LinearLayout>

Usa esto en manifest archivo

<activity android:name=".MainActivity"
        android:screenOrientation="portrait"
        android:windowSoftInputMode="adjustResize"/>

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

android:theme="@style/AppTheme"

Y el tema se tomó así

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="windowActionModeOverlay">true</item>
</style>

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


1
2018-01-02 12:52



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

<activity
    android:name=".YourACtivityName"
    android:windowSoftInputMode="stateVisible|adjustResize">

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


1
2017-08-13 17:12



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:

<ScrollView
    android:id="@+id/scrollView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="none">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        ...

    </android.support.constraint.ConstraintLayout>
</ScrollView>   

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:

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true">

    <RelativeLayout
        android:id="@+id/statisticsLayout"
        android:layout_width="match_parent"
        android:layout_height="340dp"
        android:background="@drawable/some"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/logoImageView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="64dp"
            android:src="@drawable/some"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/authenticationLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginEnd="32dp"
        android:layout_marginStart="32dp"
        android:layout_marginTop="20dp"
        android:focusableInTouchMode="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/statisticsLayout">

        <android.support.design.widget.TextInputLayout
            android:id="@+id/usernameEditTextInputLayout"
            android:layout_width="match_parent"
            android:layout_height="68dp">

            <EditText
                android:id="@+id/usernameEditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:id="@+id/passwordEditTextInputLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/usernameEditTextInputLayout">

            <EditText
                android:id="@+id/passwordEditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </android.support.design.widget.TextInputLayout>

        <Button
            android:id="@+id/loginButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/passwordEditTextInputLayout"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="20dp" />

        <Button
            android:id="@+id/forgotPasswordButton"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_below="@id/loginButton"
            android:layout_centerHorizontal="true" />

    </RelativeLayout>

</android.support.constraint.ConstraintLayout>


1
2018-06-01 06:40



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!


0
2018-04-18 17:34