How to get the design view to look the same on your device

Question

I'm finishing an app and for the prototype I want it to look perfectly fitted on my phone, but even after creating an avd with the same dimensions and size, it looks completely warped in my device, how can I fix this? I'm working with a Poco X3 (1080x2400, 6'67"). The designer view in Android Studio doesn't show the bottom nav bar either, so it's really hard to make things stay on their place.

Answer 1

There is a custom library that will help you making layout for different screen sizes

SDP library

and here is sample usage

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:gravity="center">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <LinearLayout
            android:id="@+id/give_us_a_review_landmine_main_layout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical"
            android:paddingBottom="@dimen/_27sdp"
            android:paddingLeft="@dimen/_43sdp"
            android:paddingRight="@dimen/_43sdp"
            android:paddingTop="@dimen/_50sdp" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Intuit"
                android:textColor="@android:color/black"
                android:textSize="@dimen/_40sdp"/>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/_minus10sdp"
                android:paddingBottom="@dimen/_15sdp"
                android:orientation="horizontal" >

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:includeFontPadding="false"
                    android:text="♡"
                    android:textColor="#ED6C27"
                    android:textSize="@dimen/_70sdp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:includeFontPadding="false"
                    android:text="U"
                    android:textColor="@android:color/black"
                    android:textSize="@dimen/_70sdp" />
            </LinearLayout>

            <TextView
                android:id="@+id/give_us_a_review_landmine_text_1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:paddingBottom="@dimen/_12sdp"
                android:text="Rate us so we can grow and help more people get their finances in check"
                android:textColor="@android:color/black"
                android:textSize="@dimen/_16sdp" />

            <TextView
                android:id="@+id/give_us_a_review_landmine_text_2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="★★★★★"
                android:textColor="#747474"
                android:textSize="@dimen/_22sdp"
                android:textStyle="bold" />

            <Button
                android:id="@+id/give_us_a_review_landmine_button"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="@dimen/_25sdp"
                android:padding="@dimen/_8sdp"
                android:text="Rate"
                android:textSize="@dimen/_15sdp"
                android:visibility="visible"
                android:textColor="@android:color/white"
                android:gravity="center"
                android:minWidth="120dp"
                android:includeFontPadding="false"
                android:background="#0ac775"
                android:singleLine="true" />

        </LinearLayout>
    </LinearLayout>
</RelativeLayout>