Best way to make responsive Layout for 5" screen sizes in Android Studio

user_10178679 0
Viewed 71

I'm developing a project for my studies, but I made an error: I developed it just for my phone (I used a Pixel 4 XL model) and similar.

But, when I run it on smaller devices (like Pixel 3) the layout is very bad. I didn't use Constraint Layout because I really hate it, so I went for Linear Layouts all through my whole app. I don't care about Tablets, just want it to work on small devices (that are at least 5"). I have read something about creating new layout folders, like layout-swXXX but I'm not sure and I want to hear your opinions about the best way to do that.

Here is my project tree:

enter image description here

An example of my layout:

<?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:layout_height="match_parent"
    android:background="@drawable/background"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="43dp"
            android:layout_height="53dp"
            app:tint="@color/DarkRed"
            app:srcCompat="@drawable/ic_gps" />

        <TextView
            android:id="@+id/lastLocation"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:textStyle="bold"
            android:text="@string/last_position"
            android:textAlignment="center"
            android:textColor="@color/white"
            android:textSize="20sp" />

    </LinearLayout>

    <TextView
        android:id="@+id/textLocation"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:gravity="center"
        android:textSize="20sp"
        android:textColor="@color/LightGrey"
        android:text="@string/no_position_found" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/ic_map"
            android:layout_width="35dp"
            android:layout_height="35dp"
            app:srcCompat="@drawable/ic_map" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="90dp"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="10dp">

            <androidx.cardview.widget.CardView
                android:id="@+id/card_compile_module"
                android:layout_width="150dp"
                android:layout_height="150dp"
                android:layout_gravity="center"
                android:layout_marginHorizontal="20dp"
                android:foreground="?android:attr/selectableItemBackground"
                app:cardBackgroundColor="#4a4747"
                app:cardCornerRadius="30dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:orientation="vertical">

                    <ImageView
                        android:id="@+id/imageView3"
                        android:layout_width="64dp"
                        android:layout_height="64dp"
                        app:srcCompat="@drawable/ic_module"
                        app:tint="#3acf9f" />

                    <TextView
                        android:id="@+id/textView3"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:gravity="center"
                        android:maxLines="2"
                        android:text="@string/compile"
                        android:textColor="@color/white"
                        android:textSize="20dp" />
                </LinearLayout>
            </androidx.cardview.widget.CardView>

            <androidx.cardview.widget.CardView
                android:id="@+id/card_download"
                android:layout_width="150dp"
                android:layout_height="150dp"
                android:layout_gravity="center"
                android:layout_marginHorizontal="20dp"
                android:foreground="?android:attr/selectableItemBackground"
                app:cardBackgroundColor="#4a4747"
                app:cardCornerRadius="30dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:orientation="vertical">

                    <ImageView
                        android:id="@+id/imageView4"
                        android:layout_width="64dp"
                        android:layout_height="64dp"
                        app:srcCompat="@drawable/ic_download_file"
                        app:tint="#3acf9f" />

                    <TextView
                        android:id="@+id/textView4"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:gravity="center"
                        android:maxLines="2"
                        android:text="@string/download"
                        android:textColor="@color/white"
                        android:textSize="20dp" />
                </LinearLayout>
            </androidx.cardview.widget.CardView>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="10dp">>

            <androidx.cardview.widget.CardView
                android:foreground="?android:attr/selectableItemBackground"
                android:id="@+id/card_profile"
                android:layout_width="150dp"
                android:layout_height="150dp"
                android:layout_gravity="center"
                android:layout_marginHorizontal="20dp"
                app:cardBackgroundColor="#4a4747"
                app:cardCornerRadius="30dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:orientation="vertical">

                    <ImageView
                        android:id="@+id/imageView5"
                        android:layout_width="64dp"
                        android:layout_height="64dp"
                        app:srcCompat="@drawable/ic_user"
                        app:tint="#3acf9f" />

                    <TextView
                        android:id="@+id/textView5"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:gravity="center"
                        android:text="@string/user_settings"
                        android:textColor="@color/white"
                        android:textSize="20dp" />
                </LinearLayout>
            </androidx.cardview.widget.CardView>

            <androidx.cardview.widget.CardView
                android:foreground="?android:attr/selectableItemBackground"
                android:id="@+id/card_gps"
                android:layout_width="150dp"
                android:layout_height="150dp"
                android:layout_gravity="center"
                android:layout_marginHorizontal="20dp"
                app:cardBackgroundColor="#4a4747"
                app:cardCornerRadius="30dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:orientation="vertical">

                    <ImageView
                        android:id="@+id/imageView6"
                        android:layout_width="64dp"
                        android:layout_height="64dp"
                        app:srcCompat="@drawable/ic_gps_settings"
                        app:tint="#3acf9f" />

                    <TextView
                        android:id="@+id/textView6"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:gravity="center"
                        android:text="@string/gps_settings"
                        android:textColor="@color/white"
                        android:textSize="20dp" />
                </LinearLayout>
            </androidx.cardview.widget.CardView>
        </LinearLayout>
    </LinearLayout>

    <TextView
        android:layout_marginTop="100dp"
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fontFamily="cursive"
        android:gravity="center"
        android:text="@string/developed_by"
        android:textColor="@color/white"
        android:textSize="20sp" />

</LinearLayout>
android-studio android-linearlayout xml java
1 Answers

The best way to do this would be a Constraint Layout. But if you refuse to make layouts with the Constraint Layout and want to use the Linear Layout you should definitely not work with margins to put items in place.

It would be bad, if you use margins to like center a button as an example.

Since you didn't provide us a sample of your code, I don't know what you did. But I hope this here may help you a little.

user_146831060
Related