Android Tutorial

Software Setup and Configuration

Android Studio

File Structure

Components

Core Topics

Layout

View

Button

Intent and Intent Filters

Toast

RecyclerView

Fragments

Adapters

Other UI Component

Image Loading Libraries

Date and Time

Material Design

Bars

Working with Google Maps

Chart

Animation

Database

Advance Android

Jetpack

Architecture

App Publish

App Monetization

Circular ImageView in Android using Jetpack Compose

Jetpack Compose does not have a direct built-in CircularImageView like some Android libraries (e.g., CircleImageView from hdodenhof) for the traditional View system. However, creating a circular image in Compose is straightforward with the help of the Modifier.clip() function.

Here's how you can achieve a circular ImageView in Jetpack Compose:

1. Setting up the necessary dependencies:

Ensure you have the necessary Compose and Accompanist library for loading images. In your build.gradle file:

implementation 'androidx.compose.ui:ui:YOUR_COMPOSE_VERSION'
implementation 'androidx.compose.ui:ui-tooling:YOUR_COMPOSE_VERSION'
implementation 'com.google.accompanist:accompanist-coil:YOUR_ACCOMPANIST_VERSION'

2. Creating a Circular Image:

Here's how you can display a circular image using Compose:

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.unit.dp
import coil.compose.rememberImagePainter
import androidx.compose.ui.tooling.preview.Preview

@Composable
fun CircularImage(url: String) {
    Image(
        painter = rememberImagePainter(data = url),
        contentDescription = null,  // Consider providing a meaningful description
        contentScale = ContentScale.Crop,  // Crop the image if not square
        modifier = Modifier
            .size(100.dp)  // You can adjust the size as needed
            .clip(CircleShape)
            .background(Color.Gray)  // Background color when the image is loading or failed
    )
}

@Preview
@Composable
fun PreviewCircularImage() {
    CircularImage(url = "https://example.com/path/to/your/image.jpg")
}

In this code, the CircularImage function uses the Coil library via Accompanist to load images. The Modifier.clip(CircleShape) is what provides the circular clipping, and ContentScale.Crop ensures the image scales to fill its size while maintaining its aspect ratio, cropping any parts of the image that extend beyond its bounds.

If you use another image loading library (e.g., Glide), you'd adjust the method of obtaining the image accordingly, but the principle of creating a circular image using the .clip(CircleShape) modifier remains the same.

  1. Creating circular images in Android with Jetpack Compose:

    • Description: Use Jetpack Compose to create circular images by applying a circular shape to the Image composable. This involves using a circular clip shape or mask.
    • Code (Kotlin):
      import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.res.painterResource

@Composable
fun CircularImageExample() {
    Image(
        painter = painterResource(id = R.drawable.ic_circular_image),
        contentDescription = null, // Provide a content description
        modifier = Modifier
            .size(100.dp)
            .clip(CircleShape)
    )
}

  2. Jetpack Compose Circular ImageView example in Kotlin:

    • Description: Create a circular ImageView using Jetpack Compose in Kotlin. This example uses the Image composable with a circular clip shape.
    • Code (Kotlin):
      import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource

@Composable
fun CircularImageViewExample() {
    Image(
        painter = painterResource(id = R.drawable.ic_circular_image),
        contentDescription = null, // Provide a content description
        modifier = Modifier.size(100.dp).clip(CircleShape)
    )
}

  3. Styling circular images with Jetpack Compose in Android:

    • Description: Style circular images in Jetpack Compose by applying styles such as border color, border width, and shadow. Use the Modifier parameter to customize appearance.
    • Code (Kotlin):
      import androidx.compose.foundation.Image
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource

@Composable
fun StyledCircularImage() {
    Image(
        painter = painterResource(id = R.drawable.ic_circular_image),
        contentDescription = null, // Provide a content description
        modifier = Modifier
            .size(100.dp)
            .clip(CircleShape)
            .border(2.dp, MaterialTheme.colorScheme.primary, CircleShape)
    )
}

  4. Customizing circular ImageView appearance in Jetpack Compose:

    • Description: Customize the appearance of circular images in Jetpack Compose by adjusting parameters such as background color, content scale, and content alignment.
    • Code (Kotlin):
      import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource

@Composable
fun CustomCircularImage() {
    Box(
        modifier = Modifier
            .size(100.dp)
            .clip(CircleShape)
            .background(Color.Gray)
    ) {
        Image(
            painter = painterResource(id = R.drawable.ic_circular_image),
            contentDescription = null, // Provide a content description
            modifier = Modifier.fillMaxSize(),
            contentScale = ContentScale.Crop,
            contentAlignment = Alignment.Center
        )
    }
}

  5. Circular ImageView states and interactions in Jetpack Compose:

    • Description: Control the states and interactions of circular images in Jetpack Compose by handling different states such as pressed or focused. Adjust the appearance based on these states.
    • Code (Kotlin):
      import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material3.ripple.rememberRipple
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource

@Composable
fun CircularImageWithInteraction() {
    val interactionSource = remember { MutableInteractionSource() }

    Image(
        painter = painterResource(id = R.drawable.ic_circular_image),
        contentDescription = null, // Provide a content description
        modifier = Modifier
            .size(100.dp)
            .clip(CircleShape)
            .background(
                color = if (interactionSource.isPressed) {
                    Color.Gray
                } else {
                    Color.Transparent
                }
            )
            .clickable(
                interactionSource = interactionSource,
                indication = rememberRipple(bounded = false)
            ) { /* Handle click event */ }
    )
}

  6. Using Material Design circular images in Jetpack Compose:

    • Description: Utilize Material Design styles and attributes to create circular images in Jetpack Compose. This ensures a consistent and modern design.
    • Code (Kotlin):
      import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Icon
import androidx.compose.material3.icons.Icons
import androidx.compose.material3.icons.filled.AccountCircle
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier

@Composable
fun MaterialDesignCircularImage() {
    Icon(
        imageVector = Icons.Default.AccountCircle,
        contentDescription = null, // Provide a content description
        modifier = Modifier.size(100.dp).clip(CircleShape),
        tint = MaterialTheme.colorScheme.primary
    )
}

  7. Circular ImageView layout and positioning in Jetpack Compose:

    • Description: Control the layout and positioning of circular images in Jetpack Compose using layout composables such as Row, Column, or Box.
    • Code (Kotlin):
      import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource

@Composable
fun CircularImageLayout() {
    Box(
        modifier = Modifier
            .size(150.dp)
            .clip(CircleShape)
            .background(Color.Gray)
    ) {
        Image(
            painter = painterResource(id = R.drawable.ic_circular_image),
            contentDescription = null, // Provide a content description
            modifier = Modifier.fillMaxSize(),
            contentScale = ContentScale.Crop
        )
    }
}

  8. Animated circular ImageView in Android with Jetpack Compose:

    • Description: Animate circular images in Jetpack Compose using animation frameworks like Property Animation or AnimatedVisibility. Apply animations to attributes like alpha, scale, or translation.
    • Code (Kotlin):
      import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource

@Composable
fun AnimatedCircularImage() {
    val alpha by animateFloatAsState(targetValue = if (/* Some condition */) 1f else 0.5f)

    Image(
        painter = painterResource(id = R.drawable.ic_circular_image),
        contentDescription = null, // Provide a content description
        modifier = Modifier
            .size(100.dp)
            .clip(CircleShape)
            .background(Color.Gray.copy(alpha = alpha))
    )
}

  9. Masking images to create circular ImageView in Jetpack Compose:

    • Description: Create circular images in Jetpack Compose by using masking techniques. This involves applying a circular mask to the Image composable.
    • Code (Kotlin):
      import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.graphics.asImageBitmap
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp

@Composable
fun CircularImageWithMask() {
    val imageBitmap: ImageBitmap = painterResource(id = R.drawable.ic_circular_image)
        .painter.toBitmap().asImageBitmap()

    Image(
        bitmap = imageBitmap,
        contentDescription = null, // Provide a content description
        modifier = Modifier
            .size(100.dp)
            .mask(CircleShape)
            .background(Color.Gray)
    )
}
Copyright © devanddep.com | All Rights Reserved