I've been trying for weeks to solve the problem of how to make my UI's text support all kinds of different device resolutions and densities without success. After reading the developers guide and multiple stack posts , i tried a lot of things. For starters, i created the layout directories that you can see in the image below (layout-sw320dp , layout-sw360dp and layout-sw400dp) :
Now if i test my app on a few different emulators, the UI's text seems fine but when my Alpha testers download the app on their phones, the UI's text gets misplaced. Here's the look i am trying to achieve across all devices :
Below i am adding 7 different devices which the alpha testers use:
1) S8+ (2960x1440)(529dpi)
2) Samsung galaxy j7 prime (1920x1080) (401dpi)
3) S8+ (1440x2960)(~529dpi)
4) Samsung A3 (960x540)(245dpi)
5) Motor z play Droid (1920x1080) (403 dpi)
6) Samsung Galaxy S7 (1440x2560) (577dpi)
7) Sony Xperia xa (720x1280)
After getting in touch with them, these are the images they sent me back(not everyone has answered yet):
2) 
5)
6) 
7) 
I also have these lines of code that help me check whether the phone is an s8 or s8+ (since they need different layout styles due to their 18:9 ratio). Could this cause issues?
// Get the user's phone's height and width
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
// screen size in inches
int height = dm.heightPixels;
int width = dm.widthPixels;
double x = Math.pow(width/dm.xdpi,2);
double y = Math.pow(height/dm.ydpi,2);
double screenInches = Math.sqrt(x+y);
Log.d("SIZE_INCHES", screenInches + "\"");
// If it's an S8 or S8+ choose the appropriate layout
if (height > 1920 && height <= 2220) { // FHD+ (2220x1080)
if(screenInches <= 6.0) {
setContentView(R.layout.cardview_s8); //s8
} else {
setContentView(R.layout.cardview_s8_plus); // s8+
}
} else if (height > 2220 && height <= 2960) { // S8 WQHD+ (2960x1440)
if(screenInches <= 6.0) {
setContentView(R.layout.cardview_s8_wqhd_res);
} else {
setContentView(R.layout.cardview_s8_plus_wqhd); // s8+
}
} else { // otherwise choose the appropriate layout for the user's phone based on it's swdp qualifier
setContentView(R.layout.cardview);
}
Here's my layout(design view) for reference:
And here's the xml code:
<?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="@drawable/card_view_bg"
tools:layout_editor_absoluteY="25dp">
<ImageView
android:id="@+id/cardArtImageView"
android:layout_width="400dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
app:layout_constraintBottom_toTopOf="@+id/cardDetailsImageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/cardDetailsImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:cropToPadding="false"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="@drawable/card_details_box" />
<TextView
android:id="@+id/leaderSkillDesc"
android:layout_width="300dp"
android:layout_height="19dp"
android:layout_marginBottom="8dp"
android:layout_marginStart="40dp"
android:layout_marginTop="8dp"
android:ellipsize="marquee"
android:focusable="true"
android:focusableInTouchMode="true"
android:fontFamily="monospace"
android:marqueeRepeatLimit="marquee_forever"
android:scrollHorizontally="true"
android:singleLine="true"
android:textAlignment="viewStart"
android:textColor="@color/white"
android:textSize="13sp"
android:textStyle="italic"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.496"
app:layout_constraintStart_toStartOf="@+id/cardDetailsImageView"
app:layout_constraintTop_toTopOf="@+id/guideline8"
app:layout_constraintVertical_bias="0.626" />
<TextView
android:id="@+id/superAttackDesc"
android:layout_width="314dp"
android:layout_height="21dp"
android:layout_marginBottom="8dp"
android:layout_marginStart="40dp"
android:layout_marginTop="8dp"
android:ellipsize="marquee"
android:focusable="true"
android:focusableInTouchMode="true"
android:fontFamily="monospace"
android:marqueeRepeatLimit="marquee_forever"
android:scrollHorizontally="true"
android:singleLine="true"
android:textAlignment="viewStart"
android:textColor="@android:color/white"
android:textSize="13sp"
android:textStyle="italic"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/guideline9" />
<TextView
android:id="@+id/superAttackTitle"
android:layout_width="250dp"
android:layout_height="15dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:fontFamily="monospace"
android:textAlignment="viewStart"
android:textColor="@android:color/holo_blue_light"
android:textSize="14sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="@+id/superAttackDesc"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<android.support.constraint.Guideline
android:id="@+id/guideline8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="443dp" />
<android.support.constraint.Guideline
android:id="@+id/guideline9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="596dp" />
</android.support.constraint.ConstraintLayout>
What am i doing wrong here? I've never been more confused in my life in android development... Is there a more explicit way for this job? Do i need more layout dirs or something? Are those 3 layout dirs correct? Please if you know anything that could help me, post it down below.
PS: I'm using a Constraint Layout for this part of the UI, could the constraints be causing the issue?
