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>
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.