ScrollView too long therefore produce white borders

Question

I'm still working on my android application and I still struggle with XML ans scroll views. I want to display an AlertDialog which contains:

• A JPEG image a the top of the window
• two EditText under the picture, at the same Y coordinate. (and both the negative and positive button of the dialog which seem to work fine) the JPEG is coming from the camera and is quite big to display it in a dialog and hide the two EditText. I decided to embed this in a scrollView to allow the user to scroll if the picture gets too big for the display.

The probleme is that now I can display everything thanks to the scroll but I now have white horizontal bars which are useless and look really bad on some devices.

Here's the code to display the Dialog:

        LayoutInflater inflater = LayoutInflater.from(this);
    View inflated = inflater.inflate(R.layout.dialog_modify_picture, null);
    ImageView pictureIV = inflated.findViewById(R.id.picturePrint);
    pictureIV.setImageURI(FileProvider.getUriForFile(
            this,
            BuildConfig.APPLICATION_ID + ".provider",
             new File(this.getExternalFilesDir(Environment.DIRECTORY_DOWNLOADS) + "/"+ p.getPath()+p.getIdentifier()+".jpeg")));

    TextView pTV = inflated.findViewById(R.id.pictureTV);
    pTV.setText(p.getIdentifier()+ ".jpeg");
    pTV.requestFocus();

    EditText yET = inflated.findViewById(R.id.yPictureET);
    yET.setBackgroundColor(Color.argb(25, 65, 108, 174));
    yET.setText(((Float)p.getY()).toString());

    EditText xET = inflated.findViewById(R.id.xPictureET);
    xET.setBackgroundColor(Color.argb(25, 65, 108, 174));
    xET.setText(((Float)p.getX()).toString());



    AlertDialog.Builder builder = new AlertDialog.Builder(this);

    builder.setNegativeButton("Annuler", (DialogInterface dialog, int which) -> {});
    builder.setPositiveButton("Ok", (DialogInterface dialog, int which) -> {
        try {
            p.setX(Float.parseFloat(xET.getText().toString()));
        } catch (NumberFormatException ignored) {}

        try {
            p.setY(Float.parseFloat(yET.getText().toString()));
        } catch (NumberFormatException ignored) {}

        new PictureDAO(this).update(p);
    });
    builder.setView(inflated);
    builder.show();

And here's the XML:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:focusableInTouchMode="true"
android:layout_height="match_parent">

<ScrollView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/picturePrint"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <EditText
            android:id="@+id/xPictureET"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:inputType="numberDecimal"
            android:padding="10dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/pictureTV" />

        <EditText
            android:id="@+id/yPictureET"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:layout_marginEnd="10dp"
            android:inputType="numberDecimal"
            android:padding="10dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/xPictureET"
            app:layout_constraintTop_toBottomOf="@+id/pictureTV" />

        <TextView
            android:id="@+id/pictureTV"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:layout_marginTop="5dp"
            android:padding="10dp"
            android:text=""
            app:layout_constraintTop_toBottomOf="@+id/picturePrint" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

Finally here's the white bar (there's another one under the picture) GoCheckTheWhiteBars I'd like to remove the white bars so the image can be on the very top of the dialog

Thx for reading me :)

Answer 1

I think you should remove app:layout_constraintBottom_toBottomOf="parent" from the ImageView and you will be fine

Answer 2

As mentioned Jack, app:layout_constraintBottom_toBottomOf="parent" is a mistake but after correcting it, nothing changed. (Idk why I can't edit my original post)