Story Editor

Instagram-like story editor to add content to your pictures.

Note: this is still a WIP

Setup

First, add jitpack in your build.gradle at the end of repositories:

repositories {
   // ...
   maven { url "https://jitpack.io" }
}

Then, add the library dependency:

implementation 'com.github.badoualy:story-editor:0.1.0'

Usage

(See MainActivity sample)

In your manifest:

android:windowSoftInputMode="adjustResize"

In your activity (important to handle keyboard correctly):

WindowCompat.setDecorFitsSystemWindows(window, false)

Then:

val elements = remember { mutableStateListOf() }
StoryEditor(
  state = rememberStoryEditorState(),
  elements = elements,
  modifier = modifier.fillMaxSize(),
  onClick = {
    val element = StoryTextElement()
    editorState.focusedElement = element
    elements.add(element)
  },
  onDeleteElement = {
    elements.remove(it)
  },
) {
  AsyncImage(
    "https://i.ytimg.com/vi/h78qlOYCXJQ/maxresdefault.jpg",
    contentDescription = null,
    contentScale = ContentScale.Crop,
    modifier = Modifier.aspectRatio(9f / 16f)
  )
}

@Composable
private fun rememberStoryEditorState(): StoryEditorState {
  return remember {
    StoryEditorState(
      elementsBoundsFraction = Rect(0.01f, 0.1f, 0.99f, 0.99f),
      editMode = true,
      debug = true, // draws hitbox red box
      screenshotEnabled = true
    )
  }
}

Screenshot

You can take a screenshot of the editor’s content via editorState.takeScreenshot(). To do this, you need to enable the screenshot mode when creating your StoryEditorState. To do this, a ComposeView is used to render the editor inside an AndroidView, which can then be rendered on a bitmap. Because of this overhead, this feature is opt-in and disabled by default.

Current restrictions:

• Make sure you background doesn’t have any hardware bitmap, or you’ll get the exception: Software rendering doesn't support hardware bitmaps. If you’re using Coil/Glide/… you can disable hardware bitmap when creating the request.
• If your background is clipped to a given shape, the bitmap will also be clipped.

Elements

By default, only a TextElement is provided, but you can easily add your own components to the editor. Check TextElement implementation to do so.

GitHub

View Github