Xamarin Android LinearLayout - Problem with 2 RecyclerViews on one page - android

I'm having issues with the v7.widget.RecyclerView. I have a "post" from the app user, which displays any images they have previously added, as well as any other attachments (documents, videos etc.). There is an option to edit existing posts.
I have an EditPost xml file which embeds a file called attachment_item. This in turn embeds an xml file called EditAttachmentsLayout. I can post code from the first 2 files if needed, but I don't think the problem is in there.
The EditAttachmentsLayout page uses 2 RecyclerViews; one for images, and another for other files. Code is here:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.RecyclerView
android:id="#+id/edit_images_recycler"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.v7.widget.RecyclerView
android:id="#+id/edit_attachments_recycler"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
The problem is that when the Attachments recyler has items to display, it places some sort of overlay over the first (and only the first) image, like so:
If I hit the Cross button over the thumbnail (or the cross button on the attachment itself), the attachment is removed and the image then appears, as such:
It's as if the recycler is placing an overlay of some sort over the first image in the list. I have tried all sorts of things to address it, such as adding spacing to try to force the two recyclers apart, and switching to a GridView, as below:
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content" android:rowCount="4">
<android.support.v7.widget.RecyclerView android:id="#+id/edit_images_recycler"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_row="0"
android:scrollbars="none"/>
<Space
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_marginBottom="10dp"/>
<android.support.v7.widget.RecyclerView android:id="#+id/edit_attachments_recycler"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_row="2"
app:layoutManager="android.support.v7.widget.LinearLayoutManager"
android:scrollbars="none"/>
</GridLayout>
Unfortunately, the issue persists. The image is always covered, until I remove the attachment.
Any ideas...? I am stumped with this one.
EDIT:
Here is the code which sets up the recycler views:
private void SetupRecycler()
{
RecyclerView imagesRecyclerView = FindViewById<RecyclerView>(Resource.Id.edit_images_recycler);
RecyclerView attachmentsRecyclerView = FindViewById<RecyclerView>(Resource.Id.edit_attachments_recycler);
LinearLayoutManager imagesLayoutManager = new LinearLayoutManager(this, LinearLayoutManager.Horizontal, false);
LinearLayoutManager attachmentsLayoutManager = new LinearLayoutManager(this, LinearLayoutManager.Vertical, false);
imagesRecyclerView.SetLayoutManager(imagesLayoutManager);
attachmentsRecyclerView.SetLayoutManager(attachmentsLayoutManager);
IList<DeviceFile> localFiles = _fileUtil.GetLocalFiles(_postEntry.MobileId);
_editImageAdapter = new EditImageAdapter(_postEntry, localFiles.Where(file => file.IsThumbnail).ToList());
_editAttachmentAdapter = new EditAttachmentAdapter(_postEntry, localFiles.Where(file => !file.IsThumbnail).ToList());
imagesRecyclerView.SetAdapter(_editImageAdapter);
attachmentsRecyclerView.SetAdapter(_editAttachmentAdapter);
_editImageAdapter.LocalFileDeleted += LocalFileDeleted;
_editImageAdapter.UploadedFileDeleted += UploadedFileDeleted;
_editAttachmentAdapter.LocalAttachmentDeleted += LocalFileDeleted;
_editAttachmentAdapter.UploadedAttachmentDeleted += UploadedFileDeleted;
}
EDIT 2:
So here is the overlay which adds a removal button to the image when the post is in edit mode. Apologies for not including it earlier, I didn't build this app so don't know everything about it:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_marginRight="20dp"
android:layout_width="#dimen/edit_image_size"
android:layout_height="#dimen/edit_image_size">
<ImageView
android:background="#drawable/image_background"
android:id="#+id/attachment_image"
android:scaleType="fitXY"
android:layout_width="#dimen/edit_image_size"
android:layout_height="#dimen/edit_image_size"/>
<ImageButton
android:background="#drawable/rounded_button_secondary"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:layout_alignTop="#id/attachment_image"
android:layout_alignRight="#id/attachment_image"
android:id="#+id/delete_attachment_button"
android:src="#drawable/icon_of_cross"
android:tint="#color/white"
android:padding="5dp"
android:layout_margin="5dp"
android:layout_width="25dp"
android:layout_height="25dp" />
Just for a bit of clarity, I have included some more screenshots, with multiple images and attachments. If there are both images and attachments in the post, the first image to be loaded (the one firthest right) will have the overlay:
Once I click the cross button to remove the first attachment, the attachment is gone (as expected) and the image is visible again:
Very strange!

Suggestions:
1. Try to set parent linear layout height to match_parent
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"> // **this line here**
<android.support.v7.widget.RecyclerView
android:id="#+id/edit_images_recycler"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.v7.widget.RecyclerView
android:id="#+id/edit_attachments_recycler"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Have you tried to see if you are having an issues with the main thread
RunOnUIThread(() => {}) - to update the adapters
Try notifying the recycler adapters for the changes by using:
_editImageAdapter.NotifiyDatasetChanged()
_editImageAdapter.NotifiyDatasetChanged()

Related

RecyclerView not working inside a ScrollView properly

My app and the RecyclerView was working fine until I add the second RecyclerView on to the fragment. Since I added the second fragment, I added a ScrollView to the fragment. Then I faced some issue with the scrolling within the recyclerview, it didn't scroll smoothly. After going through a lot of articles online including StackOverflow, I changed the ScrollView with androidx.core.widget.NestedScrollView. This fixed the issue with scrolling but some major issue occured. The loading of items in the RecyclerView took more time, when I hit the searchbutton, that's there on the menu bar at the top, it took long time to expand the search field and some times app show 'not responding' message. Some articles say add .setNestedScrollingEnabled=false and I added it like the following in onCreateView() of the fragment. But I am still facing the issue.
I am using kotlin
binding.rv_home_items.isNestedScrollingEnabled=false
binding.rv_home_categories.isNestedScrollingEnabled=false
Following is the xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
android:background="#color/colorOffWhite"
android:orientation="vertical"
tools:context=".ui.fragments.HomeFragment">
<FrameLayout
android:id="#+id/framelayout_category"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_home_categories"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:orientation="horizontal"
android:paddingBottom="15dp" />
<ImageButton
android:id="#+id/ibutton_show_category"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="5dp"
android:background="#drawable/ic_show_category" />
</FrameLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/framelayout_category">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.denzcoskun.imageslider.ImageSlider
android:id="#+id/image_slider"
android:layout_width="match_parent"
android:layout_height="200dp"
android:visibility="gone"
app:iss_auto_cycle="true"
app:iss_corner_radius="5"
app:iss_delay="0"
app:iss_error_image="#color/colorDarkGrey"
app:iss_period="2500"
app:iss_placeholder="#color/colorDarkGrey"
app:iss_selected_dot="#drawable/default_selected_dot"
app:iss_unselected_dot="#drawable/default_unselected_dot"
tools:visibility="visible" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_home_items"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/image_slider"
android:layout_marginBottom="50dp" />
</RelativeLayout>
</androidx.core.widget.NestedScrollView>
</RelativeLayout>
I am completely stuck on my project, any help with this is highly appreciated
Edit:
When I launch the app, in a few seconds it's shows a message that the app is not responding.
If you have more than one RecyclerView and even all of them have same scroll direction, seems ConcatAdapter can be preferred solution.
ConcatAdapter enables sequentially combine multiple adapters to a single RecyclerView.

How to properly display a grid in RecyclerView?

I'm developing an app that displays popular movies right now. It uses TMDB API to fetch this data. I'm using RecyclerView which displays clickable ImageViews in a grid consisting 2 columns.
This is the result I want to achieve:
an edge to edge grid of all movies that I can only achieve by hard coding values:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">`
<ImageView
android:layout_width="185dp" <!--HARDCODED VALUES-->
android:layout_height="278dp"<!--HARDCODED VALUES-->
android:contentDescription="#string/movie"
android:id="#+id/rv_image_view" />
</LinearLayout>
If I use layout_width="match_parent" or layout_height="wrap_content" I get extremely weird and skewed results. Like this one. How should I fix this?
Please don't mark this as duplicate. I've searched far and wide for this and came up with absolutely nothing.
try this create a layout file like this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<ImageView
android:id="#+id/movies_item"
android:layout_width="185dp"
android:layout_height="278dp"
android:scaleType="fitXY"/>
</LinearLayout>
In activity :
RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerview);
recyclerView.setHasFixedSize(true);
RecyclerView.LayoutManager layoutManager = new GridLayoutManager(getApplicationContext(), 2);
recyclerView.setLayoutManager(layoutManager);
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_margin="1dp">
<ImageView
android:scaleType="fitXY"
android:id="#+id/movies_item"
android:layout_width="match_parent"
android:layout_height="180dp"/>
</LinearLayout>

How to make an Android view containing an embedded RecyclerView to scroll as a single piece?

I have this piece of layout or Android which is problematic:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="#+id/influencerMainPhotoImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"/>
<android.support.v7.widget.RecyclerView
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/photos_list"
android:name="com.company.android.InfluencerFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_weight="1"
app:layoutManager="LinearLayoutManager"
tools:context="com.company.android.InfluencerFragment"
tools:listitem="#layout/fragment_photo"/>
</LinearLayout>
The problem is that the embedded RecyclerView is doing nested scrolling (ie. it scrolls within itself) - I don't want this.
I'd like to the entire screen to scroll as a single piece.
I tried to set "view.setNestedScrollingEnabled(false);" (on the LinearLayout view) but it says it works only for API 21 and above. My project is set to min API 15.
What can I do to make the entire screen scroll as a single piece?
You can replace View with ViewCompat(v4 compat lib):
https://developer.android.com/reference/android/support/v4/view/ViewCompat.html
where you have the setNestedScrollingEnabled(boolean); method.

Android UI Resizing because of keyboard?

I'm developing a chat application. Recently I changed the Chat, Activity (no lag) to Fragment (so many lag when resizing) because I wanted to build a flexible UI but now there is my problem : When the keyboard show up or disappear the UI resizing is very laggy.
I tried to changed adjustpan and other inside the manifest -> not working
When I remove the recyclerview from de chat -> it works, no lag when the keyboard show up.
So I guess the problem is here (I'm not sure),
I noticed this error RecyclerView: No adapter attached; skipping layout
I tried to fix it with other post on stackoverflow but no success. The error also appears when I scroll the recyclerview or when the keyboard appears.
When I have lot of messages inside my adapter it's very laggy when the view is resizing.
About the architecture
The MainActivity have one container.
the container can contain fragments : FamilyFragment, SettingFragment, RootChatFragment
RootChatFragment -> building flexible UI (Contact Fragment and ChatFragment) or just Contact Fragment if it's mobile view
Can someone help me ? (sorry for my bad english)
Here a screenshot when I close the keyboard.
UPDATED, FIXED
Using android:layout_weight="value" was the problem but I don't know why.
Old one
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="20dp"
android:fillViewport="true">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment android:name="com.myapp.fragments.SpaceContact"
android:id="#+id/contact_fragment"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent" />
<fragment android:name="com.myapp.fragments.SpaceChat"
android:id="#+id/chat_fragment"
android:layout_weight="2"
android:layout_width="0dp"
android:layout_height="match_parent" />
</LinearLayout>
</RelativeLayout>
New one without lag
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="20dp"
android:fillViewport="true">
<RelativeLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment android:name="com.myapp.fragments.SpaceContact"
android:id="#+id/contact_fragment"
android:layout_width="350dp"
android:layout_height="match_parent" />
<fragment android:name="com.myapp.fragments.SpaceChat"
android:id="#+id/chat_fragment"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toRightOf="#+id/contact_fragment"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
</RelativeLayout>

Sony SmartWatch - show a view over the Gallery on the

While playing around with the Gallery I've got another question (this probably should be simpler).
I'm trying to show a view, lying in front of the Gallery, probably hiding it partially. Like a message dialog (Toast).
In order to do so, I'm using a FrameLayout with a Gallery in the back, and ImageView with a transparent src in the front. When a dialog should be shown, I'm setting the src to the needed drawable through "sendImage".
The problem is, as I assume, that the gallery/list items (that are added dynamically upon "onRequestListItem -> sendListItem") have more recent z-Order (as they have been added later), so the dialog is shown between the background of the Gallery and the transparent icons, representing the list items.
Maybe someone will have an idea, how to avoid this situation?
I am not aware of any way of adding views manually to the layout on the SmartWatch, or changing their zOrder through "bringToFront".
Here is the source code:
gallery.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Gallery
android:id="#+id/gallery"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ImageView
android:id="#+id/toast"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/toast_dialog_message" />
</FrameLayout>
gallery_item.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/item_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="20px"
android:src="#drawable/item_icon" />
</RelativeLayout>
GalleryControlExtension.java
sendImage(R.id.spritz_image, drawableResourceId);
P.S. In the emulator it works as expected: toast lies over the item_icon ...

Categories

Resources