Hello.

Tell me how to make imageView scaling under different screens. There is a picture (imageView) over which two more are placed (imageMenu1 and imageMenu2). They are located in the middle of the imageView. For a 5 inch screen, everything is fine. But when you select a 7 or 6 inch screen, imageView is scaled and imageMenu1 and imageMenu2 are not and are shifted from the center upwards and to the side. XML:

<RelativeLayout android:id="@+id/RelatiMain" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/imageView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_marginTop="100dp" app:srcCompat="@drawable/iphone_samsung_full_reflection" android:contentDescription="" tools:ignore="ContentDescription" /> <ImageView android:id="@+id/imageMenu1" android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="@drawable/menu1x150" tools:ignore="ContentDescription" android:layout_marginTop="200dp" android:layout_marginLeft="10dp" android:scaleType="centerCrop" /> <ImageView android:id="@+id/imageMenu2" android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="@drawable/menu2x150" tools:ignore="ContentDescription" android:scaleType="centerCrop" android:layout_marginLeft="190dp" android:layout_marginTop="200dp"/> </RelativeLayout>

I uploaded a photo as it looks normal on a 5 inch screen Normal view on 5 inch screen

When you change to 7 or 6 inch, the back picture increases, and the arrows (imageMenu1 and imageMenu2) remain small and are shifted from the center to the upper right corner. How to make such a picture always on all screens?

  • Show the picture how you need to arrange the elements. Your description is not very clear. - Nikotin N
  • #Nikotin N added photo. It looks normal and described what happens when the screen changes. - Anatoly Ferisov

1 answer 1

The problem is that your layout is described in absolute values, and it will look normal only on the size of the screen on which you described it. For a more universal layout, you need to use relative values. For example, I would do this:

 <?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"> <ImageView android:id="@+id/ivMain" android:layout_width="match_parent" android:layout_height="match_parent"/> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBottom="@+id/ivMain" android:layout_alignLeft="@+id/ivMain" android:layout_alignRight="@+id/ivMain" android:layout_alignTop="@+id/ivMain" android:gravity="center"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="16dp"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="16dp" /> </LinearLayout> </RelativeLayout>
  • and imageview necessarily put in LinerLayout? I just wanted to add a textView on the arrows later. Universal layout is to put the view in containers (layout)? Is it possible to somehow get the coefficient on which the resolution \ diagonal increases and then substitute the product of the coefficient by the initial length in xml? Maybe there is an article on the universal layout for Android, to get the basics and get up to date? - Anatoly Ferisov
  • You can also try to make different layouts for different screen sizes and place them in different folders: res / layout / my_layout.xml // layout for normal screen size ("default") res / layout-small / my_layout.xml // layout for screen size res / layout-large / my_layout.xml // layout for large screen size res / layout-xlarge / my_layout.xml // layout for large large landscape orientation - Nikotin N