Same resolution in Android Studio and my Device but different looks

user_12674761 0
Viewed 65

I am currently programming an Android app and using Kotlin and Android 7, but when I run the app on my phone the picture is a bit different than when I design it in UI Designer. I have chosen the same resolution for both and I am stumped because I have had little contact with the frontend so far. Hopefully someone can help me, thanks already!

XML:

<?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"
    android:background="@android:color/background_light"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="194.3dp"
        android:layout_height="144.3dp"
        android:layout_marginStart="83dp"
        android:layout_marginTop="583.7dp"
        android:layout_marginEnd="82.7dp"
        android:layout_marginBottom="52dp"
        android:visibility="visible"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0"
        app:srcCompat="@drawable/gui_base"
        tools:ignore="MissingConstraints"
        android:contentDescription="GUI" />

    <ImageView
        android:layout_width="47dp"
        android:layout_height="53.3dp"
        android:layout_marginStart="161.3dp"
        android:layout_marginTop="648dp"
        android:layout_marginEnd="151.7dp"
        android:layout_marginBottom="78.7dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/homebutton"
        tools:ignore="MissingConstraints"
        android:contentDescription="HomeButton" />


</androidx.constraintlayout.widget.ConstraintLayout>

Android Studio ||| My Device

kotlin android user-interface java
1 Answers

Try something like this:

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    >

    <ImageView
        android:id="@+id/imageBackground"
        android:layout_width="194.3dp"
        android:layout_height="144.3dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_launcher_background"
        />

    <ImageView
        android:id="@+id/imageFront"
        android:layout_width="47dp"
        android:layout_height="53.3dp"
        app:layout_constraintBottom_toBottomOf="@id/imageBackground"
        app:layout_constraintEnd_toEndOf="@id/imageBackground"
        app:layout_constraintStart_toStartOf="@id/imageBackground"
        app:layout_constraintTop_toTopOf="@id/imageBackground"
        app:srcCompat="@drawable/ic_launcher_foreground"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

Now You can paste this to another container. And the Result:

enter image description here

It will always center the button. If You want the center image (play button) to be a little lower You can add bias app:layout_constraintVertical_bias="0.75". Now the center image will be at 1/4 hight from the bottom.

But I think You should newer hardcode margins to place somewhere on the screen. E.g. You have added android:layout_marginTop="583.7dp" this will only work on one screen resolution and on every other it will look bad. If You want it to be on the bottom just set the bottom constraint to the bottom of the parent and add a 16dp margin.

user_133632050
Related