Design Android dev screen sizes - android-studio

Question

Hi I need some advice/help
I am designing a app for educational purposes, but battling with different screen sizes.
I am using Android studio to create the screen layouts.
What I did so far works well up and until a point.
I have tried to use constraint layout / Linear layout and relative layout but all have the same issues.
I create my main layout as normal, and then I create new layout resource files with the same activity name but with different densities.
But for some odd reason some of my test phones picks up the certain density layout but is completely out of proportion, even though it looks correct on the layout on the IDE but the minute it is ported to the phone its out.
What would be the best way to create layouts that can cater for all layouts?
here is an example of the layout I have
<?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"
tools:context=".login.LoginActivity"
android:background="#drawable/background"
android:padding="10dp">
<TextView
android:id="#+id/tv_appName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="250dp"
android:layout_marginEnd="8dp"
android:text="#string/app_name"
android:textColor="#color/colorAccent"
style="#style/Base.TextAppearance.AppCompat.Headline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:textAlignment="center"
android:textStyle="bold"
android:textSize="28dp"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="50dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="50dp"
android:ems="10"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_appName"
android:background="#drawable/input_shape"
android:padding="15dp"
android:textColorHint="#color/colorAccent"
android:textColor="#color/colorAccent"
android:id="#+id/edittext1"
android:singleLine="true"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="50dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="50dp"
android:ems="10"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/edittext1"
android:background="#drawable/input_shape"
android:padding="15dp"
android:textColorHint="#color/colorAccent"
android:textColor="#color/colorAccent"
android:id="#+id/edittext2"
android:singleLine="true"/>
<Button
android:id="#+id/btn_button1"
android:layout_width="134dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
app:layout_constraintStart_toStartOf="#+id/edittext2"
app:layout_constraintTop_toBottomOf="#+id/edittext2"
android:background="#drawable/btn_shape"
android:text="Button 1"/>
<Button
android:id="#+id/btn_button2"
android:layout_width="134dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
app:layout_constraintEnd_toEndOf="#+id/edittext2"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#+id/btn_button1"
app:layout_constraintTop_toBottomOf="#+id/btn_button1"
android:background="#drawable/btn_shape"
android:text="Button 2"
/>
</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

I am pretty sure that you are using a fixed size for your views.
Never use a fixed size for a view. If you are using a ConstraintLayout then set the layout_width and layout_height of any view to either 0dp (which will make the view as big as it can be as long as it doesn't go past the constraints) or wrap_content (which will automatically make the view only the size it needs). On other layouts instead of using 0dp for making the view as big as it can be, use match_parent. wrap_content does the same thing in every layout.