Android Studio Buttons Slide Down on Runtime and ImageView Not Showing

Question

I think I have the constraints correct for each element inside of the layout, and I want the app at runtime to look at the preview. The resource for the dice image works properly in another activity, but for some reason doesn't show on the main/first activity.

Here's the preview that's showing inside of Android Studio:

App at runtime:

<?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"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="80dp"
        android:layout_height="100dp"
        android:contentDescription="@string/dice_image"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.513"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.202"
        tools:srcCompat="@drawable/dice_1" />

    <Button
        android:id="@+id/roll_d6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="@string/roll_d6"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />

    <Button
        android:id="@+id/roll_d4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="@string/roll_d4"
        app:layout_constraintEnd_toEndOf="@+id/roll_d6"
        app:layout_constraintStart_toStartOf="@+id/roll_d6"
        app:layout_constraintTop_toBottomOf="@+id/roll_d6" />

    <Button
        android:id="@+id/roll_d8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="@string/roll_d8"
        app:layout_constraintEnd_toEndOf="@+id/roll_d6"
        app:layout_constraintStart_toStartOf="@+id/roll_d6"
        app:layout_constraintTop_toBottomOf="@+id/roll_d4" />

    <Button
        android:id="@+id/roll_d10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="@string/roll_d10"
        app:layout_constraintEnd_toEndOf="@+id/roll_d6"
        app:layout_constraintStart_toStartOf="@+id/roll_d6"
        app:layout_constraintTop_toBottomOf="@+id/roll_d8" />

    <Button
        android:id="@+id/roll_d12"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="@string/roll_d12"
        app:layout_constraintEnd_toEndOf="@+id/roll_d6"
        app:layout_constraintStart_toStartOf="@+id/roll_d6"
        app:layout_constraintTop_toBottomOf="@+id/roll_d10" />

    <Button
        android:id="@+id/roll_d20"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="@string/roll_d20"
        app:layout_constraintEnd_toEndOf="@+id/roll_d6"
        app:layout_constraintStart_toStartOf="@+id/roll_d6"
        app:layout_constraintTop_toBottomOf="@+id/roll_d12" />

</androidx.constraintlayout.widget.ConstraintLayout>

score 1 · Answer 1 · answered Aug 13 '21 at 17:20

1

Use

android:src="@drawable/dice_1"

instead of

tools:srcCompat="@drawable/dice_1"

If you are using android:src in xml during runtime this will show up on the app, whereas if you use tools:src in xml it will show only on the preview of Android studio and not on the runtime of the app.

Reference

answered Aug 13 '21 at 17:20

javdromero

1,850
2
11
19

Thank you, the dice image works now! I'm still having the issue with the buttons and the image not fitting on the screen like the preview however. I updated the question with the new picture. – Azure21 Aug 14 '21 at 15:35

Lalit Fauzdar · Accepted Answer · 2021-11-01T02:51:14.747

It is working as programmed, you're just checking it on a small display size where there is no room left below the dice image to fit 6 buttons.

What you need to do is make it responsive to accommodate different screen sizes.

Remove the margins from all the buttons or set it to a minimum margin so that it doesn't take much space when the screen size is too small and the last button can fit.
Connect the buttons to each other by connecting their bottom to next button's top as Bottom_ToTop just like Top_toBottom, to make it a chain, useful for 4th point and last button's bottom to the parent's bottom, so that it doesn't go beyond that point.
Set vertical constraint style in buttons (typically, setting it only in the first button is enough) as spread_inside. This will make equal space of the available space between all 6 buttons. Minimum space will be what you set as margin.
For small sizes, consider making it a 2xN grid of buttons instead of list to utilize the horizontal space available.

I tried the 2xN grid and it does look better. I also used a scroll view to see if it was necessary but it wasn't. I can't upvote answers apparently but thank you! — Azure21, Aug 16 '21 at 22:14

Android Studio Buttons Slide Down on Runtime and ImageView Not Showing

2 Answers2