Easy Tutorial
❮ Verilog Generate Front End Engineers Required Skills ❯

2.3.4 ImageView (Image View)

Category Android Basic Tutorial

Introduction to This Section:

This section introduces the basic UI control: ImageView (Image View), which, as the name suggests, is a View or widget used to display images! Official API: ImageView; The content covered in this section is as follows:


1. The Difference Between the src Attribute and the background Attribute:

>

In the API documentation, we find that ImageView has two attributes that can set images, namely: src and background.

Common Sense:

① The background usually refers to the background, while src refers to the content!!

② When using src to fill in the image, it is filled directly according to the image size, and will not be stretched.

When using background to fill in the image, it will be stretched according to the width given by ImageView.

1) Write Code to Verify the Difference:

Write a simple layout to test:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:id="@+id/LinearLayout1"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:orientation="vertical"  
    tools:context="com.jay.example.imageviewdemo.MainActivity" >  

    <ImageView  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:background="@drawable/pen" />  

    <ImageView  
        android:layout_width="200dp"  
        android:layout_height="wrap_content"  
        android:background="@drawable/pen" />  

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

    <ImageView  
        android:layout_width="200dp"  
        android:layout_height="wrap_content"  
        android:src="@drawable/pen" />  

</LinearLayout>

Effect Picture as Follows:

Result Analysis:

If both width and height are wrap_content, they are the same, the original image size, but when we fix the width or height, the difference is obvious, the blackground completely fills the entire ImageView, while src is still that big, and it is centered, which involves another property of ImageView, scaleType! In addition, there is one more point, we only set the width or height here! If we set both width and height at the same time, the blackground still fills, but the size of src may change! For example, let's test the following code:

<ImageView  
        android:layout_width="100dp"  
        android:layout_height="50dp"  
        android:src="@drawable/pen" />

Running Effect Picture:

PS: scaleType will be discussed below~


2) Solving the Problem of Image Distortion Due to blackground Stretching

In the second ImageView of the previous effect picture, we can see that the image has been stretched and deformed, the square has become a rectangle, which is obviously unacceptable for people with mild obsessive-compulsive disorder like me, Is there a way to set it? The answer is definitely yes, the author temporarily knows the following two ways:

-

This is suitable for dynamically loading ImageView, and the code is simple, just write the size in stone when adding the View

LinearLayout.LayoutParams layoutParam = new LinearLayout.LayoutParams(48, 48);    
        layout.addView(ibtnPen, layoutParam);

-

In addition to dynamically loading the view, most of the time, we will still introduce ImageView through the XML layout method The solution is not difficult, it is to complete it through the drawable's Bitmap resource file, and then set the blackground attribute to this file! This XML file is created in the drawable folder, this folder needs to be created by yourself!!

pen_bg.xml:

<bitmap  
    xmlns:android="http://schemas.android.com/apk/res/android"  
    android:id="@id/pen_bg"  
    android:gravity="top"  
    android:src="@drawable/pen"  
    android:tileMode="disabled" >  
</bitmap>

The `android:scaleType` is used to set how the displayed image is scaled or moved to fit the size of the ImageView.

In Java code, you can set it with `imageView.setScaleType(ImageView.ScaleType.CENTER);` ~

The available options are as follows:

- **fitXY**: Scales the image independently in both horizontal and vertical directions, making the image fit the ImageView completely, but the aspect ratio of the image may change.

- **fitStart**: Scales the image while maintaining the aspect ratio until the longer side is equal to the size of the ImageView, and then places the image in the upper left corner of the ImageView after scaling.

- **fitCenter**: Same as above, places the scaled image in the middle after scaling.

- **fitEnd**: Same as above, places the scaled image in the lower right corner after scaling.

- **center**: Maintains the original size of the image and displays it in the center of the ImageView. If the size of the original image is larger than the size of the ImageView, the excess part is cropped.

- **centerCrop**: Scales the image while maintaining the aspect ratio until it completely covers the ImageView, which may result in incomplete display of the image.

- **centerInside**: Scales the image while maintaining the aspect ratio until the ImageView can fully display the image.

- **matrix**: The default value, does not change the size of the original image, starts drawing the original image from the upper left corner of the ImageView, and crops the part of the original image that exceeds the ImageView.

Next, let's compare them in groups:

---

### 1) 1.fitEnd, fitStart, fitCenter

Take fitEnd as an example, the other two are similar:

**Example Code:**


<!-- Scale the image while maintaining the aspect ratio, so that the image can be displayed on the ImageView component, and display the scaled image in the lower right corner of the imageView --> <ImageView android:id="@+id/imageView3" android:layout_width="300px" android:layout_height="300px" android:layout_margin="5px" android:scaleType="fitEnd" android:src="@mipmap/meinv" />


**Running Effect Picture:**

---

### 2) centerCrop and centerInside

- centerCrop: Scales while maintaining the aspect ratio, directly covers the entire ImageView.

- centerInside: Scales while maintaining the aspect ratio, making the ImageView fully display this image.

Example Code:


<ImageView android:layout_width="300px" android:layout_height="300px" android:layout_margin="5px" android:scaleType="centerCrop" android:src="@mipmap/meinv" />

<ImageView
        android:layout_width="300px"
        android:layout_height="300px"
        android:layout_margin="5px"
        android:scaleType="centerInside"
        android:src="@mipmap/meinv" />

**Running Effect Picture:**


---

### 3) fitXY

Scales the image without proportion, aiming to fill the entire View with the image.

**Example Code:** 


<ImageView android:layout_width="300px" android:layout_height="300px" android:layout_margin="5px" android:scaleType="fixXY" android:src="@mipmap/meinv" />


Running Effect Picture:

Well, it's obviously flattened =-=~

---

### 4) matrix

Starts drawing the original image from the upper left corner of the ImageView, and crops the part of the original image that exceeds the ImageView.

Example Code:


<ImageView android:layout_width="300px" android:layout_height="300px" android:layout_margin="5px" android:scaleType="matrix" android:src="@mipmap/meinv" />


**Running Effect Picture:**


---

### 5) center

Maintains the original size of the image and displays it in the center of the ImageView. If the size of the original image is larger than the size of the ImageView, the excess part is cropped.

**Example Code:** 


<ImageView android:layout_width="300px" android:layout_height="300px" android:layout_margin="5px" android:scaleType="center" android:src="@mipmap/meinv" />


Running Effect Picture:

---

## 4. The Simplest Circular ImageView Drawing

I believe everyone is familiar with circular or rounded ImageViews, right? Nowadays, many apps like to use circular avatars, don't they?

Here's a simple example of a circular ImageView. Of course, this is just an example, without considering performance and anti
```java
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.meinv);
img_round.setImageBitmap(bitmap);
}

Summary of This Section:

>

This section discussed the ImageView (image view), which seems to have a lot of content, but it's all descriptive and can be understood as is. The custom circular ImageView at the end is also just for fun; in actual projects, it is recommended to use those two third-party custom controls.

-1.0 Android Basic Tutorial for Beginners

-1.0.1 Latest Android Basic Tutorial for Beginners in 2015

-1.1 Background and System Architecture Analysis

-1.2 Setting Up the Development Environment

-1.2.1 Developing Android Apps with Eclipse + ADT + SDK

-1.2.2 Developing Android Apps with Android Studio

-1.3 Solving SDK Update Issues

-1.4 Installing Genymotion Emulator

-1.5.1 Git Tutorial on Basic Operations of Local Repositories

-1.5.2 Git: Setting Up a Remote Repository with GitHub

-1.6 How to Play with 9 (Nine) Images

-1.7 Interface Prototype Design

-1.8 Project-Related Analysis (Various Files, Resource Access)

-1.9 Android App Signing and Packaging

-1.11 Decompiling APK to Retrieve Code & Resources

-2.1 The Concept of View and ViewGroup

-2.2.1 LinearLayout (Linear Layout)

-2.2.2 RelativeLayout (Relative Layout)

-2.2.3 TableLayout (Table Layout)

-2.2.4 FrameLayout (Frame Layout)

-2.2.5 GridLayout (Grid Layout)

-2.2.6 AbsoluteLayout (Absolute Layout)

-2.3.1 TextView (Text Box) Detailed Explanation

-2.3.2 EditText (Input Box) Detailed Explanation

-2.3.3 Button (Button) and ImageButton (Image Button)

-2.3.5 RadioButton (Radio Button) & Checkbox (Checkbox)

-2.3.6 ToggleButton (Toggle Button) and Switch (Switch)

-2.3.7 ProgressBar (Progress Bar)

-2.3.8 SeekBar (Slider)

-2.3.9 RatingBar (Star Rating Bar)

-2.4.1 ScrollView (Scroll View)

-2.4.2 Date & Time Components (Part 1)

-2.4.3 Date & Time Components (Part 2)

-2.4.4 Basic Explanation of Adapter

-2.4.5 Simple and Practical ListView

-2.4.6 Optimizing BaseAdapter

-2.4.7 Focus Issues with ListView

-2.4.8 Solving Checkbox Misalignment in ListView

-2.4.9 Data Update Issues with ListView

-2.5.0 Building a Reusable Custom BaseAdapter

-2.5.1 Implementing Multiple Layouts for ListView Items

-[2.5.

Follow on WeChat

❮ Verilog Generate Front End Engineers Required Skills ❯