简体   繁体   中英

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

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:

在此处输入图像描述

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>

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM