How to set a width in percent with maximum width in dp?

Question

I have an ImageView that needs to stretch with screen width. But I do not want the view to stretch indefinitely. I also need to keep the ratio of the image to 16:9. I am having a hard time to set a maximum width when using percentage in ConstraintLayout. I found the ratio can be set using ConstraintLayout, but it is not required to use this layout as long as the ratio will be preserved (note that I cannot use a 3rd party library other than Glide). Here is what I have now.

<?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="wrap_content">

    <ImageView
        android:id="@+id/list_item_image"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="16:9"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/list_item_title"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.5"
        app:layout_constraintWidth_max="163dp"
        tools:src="@color/white" />

    <TextView
        android:id="@+id/list_item_title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/list_item_image"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Test Title" />

</android.support.constraint.ConstraintLayout>

Without the app:layout_constraintWidth_max everything is working fine, but once that attribute is set, the percentage stops working at all and width is set to some arbitrary value (definitely not the 163dp I used). But the fun part is that if the max width is higher than the half of the screen width, the percentage is working again. It seems like those two attributes cannot work together, but I do not know how else to define what I need to do.

Answer 1

Indeed, it seems like combining app:layout_constraintWidth_percent="0.5" and app:layout_constraintWidth_max together does not allow to produce the expected result. A workaround for this would be to use a Guideline to constrain the ImageView with the desired percentage. You can then constrain the start of the TextView to the Guideline as well or to the end of the ImageView, depending on what you want:

<?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="wrap_content">

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

    <ImageView
            android:id="@+id/list_item_image"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintDimensionRatio="16:9"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@id/guideline"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintWidth_max="163dp"
            tools:src="@android:color/black" />

    <TextView
            android:id="@+id/list_item_title"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/list_item_image"
            app:layout_constraintTop_toTopOf="parent"
            tools:text="Test Title" />

</android.support.constraint.ConstraintLayout>

Answer 2

You can do this without constraint layout you can use LinearLayout or RelativeLayout, Set Image Width to match parent and scale your image to

Link for details: https://thoughtbot.com/blog/android-imageview-scaletype-a-visual-guide