The login interface is full screen + background image immersive + keyboard will pop up the input box + keyboard pop up, the background will not be popped up or compressed

demand:

  • Interface background immersion
  • The keyboard pop-up input box will not be blocked
  • The keyboard pops up and the background does not move

The renderings are as follows:
Insert picture description here

Interface layout file: (add android:fitsSystemWindows="true" attribute to the layout that needs to be jacked up, as LinearLayout below)

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

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@mipmap/bg" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginLeft="12dp"
        android:layout_marginRight="12dp"
        android:layout_marginBottom="20dp"
        android:fitsSystemWindows="true"
        android:orientation="vertical">

        <EditText
            android:id="@+id/editText1"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:background="@null"
            android:hint="请输入账号"
            android:paddingLeft="8dp"
            android:textColor="@android:color/white"
            android:textColorHint="@android:color/white"
            android:textSize="18sp" />

        <View
            android:layout_width="match_parent"
            android:layout_height="2dp"
            android:background="@color/colorAccent" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_marginTop="12dp"
            android:background="@null"
            android:hint="请输入密码"
            android:paddingLeft="8dp"
            android:textColor="@android:color/white"
            android:textColorHint="@android:color/white"
            android:textSize="18sp" />

        <View
            android:layout_width="match_parent"
            android:layout_height="2dp"
            android:background="@color/colorAccent" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_marginTop="20dp"
            android:background="@android:color/white"
            android:text="登录"
            android:textSize="18sp" />
    </LinearLayout>

</RelativeLayout>

Manifest file configuration: (android:windowSoftInputMode="adjustResize|stateAlwaysHidden")

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.keyboard">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name=".MainActivity"
            android:windowSoftInputMode="adjustResize|stateAlwaysHidden">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Interface Activity code:

package com.example.keyboard;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import com.gyf.immersionbar.ImmersionBar;

public class MainActivity extends AppCompatActivity {
    
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //沉浸
        ImmersionBar.with(this).init();
    }
}

build.gradle dependency: (Added immersionbar for immersion)

    implementation 'com.gyf.immersionbar:immersionbar:3.0.0'

Hidden problem (does not affect the use):
In order to demonstrate this problem, remove all margins in the layout, and add different colors to the LinearLayout and sub-controls; you will find that there is an extra statusbar such a height gap on the LinearLayout that adds the android:fitsSystemWindows attribute. There is no way to remove it, but it affects the use, because there are no other controls on the top of the layout that needs to be lifted; even if other controls need to be added on the edittext, you can add them to this LinearLayout;
Insert picture description here
other solutions try:
solve adjustResize and When the full-screen immersion mode conflicts, I used the AndroidBug5497Workaround mode in the reference connection, and found that when the keyboard pops up, there will be a blank position with a height of statusbar above the keyboard; it is really pulling out the carrot to bring out the mud, and no suitable solution was found. So the AndroidBug5497Workaround method was abandoned;

Other app login interface design:

  • One type is that users can only log in to enter the home page for use. This kind of app generally supports multiple login methods, so the login interface does not have an input box, but just a jump button for different types of login methods, so full screen + immersion will not appear +Keyboard + input box is not blocked + background is not compressed, etc.

Such as: Little Red BookInsert picture description here

  • The other type is to enter the app and can be used directly. Only when the user needs to post information or actively click on mine to enter the login interface will enter the login interface; the login interface entered in this way generally does not have a background image, because this interface is designed There is no need to use the background image to convey some information to the user; for
    example: Douyin
    Insert picture description here
    In summary, so there are not many cases of this design in the current article, even if you encounter it, you can follow the steps above to solve it; only this record , If you have any questions, please leave a comment, thank you

Reference connection 1.
Android input method box pop-up background shift or compression problem
2. Solve the problem of keyboard blocking input box of full screen activity, Fullscreen blocking Edittext, full screen input box bug, AndroidBug5497Workaround, immersive input box
3. Android adjustresize full screen invalid problem
4. Android realizes the soft keyboard pop-up, editText moves up with the keyboard, the background does not move

Guess you like

Origin blog.csdn.net/nongminkouhao/article/details/107983535