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

Issue

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.

Solution

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>

Answered By - M. Bilal Asif