Hello i make my first app in the Android Studio and i have some problem. I was read every stackoverflow’s topics and android documentation about my problem but i still don’t understand what i should do.
I uses a ConstraintLayout for application and uses "SDP" "SSP" library for different screen sizes. In the Android Studio preview on every devices (also my custom device) my app looks good
screenshoot
But when i test app on my phone (the same phone like a device in Android Studio "LG") the app isn’t the same like in the preview
screenshoot
Like you can see some elements are disappear
What should I do to make the application on the phone look the same as in the preview and to be adapted to different devices and screen sizes?’
Here’s my 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="#ff11111a"
android:theme="@style/Theme.PlayRPGMobile"
tools:context=".MainActivity">
<ImageView
android:id="@+id/imageView"
android:layout_width="@dimen/_230sdp"
android:layout_height="@dimen/_300sdp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/login_logo"
app:layout_constraintVertical_bias="0.299"
app:srcCompat="@drawable/rectangle" />
<ImageView
android:id="@+id/login_logo"
android:layout_width="@dimen/_300sdp"
android:layout_height="0dp"
android:layout_marginTop="@dimen/_64sdp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.476"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/logo" />
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/_28sdp"
android:fontFamily="sans-serif-medium"
android:text="Wprowadź swoje dane"
android:textSize="@dimen/_15ssp"
app:layout_constraintBottom_toTopOf="@+id/loginEdit"
app:layout_constraintEnd_toEndOf="@+id/imageView"
app:layout_constraintHorizontal_bias="0.502"
app:layout_constraintStart_toStartOf="@+id/imageView"
app:layout_constraintTop_toTopOf="@+id/imageView"
app:layout_constraintVertical_bias="0.0"
tools:text="Wprowadź swoje dane" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/_24sdp"
android:fontFamily="sans-serif-medium"
android:text="Play RPG © 2022"
android:textSize="@dimen/_15ssp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imageView"
tools:text="Play RPG © 2022" />
<EditText
android:id="@+id/loginEdit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/_80sdp"
android:background="#ff222228"
android:ems="10"
android:hint="Login..."
android:inputType="textPersonName"
android:minHeight="@dimen/_38sdp"
android:paddingLeft="@dimen/_10sdp"
android:paddingTop="@dimen/_5sdp"
android:paddingBottom="@dimen/_2sdp"
app:layout_constraintEnd_toEndOf="@+id/imageView"
app:layout_constraintHorizontal_bias="0.533"
app:layout_constraintStart_toStartOf="@+id/imageView"
app:layout_constraintTop_toTopOf="@+id/imageView" />
<EditText
android:id="@+id/passEdit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/_20sdp"
android:background="#ff222228"
android:ems="10"
android:hint="Hasło..."
android:inputType="textPassword"
android:minHeight="@dimen/_38sdp"
android:paddingLeft="@dimen/_10sdp"
android:paddingTop="@dimen/_5sdp"
android:paddingBottom="@dimen/_5sdp"
app:layout_constraintEnd_toEndOf="@+id/loginEdit"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/loginEdit"
app:layout_constraintTop_toBottomOf="@+id/loginEdit" />
<Button
android:id="@+id/loginBtn"
android:layout_width="@dimen/_130sdp"
android:layout_height="@dimen/_38sdp"
android:backgroundTint="#ff222228"
android:fontFamily="sans-serif-medium"
android:text="Zaloguj"
android:textColor="@color/white"
app:layout_constraintBottom_toBottomOf="@+id/imageView"
app:layout_constraintEnd_toEndOf="@+id/pinEdit"
app:layout_constraintHorizontal_bias="0.497"
app:layout_constraintStart_toStartOf="@+id/pinEdit"
app:layout_constraintTop_toBottomOf="@+id/pinEdit"
app:layout_constraintVertical_bias="0.512" />
<EditText
android:id="@+id/pinEdit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/_20sdp"
android:background="#ff222228"
android:ems="10"
android:hint="PIN..."
android:inputType="number"
android:minHeight="@dimen/_38sdp"
android:paddingLeft="@dimen/_10sdp"
android:paddingTop="@dimen/_5sdp"
android:paddingBottom="@dimen/_5sdp"
app:layout_constraintEnd_toEndOf="@+id/passEdit"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/passEdit"
app:layout_constraintTop_toBottomOf="@+id/passEdit" />
</androidx.constraintlayout.widget.ConstraintLayout>
3
Answers
For making responsive UI I would suggest using guidelines in constraint layout. You can take help of this constraint layout training guide.
Also you can make use of chains in constraint layout Chains
Avoid hard-coded layout sizes for Different Screen Sizes
To ensure that your layout is flexible and adapts to different screen sizes, you should use
wrap_contentormatch_parentfor the width and height of most view components, instead of hard-coded sizes.wrap_contenttells the view to set its size to whatever is necessary to fit the content within that view.match_parentmakes the view expand to as much as possible within the parent view.It would be helpful for you to look at the Android documentation.
Use guidelines and constraint the views to it. I faced the same problem and guidelines helped me a lot.