Neumorphism using Jetpack Compose

Neumorphism design implementation in jetpack compose

Sample app preview

Dark	Light

Install

You can install compose-neumorphism by adding this to your build.gradle file

dependencies {
  implementation 'io.github.sridhar-sp:neumorphic:0.0.6'
}

Features

Draw shadows on widget to bring out the neumorphic design, following neumorphic components are supported.
- Elevated view
- Pit View
All the above neumorphic component support two corner shape
- RoundedCorner
- Oval
Simply add a single neu modifier on any compose component to create a neumorphic design

Usage

Refer the sample app provided for more information.

Elevated design

Elevated button

Dark	Light

    Button(
        modifier = Modifier
            .defaultMinSize(minHeight = 80.dp)
            .fillMaxWidth()
            .padding(defaultWidgetPadding)
            .neu(
                lightShadowColor = AppColors.lightShadow(),
                darkShadowColor = AppColors.darkShadow(),
                shadowElevation = defaultElevation,
                lightSource = LightSource.LEFT_TOP,
                shape = Flat(defaultCornerShape),
            ),
        colors = ButtonDefaults.buttonColors(
            backgroundColor = MaterialTheme.colors.surface
        )
    ) {
        Text(
            text = "Button", style = AppTextStyle.button()
        )
    }

Elevated card view with rounded rectangle shape

Dark	Light

    Card(
        modifier = Modifier
            .size(128.dp)
            .neu(
                lightShadowColor = AppColors.lightShadow(),
                darkShadowColor = AppColors.darkShadow(),
                shadowElevation = defaultElevation,
                lightSource = LightSource.LEFT_TOP,
                shape = Flat(RoundedCorner(24.dp)),
            ),
        elevation = 0.dp,
        shape = RoundedCornerShape(24.dp),
    ){
    	// Add child components here.
    }

Pit design

Pressed button

Dark	Light

    Button(
        modifier = Modifier
            .fillMaxWidth()
            .padding(defaultWidgetPadding)
            .neu(
                lightShadowColor = AppColors.lightShadow(),
                darkShadowColor = AppColors.darkShadow(),
                shadowElevation = defaultElevation,
                lightSource = LightSource.LEFT_TOP,
                shape = Pressed(defaultCornerShape),
            ),
        colors = ButtonDefaults.buttonColors(
            backgroundColor = MaterialTheme.colors.surface,
        ),
        shape = RoundedCornerShape(12.dp),
        elevation = null

    ) {
        Text(text = "Button", style = AppTextStyle.button())
    }

Pressed card view with rounded rectangle shape

Dark	Light

    Card(
        modifier = Modifier
            .size(128.dp)
            .neu(
                lightShadowColor = AppColors.lightShadow(),
                darkShadowColor = AppColors.darkShadow(),
                shadowElevation = defaultElevation,
                lightSource = LightSource.LEFT_TOP,
                shape = Pressed(RoundedCorner(24.dp)),
            ),
        elevation = 0.dp,
        shape = RoundedCornerShape(24.dp),
    ){
    	// Add child components here.
    }