A visual guide about using scale type for ImageView in Android

    Using images resource in Android is a characteristic feature through ImageView widget. By changing "scale type", the ImageView displays it's image resource differently. Especially, Android SDK provides many options about scale type of the image. Now, please spend the next 10-15 minutes building and rebuilding your app with each and every scale type to see what they all look like. Then you inevitably forget the difference between two of them and start the whole process all over again.

    Basically, as we knew, in the layout file (xml), declaring an ImageView to display an image in drawable folder is simple like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/logo" />
</RelativeLayout>

    And we can have this output screen:

    Now, we will use all scale type respectively for this ImageView through android:scaleType attribute and looking the difference!

CENTER

    By set android:scaleType="center" to it, image will be centerd in the view, but perform no scaling.
    This is output:

CENTER CROP

    By use android:scaleType="centerCrop", it will scale the image uniformly (maintain the image’s aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding):

CENTER INSIDE

    If you scale the image uniformly (maintain the image’s aspect ratio) with android:scaleType="centerInside", both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding):

FIT CENTER

    By using this option (android:scaleType="fitCenter"), it will compute a scale that will maintain the original src aspect ratio, but will also ensure that src fits entirely inside dst. At least one axis (X or Y) will fit exactly. The result is centered inside dst:

    For more details about what's the difference between fitCenter and fitCenter, please read this discussion on Stackoverflow.

FIT END

   android:scaleType="fitEnd": compute a scale that will maintain the original src aspect ratio, but will also ensure that src fits entirely inside dst. At least one axis (X or Y) will fit exactly. fitEnd aligns the result to the right and bottom edges of dst:

FIT START

    Opposite with fitEnd, fitStart compute a scale that will maintain the original src aspect ratio, but will also ensure that src fits entirely inside dst. At least one axis (X or Y) will fit exactly. fitStart aligns the result to the left and top edges of dst:

FIT XY

    It will scale image in X and Y independently, so that src matches dst exactly. This may change the aspect ratio of the src:

MATRIX

    Scale using the image matrix when drawing, the most perplexing option but this is the output:

Adjust View Bounds

    Another option for the ImageView widget is "adjust view bounds". While not technically an scaleType this will come in handy. If you notice with centerInside, fitCenter, fitEnd and fitStart the actual bounds of the ImageView are much larger than the scaled image. To set the bounds of the ImageView to the height of the image inside, use android:adjustViewBounds="true". It looks like this:

Conclusions

    I have just presented all options with scaling image in Android. Depending on the actual case, let choose the suitable scale type for your work. For more details, please read the official guide of Google developer about ImageView.ScaleType. Hope this post can give you a visual aids about this topic, help you easy to understand it!

Android Basic Training Course: Working with Resources

 
    Resources are static bits is held outside the Java source code. Have you ever seen one kind of resources - layouts - often appear in the examples in this course. There are many different types of resources, such as images and strings, you can use them in your Android applications.

Resources types

    These resources are stored as file format in the "res" folder in your Android project. Except exception with raw resources ("res/raw"), all kinds of resources have been parsing help you, either by the system's packaging or by Android system Android on the device or VM . So when you arrange for an activity interface through a layout resource ("res/layout"), you do not need parse the XML layouts because Android already do this for you.
    In addition to the layouts resource, there are many other resources available to you, including the following types:

Directory	Resource Type
anim/	XML files that define property animations. They are saved in res/anim/ folder and accessed from the R.anim class.
color/	XML files that define a state list of colors. They are saved in res/color/ and accessed from the R.color class.
drawable/	Image files like .png, .jpg, .gif or XML files that are compiled into bitmaps, state lists, shapes, animation drawable. They are saved in res/drawable/ and accessed from the R.drawable class.
layout/	XML files that define a user interface layout. They are saved in res/layout/ and accessed from the R.layout class.
menu/	XML files that define application menus, such as an Options Menu, Context Menu, or Sub Menu. They are saved in res/menu/ and accessed from the R.menu class.
raw/	Arbitrary files to save in their raw form. You need to callResources.openRawResource() with the resource ID, which isR.raw.filename to open such raw files.
values/	XML files that contain simple values, such as strings, integers, and colors. For example, here are some filename conventions for resources you can create in this directory: arrays.xml for resource arrays, and accessed from the R.array class. integers.xml for resource integers, and accessed from the R.integer class. bools.xml for resource boolean, and accessed from the R.bool class. colors.xml for color values, and accessed from theR.color class. dimens.xml for dimension values, and accessed from the R.dimen class. strings.xml for string values, and accessed from theR.string class. styles.xml for styles, and accessed from the R.style class.
xml/	Arbitrary XML files that can be read at runtime by calling Resources.getXML(). You can save various configuration files here which will be used at run time.

Now, I would like to introduce some important resources.

Strings Resource

    This is most popular resource type in Android. All static strings will be saved in res/strings.xml file. This file is auto-generated after we creating a new Android Studio project. Each string declared by <string> tag. For example:

strings.xml

<resources>
    <string name="app_name">Android Resources</string>
    <string name="demo">DEMO String</string>
</resources>

    After defining it like above, you can use them both xml layouts and programmatically code. In xml, use it with  @string/[string_name]:

<TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/demo" />

    In Java code, in the current Context (usually is your Activity), with getResources().getString(), you can use these strings resource:

TextView textView = (TextView)findViewById(R.id.text);
textView.setText(this.getResources().getString(R.string.demo)); // set TextView content

Images Resource

    Android supports the PNG image format, JPEG and PNG format is most preferred. The images can be used wherever you require a Drawable object, such as an image or a background of an ImageView.
    Using images resource is putting your photos into the "res/drawable" folder and then refer to them as a resource. From within the layout files, the images are referenced through @drawable/[image_name] (e.x: with @drawable/[image_name], the name of the resource will be @drawable/foo). In Java, when you need a photo ID of a resource, just use R.drawable.[image_name](e.x: R.drawable.foo).
    For example:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="@dimen/activity_horizontal_margin">

    <ImageView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/app_name"
        android:src="@drawable/green_dot" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/ic_call"
        android:text="@string/call" />
</LinearLayout>

    Output:

    Like strings resource, you can use these drawables in Java code, this code is equivalent with xml defining above:

imageView.setImageResource(R.drawable.green_dot); // set Image for ImageView
button.setCompoundDrawablesWithIntrinsicBounds( R.drawable.ic_call, 0, 0, 0); // set left drawable for Button

Colors resource

    The colors in Android valuable in HEX format with an additional option to specify an alpha channel. You can select the type of a character value 16 or value 16 type 2 characters, there are 4 styles as below:

• #RGB
• #ARGB
• #RRGGBB
• #AARRGGBB

    All colors resource available in res/values/colors.xml file:

<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
</resources>

    You can use theme like strings or images resources.

Styles/Themes resource

 
    A special resource type in Android, which styling objects, define the look and format for UI elements or further, declaring theme for your app. For details about this, you can read at next chapter: Styles and Themes in Android.

Conclusions

 
    In this tutorial, we looked at the basics of app resources on Android. But as you have seen, there is much more to explore. So, you can go to the official page of Android SDK to deep understanding about Resources. Moreover, you can read this page to know details of all resources types.

Previous Chapter

Table Of  Contents

Next Chapter