Android ImageView with Example
Android ImageView with Example
Difficulty level : Very-Easy * Last Updated On : 26th May, 2021
ImageView is used to display any kind of image resources in the android application either it can be android.graphics.Bitmap or android.graphics.drawable.
All the images that you see in the android application is achieved by this ImageView widget.
There are two types of image view :
- Image View with source of image from android clip art
- Image View with source image from external svg format or png format
Below is the picture showing the types of imageview in light and dark mode
The Source Code for the above output is as follows: -
To display the imageview on the screen xml code is used.
XML CODE : (file name - activity_main.xml)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="match_parent"
tools:context=".MainActivity">
<!-- Image View Starts -->
<ImageView
android:id="@+id/normalImage"
android:layout_width="200dp"
android:layout_height="200dp"
android:src="@drawable/image"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
app:tint="@color/color4"
android:contentDescription="Description about normal image" />
<ImageView
android:id="@+id/customImage"
android:layout_width="150dp"
android:layout_height="150dp"
android:src="@drawable/photo_gallery"
android:layout_below="@id/normalImage"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:contentDescription="Description about custom image" />
<!-- Image View Ends -->
</RelativeLayout>
The colors that are used in the application or on the widget are written in the colors file of the android project.
COLORS FILE CODE : (file name - colors.xml)
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="purple_200">#FFBB86FC</color>
<color name="purple_500">#FF6200EE</color>
<color name="purple_700">#FF3700B3</color>
<color name="teal_200">#FF03DAC5</color>
<color name="teal_700">#FF018786</color>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
<color name="color1">#EE82EE</color>
<color name="color2">#FDBE3B</color>
<color name="color3">#FF4842</color>
<color name="color4">#3a52fc</color>
<color name="color5">#000000</color>
</resources>
Manifest file is generated automatically. You can view this file by clicking on the manifest option that is show the project structure image.
MANIFEST FILE CODE: (file name - AndroidManifest.xml)
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.differentandroidcodes">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/Theme.DifferentStyleButtons">
<activity android:name="com.example.differentandroidcodes.MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
Note : The two files in the drawable folder of i.e. image.xml and photo_gallery.png are the two types of files that can be used in android image view for displaying of the image.
OUTPUT :
Light Theme
Dark Theme
Project Structure in Android Studio
Note : The Selected Files are the important files and the code of those files are given in this article.
Adding images to drawable folder
Note : You can add images to drawable folder i.e. image.xml and photo_gallery.png by going to drawable folder, then right click on it and then select new and then you have to select Vector Asset and then a popup will be display from which you can select from which source you want to get the images.
0 Comments