CODEWITHSUNDEEP
androidandroid-layoutandroid-constraintlayout
Ajay
Ajay

Reputation: 219

Android constraint layout: resize images for all resolutions

I have placed small image buttons on the one background image. I have managed the positions of small images using constraint layout. But now, the issue is with the size of small image buttons. As screen size changes images are not changing the size.

I have tried with drawable-hdpi, drawable-xhdpi, drawable-xxhdpi but might be constraint layout is not taking that images. If I apply layout_constraintDimensionRatio, the images change its position for different screens. Or should I use another approach?

enter image description here 

 <?xml version="1.0" encoding="utf-8"?>
    <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:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
        <ImageView
            android:id="@+id/imgMainBg"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/bg"
            android:layout_centerInParent="true"
            android:contentDescription="Background" />
        <ImageButton
            android:id="@+id/btnImg1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:contentDescription="btnImg1"
            android:scaleType="fitXY"
            android:src="@drawable/btnImg1"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHorizontal_bias="0.585"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.183" />
        <ImageButton
            android:id="@+id/btnImg2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:contentDescription="btnImg2"
            android:scaleType="centerCrop"
            android:src="@drawable/btnImg2"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHorizontal_bias="0.944"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.352" />
    </android.support.constraint.ConstraintLayout>

Upvotes: 1

Views: 3915

Answers (1)

ravi
ravi

Reputation: 1001

The thing with ConstraintLayout is that it constraints the views with some guidelines, part of the screen or other sibling views. As the screen sizes grows or shrinks the constraints remain the same. So the relative positioning of the views on the ConstraintLayout do change based on screen sizes. If you are using png or other images in your drawable folder, you can provide different images in the drawable-hdpi, drawable-ldpi and other folders. The images should have different sizes for you to be able to see the images grow and shrink as the app is tested on different dpi screens.

Upvotes: 2

Related Questions