KotlinLeaner
04/12/2023, 10:10 AMxml
+ compose view
. I have a BottomNavigationView
in xml
and using Fragment
in the project. I am having problem in ModalBottomSheetLayout
.class HomeFragment : Fragment() {
private var _binding: HomeFragmentBinding? = null
private val binding get() = _binding!!
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View {
_binding = HomeFragmentBinding.inflate(inflater, container, false)
setupView()
return binding.root
}
private fun setupView() {
binding.composeView.setContent {
MainScreen()
}
}
override fun onDestroyView() {
super.onDestroyView()
_binding = null
}
}
@OptIn(ExperimentalMaterialApi::class)
@Composable
fun MainScreen() {
val sheetState = rememberModalBottomSheetState(
initialValue = ModalBottomSheetValue.Hidden,
confirmValueChange = { it != ModalBottomSheetValue.HalfExpanded }
)
val coroutineScope = rememberCoroutineScope()
ModalBottomSheetLayout(
sheetState = sheetState,
sheetContent = {
BottomSheet()
},
modifier = Modifier.fillMaxSize()
) {
Column(
modifier = Modifier
.fillMaxSize()
.padding(top = 24.dp)
.padding(horizontal = 24.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = "Welcome to bottom sheet playground!",
modifier = Modifier.fillMaxWidth(),
style = MaterialTheme.typography.h4,
textAlign = TextAlign.Center,
color = Color.White,
)
Spacer(modifier = Modifier.height(32.dp))
repeat(10) {
Button(
onClick = {
coroutineScope.launch {
if (sheetState.isVisible) {
sheetState.hide()
} else {
sheetState.show()
}
}
}
) {
Text(text = "Click to show bottom sheet $it")
}
}
}
}
}
@Composable
fun BottomSheet() {
Column(
modifier = Modifier.padding(32.dp)
) {
Text(
text = "Bottom sheet",
style = MaterialTheme.typography.h6
)
Spacer(modifier = Modifier.height(32.dp))
Text(
text = "Click outside the bottom sheet to hide it",
style = MaterialTheme.typography.body1
)
}
}
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="<http://schemas.android.com/apk/res/android>"
xmlns:app="<http://schemas.android.com/apk/res-auto>"
xmlns:tools="<http://schemas.android.com/tools>"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.compose.ui.platform.ComposeView
android:id="@+id/composeView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
I was connected the ModalBottomSheetLayout
with the fragment but I don't understand why sheetContent
is open automatically and show weird animation like this video
What is the problem in here?<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="<http://schemas.android.com/apk/res/android>"
xmlns:app="<http://schemas.android.com/apk/res-auto>"
xmlns:tools="<http://schemas.android.com/tools>"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<FrameLayout
android:id="@+id/fragmentContainer"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@id/bottomNavigation"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottomNavigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:labelVisibilityMode="labeled"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/fragmentContainer"
app:menu="@menu/menu_bottom_navigation" />
</androidx.constraintlayout.widget.ConstraintLayout>
class MainActivity : AppCompatActivity() {
private val binding by lazy { ActivityMainBinding.inflate(layoutInflater) }
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(binding.root)
binding.bottomNavigation.apply {
setOnItemSelectedListener { item ->
when (item.itemId) {
R.id.menu_item_home -> {
setFragment(HomeFragment())
}
R.id.menu_item_results -> {
setFragment(ResultFragment())
}
}
true
}
selectedItemId = R.id.menu_item_home
}
}
private fun setFragment(fragment: Fragment) {
supportFragmentManager
.beginTransaction()
.replace(
R.id.fragmentContainer, fragment,
null
)
.commitAllowingStateLoss()
}
}
jim
04/12/2023, 3:27 PMKotlinLeaner
04/12/2023, 3:30 PMjim
04/12/2023, 5:18 PMKotlinLeaner
04/12/2023, 8:27 PMBottomNavigationView
if I am not using this it working fine in my project. Flicking animation happens only when using`BottomNavigationView` with ComposeView
. I think this problem of https://developer.android.com/jetpack/compose/migrate/interoperability-apis/compose-in-views realted?