ImageView 在不同设备上的大小不同

Question

I have a little problem with ImageView on differents screens with different dpi like this:

On second screen there are original dimensions of imageviews. But on first screen images are bigger and moved out. How i can set proportional dimensions and margins to ImageView.

Here is my code:

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/textLayoutIntro">

        <ImageView
            android:id="@+id/first_slide_second_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            android:src="@mipmap/first_slide_second_image"
            android:layout_alignParentStart="true"
            android:layout_alignStart="@+id/firstSlideTelephone"
            android:layout_marginTop="100dp"
            android:layout_marginStart="20dp"/>

        <ImageView
            android:id="@+id/first_slide_third_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/first_slide_third_image"
            android:scaleType="fitCenter"
            android:adjustViewBounds="true"
            android:layout_alignParentEnd="true"
            android:layout_alignEnd="@+id/firstSlideTelephone"
            android:layout_marginEnd="30dp"
            android:layout_marginTop="100dp"/>


        <ImageView
            android:id="@+id/firstSlideTelephone"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/first_slide_telephone"
            android:layout_centerInParent="true"
            android:adjustViewBounds="true"
            android:scaleType="centerInside"/>


        <ImageView
            android:id="@+id/first_slide_first_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            android:src="@mipmap/first_slide_first_image"
            android:layout_marginStart="-30dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentBottom="true"
            android:maxWidth="138dp"
            android:maxHeight="138dp"/>


        <ImageView
            android:id="@+id/first_slide_fourth_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            android:src="@mipmap/first_slide_fourth_image"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="100dp"/>


    </RelativeLayout>

Thanks in advance)

Answer 1

Instead of RelativeLayout, use constraintlayout with vertical and horizontal guidelines. That way, the content sizes up or down to whatever device screen size. Like the sample below.

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/parent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorAccent"
    android:clickable="true"
    tools:context="com.example.example.Fragments.ExampleFragment">


    <android.support.constraint.Guideline
        android:id="@+id/fragment_guideline_v_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.1" />

    <android.support.constraint.Guideline
        android:id="@+id/fragment_guideline_v_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.9" />


    <android.support.constraint.Guideline
        android:id="@+id/fragment_guideline_h_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.1" />

    <android.support.constraint.Guideline
        android:id="@+id/fragment_guideline_h_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.9" />

        <ImageView
            android:id="@+id/imageview"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:contentDescription="@string/none"
            app:layout_constraintStart_toEndOf="@+id/fragment_guideline_h_1"
            app:layout_constraintEnd_toStartOf="@+id/fragment_guideline_h_2"
            app:layout_constraintTop_toBottomOf="@+id/fragment_guideline_v_1"
            app:layout_constraintBottom_toTopOf="@+id/fragment_guideline_v_2"
            app:srcCompat="@drawable/forgot_password_arrow_back" />

</android.support.constraint.ConstraintLayout>

Answer 2

I've had same problem but I've found this: https://github.com/intuit/sdp It's a library with dimensions represented by sdp . It just library with dp but scaled for different screen sizes.

Answer 3

You can use percentage for ImageView width and height. For example, use ConstraintLayout and for ImageView:

<ImageView
   android:layout_width="0dp"
   android:layout_height="wrap_content"
   android:layout_constraintWidth_percent="0.7" />

Answer 4

It's possible to solve many ways. The above bros already said possible to solve by Constraint layout.

It's also possible to solve by Linear layout. Just use weight_sum. Add 2 View add the top and bottom and at the middle add your image. Weight perfectly work dynamically (may you know).

But if I was in this situation, I would be solved it using sdp & ssp library. The library most of the time works perfectly.

only for font/text size: ssp . & For any others except font: sdp