1

First let's introduce me, I'm new in Android and mobile device programming, I previously worked on embedded systems running on QNX. I hope I will respect the rules of this forum which seem to be quite stricts ;-).

I'm wrinting an application where I declare a layout for a welcome screen populated, between other things with a image view. There is a first image placed in this image view in the xml file, but I will replace it by an other one later in the application's code and this second image will be potentially of a different size.

My problem is to resize and center my second image. According to my tests, it's quite automatic by using resources in Lint but it seems not so obvious by program, even if I read in the docs that it should be similar. After reading several posts on the subject, I finally have a doubt; Can I center an image in an ImageView, or do I have to center the ImageView in the available space? I tried the first solution without success.

So my layout is:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/fragmentInit"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.cabbonline.ndguidelt.MainActivity" >

    <TextView
        android:id="@+id/textViewAppName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/textViewAppVersion"
        android:layout_centerHorizontal="true"
        android:text="@string/app_name" />

    <TextView
        android:id="@+id/textViewAppVersion"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/TextViewDevelopCabb"
        android:layout_centerHorizontal="true"
        android:text="@string/app_version" />

    <TextView
        android:id="@+id/TextViewDevelopCabb"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/imagecaBB"
        android:layout_centerHorizontal="true"
        android:text="@string/develop_cabb" />

    <ImageView
        android:id="@+id/imagecaBB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/textViewCabbUrl"
        android:layout_centerHorizontal="true"
        android:contentDescription="@string/logo_caBB"
        android:maxHeight="150dp"
        android:src="@drawable/logo_cabb_100x51_or" />

    <TextView
        android:id="@+id/textViewCabbUrl"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="@string/cabb_url" />

    <ImageView
        android:id="@+id/imageSite"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/textViewAppName"
        android:contentDescription="@string/logo_Site"
        android:scaleType="centerInside"
        android:src="@drawable/image_guide_320x400" />

</RelativeLayout>

Here I can say tht the "imageSite" ImageView is well displayed, centered and occupies the whole area. Right.

Now I have a piece of code to replace this image in this same ImageView:

                Bitmap imageSite = site.getSitePictureBitmap();
                if (imageSite != null) {
                    imageGuide.setImageBitmap(imageSite);
                } 

If I only do that, despite en center_inside flag, the new bitmap, smaller and rectangular horizontally compare to the first one which is almost sqaure, the image is displayed very small on the bottom right corner of the ImageView, or the area taken by the ImageView, Idon't really know.

So I add this piece of code to resize it:

                imageSite = site.getSitePictureBitmap(); // here I read the bitmap in a file.
                if (imageSite != null) {
                    float maxWidth = imageGuide.getWidth();
                    float maxHeight = imageGuide.getHeight();
                    float width = imageSite.getWidth();
                    float height= imageSite.getHeight();
                    float hRatio = width / maxWidth;
                    float vRatio = height / maxHeight;

                    if (Math.abs(1 - hRatio) < Math.abs(1 - vRatio)) {
                        // We match horizontal available size
                        width = width / hRatio;
                        height = height / hRatio;
                    } else {
                        width = width / vRatio;
                        height = height / vRatio;
                    }

                    Bitmap reSizedBitmap = Bitmap.createScaledBitmap(imageSite, (int)width, (int)height, true);
                    imageGuide.setImageBitmap(reSizedBitmap);

So the image is now of the good width but as its vertical dimension is lower than the first picture, it's close to the textViewAppName. So as it's a rule for the ImageView in the layout description, I wonder if my image is not in the center of the ImageView in fact and my problem would come from the fact that the ImageView is now of a smaller height and doesn't fill up the whole space available at the top of the layout.

I also wondered if setting a new image doesn't reset the positionning flags. I didn't see that in the doc AFAIR but... So I add this line after setImagebitmap() without success:

                    imageGuide.setScaleType(ScaleType.CENTER_INSIDE);

Can you tell me a bit more about ImageView behavior in this case and how to get my image vertically in the center of the available space. Do I have to calculate padding?

Regards, Al

fralbo
  • 2,534
  • 4
  • 41
  • 73
  • look at this to learn how to set the layout parameters for a new view which you are going to add: http://stackoverflow.com/questions/3416087/how-to-set-margin-of-imageview-using-code-not-xml – Plinio.Santos Jul 30 '14 at 17:39
  • Have the two images the same size aspect (height x width)? – Plinio.Santos Jul 30 '14 at 17:41
  • Hello Plinio, thks, have the same images size would certainly greatly simplify the things. It's obviously something easy to realize. About dealing with sizes, margins,etc... and with different screens size and resolution seems to be very difficult. Anyway, I wonder it's so simple with Lint and so complicated (apparently) by code. Strange. – fralbo Jul 30 '14 at 18:58

0 Answers0