Programming Tutorials

MainActivity.kt package com.cfsuman.jetpackcompose import android.content.Context import android.graphics.Bitmap import android.graphics.BitmapFactory import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import androidx.activity.compose.setContent import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.border import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.runtime.Composable import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.ImageBitmap import androidx.compose.ui.graphics.asImageBitmap import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.platform.LocalContext import androi...

MainActivity.kt package com.cfsuman.jetpackcompose import android.graphics.Bitmap import android.graphics.BitmapFactory import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import androidx.activity.compose.setContent import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.border import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.runtime.Composable import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.ImageBitmap import androidx.compose.ui.graphics.asImageBitmap import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import ...

MainActivity.kt package com.cfsuman.jetpackcompose import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import androidx.activity.compose.setContent import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.res.painterResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { MainContent() } ...

MainActivity.kt package com.cfsuman.jetpackcompose import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import androidx.activity.compose.setContent import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.res.painterResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { MainContent() } } @Composable fun MainContent(){ ...

Compose Image Tint The Image is a most frequently used widget of android jetpack compose library that allows us to display an image object on the android mobile device screen. The jetpack compose library provides us the tools to modify the image object’s appearance and color and many properties. By default, the Image widget constructor has a parameter named ‘colorFilter’ to apply some effect of the original image color. Using this ‘colorFilter’ parameter an android app developer can apply color filters in three different ways, which are colorMatrix, lighting, and tint. Today we will learn how we can apply tint on an Image widget’s image object using its ‘colorFilter’ parameter. Here we will pass the ‘ColorFilter.tint()’ method as the ‘colorFilter’ parameter value. We have to construct the ‘ColorFilter.tint()’ method by passing two parameters to it. One is ‘color’ and another one is ‘blendMode’. The tint() method creates a color filter for the image that applies the blend mode...

MainActivity.kt package com.cfsuman.jetpackcompose import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import androidx.activity.compose.setContent import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.RectangleShape import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.res.painterResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) ...

MainActivity.kt package com.cfsuman.jetpackcompose import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import androidx.activity.compose.setContent import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.res.painterResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { MainContent() } } @Composable fun MainContent(){ ...

Compose Image Shadow Elevation The Image is a frequently used widget of android jetpack compose library that allows us to display an image object to the android mobile device screen. We can display an image object to the Image widget surface from various sources such as bitmap resources, painter resources, and even vector resources. Without an image, we can’t visualize an android application. Most android app developers display multiple images on their app screens. The Image makes an app more beautiful. The jetpack compose library allows us to modify the image properties such as we can change the actual image size, can set the image scaling algorithms, can filter the image color by various conditions, and can change the image opacity value. After all, as with other widgets, the Image widget modifier object’s different elements allow us to tweak image properties more. Today’s subject is, how we can add an elevation value to the Image object. By default Image widget constructors ...

MainActivity.kt package com.cfsuman.jetpackcompose import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import androidx.activity.compose.setContent import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.border import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.CutCornerShape import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.res.painterResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp class MainActivity : AppCompatActivity() { override fun onC...

MainActivity.kt package com.cfsuman.jetpackcompose import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import androidx.activity.compose.setContent import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.border import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.RectangleShape import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.res.painterResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp class MainActivity : AppCompatActivity() { override fun o...

Compose Image Clickable The Image widget allows android developers to display an image object to the app user interface using the jetpack compose library. Android app developers can show image objects to the Image widget from various sources such as painter resources, vector resources, bitmap, etc. Image is a very essential component of the jetpack compose library. Android app developers can change many properties of an Image widget by its modifiers such as size, shape, etc. We also can specify the Image object scaling algorithm, content description, etc. But how can we set a click event to an Image widget in a jetpack compose application? There is no built-in property/parameter/argument to set up an onClick event directly to the Image widget. This android application development tutorial will demonstrate to us how we can add a click event to the Image widget and make it clickable. Click event of a widget allow app users to execute a task such as showing a toast message by cli...

MainActivity.kt package com.cfsuman.jetpackcompose import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import androidx.activity.compose.setContent import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.CircleShape import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.ImageBitmap import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.res.imageResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { MainContent() } } @Com...

Compose Image From Bitmap The Image is an android jetpack compose library widget that allows us to display an image object to the android mobile device screen. Image widget is used to display an image from various sources such as bitmap resources, painter resources, and even vector resources. This android application development tutorial will instruct us on how we can show an image object on an Image widget surface from a Bitmap resource. The Image widget has different constructors to show images from different sources, such as to display a bitmap image it has a constructor, and to show a vector image on the surface it has another constructor. To display a bitmap on the Image surface we will use the Image specified constructor which has the parameter ‘bitmap’. We will pass the ‘ImageBitmap.imageResource()’ value to the ‘bitmap’ parameter of the Image widget constructor. This ‘ImageBitmap.imageResource()’ method has a required parameter named ‘id’. Now we can pass a drawable res...

Compose Image From Vector Resource The Image is a widget of the android jetpack compose library that allows us to display an image instance to our android mobile device user interface. Image widget can display an image from various sources such as bitmap resources, painter resources, and even vector resources. This android application development tutorial will instruct us on how we can show an image object on an Image widget surface from a vector resource. To start this tutorial first, we have to put a vector resource into our application’s specified directory. In this tutorial, we get a vector resource by right-clicking the ‘drawable’ folder then navigating to ‘new’, and then selecting ‘Vector Asset’. From here we select a vector image to put it into our ‘drawable’ folder. So we now get our vector resource to use inside the Image widget. To show an image from the vector resource we will use the Image widget special constructor which supports the ‘imageVector’ parameter. To sp...

MainActivity.kt package com.cfsuman.jetpackcompose import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import androidx.activity.compose.setContent import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.layout.* import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.ColorFilter import androidx.compose.ui.res.painterResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { MainContent() } } @Composable fun MainContent(){ Column( modifier = Modifier .fillMaxSize() .background(Color(0xFFFFFFF0)) ...

ImageWrite() - write a coldfusion image to the specified filename or destination ImageWrite.cfm <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ImageWrite function example: how to write a coldfusion image to the specified filename or destination</title> </head> <body> <h2 style="color:Crimson">ImageWrite Function Example</h2> <cfimage source="Test.jpg" name="TestImage"> <cfscript> ImageWrite(TestImage,"Image.jpg",1); </cfscript> <img src="Test.jpg"/> <img src="Image.jpg"/> </body> </html>

ImageDrawText() - draw a text string on a coldfusion image ImageDrawText.cfm <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ImageDrawText function example: how to draw a text string on a coldfusion image</title> </head> <body> <h2 style="color:Crimson">ImageDrawText Function Example</h2> <cfset TestImage=ImageNew("",200,200)> <cfset ImageSetDrawingColor(TestImage,"red")> <cfset ImageSetAntialiasing(TestImage,"on")> <cfset ImageDrawText(TestImage,"Sowa Chan Pakhi",25,25)> <cfimage action="writeToBrowser" source="#TestImage#"> </body> </html>

ImageCrop() - crop a coldfusion image to a specified rectangular area ImageCrop.cfm <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ImageCrop function example: how to crop a coldfusion image to a specified rectangular area</title> </head> <body> <h2 style="color:Crimson">ImageCrop Function Example</h2> <cfimage source="Test.jpg" name="TestImage"> <cfset ImageCrop(TestImage,250,10,250,300)> <cfimage source="#TestImage#" action="write" destination="ModifiedTestImage.gif" overwrite="yes"> <img src="Test.jpg"/> <img src="ModifiedTestImage.gif"/> </body> </html> More ColdFusion example ImageWrite() - write a coldfusion image to the specified filename or destina...