Compose DebugDrawer

Debug drawer for compose

License

License

Categories

Categories

ORM Data
GroupId

GroupId

com.github.alorma
ArtifactId

ArtifactId

compose-debug-drawer-shortcuts
Last Version

Last Version

1.1.0-alpha10
Release Date

Release Date

Type

Type

aar
Description

Description

Compose DebugDrawer
Debug drawer for compose
Project URL

Project URL

http://github.com/alorma/compose-debug-drawer
Source Code Management

Source Code Management

https://github.com/alorma/compose-debug-drawer

Download compose-debug-drawer-shortcuts

How to add to project

<!-- https://jarcasting.com/artifacts/com.github.alorma/compose-debug-drawer-shortcuts/ -->
<dependency>
    <groupId>com.github.alorma</groupId>
    <artifactId>compose-debug-drawer-shortcuts</artifactId>
    <version>1.1.0-alpha10</version>
    <type>aar</type>
</dependency>
// https://jarcasting.com/artifacts/com.github.alorma/compose-debug-drawer-shortcuts/
implementation 'com.github.alorma:compose-debug-drawer-shortcuts:1.1.0-alpha10'
// https://jarcasting.com/artifacts/com.github.alorma/compose-debug-drawer-shortcuts/
implementation ("com.github.alorma:compose-debug-drawer-shortcuts:1.1.0-alpha10")
'com.github.alorma:compose-debug-drawer-shortcuts:aar:1.1.0-alpha10'
<dependency org="com.github.alorma" name="compose-debug-drawer-shortcuts" rev="1.1.0-alpha10">
  <artifact name="compose-debug-drawer-shortcuts" type="aar" />
</dependency>
@Grapes(
@Grab(group='com.github.alorma', module='compose-debug-drawer-shortcuts', version='1.1.0-alpha10')
)
libraryDependencies += "com.github.alorma" % "compose-debug-drawer-shortcuts" % "1.1.0-alpha10"
[com.github.alorma/compose-debug-drawer-shortcuts "1.1.0-alpha10"]

Dependencies

runtime (10)

Group / Artifact Type Version
org.jetbrains.kotlin : kotlin-stdlib jar 1.4.21
com.github.alorma : compose-debug-drawer-base jar 1.1.0-alpha10
com.github.alorma : compose-debug-drawer-modules jar 1.1.0-alpha10
androidx.core » core-ktx jar 1.3.2
androidx.appcompat » appcompat jar 1.2.0
com.google.android.material » material jar 1.2.1
androidx.compose.ui » ui jar 1.0.0-alpha10
androidx.compose.material » material jar 1.0.0-alpha10
androidx.compose.ui » ui-tooling jar 1.0.0-alpha10
androidx.lifecycle » lifecycle-runtime-ktx jar 2.3.0-rc01

Project Modules

There are no modules declared in this project.

Debug Drawer for Jetpack Compose

Versions

drawer-base drawer-modules drawer-ui-modules

Compatible with Compose

Composable Debug Drawer for Jetpack Compose apps

Install

allprojects {
    repositories {
        //...
        mavenCentral()
    }
}

Add dependencies:

implementation 'com.github.alorma:drawer-base:$version'
implementation 'com.github.alorma:drawer-modules:$version'
implementation 'com.github.alorma:drawer-ui-modules:$version'

Setup

Wrap your content with DebugDrawerLayout:

DebugDrawerLayout(
    drawerModules = {
        TODO()
    }
) {
    // TODO Add your APP Content here
}

Debug vs Release

If you don't want DebugDrawer layout code in release you can wrap it on a custom function:

src/debug/...

@Composable
fun ConfigureScreen(bodyContent: @Composable () -> Unit) {
    DebugDrawerLayout(
        drawerModules = { ... },
        bodyContent = { bodyContent() },
    )
}

src/release/...

@Composable
fun ConfigureScreen(bodyContent: @Composable () -> Unit) {
    bodyContent()
}

Modules

Add modules as a list of DebugModules

DebugDrawerLayout(
    debug = { BuildConfig.DEBUG },
    drawerModules = {
        DeviceModule()
        BuildModule()
    }
) {
    // TODO Add your APP Content here
}

Actions Module

This module has a composable slot.

You can build any of the provided actions, or build your own.

Actions

  • ButtonAction: Shows a Button with given text, and register a lambda to receive its click

  • SwitchAction: Shows a Switch and register a lambda to receive its changes

Build Module

Shows information about the app: Version code, Version name and Package

Device Module

Shows information about device running the app such as model and manufacturer

Design Module

Allows to show a Grid layer as overlay of your content, to help align content to grid

var debugGridLayerConfig: DebugGridStateConfig by remember {
    mutableStateOf(DebugGridStateConfig())
}

DebugDrawerLayout(
    drawerModules = {
        //...
        DesignModule(config = debugGridLayerConfig) {
            debugGridLayerConfig = it
        }
        //...
    },
    bodyContent = { drawerState ->
        Box {
            // Body of your app
            DebugGridLayer(debugGridLayerConfig)
        }
    },
)

Custom Module

Debug drawer can show any @Composable function.

If you want to provide a custom module that looks like the ones provided by the library:

@Composable
fun CustomModule(
    modifier: Modifier = Modifier,
    icon: @Composable (() -> Unit)? = null,
    title: String,
    items: List<Pair<String, String>>
) {
    DebugDrawerModule(
        modifier = modifier,
        icon = icon,
        title = title
    ) {
        // Module content
    }
}

Theming && Customization

Use drawerColors to customize drawer theme colors.

DebugDrawerLayout(
    drawerColors = YourColorScheme, // darkColors() or lightColors()
)

If you want to modify the drawer colors, use DebugDrawerDefaults.colors.copy(...)

Modules list UI

Update each module's UI by passing a Modifier

DebugDrawerLayout(
    drawerModules = {
        val modulesModifier = Modifier
            .padding(4.dp)
            .clip(shape = MaterialTheme.shapes.medium)
            .background(color = MaterialTheme.colors.surface)
        DeviceModule(modulesModifier)
        BuildModule(modulesModifier)
    }
)

Or configure the whole contents by specifying a drawerContentModifier

DebugDrawerLayout(
    drawerContentModifier = Modifier.padding(16.dp),
    drawerModules = {
        DeviceModule()
        BuildModule()
    }
)

Versions

Version
1.1.0-alpha10
0.0.4