ImageView - Srinivas Narasegouda

In Android, an ImageView is a UI component used to display images on the screen. It is one of the most commonly used components when we need to show images in our app, whether it’s for displaying icons, backgrounds, or any other kind of graphic content.

An ImageView works by loading an image from various sources like drawable resources, files, or even URLs, and then displaying it on the screen within the layout of our app. For instance, we might have an app that shows a profile picture, a logo, or any other visual content, and the ImageView will be the component that holds and displays these images.

To use an ImageView, we typically define it in an XML layout file. In this layout, we specify its size, position, and the image it should display. Here’s a simple example of how you would declare an ImageView in XML:

NOTE:

All images should be stored in the drawable folder.

When naming images, pictures, or photos to be used in Android Studio, there are some important rules and best practices to follow. These rules ensure that your app’s resources are organized correctly, that you avoid potential issues during development, and that your app adheres to Android’s naming conventions.

Here are the key rules to follow when naming image resources:

Use lowercase letters: Always use lowercase letters for the names of your image files. Android doesn’t accept uppercase letters in resource file names because the file system may treat them differently on various devices. For example, my_image.png is acceptable, but My_Image.png is not.
Use underscores instead of spaces: Spaces are not allowed in resource file names. Instead of using spaces, use underscores (_) to separate words. For example, use profile_picture.png instead of profile picture.png.
Avoid special characters: Do not use special characters (like @, #, %, &, etc.) in the image file names. Stick to alphanumeric characters and underscores. For instance, use home_icon.png rather than home@icon.png.
Keep the name descriptive but concise: It’s a good practice to give images meaningful names that describe what the image is for. For example, button_background.png is better than image1.png, as it provides more context for the image’s use.
Use only valid characters: Image file names should only contain letters (a-z), numbers (0-9), and underscores (_). Avoid spaces, hyphens, periods (except for the file extension), or any other characters. For example, login_button.png is valid, but login-button.png or login.button.png are not.
Use appropriate file extensions: Make sure the file extensions reflect the image type you’re using. For example, .png for PNG images, .jpg or .jpeg for JPEG images, and .webp for WebP images. This helps Android Studio to handle the image correctly.
Follow naming conventions for different density buckets: Android supports different screen densities (like hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi), and images for each density should be placed in the corresponding drawable folder. When naming images for different densities, the name should remain consistent, but you should append the density suffix to the file name. For example:
- icon.png (default, for mdpi)
- icon@2x.png (for hdpi)
- icon@3x.png (for xhdpi)
- icon@4x.png (for xxhdpi)
But it’s recommended to use the standard drawable folders like drawable-mdpi, drawable-hdpi, drawable-xhdpi, etc., instead of manually naming files with the density suffix.
Keep file names short but meaningful: While being descriptive is important, it’s also best to keep your file names concise. Long file names can become hard to read and maintain. For example, profile_picture_round.png is good, but profile_picture_for_user_avatar_round_final_version.png is unnecessarily long.
Avoid file name collisions: Ensure that different images have unique names. Avoid reusing the same name for different images, especially when they are in different directories, as it can lead to confusion or resource conflicts.

ImageView Demo

Step 1: Start an android project.

Step 2: Open the strings.xml file and write the following code

<resources>
    <string name="app_name">ImageView Demo</string>
    <string name="center">ScaleType center</string>
    <string name="center_inside">ScaleType center inside</string>
    <string name="fit_center">ScaleType fit center</string>
    <string name="fit_end">ScaleType fit end</string>
    <string name="fit_start">ScaleType fit start</string>
</resources>

Step 3: Design the form as shown in the video.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView

    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".MainActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="354dp"
            android:layout_height="175dp"
            android:layout_marginStart="28dp"
            android:layout_marginLeft="28dp"
            android:layout_marginTop="76dp"
            android:layout_marginEnd="29dp"
            android:layout_marginRight="29dp"
            android:background="#2196F3"
            android:scaleType="center"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView"
            app:srcCompat="@drawable/android" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="355dp"
            android:layout_height="298dp"
            android:layout_marginStart="33dp"
            android:layout_marginLeft="33dp"
            android:layout_marginTop="52dp"
            android:layout_marginEnd="23dp"
            android:layout_marginRight="23dp"
            android:background="#3F51B5"
            android:scaleType="centerInside"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.525"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView2"
            app:srcCompat="@drawable/android" />

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="348dp"
            android:layout_height="277dp"
            android:layout_marginStart="43dp"
            android:layout_marginLeft="43dp"
            android:layout_marginTop="45dp"
            android:layout_marginEnd="24dp"
            android:layout_marginRight="24dp"
            android:background="#3F51B5"
            android:scaleType="fitCenter"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView3"
            app:srcCompat="@drawable/android" />

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="325dp"
            android:layout_height="266dp"
            android:layout_marginStart="56dp"
            android:layout_marginLeft="56dp"
            android:layout_marginTop="36dp"
            android:layout_marginEnd="70dp"
            android:layout_marginRight="70dp"
            android:background="#3F51B5"
            android:scaleType="fitEnd"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView4"
            app:srcCompat="@drawable/android" />

        <ImageView
            android:id="@+id/imageView5"
            android:layout_width="296dp"
            android:layout_height="222dp"
            android:layout_marginStart="74dp"
            android:layout_marginLeft="74dp"
            android:layout_marginTop="40dp"
            android:layout_marginEnd="81dp"
            android:layout_marginRight="81dp"
            android:layout_marginBottom="100dp"
            android:background="#3F51B5"
            android:scaleType="fitStart"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView5"
            app:srcCompat="@drawable/android" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="224dp"
            android:layout_height="59dp"
            android:layout_marginStart="127dp"
            android:layout_marginLeft="127dp"
            android:layout_marginTop="80dp"
            android:layout_marginEnd="100dp"
            android:layout_marginRight="100dp"
            android:text="@string/center"
            android:textSize="24sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="270dp"
            android:layout_height="81dp"
            android:layout_marginStart="100dp"
            android:layout_marginLeft="100dp"
            android:layout_marginTop="67dp"
            android:layout_marginEnd="81dp"
            android:layout_marginRight="81dp"
            android:text="@string/center_inside"
            android:textSize="24sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/imageView1" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="239dp"
        android:layout_height="66dp"
        android:layout_marginStart="112dp"
        android:layout_marginLeft="112dp"
        android:layout_marginTop="59dp"
        android:layout_marginEnd="100dp"
        android:layout_marginRight="100dp"
        android:text="@string/fit_center"
        android:textSize="24sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView2" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="263dp"
        android:layout_height="69dp"
        android:layout_marginStart="100dp"
        android:layout_marginLeft="100dp"
        android:layout_marginTop="59dp"
        android:layout_marginEnd="88dp"
        android:layout_marginRight="88dp"
        android:text="@string/fit_end"
        android:textSize="24sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView3" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="256dp"
        android:layout_height="78dp"
        android:layout_marginStart="106dp"
        android:layout_marginLeft="106dp"
        android:layout_marginTop="53dp"
        android:layout_marginEnd="89dp"
        android:layout_marginRight="89dp"
        android:text="@string/fit_start"
        android:textSize="24sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView4" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

Step 4: Open MainActivity.java file and write the following code.

package com.example.part_a4_imageview;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ImageView Img_center=(ImageView)findViewById(R.id.imageView1);
        ImageView Img_center_inside=(ImageView)findViewById(R.id.imageView2);
        ImageView Img_fit_center=(ImageView)findViewById(R.id.imageView3);
        ImageView Img_fit_end=(ImageView)findViewById(R.id.imageView4);
        ImageView Img_fit_start=(ImageView)findViewById(R.id.imageView5);

        Img_center.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(), "Scale Type Center", Toast.LENGTH_SHORT).show();
            }
        });

        Img_center_inside.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(), "Scale Type Center Inside", Toast.LENGTH_LONG).show();
            }
        });

        Img_fit_center.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(), "Scale Type Fit Center", Toast.LENGTH_LONG).show();
            }
        });

        Img_fit_end.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(), "Scale Type Fit End", Toast.LENGTH_LONG).show();
            }
        });

        Img_fit_start.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(), "Scale Type Fit Start", Toast.LENGTH_LONG).show();
            }
        });

    }
}

Step 5: Run the project