0

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.

Stelios Papamichail
  • 955
  • 2
  • 19
  • 57
  • in Android you have to create custom layouts for different screen sizes –  May 11 '18 at 11:05
  • @Eminem i know but do i have to do that manually through code? Like get the screen size and then decide which layout to use? – Stelios Papamichail May 11 '18 at 11:07
  • also it would encourage a lot of people to help you if you would accept more answers and reward their efforts, very bad reputation –  May 11 '18 at 11:07
  • https://developer.android.com/training/multiscreen/screensizes –  May 11 '18 at 11:10
  • 1
    @Eminem, you are right about the reputation thing.I wasn't paying attention to picking answers (i know...) but i fixed that now.Thanks for pointing it out! – Stelios Papamichail May 11 '18 at 11:25
  • @EminemI've read everything on that link like 3 times but it didn't help me. In my layout dirs I am not using the SW qualifier though but instead, I'm using the res qualifier (xhdpi,hdpi) etc. Should I actually try using the SW one? – Stelios Papamichail May 11 '18 at 11:27
  • sw qualifier is independent of screen orientation,yes try it –  May 11 '18 at 12:09
  • Ok but my app will only be available in Portrait mode – Stelios Papamichail May 11 '18 at 12:12
  • just to make smth clear,your prb is screen size,or pixel density? –  May 11 '18 at 12:16
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/170853/discussion-between-eminem-and-stelios-papamichael). –  May 11 '18 at 12:16

1 Answers1

0

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!

Stelios Papamichail
  • 955
  • 2
  • 19
  • 57