make an image size to be certain percent from the screen size

Question

In constraint layout if I want the image to be in the center horizontally and at the top of the screen, then I can do this

<android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="10dp">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/image"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            android:id="@+id/imageView" />
</android.support.constraint.ConstraintLayout>

How can I make the image width and height to be 25% of the screen width and height? Is this doable?

Thank you

Answer 1

Update:

with new ConstrainLayout 1.1.0 it's been implemented a much nicer way to do this!

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

    <ImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#ffff0000"

        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintWidth_percent=".25"
        app:layout_constraintWidth_default="percent"

        app:layout_constraintHeight_percent=".25"
        app:layout_constraintHeight_default="percent"
        />

</android.support.constraint.ConstraintLayout>

Or

You can place Guidelines with percentage and then constraint the ImageView to them. It would be nice to have a cleaner way to do it but I think it's still much better than nested LinearLayout with weights

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

    <ImageView
        android:id="@+id/imageView"
        app:layout_constraintLeft_toLeftOf="@id/guideline_left"
        app:layout_constraintRight_toRightOf="@id/guideline_right"
        app:layout_constraintTop_toTopOf="@id/guideline_top"
        app:layout_constraintBottom_toBottomOf="@id/guideline_bottom"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#ffff0000"/>

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

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


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

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

</android.support.constraint.ConstraintLayout>

Answer 2

You can set it programmatically like this:-

ImageView image_view = (ImageView) findViewById(R.id.image_view);
calulate(image_view);



private void calulate(View v) 
{
    int imgWidth = this.getResources().getDisplayMetrics().widthPixels;
    int imgHeight = this.getResources().getDisplayMetrics().heightPixels;
    v.getLayoutParams().height = (int) (0.25*imgHeight);
    v.getLayoutParams().width = (int) (0.25*imgWidth);
}