I’d like to find some properties like android:gravity=“center_vertical” in Jetpack Compose without using Column, any ideas?
No, the only way is to use a container. And that is exactly how it should be used in Compose: the container does not add any problems, unnecessary load, etc. No reason why you should avoid them.
To me, using Column is not the most logical solution, because it is designed to vertically arrange several elements.
For a single item, Box is more clear to me:
Box(
contentAlignment = Alignment.Center,
modifier = Modifier.fillMaxSize()
) {
Text("Hello")
}
You can't place a text vertically center without using a container. But you can change the alignment of Text without using a container.
Text(textAlign: TextAlign.Center)
In case of height with wrapContent this will automatically place the text vertically centered.
Other values of TextAlign are Left, Right, Justify, Start and End
Related
In Jetpack Compose I am using BasicTextField and I want to add my own horizontalScroll for it. When I apply it, it seems to have built in minimum width, so even if content fits, user is still able to scroll.
I don't have this issue if I remove horizontal scroll and use singleLine = true mode. Then BasicTextField becomes scrollable only when entered value doesn't fit.
Is there any way to add some sort of "wrap content" flag for horizontal scroll?
The implementation is pretty standart, I add horizontal scroll to it like this:
var scrollState by remember { mutableStateOf(ScrollState(0)) }
BasicTextField(
modifier = Modifier
.horizontalScroll(state = scrollState, reverseScrolling = true),
singleLine = true,
...
I have an Add Shopping List item Jetpack Compose screen which contains several TextField inputs and an image container at the bottom. The screen overflows at the bottom and is cut off. How can I scroll the screen?
Add Modifier.scrollable(..) to the container that you wish to make scrollable.
Code would be something like this:
val scrollState = rememberScrollState()
...
Box( // or whatever your parent composable is
modifier = Modifier
.scrollable(state = scrollState, orientation = Orientation.Vertical)
) {
...
}
Of course, there are other Modifier methods for making composables scrollable that might fit better for your case.
I want to create a scrollable Text in Jetpack Compose.
In View system, we can make text scrollable by using:
android:scrollbars = "vertical" and
textview.setMovementMethod(new ScrollingMovementMethod());
Please help me!
I tried using Modifier.verticalScroll(rememberScrollState()) but it doesn't work
My Solution might be late for you yet I post it here, it might help others :)
I had the same problem and solved it by wrapping my scrollable Text Component into a LazyColumn. But beware! Your content must be big enough, in my case I had a fixed height, which may result in text overflow
val scroll = rememberScrollState(0)
LazyColumn( modifier = ...) {
item {
Text(
text = "YourText",
modifier = Modifier
.padding(...)
.height(90.dp)
.verticalScroll(scroll)
)
}
}
I want to implement this ui.
How can i overlap post list item on each other in android jetpack compose?
If you're using a Column or a LazyList to display the items, you can use the verticalArrangement parameters with a negative spacedBy space.
LazyColumn(
verticalArrangement = Arrangement.spacedBy((-32).dp)
) {
// Put the items to overlap here
}
spacedBy() doc
Use Box to put one element on top of another.
Also, read official documentation here
You can use Box
sample :
Box(modifier = Modifier.fillMaxSize()) {
Image(modifier = Modifier.fillMaxSize()) {} //Image1
Image(modifier = Modifier.fillMaxSize()) {} //Image2
}
In the above example, Image2 will cover the Box's maxSize. Image1 will be beneath Image2.
Adding to Bagadeshkumar R's answer, you can place Spacer with height that is spacer(modifier = Modifier.height(8.dp)), attribute between image 1 and 2, for image 1 to be partially visible.
I have a Composable which has 2 TextFields and a Button in a Column, when the content of the TextFields increases, the Button at the bottom becomes unreachable.
Is there a way I can make the Column scrollable?
To create and automatically remember ScrollState with default parameters use rememberScrollState.
val scroll = rememberScrollState(0)
You can add the verticalScroll modifier to enable scrolling within the Column.
Column(
modifier = Modifier.verticalScroll(scroll)
) {
...
For more read and this