Compose-gallery-picker

KO | EN

gitlite — search

#python #java #python3 #arduino #golang #machine-learning #rust #html #flask #javascript #seismology #nodejs

Compose-gallery-picker

★ 41 Open GitHub ↗

Compose-gallery-picker is a library for Android Jetpack Compose that provides a gallery and an image editor with cropping functionality based on a provided template.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![Compose gallery picker](https://raw.githubusercontent.com/nabla-run/Compose-gallery-picker/main/logo.svg)

Compose-gallery-picker is a library for Android Jetpack Compose that provides a gallery and an image
editor with cropping functionality based on a provided template.

## Setup

Library is available on `mavenCentral()`.

```kotlin
repositories {
  mavenCentral()
}
```

```kotlin
implementation("run.nabla:gallery-picker:1.4.5")
```

## Screenshots

![Screenshot showing Image picker](https://raw.githubusercontent.com/nabla-run/Compose-gallery-picker/main/images/screenshot.png "Screenshot showing image picker")

## Functions

The main functions provided by Compose-gallery-picker are:

#### GalleryPicker as compose component

The GalleryPicker composable displays a gallery of images for selection. It accepts various
parameters like modifier, state, primaryColor, and header. The onImageSelected callback is triggered
when an image is selected.

```kotlin
@Composable
fun GalleryPicker(
  modifier: Modifier = Modifier,
  state: GalleryPickerState = rememberGalleryPickerState(),
  permissionState: RequestPermissionState = rememberRequestPermissionState(),
  primaryColor: Color = Color.Black,
  header: @Composable () -> Unit = { GalleryHeader(title = state.headerTitle) },
  onImageSelected: (Uri) -> Unit
)
```

#### GalleryPicker as activity intent

The GalleryPicker can also be used as an activity intent to launch a gallery for photo selection. In
this approach, you can utilize the rememberLauncherForActivityResult composable function to handle
the gallery contract and retrieve the selected image URI.

```kotlin
val pickPhotoLauncher = rememberLauncherForActivityResult(
  contract = GalleryContract(),
  onResult = { uri ->

}
)

SideEffect {
  pickPhotoLauncher.launch(
    GalleryRequest.Builder()
      .setTitle("Pick one")
      .setFontFamily(R.font.open_sans)
      .setTitleSize(25)
      .setBackgroundColor(Color.White.value.toLong())
      .setTitleColor(Color.Black.value.toLong())
      .showExitAction(false)
      .setItemsRoundedCornerSize(5)
      .setGridColumns(3)
      .setPermissionTitle("Access to your photos")
      .setPermissionSecondaryActionTitle("Cancel")
      .build()
  )
}
```

#### ImageEditor

The ImageEditor composable displays an image editor with cropping functionality. It accepts
parameters like modifier, photoState, template, templateState, primaryColor, photoURI, onDoneClick,
and footer. The onDoneClick callback is triggered when the user finishes cropping the image.

```kotlin
@Composable
fun ImageEditor(
  modifier: Modifier = Modifier,
  photoState: PhotoState = rememberPhotoState(),
  template: @Composable BoxScope.() -> Unit = {},
  templateState: TemplateState? = null,
  primaryColor: Color = Color.Black,
  photoURI: Uri,
  onDoneClick: (
    bitmap: Bitmap,
    scale: Float,
    offset: Offset,
    templateSize: Size
  ) -> Unit,
  footer: @Composable BoxScope.(
    primaryClick: () -> Unit,
  ) -> Unit,
)
```

### Templates

Compose-gallery-picker provides two templates for the ImageEditor: Oval and Square.

- Oval:
  The Oval template creates a circular crop area for the image. Users can customize the
  diameterRatio
  to control the size of the circular crop area.

```kotlin
ImageEditor(
    photoState = photoState,
    photoURI = fileUri,
    templateState = templateState,
    template = {
        Oval(
            diameterRatio = templateState.sizeRatio
        )
    },
// Rest of the parameters
)
```
<img src="images/oval_template.jpg" alt="Screenshot showing oval template" height="450px"/>

- Square:
  The Square template creates a square crop area for the image. Users can customize the
  diameterRatio
  to control the size of the square crop area.

```kotlin
ImageEditor(
  photoState = photoState,
  photoURI = fileUri,
  templateState = templateState,
  template = {
    Square(
      diameterRatio = templateState.sizeRatio
    )
  },
// Rest of the parameters
)
```
<img src="images/square_template.jpg" alt="Screenshot showing square template" height="450px"/>

### Custom Template

Custom templates can be created by defining a composable function that describes the shape and
layout of the crop area. The custom template function should accept any required parameters and use
Compose primitives like Canvas, Path, and DrawScope to draw the template. Then, simply pass the
custom template function as a parameter to the ImageEditor.

## State Management

Both GalleryPicker and ImageEditor use state objects for managing their internal state. The state
objects GalleryPickerState, PhotoState, and TemplateState can be created using the
rememberGalleryPickerState, rememberPhotoState, and rememberTemplateState composable functions,
respectively.

## Contributing

Contributions to Compose-gallery-picker are welcome! If you find any issues or have suggestions for
improvements, please create an issue or submit a pull request.

## License

Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

https://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

Compose-gallery-picker

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README