Place a TextInput above the Android keyboard without it drawing a black rectangle?

Question

In my Android app I have an Activity where a user can add some text to an image. When the button to initiate this is pressed a TextInput appears at the bottom of the screen with the "Save" button overlayed.

The relevant config looks like this:

<activity
            android:name=".ImageEditorActivity"
 android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
            android:label="@string/title_activity_image_editor"
            android:parentActivityName=".MainActivity"
            android:windowSoftInputMode="adjustResize|stateHidden"
            android:theme="@style/FullscreenTheme">
            <meta-data
                android:name="android.support.PARENT_ACTIVITY"
                android:value="myApp.MainActivity" />
        </activity>

The activity xml looks like this - I have trimmed out a couple of extra buttons that don't related to this feature:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#0099cc"
    tools:context=".ImageEditorActivity"
    android:id="@+id/fullscreen_content">
<ScrollView
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:layout_marginTop="50dp"
    android:isScrollContainer="true" >
        <RelativeLayout  xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/edit_image"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:adjustViewBounds="true"></ImageView>
            <EditText
                android:id="@+id/image_comment"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginTop="8dp"
                android:paddingLeft="8dp"
                android:shadowDx="0"
                android:shadowDy="0"
                android:shadowRadius="2"
                android:hint="notes"
                android:text=""
                android:textColor="@android:color/black"
                android:background="@android:color/white"
                android:layout_alignParentBottom="true"
                android:visibility="invisible"
                app:layout_constraintStart_toEndOf="parent"
                app:layout_constraintTop_toBottomOf="parent" />

            <Button
                android:id="@+id/image_comment_save_button"
                android:layout_width="100dp"
                android:layout_height="45dp"
                android:layout_marginBottom="2dp"
                android:layout_alignParentBottom="true"
                android:layout_alignParentRight="true"
                android:text="Save"
                android:visibility="invisible"
                app:layout_constraintStart_toEndOf="parent"
                app:layout_constraintTop_toBottomOf="parent"
                />
        </RelativeLayout>
</ScrollView>
 <Button
            android:id="@+id/note_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/add_note"
            app:layout_constraintBottom_toTopOf="parent"></Button>

The activity is started with the path to an image, which it then loads into the image. When the note button is pressed it shows the textbox.

noteButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            writeNotes();
        }
    });

 private void writeNotes() {
        InputMethodManager methodMan = (InputMethodManager)getSystemService(Context.INPUT_METHOD_SERVICE);
        if (noteBox.getVisibility() == View.VISIBLE) {
            String text = noteBox.getText().toString();
            if ( 0 < text.trim().length() ) {
                Bitmap image = ((BitmapDrawable) imageView.getDrawable()).getBitmap();
                writeOnImage(image, text);
                imageView.setImageBitmap(image);
                saveImage(image, lastTaken);
                exifData.put(ExifInterface.TAG_USER_COMMENT, text);
            }
            noteBox.setVisibility(View.INVISIBLE);
            noteSaveButton.setVisibility(View.INVISIBLE);
            methodMan.hideSoftInputFromWindow(noteBox.getWindowToken(), 0);
        }
        else {
            noteBox.setText("");
            noteBox.setVisibility(View.VISIBLE);
            noteSaveButton.setVisibility(View.VISIBLE);
            noteBox.requestFocus();
            methodMan.toggleSoftInput(InputMethodManager.SHOW_FORCED, 0);
        }
    }

The problem is that when the keyboard opens, there is a big black rectangle over it, that completely obscures the EditText and the Save button. This only happens on my phone, which is on 7.1.1, the emulator variants I have tried seem to work normally. Interestingly although they are obscured, they still work - if I type something on the keyboard and then press where the Save button should be, it saves the text as expected.

This screenshot shows the problem in action:

By changing the settings around the config file, I have found situations where the black rectangle is not shown, but in every case I have found that also hides the EditText component and even after the keyboard is closed I never see it again, leaving the activity in a weird state where there is no way to press the Save button.

If the keyboard is open the whole time the black rectangle only appears once the EditText has focus, prior to that the keyboard looks normal.

The closest thing I can find in previous questions suggests that android:inputType="textNoSuggestions" might help but it doesn't seem to make any difference - this doesn't seem to be a suggestion box, just an arbitrary black rectangle.

What do I need to do to stop my keyboard drawing a pointless black rectangle right over my input box or, if I am approaching this the wrong way somehow, what do I need to do to have an input box that allows the user to see the text that they are writing and then save it when they are content that it is complete?

Answer 1

The problem turned out to be related to the Android software buttons at the bottom of the screen, rather than the keyboard itself- for some reason they were causing the layout to measure the screen incorrectly whenever the keyboard was opened.

The solution was to add android:fitsSystemWindows="true" to the FrameLayout at the root of the view.