Wisdom of Helios


Leave a comment

Image Postioning on Android

A picture is worth a thousand words” refers to the notion that a complex idea can be conveyed with just a single still image. It also aptly characterizes one of the main goals of visualization, namely making it possible to absorb large amounts of data quickly. In Android an image is typically shown in an ImageView which is a dedicated view for showing image. This view takes the charge of load, optimize and scaling of the image and make the developer free  to focus on app-specific details . Unless you need special optimizations for your application, you should take advantage of the built-in image view whenever possible.

To display an image simply we have to declare an ImageView inside a LayOut and set its source to a resource in your project. Image resources are placed in the /res/drawable folders. This example will display an image named “antelope”:

<ImageView

android:id=“@+id/ivantilop”

android:layout_width=“match_parent”

android:layout_height=“match_parent”

android:layout_margin=“10dp”

android:src=“@drawable/antelope”

android:sacleType=“fitCenter”   />

[/sourcecode ]

Please have a look on the attribute  sclaeType . It defines how the image will fit and be scaled to the view. In this example scaleType  is set to “fitCenter” , so the image will be shown  in the center of container view with scaling and preserve the aspect ratio. I’m going to list the scale type options and how they alter the image.

Here is the code snippet :

<RelativeLayout xmlns:android=http://schemas.android.com/apk/res/android&#8221;

xmlns:tools=http://schemas.android.com/tools&#8221;

android:layout_width=“match_parent”

android:layout_height=“match_parent” >

<LinearLayout

android:layout_width=“match_parent”

android:layout_height=“match_parent”

android:orientation=“vertical”

android:layout_alignParentLeft=“true”

android:layout_alignParentTop=“true”

android:background=“@android:color/holo_orange_light”>

<ImageView

android:id=“@+id/ivantilop”

android:layout_width=“match_parent”

android:layout_height=“match_parent”

android:layout_margin=“10dp”

android:src=“@drawable/antelop”

android:sacleType=“fitCenter”

/>

</LinearLayout>

</RelativeLayout>

[/sourcecode ]

This is the original image which is taken for Nat Geo website.

55577_1600x1200-wallpaper-cb1341586649

scaleType

                   Description

Example

center

Displays the image in the center of container view. No scaling . Preserves aspect ratio (native resolution) and centered in the view, regardless of how much space the view consumes.  Screenshot_2000-01-02-04-54-05

centerCrop

Displays the image in the center of container view. Scales in such a way that both the X axis (width) and Y axis(height) is equal or larger than the corresponding axis of the view (minus padding) , while maintaining the image aspect ratio; crops any part of the image that exceeds the size of the view.

 Screenshot_2000-01-02-05-04-38

centerInside

Displays the image in the center of container view. Scales in such a way that both the X axis (width) and Y axis(height) is equal or smaller than the corresponding axis of the view (minus padding) to fit inside the view , while maintaining the image aspect ratio. If the image is already smaller than the view, then this is the same as center.  Screenshot_2000-01-02-05-18-55

fitCenter

same as center using Scaling. Maintains the Image aspect ratio to fit inside the center of the view. At least one axis (height or width) will exactly match the corresponding axis of the view.

Screenshot_2000-01-02-05-18-55

fitStart

Same as fitCenter but aligned to the top-left of the container view.

    Screenshot_2000-01-02-05-35-01

fitEnd

Same as fitCenter but aligned to the right-bottom of the container view.

      Screenshot_2000-01-02-05-38-47

fitXY

Scales the X and Y dimensions of the image to exactly match the container view. Does not preserve the aspect ratio of the image.

   Screenshot_2000-01-02-05-48-14

 

fitMatrix

Scales the image using supplied Matrix Class. Usually this Matrix is implemented using setImageMatrix(Matrix) method.  This type of scaling is use to transform/process the image such as rotation.