Problems with constraint layout

Question

I´m having some problems trying to create a new layout. I´m using a ConstraintLayour with an ImageView as background and 6 buttons (A,B,C,D,E,F) that should have a fixed possition over the ImageView. While the preview in Android Studio looks like this:

When I launch the app I get this:

Here is the code:

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Mapa">

    <ImageView
        android:id="@+id/almacen"
        android:layout_width="0dp"
        android:layout_height="0dp"

        android:adjustViewBounds="true"
        android:cropToPadding="false"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/almacen_fondo" />

    <Button
        android:id="@+id/a_button"
        android:layout_width="62dp"
        android:layout_height="66dp"
        android:layout_marginTop="140dp"
        android:backgroundTint="#FFC107"
        android:text="A"
        android:textAlignment="center"
        android:textAllCaps="false"
        android:textSize="30sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="@+id/b_button"
        app:layout_constraintStart_toStartOf="@+id/b_button"
        app:layout_constraintTop_toBottomOf="@+id/b_button" />

    <Button
        android:id="@+id/b_button"
        android:layout_width="62dp"
        android:layout_height="66dp"
        android:layout_marginTop="140dp"
        android:backgroundTint="#FFC107"
        android:text="B"
        android:textAlignment="center"
        android:textSize="30sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="@+id/c_button"
        app:layout_constraintStart_toStartOf="@+id/c_button"
        app:layout_constraintTop_toBottomOf="@+id/c_button" />

    <Button
        android:id="@+id/c_button"
        android:layout_width="62dp"
        android:layout_height="66dp"
        android:layout_marginStart="73dp"
        android:layout_marginTop="69dp"
        android:backgroundTint="#FFC107"
        android:text="C"
        android:textSize="30sp"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="@+id/almacen"
        app:layout_constraintTop_toTopOf="@+id/almacen" />

    <Button
        android:id="@+id/d_button"
        android:layout_width="62dp"
        android:layout_height="66dp"
        android:layout_marginTop="2dp"
        android:layout_marginEnd="73dp"
        android:backgroundTint="#FFC107"
        android:text="D"
        android:textSize="30sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="@+id/c_button"
        app:layout_constraintEnd_toEndOf="@+id/almacen"
        app:layout_constraintTop_toTopOf="@+id/c_button" />

    <Button
        android:id="@+id/e_button"
        android:layout_width="62dp"
        android:layout_height="66dp"
        android:layout_marginTop="140dp"
        android:backgroundTint="#FFC107"
        android:text="E"
        android:textAlignment="center"
        android:textSize="30sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="@+id/d_button"
        app:layout_constraintStart_toStartOf="@+id/d_button"
        app:layout_constraintTop_toBottomOf="@+id/d_button" />

    <Button
        android:id="@+id/f_button"
        android:layout_width="62dp"
        android:layout_height="66dp"
        android:layout_marginTop="140dp"
        android:backgroundTint="#FFC107"
        android:text="F"
        android:textAlignment="center"
        android:textSize="30sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="@+id/e_button"
        app:layout_constraintStart_toStartOf="@+id/e_button"
        app:layout_constraintTop_toBottomOf="@+id/e_button" />

</android.support.constraint.ConstraintLayout>

What am I doing wrong? I've tried lot of things without solving the problem.

The problem is you're trying to fit the position of the buttons on specific parts of the background image which scale depending on the device size, aspect ratio, etc... Your layout may work for some cases, but this is not a reliable solution. Maybe an alternative is to process the image with device display size and extract the position and size for the buttons programmatically. — Ismael Di Vita, May 16 '19 at 09:28
@IsmaelDiVita is right about scaling. Take a look at [this Stack Overflow question and answer](https://stackoverflow.com/questions/46876928/constraintlayout-relative-to-imageview-dimensions/47047101#47047101). It may help. — Cheticamp, May 16 '19 at 13:35

score 0 · Answer 1 · answered May 15 '19 at 17:55

You have to give chain to all views like below

<Button
    android:id="@+id/button"
    android:layout_width="62dp"
    android:layout_height="62dp"
    android:backgroundTint="#FFC107"
    android:text="C"
    app:layout_constraintBottom_toTopOf="@+id/button2"
    app:layout_constraintEnd_toStartOf="@+id/button4"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/button2"
    android:layout_width="62dp"
    android:layout_height="62dp"
    android:backgroundTint="#FFC107"
    android:text="B"
    app:layout_constraintBottom_toTopOf="@+id/button3"
    app:layout_constraintEnd_toStartOf="@+id/button5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/button" />

<Button
    android:id="@+id/button3"
    android:layout_width="62dp"
    android:layout_height="62dp"
    android:backgroundTint="#FFC107"
    android:text="A"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/button6"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/button2" />

<Button
    android:id="@+id/button4"
    android:layout_width="62dp"
    android:layout_height="62dp"
    android:backgroundTint="#FFC107"
    android:text="D"
    app:layout_constraintBottom_toTopOf="@+id/button5"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/button"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/button5"
    android:layout_width="62dp"
    android:layout_height="62dp"
    android:backgroundTint="#FFC107"
    android:text="E"
    app:layout_constraintBottom_toTopOf="@+id/button6"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/button2"
    app:layout_constraintTop_toBottomOf="@+id/button4" />

<Button
    android:id="@+id/button6"
    android:layout_width="62dp"
    android:layout_height="62dp"
    android:backgroundTint="#FFC107"
    android:text="F"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/button3"
    app:layout_constraintTop_toBottomOf="@+id/button5" />

Thanks Mehul, so now the layout looks like this: https://imgur.com/nYh96jJ Is there some way to fix the possition of all buttons inside the blank squares? Should I firstly fix the C button and then give chains to all the rest? Thanks — fromAB, May 15 '19 at 18:38

Problems with constraint layout

1 Answers1