1

In a LinearLayout, I am trying to display an integer number using images for digits. I want the number to be centered and the images to scale depending on how many digits are present.

My initial layout with 2 digits:

<LinearLayout 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"
android:orientation="vertical"
>

<view
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    />
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:orientation="horizontal"
    android:gravity="center"
    >
    <ImageView
        app:srcCompat="@drawable/ic_digit_0"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:adjustViewBounds="true"
        android:layout_weight="1"
        />
    <ImageView
        app:srcCompat="@drawable/ic_digit_0"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:adjustViewBounds="true"
        android:layout_weight="1"
        />
</LinearLayout>

And here is what it looks like.

A) With 4 digits, everything looks good, the digits fit horizontally and are as tall as possible vertically.

4 digits scaled to fit

B) With many more digits, it still scales nicely to the available space.

many more digits scale nicely

C) But when the LinearLayout height is reduced, the 4 digits separate and gaps appear between them.

images have separated

D) By removing the layout_weight from each ImageView, the 4 digits come back together.

digits come back together

E) But when the LinearLayout height is increased, the digits scale to the full height of the view and some vanish horizontally off screen.

digits too large

How can I have these digit images resize to fill the available space, show all digits and be centered without gaps, while retaining their scale proportions, regardless of the LinearLayout dimensions?

Thanks.

Chris C.
  • 959
  • 1
  • 8
  • 17
  • have u tried android:scaleType try its properties according to ur requirement – Pavan May 26 '17 at 15:06
  • give fixed size of imageview! use scaletype- – xbadal May 26 '17 at 15:06
  • scaleType does not seem to work. fitXY stretches or squashes the images so their proportions change scale. Fixing the image sizes requires code calculations which vary with the number of digits. – Chris C. May 26 '17 at 15:30
  • try with android:scaleType="centerInside" and android:scaleType="fitCenter" – Pavan May 26 '17 at 15:55
  • I have tried all the scaleType values including: center, centerInside, centerCrop, fitCenter, fitEnd, fitXY and matrix. – Chris C. May 26 '17 at 20:21

2 Answers2

0

Have you tried adding scaletype?

<ImageView android:scaleType="scaleXY" android:src="@drawable/my_image"/>

https://developer.android.com/reference/android/widget/ImageView.html#attr_android:scaleType

Allan Arnesen
  • 11
  • 5
  • is scaleXY exist in scaleType? https://developer.android.com/reference/android/widget/ImageView.html#attr_android:scaleType – Pavan May 26 '17 at 15:08
  • No, its just an example. See scaletypes: https://developer.android.com/reference/android/widget/ImageView.ScaleType.html – Allan Arnesen May 26 '17 at 15:09
  • I've tried various combinations of android:scaleType but none of them seem to work. Using **fitXY** causes the digits to stretch out of scale. – Chris C. May 26 '17 at 15:28
  • Have you tried with android:adjustViewBounds="true" – Allan Arnesen May 26 '17 at 15:30
0

Ok. I found the answer.

For the 2nd LinearLayout, change the android:layout_width= from "match_parent" to "wrap_content". Then add android:layout_gravity="center". This allows the LinearLayout to shrink to its contents when smaller height forces the digits to shrink. When it shrinks, though, it also centers itself in the containing view.

Thanks for the input everyone.

Chris C.
  • 959
  • 1
  • 8
  • 17