How to convert a linear layout to constraint layout?

Question

I have developed an app and I used a linear layout in every activity.Layouts of every activity look exactly the same like the one I designed in android studio when I run it on my phone (Nokia 5.1 plus). But when I run the app on another small phone like Samsung J1 layout is messed up.Some buttons,images are out of the screen.So to fix that, i mean make the layout same for every device can i use a constraint layout?

Actually i tried to convert the layout to constraint layout by right clicking on the component tree ......But after converting it doesn't look the same.Everything is messed up.

So what I want to know is, How to make a layout looks the same in every device?

If the method is to convert it into constraint layout,how to do it without the last problem I mentioned?

Here is one of the xml codes of my activities.

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    android:layout_height="match_parent"
    tools:context=".alkaned">

    <ImageView
        android:id="@+id/ivBack3"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="15dp"
        android:layout_marginRight="375dp"
        android:clickable="true"
        app:srcCompat="@drawable/back" />

    <ImageView
        android:id="@+id/imageView198"
        android:layout_width="match_parent"
        android:layout_height="170dp"
        android:layout_marginTop="75dp"
        app:srcCompat="@drawable/alkanesnew" />

    <androidx.cardview.widget.CardView
        android:id="@+id/btnAlkaneM"
        android:layout_width="match_parent"
        android:layout_height="60dp"

        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="10dp"
        app:cardCornerRadius="15dp"
        app:cardElevation="5dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/textView401"
                android:layout_width="397dp"
                android:layout_height="70dp"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="0dp"
                android:layout_marginBottom="0dp"
                android:layout_weight="1"
                android:fontFamily="@font/newfont"
                android:text="we,aflak idod.kakd wdldr "
                android:textColor="#000000"
                android:textSize="30sp" />

            <ImageView
                android:id="@+id/imageView209"
                android:layout_width="wrap_content"
                android:layout_height="60dp"
                android:layout_gravity="center_vertical"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                android:layout_weight="1"
                app:srcCompat="@drawable/milanpng" />
        </LinearLayout>
    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/btnAlkaneS"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="10dp"
        app:cardCornerRadius="15dp"
        app:cardElevation="5dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/textView405"
                android:layout_width="397dp"
                android:layout_height="70dp"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="0dp"
                android:layout_marginBottom="0dp"
                android:layout_weight="1"
                android:fontFamily="@font/newfont"
                android:text="we,aflak Ndckh jk m%;sl%shd"
                android:textColor="#000000"
                android:textSize="30sp" />

            <ImageView
                android:id="@+id/imageView212"
                android:layout_width="wrap_content"
                android:layout_height="60dp"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                android:layout_weight="1"
                app:srcCompat="@drawable/milanpng" />
        </LinearLayout>
    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/btnAlkaneR"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="10dp"
        app:cardCornerRadius="15dp"
        app:cardElevation="5dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/textView406"
                android:layout_width="397dp"
                android:layout_height="70dp"
                android:layout_marginLeft="5dp"
                android:layout_weight="1"
                android:fontFamily="@font/newfont"
                android:text="we,aflak iïnkao mßj¾;k yd m%;sl%shd idrdxYh"
                android:textColor="#000000"
                android:textSize="30sp" />

            <ImageView
                android:id="@+id/imageView215"
                android:layout_width="wrap_content"
                android:layout_height="60dp"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                android:layout_weight="1"
                app:srcCompat="@drawable/milanpng" />
        </LinearLayout>
    </androidx.cardview.widget.CardView>

    <com.google.android.gms.ads.AdView
        android:id="@+id/adView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="70dp"
        app:adSize="BANNER"
        app:adUnitId="ca-app-pub-3940256099942544/6300978111"></com.google.android.gms.ads.AdView>
</LinearLayout>

Answer 1

You can use a library to handle your UI on different size devices.

Try using the SDP library. For more info & usage, you can check it out over here

Add this to your Gradle for using the SDP library.

dependencies {
  implementation 'com.intuit.sdp:sdp-android:1.0.6'
}

And in your layouts instead of dp use spd as

instead of

android:layout_width="35dp"

use

android:layout_width="@dimen/_35sdp"

Answer 2

Even on ConstraintLayout controls will be out of screen if it is so small as you said. To workaround this, you should implement for example ScrollView before your LinearLayout, just like this:

<ScrollView 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:fillViewport="true">
<LinearLayout
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="wrap_content"
    tools:context=".alkaned">

    <ImageView
        android:id="@+id/ivBack3"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="15dp"
        android:layout_marginRight="375dp"
        android:clickable="true"
        app:srcCompat="@drawable/back" />

    <ImageView
        android:id="@+id/imageView198"
        android:layout_width="match_parent"
        android:layout_height="170dp"
        android:layout_marginTop="75dp"
        app:srcCompat="@drawable/alkanesnew" />

    <androidx.cardview.widget.CardView
        android:id="@+id/btnAlkaneM"
        android:layout_width="match_parent"
        android:layout_height="60dp"

        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="10dp"
        app:cardCornerRadius="15dp"
        app:cardElevation="5dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/textView401"
                android:layout_width="397dp"
                android:layout_height="70dp"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="0dp"
                android:layout_marginBottom="0dp"
                android:layout_weight="1"
                android:fontFamily="@font/newfont"
                android:text="we,aflak idod.kakd wdldr "
                android:textColor="#000000"
                android:textSize="30sp" />

            <ImageView
                android:id="@+id/imageView209"
                android:layout_width="wrap_content"
                android:layout_height="60dp"
                android:layout_gravity="center_vertical"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                android:layout_weight="1"
                app:srcCompat="@drawable/milanpng" />
        </LinearLayout>
    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/btnAlkaneS"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="10dp"
        app:cardCornerRadius="15dp"
        app:cardElevation="5dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/textView405"
                android:layout_width="397dp"
                android:layout_height="70dp"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="0dp"
                android:layout_marginBottom="0dp"
                android:layout_weight="1"
                android:fontFamily="@font/newfont"
                android:text="we,aflak Ndckh jk m%;sl%shd"
                android:textColor="#000000"
                android:textSize="30sp" />

            <ImageView
                android:id="@+id/imageView212"
                android:layout_width="wrap_content"
                android:layout_height="60dp"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                android:layout_weight="1"
                app:srcCompat="@drawable/milanpng" />
        </LinearLayout>
    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/btnAlkaneR"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="10dp"
        app:cardCornerRadius="15dp"
        app:cardElevation="5dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/textView406"
                android:layout_width="397dp"
                android:layout_height="70dp"
                android:layout_marginLeft="5dp"
                android:layout_weight="1"
                android:fontFamily="@font/newfont"
                android:text="we,aflak iïnkao mßj¾;k yd m%;sl%shd idrdxYh"
                android:textColor="#000000"
                android:textSize="30sp" />

            <ImageView
                android:id="@+id/imageView215"
                android:layout_width="wrap_content"
                android:layout_height="60dp"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                android:layout_weight="1"
                app:srcCompat="@drawable/milanpng" />
        </LinearLayout>
    </androidx.cardview.widget.CardView>

    <com.google.android.gms.ads.AdView
        android:id="@+id/adView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="70dp"
        app:adSize="BANNER"
        app:adUnitId="ca-app-pub-3940256099942544/6300978111"></com.google.android.gms.ads.AdView>
</LinearLayout>
</ScrollView>