Constraint Bugado Layout

Asked

Viewed 67 times

0

I made an app on Android Studio using Constraintlayout. After finishing I tested in two different devices, a Vibe K6 and a Moto G 1st Generation, and in both everything was perfect. But when I tested on Samsung Galaxy J2 got a whole screen wrong.

Como era pra ficar

How it was meant to be

Como ficou no j2

How did it look on the Samsung Galaxy J2

The XML code:

<?xml version="1.0" encoding="utf-8"?>


<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <SeekBar
        android:id="@+id/perfectSeekBar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="32dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/perfectPlayBtn"
        app:layout_constraintTop_toTopOf="parent" />

    <SeekBar
        android:id="@+id/sevenYearsSeekBar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="32dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/sevenYearsPlayBtn"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <SeekBar
        android:id="@+id/deusSeekBar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="32dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/deusPlayBtn"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

    <SeekBar
        android:id="@+id/justSeekBar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="32dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/justPlayBtn"
        app:layout_constraintTop_toBottomOf="@+id/textView3" />

    <SeekBar
        android:id="@+id/canetaSeekBar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="32dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/canetaPlayBtn"
        app:layout_constraintTop_toBottomOf="@+id/textView4" />

    <ImageButton
        android:id="@+id/sevenYearsPlayBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="32dp"
        android:src="@drawable/play_button_src"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/perfectPlayBtn"
        app:srcCompat="@android:drawable/ic_media_play" />

    <ImageButton
        android:id="@+id/perfectPlayBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:src="@drawable/play_button_src"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@android:drawable/ic_media_play" />

    <ImageButton
        android:id="@+id/deusPlayBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="32dp"
        android:src="@drawable/play_button_src"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/sevenYearsPlayBtn"
        app:srcCompat="@android:drawable/ic_media_play" />

    <ImageButton
        android:id="@+id/justPlayBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="32dp"
        android:src="@drawable/play_button_src"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/deusPlayBtn"
        app:srcCompat="@android:drawable/ic_media_play" />

    <ImageButton
        android:id="@+id/canetaPlayBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="32dp"
        android:src="@drawable/play_button_src"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/justPlayBtn"
        app:srcCompat="@android:drawable/ic_media_play" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:text="@string/txt_perfect"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/perfectSeekBar" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:text="@string/txt_seven_years"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/sevenYearsSeekBar" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:text="@string/txt_deus"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/deusSeekBar" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:text="@string/txt_just"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/justSeekBar" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:text="@string/txt_caneta"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/canetaSeekBar" />

</android.support.constraint.ConstraintLayout>

android android-layout

  • I think an Itemadapter would solve your problem

1 answer

0


Try putting the TextViews below the play buttons (ImageButtons), instead of below the SeekBars. For that, in each TextView change

app:layout_constraintTop_toBottomOf="@+id/seekBarAcima" />

for

app:layout_constraintTop_toBottomOf="@+id/ImageButtonAcima" />

  • Thanks for the reply, really turned out perfect hehe. But now I’d like to know why it looked like this on this particular smartphone and on the others not?

Browser other questions tagged android android-layout

You are not signed in. Login or sign up in order to post.