workspace / bottomsheetdialog-compose Goto Github PK

View Code? Open in Web Editor NEW

206.0 4.0 13.0 214 KB

The most convenient way to use BottomSheetDialog in Jetpack Compose

License: Apache License 2.0

Kotlin 100.00%

android android-library bottomsheet bottomsheetdialog jetpack-compose kotlin-library android-ui material-design

bottomsheetdialog-compose's Introduction

Jetpack Compose BottomSheetDialog library that allows you to use BottomsheetDialog like Dialog's interface.

Also, it supports to set navigation bar color when BottomSheetDialog has shown.

Preview

Get Started

Gradle

Compose	Library
Compose 1.3.x
Compose 1.4.x
Compose 1.5.x
Compose 1.6.x
Compose 1.7.x

// module's build.gradle
dependencies {
    implementation "com.holix.android:bottomsheetdialog-compose:{version}"
}

Usage

You can use BottomSheetDialog composable like Dialog composable! It is super simple 😎

@Composable
fun YourComposable() {
    var show by remember {
        mutableStateOf(false)
    }
    if (show) {
        BottomSheetDialog(
            onDismissRequest = {
                show = false
            },
            properties = BottomSheetDialogProperties(
                ...
            )
        ) {
            // content
            Surface {
                ...
            }
        }
    }
}

BottomSheetDialogProperties

name	default value	type
dismissOnBackPress	true	Boolean
dismissOnClickOutside	true	Boolean
dismissWithAnimation	false	Boolean
enableEdgeToEdge	false	Boolean
navigationBarProperties	NavigationBarProperties()	NavigationBarProperties
behaviorProperties	BottomSheetBehaviorProperties()	BottomSheetBehaviorProperties

NavigationBarProperties

inspired by accompanist's SystemUiController

name	default value	type
color	Color.Unspecified	Color
darkIcons	color.luminance() > 0.5f	Boolean
navigationBarContrastEnforced	true	Boolean
transformColorForLightContent	{ original -> Color(0f, 0f, 0f, 0.3f).compositeOver(original) }	(Color) -> Color

BottomSheetBehaviorProperties

BottomSheetBehavior official docs

name	default value	type
state	State.Collapsed	State
maxWidth	Size.NotSet	Size
maxHeight	Size.NotSet	Size
isDraggable	true	Boolean
expandedOffset	0	Integer
halfExpandedRatio	0.5F	Float
isHideable	true	Boolean
peekHeight	PeekHeight.Auto	PeekHeight
isFitToContents	true	Boolean
skipCollapsed	false	Boolean
isGestureInsetBottomIgnored	false	Boolean

Additional Information

This library depends on material-components-android(BottomSheetDialog).

License

Designed and developed by 2022 holixfactory

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

   http://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.

bottomsheetdialog-compose's People

Contributors

Stargazers

Watchers

Forkers

shruddms androiddevnotesforks moriafly virendersran01 devlock-inc pbk20191 nari4169 jja08111 impbk2000 eff4real tommy226 vistar1986 kdu0136

bottomsheetdialog-compose's Issues

BottomSheetDialog의 content에 스크롤 없는 Column을 사용하면 드래그가 안되는 문제.

BottomSheetDialog`의 content에 스크롤 없는 Column을 사용하면 드래그가 안되는 문제가 있는 것 같습니다.

Modifier.verticalScroll(scrollState)를 추가하면 정상적으로 동작합니다.

이게 버그인지 의도하신 부분인지 모르겠어서 이슈로 남깁니다.

    BottomSheetDialog() {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .background(Color.White)
                .verticalScroll(scrollState)  // 이 부분을 추가하면 정상적으로 드래그 됨.
        ) {
             // children..
       }
    }

2023-01-03.6.00.03.mov

When isDraggable set to false, the scrolling of the list has become less smooth now.

The issue can be reproduced directly using the current demo.
Step 1: Disable the "isDraggable" option.
Step 2: Click "Show" and then try scrolling the list in the popup window. You will notice that the scrolling inertia is gone.

Display Scroll Issue

I want to make the content a scroll view with isDraggable set to false.

Column(
modifier = modifier
.clip(RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp))
.background(color = "#ffffff".color)
.padding(start = 24.dp, top = 30.dp, end = 24.dp, bottom = 24.dp)
.verticalScroll(rememberScrollState())
)

Even if you configure it in that format, it will not scroll.

Is there a way to do this without specifying maxheight?

v1.2.0 이후 키보드 관련 이슈.

v1.2.0 이후로 키보드 동작이 이상해진 거 같습니다.

BottomSheetDialog 내부에 TextField가 있으면 키보드가 나타나지 않고,
팝업이 닫히면 그때서야 키보드가 올라옵니다.

아래 영상은 샘플 코드에서 TextField만 추가해서 테스트했습니다.

untitled.webm

Crash on Android 5 and 6 (API 22, 23)

First of all, thanks for the library! I'm trying to solve the same problem and this library looks like exactly what I need.

The problem is that the library doesn't work in Android with API levels 22 and 23. The app from your repository crashes on Android with these API versions.

Here is the stack trace:

Process: su.ati.common.sample, PID: 23247
android.util.AndroidRuntimeException: requestFeature() must be called before adding content
	at com.android.internal.policy.impl.PhoneWindow.requestFeature(PhoneWindow.java:302)
	at com.holix.android.bottomsheetdialog.compose.BottomSheetDialogWrapper.<init>(BottomSheetDialog.kt:391)
	at com.holix.android.bottomsheetdialog.compose.BottomSheetDialogKt.BottomSheetDialog(BottomSheetDialog.kt:274)
	at su.ati.common.sample.compose.components.BottomSheetDialogDemoFragment.ScreenUi(BottomSheetDialogDemoFragment.kt:62)
	at su.ati.common.sample.compose.components.BottomSheetDialogDemoFragment.access$ScreenUi(BottomSheetDialogDemoFragment.kt:32)
	at su.ati.common.sample.compose.components.BottomSheetDialogDemoFragment$ScreenUi$2.invoke(BottomSheetDialogDemoFragment.kt)
	at su.ati.common.sample.compose.components.BottomSheetDialogDemoFragment$ScreenUi$2.invoke(BottomSheetDialogDemoFragment.kt)
	at androidx.compose.runtime.RecomposeScopeImpl.compose(RecomposeScopeImpl.kt:145)
	at androidx.compose.runtime.ComposerImpl.recomposeToGroupEnd(Composer.kt:2375)
	at androidx.compose.runtime.ComposerImpl.skipCurrentGroup(Composer.kt:2643)
	at androidx.compose.runtime.ComposerImpl$doCompose$2$5.invoke(Composer.kt:3260)
	at androidx.compose.runtime.ComposerImpl$doCompose$2$5.invoke(Composer.kt:3238)
	at androidx.compose.runtime.SnapshotStateKt__DerivedStateKt.observeDerivedStateRecalculations(DerivedState.kt:341)
	at androidx.compose.runtime.SnapshotStateKt.observeDerivedStateRecalculations(Unknown Source)
	at androidx.compose.runtime.ComposerImpl.doCompose(Composer.kt:3238)
	at androidx.compose.runtime.ComposerImpl.recompose$runtime_release(Composer.kt:3203)
	at androidx.compose.runtime.CompositionImpl.recompose(Composition.kt:771)
	at androidx.compose.runtime.Recomposer.performRecompose(Recomposer.kt:1031)
	at androidx.compose.runtime.Recomposer.access$performRecompose(Recomposer.kt:125)
	at androidx.compose.runtime.Recomposer$runRecomposeAndApplyChanges$2$2.invoke(Recomposer.kt:534)
	at androidx.compose.runtime.Recomposer$runRecomposeAndApplyChanges$2$2.invoke(Recomposer.kt:503)
	at androidx.compose.ui.platform.AndroidUiFrameClock$withFrameNanos$2$callback$1.doFrame(AndroidUiFrameClock.android.kt:34)
	at androidx.compose.ui.platform.AndroidUiDispatcher.performFrameDispatch(AndroidUiDispatcher.android.kt:109)
	at androidx.compose.ui.platform.AndroidUiDispatcher.access$performFrameDispatch(AndroidUiDispatcher.android.kt:41)
	at androidx.compose.ui.platform.AndroidUiDispatcher$dispatchCallback$1.doFrame(AndroidUiDispatcher.android.kt:69)
	at android.view.Choreographer$CallbackRecord.run(Choreographer.java:765)
	at android.view.Choreographer.doCallbacks(Choreographer.java:580)
	at android.view.Choreographer.doFrame(Choreographer.java:549)
	at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:753)
	at android.os.Handler.handleCallback(Handler.java:739)
	at android.os.Handler.dispatchMessage(Handler.java:95)
	at android.os.Looper.loop(Looper.java:135)
	at android.app.ActivityThread.main(ActivityThread.java:5254)
	at java.lang.reflect.Method.invoke(Native Method)
	at java.lang.reflect.Method.invoke(Method.java:372)
	at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:903)
	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:698)

Android 9 에서 네비게이션바와 ui 겹침 문제

Info

갤럭시 S22(Android13), S20(Android11) 정상
갤럭시 S9(Android9) 버그 발생

Problem

BottomSheetDialog 와 하단 네비게이션바가 겹쳐서 ui 출력

버튼 클릭시 bottomDialog 호출하는데 에러 관련 이슈

bottomDialog를 사용하기 위해 해당 라이브러리를 sync하여 사용중에 있습니다.

TodoList를 만드는 중인데, LazyColumn의 Item을 클릭시 해당 BottomDialog 라이브러리를 사용하여 스크린에 띄울려고 하는데 클릭하면 앱이 튕기며 에러가 발생합니다.

compose를 1.3.2 버전을 사용하고 있어서, README에 설명됐듯이 1.1.1 버전으로 사용중인데도 해결이 안돼서 질문합니다 ㅠㅠ

에러

gradle

buildscript {
    ext {
//        compose_version = '1.1.0-beta01'
        compose_version = '1.3.2'
    }
}// Top-level build file where you can add configuration options common to all sub-projects/modules.
plugins {
    id 'com.android.application' version '7.3.1' apply false
    id 'com.android.library' version '7.3.1' apply false
    id 'org.jetbrains.kotlin.android' version '1.7.20' apply false
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

plugins {
    id 'com.android.application'
    id 'org.jetbrains.kotlin.android'
}

android {
    compileSdk 33

    defaultConfig {
        applicationId "com.example.todo_android"
        minSdk 21
        targetSdk 33
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
        vectorDrawables {
            useSupportLibrary true
        }
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
    }
    buildFeatures {
        compose true
    }
    composeOptions {
        kotlinCompilerExtensionVersion compose_version
    }
    packagingOptions {
        resources {
            excludes += '/META-INF/{AL2.0,LGPL2.1}'
        }
    }
}

dependencies {

    implementation 'androidx.core:core-ktx:1.7.0'
    implementation "androidx.compose.ui:ui:$compose_version"
    implementation 'androidx.compose.material3:material3:1.1.0-alpha04'
    implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'
    implementation 'androidx.activity:activity-compose:1.3.1'
    implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.4'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.0'
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
    debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
    debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_version"

    // Custom BottomSheet
    implementation "com.holix.android:bottomsheetdialog-compose:1.1.1"
}

Support edge to edge

consider this :
`
BottomSheetDialog(
edgeToEdge
){
Box(modifier = Modifier.navigationBarPadding()) {
content()
}

}
`

How to shape/clip to have rounded edges (like the screenshots)

Compose Version 1.4

혹시 compose 1.4에서도 기능 작동이 잘 되나요??
테스트해봤을때 crash가 발생하는 것 같습니다.

onDismissRequest is called twice when bottom sheet is dismissed by swiping down

Hi, I really like you library and I'm trying to integrate it with my own Compose Navigation lib. I've noticed that swiping down causes the current BottomSheetDialog to call onDismissRequest twice, which breaks some logic for me. In all other cases this callback is always called once.

Could you maybe fix this issue and make it be called only once on swipe down? The current behaviour is very much unexpected and error-prone.

Part of bottomSheet hiding behind keyboard

Hi, There was a �issue while using library.
If there is an input in the bottomSheet and the keyboard is raised due to focus on the input, the button fixed at the bottom is hidden behind the keyboard.

The activity is set to adjustResize . I checked to see if there is a way to solve this, but I'm not sure. If this function is not supported, could you add a function to raise the area of the bottomSheet as much as the keyboard area? Thank you.

Display error in landscape screen mode

I'm using version 1.2.1 . In landscape mode,dialog will dispay juest display a part of top, cannot display all

Navigation area display issues

On the Galaxy Z Flip, it's displayed on the navigation area
In the Galaxy S23 Ultra, it is displayed from the navigation area.
Is there a reason?

I use 1.2.2 SDK version

Darker dim behind the sheet

Hi there.
Awesome library, a needed one in Compose especially with Compose material3.
I want to use this BottomSheetDialog with some padding around it(looks like an AlertDialog) but there is some weird dark shadow behind the sheet.
Is there any way to eliminate these darker dims?

Add expand property to BottomSheet library

hello. I'm using your library very well.
While using the library, I found that there is no expand function.
So, when I want a bottomSheet that covers the entire screen, I have to open the bottomSheet twice by swiping.

Can you fix this by adding a property for expand? If this property is added, the usability of the library will be better.
(By the way, your library is really cool)