Android design for all screen size and resolution

Question

Hi I am working on an app which has this design. By using a lot of effort i developed this. But this is still not the same as given design and on other screens I got this. This is the code in xml file. Any help willbe greatly appreciated.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@mipmap/dashboard_bg"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:orientation="horizontal" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@null"
            android:src="@mipmap/logo" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@null"
            android:src="@mipmap/logo" />
    </LinearLayout>

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:text="Welcome text of app" />

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="bottom" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:contentDescription="@null"
            android:src="@mipmap/seperator" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_above="@+id/imageView1"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:contentDescription="@null"
            android:src="@mipmap/regional_managers" />

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/imageView3"
            android:layout_toEndOf="@+id/imageView1"
            android:layout_toRightOf="@+id/imageView1"
            android:contentDescription="@null"
            android:src="@mipmap/regions" />

        <ImageView
            android:id="@+id/imageView5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignRight="@+id/imageView3"
           android:layout_alignEnd="@+id/imageView3"
            android:layout_below="@+id/imageView4"
            android:contentDescription="@null"
            android:src="@mipmap/graphs" />

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_alignTop="@+id/imageView1"
            android:layout_toLeftOf="@+id/imageView1"
            android:layout_toStartOf="@+id/imageView1"
            android:contentDescription="@null"
            android:src="@mipmap/nationwide" />

    </RelativeLayout>

</LinearLayout>

Also tried links from so like image size (drawable-hdpi/ldpi/mdpi/xhdpi) and Setting drawable folder to use for different resolutions but unable to get desired results. Any help willbe greatly appreciated.

Answer 1

Try something like this:

<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        app:layout_marginTopPercent="10%"
        app:layout_widthPercent="30%" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_marginLeftPercent="20%"
        app:layout_marginTopPercent="40%"
        app:layout_widthPercent="20%" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_marginLeftPercent="60%"
        app:layout_marginTopPercent="55%"
        app:layout_widthPercent="20%" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_marginLeftPercent="30%"
        app:layout_marginTopPercent="70%"
        app:layout_widthPercent="20%" />

</android.support.percent.PercentRelativeLayout>