WEB ImageViewDEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

ImageView


In Android, ImageView class is used to display an image file in application. Image file is easy to use but hard to master in Android, because of the various screen sizes in Android devices. An android is enriched with some of the best UI design widgets that allows us to build good looking and attractive UI based application.

Important Note: ImageView comes with different configuration options to support different scale types. Scale type options are used for scaling the bounds of an image to the bounds of the imageview. Some of them scaleTypes configuration properties are center, center_crop, fit_xy, fitStart etc. You can read our ScaleType tutorial to learn all details on it.

Below is an ImageView code in XML:

Make sure to save lion image in drawable folder

<ImageView
android:id="@+id/simpleImageView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="@drawable/lion" />

ImageView for Android


Attributes of ImageView: 1. id: id is an attribute used to uniquely identify a image view in android. Below is the example code in which we set the id of a image view.

<ImageView
android:id="@+id/simpleImageView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>

2. src: src is an attribute used to set a source file or you can say image in your imageview to make your layout attractive.

Below is the example code in which we set the source of a imageview lion which is saved in drawable folder.

<ImageView
android:id="@+id/simpleImageView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="@drawable/lion" /><!--set the source of an image view-->

In Java:

We can also set the source image at run time programmatically in java class. For that we use setImageResource() method as shown in below example code.

/*Add in Oncreate() funtion after setContentView()*/
ImageView simpleImageView=(ImageView) findViewById(R.id.simpleImageView);
simpleImageView.setImageResource(R.drawable.lion);//set the source in java class

src attribute in imageview
3. background: background attribute is used to set the background of a ImageView. We can set a color or a drawable in the background of a ImageView.

Below is the example code in which we set the black color in the background and an image in the src attribute of image view.

<ImageView
    android:id="@+id/simpleImageView"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/lion"
    android:background="#000"/><!--black color in background of a image view-->

Background ImageView Android
In Java:

We can also set the background at run time programmatically in java class. In below example code we set the black color in the background of a image view.

/*Add in Oncreate() funtion after setContentView()*/
ImageView simpleImageView=(ImageView) findViewById(R.id.simpleImageView);
simpleImageView.setBackgroundColor(Color.BLACK);//set black color in background of a image view in java class

4. padding: padding attribute is used to set the padding from left, right, top or bottom of the Imageview.

  • paddingRight: set the padding from the right side of the image view.
  • paddingLeft: set the padding from the left side of the image view.
  • paddingTop: set the padding from the top side of the image view.
  • paddingBottom: set the padding from the bottom side of the image view.
  • padding: set the padding from the all side’s of the image view.

Below is the example code of padding attribute in which we set the 30dp padding from all the side’s of a image view.

<ImageView
    android:id="@+id/simpleImageView"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="#000"
    android:src="@drawable/lion"
    android:padding="30dp"/><!--set 30dp padding from all the sides-->

Padding in ImageView Example
5. scaleType: scaleType is an attribute used to control how the image should be re-sized or moved to match the size of this image view. The value for scale type attribute can be fit_xy, center_crop, fitStart etc.

Below is the example code of scale type in which we set the scale type of image view to fit_xy.

<ImageView
android:id="@+id/simpleImageView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="@drawable/lion"
android:scaleType="fitXY"/><!--set scale type fit xy-->

scaleType in ImageView
Let’s we take an another example of scale type to understand the actual working of scale type in a image view.

In below example code we set the value for scale type “fitStart”  which is used to fit the image in the start of the image view as shown below:

<ImageView
    android:id="@+id/simpleImageView"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/lion"
    android:scaleType="fitStart"/><!--set scale type fit start of image view-->

scaleType fitstart in ImageView Example

COLOR PICKER

colorpicker

LEARN MORE:

Color Converter
Google Maps
Animated Buttons
Modal Boxes
Modal Images
Tooltips
Loaders
JS Animations
Progress Bars
Dropdowns
Slideshow
Side Navigation
HTML Includes
Color Palettes