Android Studio Question posted in
The official documentation can be found here.

Android Studio Buttons Slide Down on Runtime and ImageView Not Showing

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:

Preview for layout

App at runtime:

enter image description here

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

Ui does not fit on screen like preview

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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.

    1. 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.
    2. 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.
    3. 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.
    4. For small sizes, consider making it a 2xN grid of buttons instead of list to utilize the horizontal space available.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search