In xml we use View.INVISIBLE to just don't show the view at all, but it still takes up space for layout purposes. What is the alternative in jetpack compose?
AnimatedVisibility(
// true or false
) {
Button() // button code.
}
You can build a custom modifier to measure the Composable to take up space.
Something like:
fun Modifier.visible(visible: Boolean) = if (visible) this else this.then(Invisible)
private object Invisible : LayoutModifier {
override fun MeasureScope.measure(
measurable: Measurable,
constraints: Constraints
): MeasureResult {
val placeable = measurable.measure(constraints)
return layout(placeable.width, placeable.height) {}
}
}
In Jetpack Compose, you can use the Visibility component to control the visibility of a view. The Visibility component is similar to the View.INVISIBLE property in XML, but it also supports the View.GONE behavior.
As a modifier for a view:
Button(
onClick = { /* Do something */ },
modifier = Modifier.visibility(visible = true)) {Text("Button")}
In this example, the Button view is modified with the visibility modifier. The visible parameter of the modifier determines whether the view should be visible or not.
As a container for a view:
Visibility(visible = true) {
Button(onClick = { /* Do something */ }) {
Text("Button")
}
}
In this example, the Visibility component is used as a container for the Button view. The visible parameter of the Visibility component determines whether the view should be visible or not.
The AnimatedVisibility component is similar to the Visibility component, but it also supports animating the visibility changes. You can use AnimatedVisibility in the same way as Visibility, with the added benefit of animation:
AnimatedVisibility(
visible = true, // true or false
enter = slideInVertically(),
exit = slideOutVertically()
) {
Button(onClick = { /* Do something */ }) {
Text("Button")
}
}
In this example, the Button view is wrapped in an AnimatedVisibility component. The enter and exit parameters of the AnimatedVisibility component define the animation to use when the visibility changes. In this case, the slideInVertically() and slideOutVertically() functions are used to create a slide animation.
Related
I have many Composables and I want to collapse Composable code inside like in xml. Is there extension for that?
Your post title is a bit misleading, but I think your'e asking how to collapse/expand "code" not the actual widget/ui.
I'm not sure if this is exactly what you want, but you can expand/collapse a specific area of your code if you wrap them within region/endregion without the need of any plugin or configuration, its almost the same behavior that your'e expecting from the xml editor, and you can do this anywhere not only to a function.
expanded code region
collapsed code region
Sample Inner composable expanded
Sample Inner composable collapsed
If you wish to make your Column collapse or expand without animation you simply need to add a if statement and set true to display false to collapse
var visible by remember {
mutableStateOf(true)
}
Column(modifier = Modifier.fillMaxSize()) {
Text("Click to expand or collapse", modifier = Modifier
.fillMaxWidth()
.clickable {
visible = !visible
}
)
if(visible) {
// Content to be collapsed or displayed
}
}
If you wish to collapse or expand with animation you can check out AnimatedVisbility composable
var visible by remember {
mutableStateOf(true)
}
Column(modifier = Modifier.fillMaxSize()) {
Text("Click to expand or collapse", modifier = Modifier
.fillMaxWidth()
.clickable {
visible = !visible
}
)
AnimatedVisibility(visible = visible) {
Column {
// Content to be collapsed or displayed
}
}
}
From AndroidView documentation:
AndroidView will clip its content to the layout bounds, as being clipped is a common assumption made by Views - keeping clipping disabled might lead to unexpected drawing behavior. Note this deviates from Compose's practice of keeping clipping opt-in, disabled by default.
This seems to suggest that there is a way to turn clipping off, but I can't manage to do so.
I've tried:
Modifier.graphicsLayer(clip = false) on the AndroidView
clipToPadding = false on the View
clipToOutline = false on the View
clipChildren = false on the View
Is it possible to turn off clipping?
It's a known feature request, here's a workaround until it's implemented:
#Composable
fun <T : View> AndroidView(
clipToBounds: Boolean,
factory: (Context) -> T,
modifier: Modifier = Modifier,
update: (T) -> Unit = NoOpUpdate,
) {
androidx.compose.ui.viewinterop.AndroidView(
factory = factory,
modifier = modifier,
update = if (clipToBounds) {
update
} else {
{
(it.parent as? ViewGroup)?.clipChildren = false
update(it)
}
}
)
}
I'm using the new Material 3 NavigationBar and NavigationBarItem components, I want the NavigationBar to be thinner, because the default one is too large. I want one similar to the one Gmail or Drive has (see picture at the end for the comparison). Making the icon smaller doesn't work, and neither changing all the available paddings (Icon, NavigationBar and NavigationBarItem).
This is the Composable code, if I change the NavigationBar heigh (using Modifier) then this happens:
I primarly want to remove the space between the label and the bottom, and the one between the top and the icon.
#Composable
fun MyAppBottomBar(navController: NavController, tabs: Array<MenuBottom>) {
val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentRoute = navBackStackEntry?.destination?.route ?: MenuBottom.INICIO.route
val rutas = remember { MenuBottom.values().map { it.route } }
if (currentRoute in rutas) {
NavigationBar(containerColor = elevation01) {
tabs.forEachIndexed { index, item ->
NavigationBarItem(
selected = currentRoute == item.route,
onClick = {
if (item.route != currentRoute) {
navController.navigate(item.route) {
popUpTo(navController.graph.startDestinationId) {
saveState = true
}
launchSingleTop = true
restoreState = true
}
}
},
label = { Text(stringResource(id = item.title)) },
icon = {
if (item.route == currentRoute) {
Icon(item.selectedIcon, contentDescription = null, tint = Color.Black)
} else {
Icon(item.unselectedIcon, contentDescription = null)
}
},
colors = NavigationBarItemDefaults.colors(
selectedIconColor = Color.Black,
unselectedIconColor = Color.Black,
indicatorColor = Greenyellow,
selectedTextColor = Color.Black,
unselectedTextColor = Color.Black
)
)
}
}
}
}
NavigationBar does not use padding. It uses a fixed height. How do I know that? While working with MUI (which is a React implementation of Material design) I found that they use a fixed height, and margin: auto to center items vertically. Then I figured jetpack compose NavigationBar might do the same and the idea was right. So whats the solution?
NavigationBar(
modifier = Modifier.height(64.dp)
) {...}
Or change it to your taste. It will shrink and grow the space taken up.
This most likely has to do with the bottom navigation. The grey bar you see has its own padding by default.
Have a look at this documentation on how to remove those System intents.
Here's what you need to do in a nutshell:
implementation "com.google.accompanist:accompanist-insets:<version>"
Then in your MainActivity call WindowCompat.setDecorFitsSystemWindows(window, false) like this:
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
WindowCompat.setDecorFitsSystemWindows(window, false)
setContent {...}
}
Now your App should use the entire Screen and your NavigationBar should have the same height as the one from Gmail.
To apply single ones of them again e.g. StatusBar call a modifier:
Modifier.statusBarsPadding()
When using the jetpack compose interoperability API, using LazyRow inside a prebuilt ViewPager causes scroll issues.
When trying to scroll items inside the LazyRow the ViewPager moves. Is there any way we can prevent this?
ComposeView
<androidx.compose.ui.platform.ComposeView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/compose_view"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
Setting the view in the fragment
binding.composeView.setContent {
HorizontalScrollableView(listOfCards)
}
And the view written in compose
#Composable
fun HorizontalScrollableView(listOfCards: List<Cards>) {
Column(
modifier = Modifier
.background(color = colorResource(R.color.grey10))
) {
Text(
text = "Items",
color = colors.primary,
style = typography.subheadBold,
fontSize = 15.sp,
modifier = Modifier.padding(start = 16.dp, top = 10.dp, end = 16.dp)
)
LazyRow(contentPadding = PaddingValues(end = 16.dp)) {
items(
items = listOfCards,
key = { listOfCards.id }
) {
RenderCard(it)
}
}
}
}
It is a normal behavior you experience.The similar problem is described here.
Link
Alternatively, lazy row gestures can be controlled.
Modifier.pointerInput(Unit) {
detectTapGestures(
onPress = { /* Called when the gesture starts */ },
onDoubleTap = { /* Called on Double Tap */ },
onLongPress = { /* Called on Long Press */ },
onTap = { /* Called on Tap */ }
)
}
In onPress you can cancel the scroll state you want
Apart from composing, we were solving it this way.
Link
I hope this helps. Good job
This is mainly because ComposeView is not implementing canScrollHorizontally correctly. ViewPager uses this method to decide whether it intercepts touch events.
A workaround:
Create a class extending FrameLayout, override canScrollHorizontally to always return true, and wrap ComposeView with this container. In this way, the scrolling in ComposeView works normally. The shortcoming of this workaround is that the ViewPager won't scroll if you are moving your finger on ComposeView, even when ComposeView has scrolled to the end.
Problem : TextField (inside lazy column) text goes below the keybaord
Explanation :
I have a LazyColumn that contains a list of items displaying text fields , In the manifest the activity has windowSoftInputMode="adjustResize" and I am also setting the flag WindowCompat.setDecorFitsSystemWindows(window,false) in the onCreate Method before setContent and I want to make text appear above the keyboard at all times for smoother editing experience !
Using Accompanist Library providing Window Insets to give padding to the Box like this
Box(modifier = Modifier.weight(1f).navigationBarsWithImePadding()){
LazyColumn() {
items(myItems) { item->
ItemComposable(item)
}
}
}
As you can see , there's navigationBarsWithImePadding on the box , but it does't work since the text goes below the keyboard , I tried setting the modifier on LazyColumn but then it provides padding with the LazyColumn relative to other items outside of the box !
so I tried contentPadding
LazyColumn(contentPadding=insets.ime.toPaddingValues(additionalBottom=insets.navigationBars.bottom.dp)) {
items(editor.blocks) { block ->
RenderBlock(block)
}
}
Again did't work , since the content padding is applied to the last item / or after it , The keyboard goes above the text
Replacing LazyColumn with a simple Column and using a verticalScroll modifier causes the same problem , Because the list can be long vertical scroll becomes a need
Finally I have a solution for it. Just follow these steps below:
Step 1: In your AndroidManifest.xml
<activity
...
android:windowSoftInputMode="adjustResize">
</activity>
Step 2: In your Activity
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
WindowCompat.setDecorFitsSystemWindows(window, false)
setContent {
AppTheme {
ProvideWindowInsets(
windowInsetsAnimationsEnabled = true,
consumeWindowInsets = false,
) {
// your content
}
}
}
Step 3:
LazyColumn(
modifier = Modifier
.navigationBarsWithImePadding()
.verticalScroll(state = rememberScrollState())
.height(LocalConfiguration.current.screenHeightDp.dp)
.fillMaxWidth(),
) {
// your TextField items
}
Step 4:
// init your CoroutineScope
val coroutineScope = rememberCoroutineScope()
// init your BringIntoViewRequester
val bringIntoViewRequester = BringIntoViewRequester()
// use them in your TextField modifier
modifier = Modifier
/* ... your other modifiers*/
.bringIntoViewRequester(bringIntoViewRequester)
.onFocusEvent {
if (it.isFocused || it.hasFocus) {
coroutineScope.launch {
delay(250)
bringIntoViewRequester.bringIntoView()
}
}
}
}
Hope it helps.
If you use Column, you can refer to the following code snippet:
Column(
modifier = Modifier
// other modifiers
.verticalScroll(scrollState, reverseScrolling = true)
.navigationBarsWithImePadding(),
verticalArrangement = Arrangement.Bottom,
)