how can fit elements scale at different phone screens

Question

I wanna set some image view to a specific backgorund position, It will set at one type of android phone like nexus 4

but it will change position when screen changed in other anroid phone like nexus 10

i searched at web for find solution and i found that set percentage of elemnts is better way that can set same scale at different screens I tried to use different layout design like TableLayout, GridLayout,LinearLayout and others, but can't set position to all of anroid smart phone at same,

Here is my RelativeLayout code:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/RelativeLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/test_backside"
    >

    <ImageView
        android:layout_width="1920dp"
        android:layout_height="1080dp"
        android:id="@+id/bgTopLeftCorner"
        android:src="@drawable/test_bg"
        />

    <ImageView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:src="@drawable/test_horizonal_layer"
        android:layout_weight="30"
        android:id="@+id/imageView5"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginLeft="44dp"
        android:layout_marginStart="44dp" />

    <ImageView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/test_circle_1"
        android:layout_marginRight="36dp"
        android:layout_marginEnd="36dp"
        android:id="@+id/imageView7"
        android:layout_below="@+id/imageView5"
        android:layout_toLeftOf="@+id/imageView6"
        android:layout_toStartOf="@+id/imageView6" />

    <ImageView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/test_circle_2"
        android:layout_weight="30"
        android:id="@+id/imageView6"
        android:layout_alignTop="@+id/imageView7"
        android:layout_centerHorizontal="true" />

    <ImageView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/test_circle_3"
        android:layout_weight="30"
        android:id="@+id/imageView3"
        android:layout_alignTop="@+id/imageView6"
        android:layout_toLeftOf="@+id/imageView"
        android:layout_toStartOf="@+id/imageView"
        android:layout_marginRight="17dp"
        android:layout_marginEnd="17dp" />

    <ImageView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:src="@drawable/test_vertical_layer"
        android:layout_weight="30"
        android:id="@+id/imageView"
        android:layout_marginBottom="43dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />
</RelativeLayout>

hope this helps http://stackoverflow.com/a/35154706/2826147 – Amit Vaghela Feb 06 '16 at 12:41 — Amit Vaghela, Feb 06 '16 at 12:41

score 0 · Answer 1 · answered Mar 02 '16 at 17:05

Yeah, as you said setting percentage is good, find your screen width and height in you activity/fragment class, and set width and height of each element in your relative layout by giving them width as (x*screenWidth)/100.

This will solve your problem.

тарас дідик · Answer 2 · 2018-07-21T17:43:07.523

Use the relative layout for 2 images.
Inside the layout on top of the first image, put the second (in this example uses LinearLayout) 

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


        <RelativeLayout
            android:layout_width="200dp"
            android:layout_height="200dp">


            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:scaleType="centerCrop"
                android:src="@drawable/image1" />


            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_centerHorizontal="true"
                android:orientation="horizontal">

                <ImageView
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:src="@drawable/image2" />

            </LinearLayout>


        </RelativeLayout>


        <RelativeLayout
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_alignParentRight="true">


            <ImageView
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:scaleType="centerCrop"
                android:src="@drawable/image1" />


            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_centerHorizontal="true"
                android:orientation="horizontal">

                <ImageView
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:src="@drawable/image2" />

            </LinearLayout>


        </RelativeLayout>

    </RelativeLayout>

While this code may answer the question, providing information on how and why it solves the problem improves its long-term value — L_J, Jul 21 '18 at 16:53

how can fit elements scale at different phone screens

2 Answers2