androidandroid-layoutandroid-constraintlayoutandroid-layout-weight

Setting minHeight for an imageView within a constraintView not working


I'm developing an Android app for the first time in a while and playing with constraint layouts, as I need the screen to different phone sizes.

I have the elements in the page chained so they all relate to each other, but setting the minHeight on the top imageView doesn't work. The image is being squashed by the other elements. I need the blue buttons to be smaller and the image to take more of a prominent role.

Also, the button images I am using are cropped to the exact image, yet the images have margins when I add them to the view, which I don't understand.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:id="@+id/home_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/topLogo"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@+id/keyVisual"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/toplogo" />

    <ImageView
        android:id="@+id/keyVisual"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginStart="32dp"
        android:layout_marginLeft="32dp"
        android:layout_marginEnd="32dp"
        android:layout_marginRight="32dp"
        app:layout_constraintBottom_toTopOf="@id/homeText"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/topLogo"
        app:srcCompat="@drawable/keyvisual" />

    <TextView
        android:id="@+id/homeText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginLeft="32dp"
        android:layout_marginTop="24dp"
        android:layout_marginEnd="32dp"
        android:layout_marginRight="32dp"
        android:layout_marginBottom="24dp"
        android:text="@string/hometext"
        app:layout_constraintBottom_toTopOf="@id/startButton"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/keyVisual" />



    <ImageView
        android:id="@+id/startButton"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginStart="32dp"
        android:layout_marginLeft="32dp"
        android:layout_marginRight="32dp"
        android:layout_marginEnd="32dp"
        app:layout_constraintBottom_toTopOf="@id/langButton"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/homeText"
        app:srcCompat="@drawable/startbutton" />

    <ImageView
        android:id="@+id/langButton"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginStart="32dp"
        android:layout_marginLeft="32dp"
        android:layout_marginEnd="32dp"
        android:layout_marginRight="32dp"
        app:layout_constraintBottom_toTopOf="@id/tabBar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/startButton"
        app:srcCompat="@drawable/startbutton" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tabBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/langButton">

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Monday" />

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tuesday" />

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Wednesday" />
    </android.support.design.widget.TabLayout>

</android.support.constraint.ConstraintLayout>

enter image description here


Solution

  • You can use those attributes to make your image responsive in size:

    app:layout_constraintHeight_percent="0.25"
    app:layout_constraintWidth_percent="0.25"
    

    It will tell your image to be equal to 1/4 of the screen size both in height and in width, by doing that your image will fit all screen sizes.