androidxmlandroid-layoutscreen-sizepixel-density

Different density support

I have created the following .xml layout in my project in an effort to create a scalable layout that supports both different screen sizes and densities:

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary">

<ImageView
    android:id="@+id/imageView"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginBottom="@dimen/_8sdp"
    android:layout_marginEnd="@dimen/_8sdp"
    android:layout_marginStart="@dimen/_8sdp"
    android:layout_marginTop="@dimen/_8sdp"
    android:adjustViewBounds="true"
    android:scaleType="fitXY"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/card_details_open" />

<android.support.constraint.Guideline
    android:id="@+id/hor_top"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_begin="113dp" />

<TextView
    android:id="@+id/first"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="@dimen/_8sdp"
    android:ellipsize="marquee"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:fontFamily="monospace"
    android:marqueeRepeatLimit="marquee_forever"
    android:scrollHorizontally="true"
    android:singleLine="true"
    android:text="LEADER SKILL OR SOMETHING that's long and will make the text scroll in order to show something"
    android:textColor="@color/white"
    android:textSize="@dimen/_14ssp"
    app:layout_constraintEnd_toStartOf="@+id/vert_right"
    app:layout_constraintStart_toStartOf="@+id/vert_left"
    app:layout_constraintTop_toTopOf="@+id/hor_top" />

<TextView
    android:id="@+id/second"
    android:layout_width="0dp"
    android:layout_height="19dp"
    android:layout_marginEnd="@dimen/_6sdp"
    android:layout_marginTop="@dimen/_14sdp"
    android:ellipsize="marquee"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:fontFamily="monospace"
    android:marqueeRepeatLimit="marquee_forever"
    android:scrollHorizontally="true"
    android:singleLine="true"
    android:text="LEADER SKILL OR SOMETHING that's long and will make the text scroll in order to show something"
    android:textColor="@android:color/holo_blue_light"
    android:textSize="@dimen/_14ssp"
    app:layout_constraintEnd_toStartOf="@+id/vert_right"
    app:layout_constraintStart_toStartOf="@+id/first"
    app:layout_constraintTop_toBottomOf="@+id/first" />

<TextView
    android:id="@+id/third"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginBottom="@dimen/_12sdp"
    android:layout_marginEnd="@dimen/_6sdp"
    android:ellipsize="marquee"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:fontFamily="monospace"
    android:marqueeRepeatLimit="marquee_forever"
    android:paddingBottom="@dimen/_2sdp"
    android:scrollHorizontally="true"
    android:singleLine="true"
    android:text="LEADER SKILL OR SOMETHING that's long and will make the text scroll in order to show something"
    android:textColor="@color/white"
    android:textSize="@dimen/_14ssp"
    app:layout_constraintBottom_toTopOf="@+id/hor_bot"
    app:layout_constraintEnd_toStartOf="@+id/vert_right"
    app:layout_constraintStart_toStartOf="@+id/second" />

<android.support.constraint.Guideline
    android:id="@+id/hor_bot"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_begin="@dimen/_206sdp" />

<LinearLayout
    android:id="@+id/Stats"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="@dimen/_8sdp"
    android:orientation="horizontal"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <TextView
        android:id="@+id/textView12"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/_35sdp"
        android:layout_weight="1"
        android:text="TextView"
        android:textColor="@color/white" />

    <TextView
        android:id="@+id/textView13"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="@dimen/_10sdp"
        android:layout_marginStart="@dimen/_25sdp"
        android:layout_weight="0.30"
        android:text="TextView"
        android:textColor="@color/white" />

    <TextView
        android:id="@+id/textView11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/_50sdp"
        android:layout_weight="1"
        android:text="TextView"
        android:textColor="@color/white" />
</LinearLayout>

<android.support.constraint.Guideline
    android:id="@+id/vert_left"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_begin="@dimen/_80sdp" />

<android.support.constraint.Guideline
    android:id="@+id/vert_right"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_end="@dimen/_72sdp" />

</android.support.constraint.ConstraintLayout>

However, i'm still facing the same problem.In the first image,the phone is 5" and has a density of ~380dp and in the second image , the phone is again 5" but with a density of ~441dp.

380DP

441dp

As you can see,the textViews of my layout don't remain in the right position on either of these layouts. What do I need to do to create a scalable layout in Android Studio?I've read a ton of posts but no one actually tells you how that's done. If you have any idea on how this is done from your own personal experience or have worked with a team of developers in your workspace, please help an amateur developer out. Thank you in advance.

PS: Please don't comment links to posts that just say that i should just create different layout folders for different resolutions since i've already done that. My layout dirs are as follows: layout,layout-hdpi-layout-xhdpi,layout-xxhdpi and layout-xxxhdpi.

Sidenote: In my effort to create a scalable layout i also used the sdp/ssp library but it wasn't very helpful.

Solution

  • For anyone coming back to this thread, after talking with a UI/UX Designer i learnt that in order for such complex layouts to work in multiple dimensions, you should probably "cut" them up into multiple pieces (e.g: separate the HP, ATT & DEF boxes on the top, create the predefined text of the image(orange text) as an actual separate TextView etc.). Then using the documentation you find on the Android Developers website and a ConstraintLayout you should be OK!