An ImgeView as the name suggests is used display images in Android Applications. In this article we will be discussing how to programmatically create an ImageView in Kotlin .
First step is to create a new Project in Android Studio. For this follow these steps:
- Click on File, then New and then New Project and give name whatever you like
- Then, select Kotlin language Support and click next button.
- Select minimum SDK, whatever you need.
- Select Empty activity and then click finish.
After doing this you will see some directories on the left hand side after your project/gradle is finished loading. It should look like this:
After that, we need to design our layout. For that we need to work with the XML file. Go to app > res > layout and paste the folllowing code:
Modify activity_main.xml file
<? xml version = "1.0" encoding = "utf-8" ?> < RelativeLayout android:layout_width = "match_parent" android:id = "@+id/layout" android:layout_height = "match_parent" tools:context = ".MainActivity" > < Button android:id = "@+id/button" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:layout_marginBottom = "20dp" android:text = "Add Image" android:layout_centerInParent = "true" /> </ RelativeLayout > |
Adding Images
We will be needing a image to be used in application. You can use the images that you like but the images need to be copied from our local computer path to app/res/drawable folder.
Create ImageView in MainActivity.kt file
Open app/src/main/java/yourPackageName/MainActivity.kt and do the following changes:
Create ImageView widget like this:
val imageView = ImageView(this) // setting height and width of imageview imageView.layoutParams = LinearLayout.LayoutParams(400, 400) imageView.x = 20F //setting margin from left imageView.y = 20F //setting margin from top
then add the widget in layout using this
//accessing our relative layout from activity_main.xml val layout = findViewById(R.id.layout) // Add ImageView to LinearLayout layout?.addView(imageView) //adding image to the layout
package com.geeksforgeeks.myfirstKotlinapp import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import android.widget.Button import android.widget.ImageView import android.widget.LinearLayout import android.widget.RelativeLayout class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super .onCreate(savedInstanceState) setContentView(R.layout.activity_main) val imageView = ImageView( this ) // setting height and width of imageview imageView.layoutParams= LinearLayout.LayoutParams( 400 , 400 ) imageView.x= 20F // setting margin from left imageView.y= 20F // setting margin from top // accessing our custom image which we added in drawable folder val imgResId = R.drawable.img var resId = imgResId // button onClick listener val button = findViewById<Button>(R.id.button) button?.setOnClickListener{ imageView.setImageResource(resId) } // accessing our relative layout from activity_main.xml val layout = findViewById<RelativeLayout>(R.id.layout) // Add ImageView to LinearLayout layout?.addView(imageView) // adding image to the layout } } |
AndroidManifest.xml file
<? xml version = "1.0" encoding = "utf-8" ?> package = "i.apps.imageview" > < 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/AppTheme" > < activity android:name = ".MainActivity" > < intent-filter > < action android:name = "android.intent.action.MAIN" /> < category android:name = "android.intent.category.LAUNCHER" /> </ intent-filter > </ activity > </ application > </ manifest > |