CropView – Compose

The CropView – Compose a customizable library that allows you to easily implement image cropping functionality in your Android applications. It is pure Compose library and lightweight.

Features

  • Image cropping: Provides a user-friendly interface to crop images within your app.
  • Customizable: Easily customize the crop view according to your app’s design and requirements.
  • Aspect ratio: Set a specific aspect ratio for the crop view, such as square, portrait, landscape. ( limited to grid shape for now )
  • Crop overlay: Display an overlay grid or shape to guide the user during the cropping process. The overlay can be customized to match your app’s design and you will have total control over the shape of the overlay.

Installation

To use the CropView – Compose Library in your Android project, follow these steps:

  1. Add the Jitpack repository to your project’s build.gradle file.

    2. repositories {
   maven { url 'https://www.jitpack.io' }
}
  2. Add the library to your project’s build.gradle file.

    3. dependencies {
    implementation "com.oguzhanaslann.cropview:cropview-compose:0.0.1-alpha"
}
  3. Sync the project with the Gradle files to fetch the library and its dependencies.
  4. Start using the library in your code by importing the necessary classes.

Usage

To use the CropView – Compose Library in your app:

@Composable
  fun MyView() {
    Crop(
        modifier = modifier,
        drawGrid = crop,
        cropShape = cropShape
    ) {
        // your content
    }
  }

cropShape above is an CropShape which is an interface that defines state of the crop shape and the shape’s view. For now, there are two implementations:

GridCrop

GridCrop is a crop shape that draws a grid on the crop view. As state, it uses a GridCropState which is a class that holds the state of the grid. 

Crop(
 cropShape = rememberGridCrop()
  ...
 ) {
  ...
}

Additionally, you can set a size ratio to GridCropState.

val cropShape = rememberGridCrop()
cropState.setAspectRatio(Ratio.RATIO_16_9)

CircleCrop

CircleCrop is a crop shape that draws a circle on the crop view. As state, it uses a CircleCropState which is a class that holds the state of the circle. 

 Crop(
    cropShape = rememberCircleCrop()
    ...
 ) {
    ...
 }

After defining Crop view, it’s content, and it’s shape, the crop view will handle the rest. It will draw the shape on the view and will handle the touch events, resizing and moving the shape. Whenever you need to crop the image, you can call CropState.crop(Bitmap) method to crop the image.

Note: Both rememberGridCrop and rememberCircleCrop let you define a size/radius (current) and a minimum size/radius. Crop view will prevent the shape from getting smaller than the minimum size/radius. Also, if you define a size/radius larger than the crop view’s size, the shape will be drawn with the size of the crop view.

Customization

As Mentioned above, CropShape is , in fact, an interface. You can create your own crop shape by implementing this interface. The interface expect you to provide state of the shape and content view of the shape. It’s worth mention that you will probably need to create your own state class that implements CropShapeState interface.CropState mainly expects you to provide a resize function, which is called when the user engages with the shape.

Also, if your shape by nature is a rectangle or Circle, you can use built-in RectangleCropShapeState and CircularCropShapeState classes. They provide proper abstraction for their corresponding shapes and also implement crop function for you.

Examples

You can find a sample app in Andromedia repository.

Contribution

Contributions to the Android Image Crop View Library are welcome! If you encounter any bugs, have feature requests, or would like to contribute improvements feel free to create an issue or open a pull request. If you would like to contribute.

License

The CropView – Compose Library is released under the MIT License. Please review the license file for more information.

GitHub

View Github