Scaling an image related to width

Question

I have one main linear layout with orientation set to vertical. It contains two linear layouts, first with layout_weight = 0.25 and the second with value layout_weight = 0.75. The first layout has horizontal orientation and also has two objects ImageView with value layout_weight = 0.5 and EditText with value layout_weight = 0.5.

Here is the full code:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- top layout -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.25"
        android:orientation="horizontal"  >

        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".5"
            app:srcCompat="@drawable/samurai" />

        <EditText
            android:id="@+id/text"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="right"
            android:layout_weight="0.5"
            android:background="@android:color/transparent"
            android:gravity="bottom|right"
            android:inputType="none"
            android:maxLines="1"
            android:text=""
            android:textColor="@color/text"
            android:textSize="50sp" />
    </LinearLayout>

    <!-- bottom layout -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.75"
        android:orientation="horizontal">
    </LinearLayout>
</LinearLayout>

My question is how can i scale the image to match the width, but to auto-scale the height?

score 3 · Accepted Answer · answered Jan 12 '19 at 10:39

3

To crop the image according to your expected result, you probably have to use a custom matrix for the imageview. I think this is the simplest implementation for TOP_CROP which you can modify for your needs:

https://stackoverflow.com/a/38049348/7554387

answered Jan 12 '19 at 10:39

sk_462

587
1
7
16

I knew for this method, but is there a better way of doing it? – slaviboy Jan 12 '19 at 12:11
I think there are some libraries which can provide this functionality like this one : [link](https://github.com/cesards/SuperImageView) . I have not used it myself, so I am not sure. – sk_462 Jan 12 '19 at 12:18

score 1 · Answer 2 · answered Jan 12 '19 at 10:59

The problem is you add 0 to some layout_width and layout_height. Change to 0dp and it should work. In this case,you should use ConstraintLayout as it can reduce nested layout and surely improve your layout performance.

With ConstraintLayout,code would be.

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
      android:id="@+id/img"
      android:layout_width="0dp"
      android:layout_height="0dp"
      android:src="@drawable/samurai"
      app:layout_constraintHeight_percent="0.25"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent"
      app:layout_constraintWidth_percent="0.5"/>
   <EditText
      android:layout_width="0dp"
      android:layout_height="0dp"
      app:layout_constraintHeight_percent="0.25"
      app:layout_constraintStart_toEndOf="@id/img"
      app:layout_constraintTop_toTopOf="parent"
      app:layout_constraintWidth_percent="0.5"/>

   <LinearLayout
      android:layout_width="0dp"
      android:layout_height="0dp"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toBottomOf="@id/img"/>
</android.support.constraint.ConstraintLayout>

Scaling an image related to width

2 Answers2