Using Constraintlayout and dp, layout sizes different in real device

Question

I have several activities similar to the one shown in the pictures, I use Constraintlayout and linear layouts in all of them, everything set up in dp and sp. But it looks different in the emulator than in real devices. The left picture is from the emulator and the right from a Huawei. I read some documentation and they recommend using constraintlayouts and dp, which I'm already doing. None of the sizes are changed programatically. I've tried using layout_weight too with no success so I don't know what I'm missing.

<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:id="@+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/main_activity_animation_list"
tools:context=".MainActivity">

<LinearLayout
    android:id="@+id/laySimbol"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:background="@color/buttonShadeInici"
    android:orientation="horizontal">

    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="77dp"
        android:layout_gravity="center_vertical"
        android:background="@android:color/transparent"
        android:text="⟁"
        android:textColor="@color/blueShade27"
        android:textSize="50sp"
        android:textStyle="bold" />

    <Button
        android:id="@+id/buttonScore"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="30dp"
        android:layout_weight="1"
        android:background="@drawable/buttonlevelscore"
        android:foregroundGravity="center"
        android:text="1.254"
        android:textColor="@color/blueShade62"
        android:textSize="20sp"
        android:textStyle="bold" />

    <FrameLayout
        android:id="@+id/frameLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:clickable="false"
        tools:context="com.example.root.exercicis.MainActivity">

        <com.example.root.exercicis.LikeButtonView

            android:id="@+id/LikeButtonView"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_gravity="center"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="30dp"
            android:clickable="false" />
    </FrameLayout>

    <ImageView
        android:id="@+id/imageViewPopUp2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:foregroundGravity="right"
        android:onClick="ShowPopup"
        android:paddingRight="10dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/verticalLayout"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@android:drawable/ic_menu_sort_alphabetically" />

</LinearLayout>

<LinearLayout
    android:id="@+id/verticalLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/layout_preguntes"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="25dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/laySimbol">

    <TextView
        android:id="@+id/preguntaView"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="TextView"
        android:textColor="@android:color/background_light"
        android:textSize="30sp"
        app:layout_constraintBottom_toTopOf="@+id/verticalLayout"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/respostaButton1"
        android:layout_width="300dp"
        android:layout_height="60dp"
        android:layout_gravity="center"
        android:layout_marginTop="40dp"
        android:layout_marginBottom="20dp"
        android:background="@drawable/buttons_resposta_corners_top"
        android:color="#64686868"
        android:gravity="center"
        android:onClick="OnClickButton"
        android:paddingBottom="0dp"
        android:tag="0"
        android:text="Button"
        android:textAllCaps="false"
        android:textColor="#FFFFFF"
        android:textSize="30sp" />


    <Button
        android:id="@+id/respostaButton2"
        android:layout_width="300dp"
        android:layout_height="60dp"
        android:layout_gravity="center"
        android:layout_marginBottom="20dp"
        android:background="@drawable/buttons"
        android:gravity="center"
        android:onClick="OnClickButton"
        android:paddingBottom="0dp"
        android:tag="1"
        android:text="Button"
        android:textAllCaps="false"
        android:textColor="#FFFFFF"
        android:textSize="30sp" />

    <Button
        android:id="@+id/respostaButton3"
        android:layout_width="300dp"
        android:layout_height="60dp"
        android:layout_gravity="center"
        android:layout_marginBottom="20dp"
        android:background="@drawable/buttons"
        android:gravity="center"
        android:onClick="OnClickButton"
        android:paddingBottom="0dp"
        android:tag="2"
        android:text="Button"
        android:textAllCaps="false"
        android:textColor="#FFFFFF"
        android:textSize="30sp" />

    <Button
        android:id="@+id/respostaButton4"
        android:layout_width="300dp"
        android:layout_height="60dp"
        android:layout_gravity="center"
        android:layout_marginBottom="20dp"
        android:background="@drawable/buttons_resposta_corners_bottom"
        android:gravity="center"
        android:onClick="OnClickButton"
        android:paddingBottom="0dp"
        android:tag="3"
        android:text="Button"
        android:textAllCaps="false"
        android:textColor="#FFFFFF"
        android:textSize="30sp" />

</LinearLayout>

score 0 · Accepted Answer · answered Mar 07 '19 at 19:39

0

You can solve this problem by using SDP(Scalable dp): https://github.com/intuit/sdp

@dimen/_1sdp // Change value before sdp keyword

answered Mar 07 '19 at 19:39

twenk11k

557
5
17

Worked really well – Croqueta Fregida Amb Pastanaga Mar 07 '19 at 20:40
@twenk11k actually I don't recommend using library like Intuit sdp, because it has many bugs, and somehow your not improving your designing skills using this library. Sorry to say that – Kneelon Apr 14 '21 at 13:33

score 0 · Answer 2 · answered Mar 07 '19 at 19:51

Firstly, you should note that "dp" is dependent upon the pixel density of the device's screen.
That said, it's not surprising that they would show up differently on the Emulator vs a Real Device.
I would be willing to bet that the dpi or resolution of the Emulator vs the Real device, are different.

That aside - what exactly is the desired effect you're trying to achieve across all devices?
Or rather, what is it that you are disliking and trying to stop from happening?
Knowing these things would be very helpful for me to identify what the culprit is, or what you should change.

Well, I'm trying to get the same look in all devices. But the main thing is that sometimes it overlaps wih other items and it makes it visually painfull. — Croqueta Fregida Amb Pastanaga, Mar 07 '19 at 20:13

score 0 · Answer 3 · answered Mar 07 '19 at 20:24

You probably won't have the same look in all devices. It's not just the number of pixels and resolution that are different, you also have different screen ratios and density. About the view overlaping, it's important to set constraints on every constraint layout's child. You are missing the constraints on the first linear layout.

<LinearLayout
    android:id="@+id/laySimbol"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:background="@color/buttonShadeInici"
    android:orientation="horizontal"
    app:layout_constraintBottom_toTopOf="@+id/verticalLayout"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

Also, you are setting constraints on a linearlayout child, it won't work.

My recommendation is to review your layout, set all constraints and don't use linear layout inside a constraint, it's not needed. Check this.

score 0 · Answer 4 · answered Apr 14 '21 at 13:39

In my experience as a mobile developer instead of using Button I changed it to TextView it is easier to design in this way. You have to avoid using hardcoded, your width and height must be match_parent or wrap_content. Using TextView as a button will help you create a button with wrap_content size.

<Button
    android:id="@+id/button6"
    android:layout_width="wrap_content"
    android:layout_height="77dp"

<Button
    android:id="@+id/buttonScore"
    android:layout_width="wrap_content"
    android:layout_height="40dp"

Using Constraintlayout and dp, layout sizes different in real device

4 Answers4