Override width to the half of the screen - android-recyclerview

I am developing a chat and i use Recyclerview to show the messages. When the message is an image i use Glide to display it. Using glide i use the override function to show the image with specific dimensions. However this does not work very good because not all the phones have the same resolution and size.
bitmap?.let {
//meaning the image is landscape view
if (bitmap.width > bitmap.height)
Glide.with(Application.instance)
.load(fileInfo.localUri)
.apply(RequestOptions().override(500, 250))
.into(holder.sntImageView)
else
Glide.with(Application.instance)
.load(fileInfo.localUri)
.apply(RequestOptions().override(250, 500))
.into(holder.sntImageView)
holder.sendingProgress.visibility = View.GONE
holder.sntBubble.visibility = View.GONE
holder.sntImageView.visibility = View.VISIBLE
} ?: run {
holder.sntImageView.visibility = View.GONE
holder.sendingProgress.visibility = View.GONE
holder.sntBody.text = "Unable to decode image"
}
So my question is how to use Glide so that the image has almost the half of the screen instead of 500, 250...?

You can start by knowing the with of your container, like recyclerviews width:
container.width
This will give you the width in pixels. After that you can apply a division to get the pixels at half:
val yourViewWidth = container.width / 2
That's how you make it to half of the container.
And then you just have to pass that value to Glide.
If you want to get total device width, you can get the pixels like this accepted answer and then apply the same division criteria.
Note that if you are in a recyclerview and want to know the size of a child view, you may need to wait the layout to be ready in order to have access to its parameters. That can be done with the ViewTreeObserver.OnGlobalLayoutListener, And do your operations inside onGlobalLayout. It will be triggered when the view is ready and you'll be able to operate there.
Hope it helps, happy coding!

Related

Custom CollapsingTopAppBar Jetpack Compose

The essence of the problem is that I want to write my own version of the AppBar that would include content as another Compose function. After looking at the source code of the current CollapsingTopAppBar implementation, I saw the following lines:
#Composable
private fun TwoRowsTopAppBar(
...
scrollBehavior: TopAppBarScrollBehavior?
) {
...
val pinnedHeightPx: Float = 64.dp
val maxHeightPx: Float = 152.dp
LocalDensity.current.run {
pinnedHeightPx = pinnedHeight.toPx()
maxHeightPx = maxHeight.toPx()
}
// Sets the app bar's height offset limit to hide just the bottom title area and keep top title
// visible when collapsed.
SideEffect {
if (scrollBehavior?.state?.heightOffsetLimit != pinnedHeightPx - maxHeightPx) {
scrollBehavior?.state?.heightOffsetLimit = pinnedHeightPx - maxHeightPx
}
}
...
Surface(...) {
Column {
TopAppBarLayout(
...
heightPx = pinnedHeightPx
...
)
TopAppBarLayout(
...
heightPx = maxHeightPx - pinnedHeightPx + (scrollBehavior?.state?.heightOffset
?: 0f),
...
)
}
}
}
As I understand it, scrollBehavior is used to handle the collapse and expansion behavior. In the current implementation, just constant values are put in heightOffsetLimit. And since I need my appbar implementation to be able to contain content of any size, I need to somehow know the size of this content in advance and put this value in heightOffsetLimit.
I have already written the code for my AppBar, so that it also contains content. But since I can't pass the height value of the content to scrollBehavior, the AppBar doesn't collapse to the end.
you need to calculate the height that the appbar will have before drawing it into the screen. I have followed this issue and solved my problem with the last solution. hope it helps:
Get height of element Jetpack Compose
use the content you can put (ex. an image or a huge text) as the MainContent
use your appbar as the DependentContent and use the size given in lambda to give the height to your appbar
finally set placeMainContent false as I believe you don't need to draw the image (or any other composable) directly in a box
and you will good to go

Why did the border radius disappear for an RecyclerView item with a custom background?

I try to figure out Android development, and sometimes I have beginner question. For now I faced with issue creating the RecyclerView items with different background color. I created a simple
RecyclerView items list First I set one background (light green) for all items.
Then I decided to set a separate background for each item. Here's how I did it in adapter file:
override fun onBindViewHolder(holder: ChapterListAdapter.ViewHolder, position: Int) {
holder.chapter_item.text = chapter_titles[position]
holder.chapter_details.text = chapter_descrs[position]
holder.chapter_image.setImageResource(chapter_images[position])
when(position){
0 -> holder.chapter_card.setBackgroundColor(Color.parseColor("#ff5668"))
1 -> holder.chapter_card.setBackgroundColor(Color.parseColor("#41d5e2"))
2 -> holder.chapter_card.setBackgroundColor(Color.parseColor("#4d53e0"))
3 -> holder.chapter_card.setBackgroundColor(Color.parseColor("#ff8e36"))
}
}
And it works, it may not be the right way to do it, but it works. However, there is one problem. In the screenshot, you can see that the last item has a border radius. I set the cardCornerRadius value for the element in card_layout.xml And for some reason, when I assign a custom color for an item, this value disappears. This can be seen in the screenshot. The last element with a light green background has a border radius (I did not assign a custom background color value to this element) and the first four elements that have a custom color assigned do not have a border radius.
Please tell me why this is happening and how to fix it. I need to keep the border radius for all elements.
I really glad I fond the error by myself. For setting the item background color I used setBackgroundColor but it's not correct in my case. In my case I have to use setCardBackgroundColor because I setting background for the CardView. Now my code looks:
override fun onBindViewHolder(holder: ChapterListAdapter.ViewHolder, position: Int) {
holder.chapter_item.text = chapter_titles[position]
holder.chapter_details.text = chapter_descrs[position]
holder.chapter_image.setImageResource(chapter_images[position])
when(position){
0 -> {
holder.chapter_card.setCardBackgroundColor(Color.parseColor("#ff5668"))
}
1 -> {
holder.chapter_card.setCardBackgroundColor(Color.parseColor("#41d5e2"))
}
2 -> {
holder.chapter_card.setCardBackgroundColor(Color.parseColor("#4d53e0"))
}
3 -> {
holder.chapter_card.setCardBackgroundColor(Color.parseColor("#ff8e36"))
}
}
}
And it works well.

Why scrollable modifier doesn't scroll view content?

I am trying to get scrolling to work on a Column where the number of entries may exceed the height of the window.
I'm currently using Compose 1.1.0-rc03 and at the moment I'm only trying to get it working on desktop.
I reduced the problem to this:
#Composable
fun App() {
val optionsScrollState = rememberScrollState()
Row(modifier = Modifier.fillMaxSize()) {
// Left column
Column(
modifier = Modifier
.scrollable(optionsScrollState, Orientation.Vertical)
.width(240.dp)
.fillMaxHeight()
) {
(1..100).forEach { i -> Text("Row $i") }
}
}
}
But this doesn't scroll, or at least, not with the mousewheel. Maybe there's another way to scroll that isn't immediately apparent to me.
How do I make this work?
The docs on scrollable say that I might have to manage the state myself. So is using rememberScrollState() not enough?
I found some existing questions about disabling scrolling on columns, but they were always talking about LazyColumn which I'm not using here.
You're using a wrong modifier. From documentation:
The scrollable modifier differs from the scroll modifiers in that scrollable detects the scroll gestures, but does not offset its contents.
If you're interested how Modifier.scrollable should be used, you can find an example in the same documentation chapter.
You can use Modifier.verticalScroll instead, which will give you the expected behavior.
Also consider switching to LazyColumn, which already has built-in scrolling as well as lazy cell loading.

offset set with getItemOffsets disappears after scroll

I have a horizontal RecyclerView which works with a FlexLayoutManager. I also have some decorations set with RecyclerView.ItemDecoration.
My getItemOffsets method looks something like this:
override fun getItemOffsets(outRect: Rect, view: View, recyclerView: RecyclerView, state: RecyclerView.State) {
super.getItemOffsets(outRect, view, recyclerView, state)
val position: Int = recyclerView.getChildAdapterPosition(view)
if(position meets some rules){
outRect.top = some values here
}
if(viewType == CERTAIN_VIEW_TYPE){
outRect.bottom = some value
}
}
..onDrawOver(){
//I draw the decorations here
}
This works, the views that I set as decorations are shown and they are at the right position.
The problem that I have is that AFTER I SCROLL TO RIGHT AND THEN BACK TO LEFT, the offset set by outRect.top is set to 0 and my decorations overlap my items.
The curious stuff is that offset set by outRect.bottom doesn't disappear or cause any issues.
I just specify that the offset set by outRect.top is set only for certain positions.
Also my decorations don't disappear, just the margin set initially by outRect.top is not there anymore
Can you please help me with this issue?
Thank you
EDIT:
This can be the result of view recycling I guess, because I see that after scroll other items now have top offset even though I did not intend to set it for them
I had the same problem with item offsets when scrolling.
My case was ->
I had a RecyclerView with a GridLayoutManager, orientation was horizontal and span count set to 2
I've added a custom item decoration to the RecyclerView related to the requirements that I had, by just adding some space around the items and making calculations.
Used the same overridden function as you and set the value to top, bottom, left and right.
Anyway the problem that I had, was at how I was getting the position of the view that I wanted to make my changes.
val viewHolder = recyclerView.findContainingViewHolder(view) ?: return
val adapterPosition = viewHolder.absoluteAdapterPosition
val childPosition = parent.indexOfChild(view)
val isEvenPosition = adapterPosition % 2 == 0
Previously I was using childPosition but when scrolling I was having the problem, when I've used adapterPosition the views were getting the correct amount of space.

Screenshot of Mapbox map without displaying it

I need to display a few previews of addresses on the map on the same screen. To do that I'm going to display ImageViews with bitmaps instead of making multiple instances of MapView. But for that I need to find a way to capture these bitmaps.
I found snapshot function in MapboxMap (https://github.com/mapbox/mapbox-gl-native/issues/6062), but it requires displaying of the map.
val position = CameraPosition.Builder()
.target(addressLatLng)
.zoom(zoom)
.build()
mapboxMap.cameraPosition = position
mapboxMap.snapshot { bitmap: Bitmap ->
imageView.setImageBitmap(bitmap)
}
So, can I take a snapshot of the map without displaying it on the screen?
I've finally found the solution! The class I needed to use was MapSnapshotter.
val width = imageView.width
val height = imageView.height
val location = CameraPosition.Builder()
.target(LatLng(55.7558, 37.6173))
.zoom(16.0)
.build()
val options = MapSnapshotter.Options(width, height)
.withCameraPosition(location)
MapSnapshotter(context, options).start { snapshot ->
imageView.setImageBitmap(snapshot.bitmap)
}