Android layout inner view keep proportions for all devices

Question

I'm implementing this Layout :

It contains the Background Image , the Phone Image and the white white view inside the phone. That one would be a gif animation .

Here is my code:

<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">

<ImageView
    android:id="@+id/image"
    android:background="@drawable/empty_background"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/iphone_background">


<pl.droidsonroids.gif.GifImageView
    android:id="@+id/inner_image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="140dp"
    android:layout_marginTop="240dp"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true" />

</RelativeLayout>

It looks fine in my Nexus 5 on Lollipop 5.0 , but the Inner View (gif) looks different for each resolution.

Any help would be great, thanks :)

Answer 1

Hmm this requires bit calculations well you can use pixplicity.com and calculate different dp sizes for different size screens.

For ex:

if the original image size is 640*480 pixels for xhdpi then for others it wud be

length :

ldpi @ 320.00dp = 240.00px = 320.00sp = 50.80mm = 2.00in = 144.00pt

mdpi @ 320.00dp = 320.00px = 320.00sp = 50.80mm = 2.00in = 144.00pt

tvdpi @ 320.00dp = 426.00px = 320.00sp = 50.80mm = 2.00in = 144.00pt

hdpi @ 320.00dp = 480.00px = 320.00sp = 50.80mm = 2.00in = 144.00pt

xhdpi @ 320.00dp = 640.00px = 320.00sp = 50.80mm = 2.00in = 144.00pt

xxhdpi @ 320.00dp = 960.00px = 320.00sp = 50.80mm = 2.00in = 144.00pt

xxxhdpi @ 320.00dp = 1280.00px = 320.00sp = 50.80mm = 2.00in = 144.00pt

and breadth :

ldpi @ 240.00dp = 180.00px = 240.00sp = 38.10mm = 1.50in = 108.00pt

mdpi @ 240.00dp = 240.00px = 240.00sp = 38.10mm = 1.50in = 108.00pt

tvdpi @ 240.00dp = 319.50px = 240.00sp = 38.10mm = 1.50in = 108.00pt

hdpi @ 240.00dp = 360.00px = 240.00sp = 38.10mm = 1.50in = 108.00pt

xhdpi @ 240.00dp = 480.00px = 240.00sp = 38.10mm = 1.50in = 108.00pt

xxhdpi @ 240.00dp = 720.00px = 240.00sp = 38.10mm = 1.50in = 108.00pt

xxxhdpi @ 240.00dp = 960.00px = 240.00sp = 38.10mm = 1.50in = 108.00pt

and u need to save gif name same for all different images and place them accordingly in respective drawable folders (mdpi,hdpi,xhdpi,xxhdpi).

Answer 2

Background Image is OK to take match_parent dimensions.
But, for Phone Image and GIF Image try putting each in separate LinearLayouts stacked over one-another, and setting the layout_width to 0dp and layout_height to wrap_content for both along with specifying the layout_weight to properly align the views, this can make your views look similar throughout all screens.