Dealing with Imageview & guidelines

Question

I am creating a quizz game and struggling with constraining the image of my Imageview in the guidelines I have declared.

In Android Studio preview everything seems fine and as expected. Below is a printscreen of this expected result:

But when I run the app in the emulator (Pixel 3 XL API 29 on AVD Manager), I get the result below:

The image is not constrained by the vertical guidelines or somehow the vertical guidelines are never applied while the preview shows otherwise. I tried running it on different devices and the result is always the same.

Here is my XML code:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#427e83"
    tools:context=".level1">

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/level1completion"
        android:layout_width="342dp"
        android:layout_height="32dp"
        android:layout_marginTop="32dp"
        android:autofillHints=""
        android:fontFamily="@font/sunrise_international"
        android:textAlignment="center"
        android:textSize="36sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/level1answer" />

    <EditText
        android:id="@+id/level1tail1answer"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="32dp"
        android:background="@drawable/rounded_corners_edittext"
        android:ems="10"
        android:fontFamily="@font/sunrise_international"
        android:hint="@string/type_your_answer"
        android:inputType="textPersonName"
        android:textColor="@android:color/darker_gray"
        android:textColorHint="#45484b"
        app:layout_constraintEnd_toStartOf="@+id/guideline2"
        app:layout_constraintStart_toStartOf="@+id/guideline"
        app:layout_constraintTop_toBottomOf="@+id/level1imagetoguess" />

    <ImageView
        android:id="@+id/level1tail1imagetoguess"
        android:contentDescription="@string/correct_answer"
        android:src="@drawable/my_picture"
        android:scaleType="fitStart"
        android:adjustViewBounds="true"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toStartOf="@+id/guideline2"
        app:layout_constraintStart_toStartOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="@+id/guideline3" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.18" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.9155" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.055" />

</androidx.constraintlayout.widget.ConstraintLayout>

I am not able to grasp what is going wrong here, even though I've read the documentation. As a last resort, I've tried to play with combinations of the following parameters:

layout_constraintDimensionRatio
scaleType
adjustViewBounds
layout_width
layout_height

With no luck.

Any help would be greatly appreciated!

Thanks!

follow this guide https://developer.android.com/guide/topics/display-cutout — Elias Fazel, Jan 29 '20 at 15:35
Thanks for this link Elias! I should have been more specific in my description: my main problem is not that the "notch" covers the image (at least for now... your link will help me solving this) but rather that the image is not constrained by the vertical guidelines while the preview shows otherwise. Post edited. — Julien LAFFITTE, Jan 29 '20 at 17:57

score 0 · Answer 1 · answered Jan 30 '20 at 08:23

You did most of the job but here is What was wrong with your layout:

you were using fixed sizes on your views (android:layout_width="342dp"), and because different phones got different sizes what may look good on your preview won't look the same on another device.
you never have view with the id of level1answer, so your other views could not be constrained to a non exist view

Fixed layout:

<EditText
    android:id="@+id/level1tail1answer"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintHeight_percent="0.1"
    android:ems="10"
    android:hint="type_your_answer"
    android:inputType="textPersonName"
    android:textColor="@android:color/darker_gray"
    android:textColorHint="#45484b"
    app:layout_constraintEnd_toStartOf="@+id/guideline2"
    app:layout_constraintStart_toStartOf="@+id/guideline"
    app:layout_constraintTop_toTopOf="@+id/guideline4" />

<ImageView
    android:id="@+id/level1tail1imagetoguess"
    android:adjustViewBounds="true"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:contentDescription="correct_answer"
    android:scaleType="fitStart"
    app:layout_constraintBottom_toTopOf="@+id/guideline4"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintEnd_toStartOf="@+id/guideline2"
    app:layout_constraintStart_toStartOf="@+id/guideline"
    app:layout_constraintTop_toTopOf="@+id/guideline3" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.18" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.9155" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.055" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.6" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintHeight_percent="0.1"
    android:text="some text"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/guideline2"
    app:layout_constraintStart_toStartOf="@+id/guideline"
    app:layout_constraintTop_toBottomOf="@+id/level1tail1answer" />

Will look like this

Dealing with Imageview & guidelines

1 Answers1