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>
Related
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()
my friends
I am a new in android and I wanted to do an example (code) like the picture
GridView - Images,Text and ItemClick
Thanks to all
You are looking for RecyclerView. Create a layout and add recyclerView to it then create another layout file for the rows of the recyclerview as below:
<RelativeLayout
android:id="#+id/relativeLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
Create another layout row_layout.xml
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"/>
</RelativeLayout>
Then in your MainActivity, add following lines of code:
RecyclerView recyclerView = findViewById(R.id.recyclerView);
recyclerView.setHasFixedSize(true);
RecyclerView.LayoutManager gridLayoutManager = new GridLayoutManager(this, 2, false);
recyclerView.setLayoutManager(gridLayoutManager);
After this, create an Adapter according to your specific need for the recyclerView which can be found with a quick google search. Just remmeber to infalte your row_layout in the adapter's onCreateViewHolder. After creating the adapter just set it to your recyclerView.
recyclerView.setAdapter(your_custom_adapter);
This is just a gist of what you ought to do. It'll get you started in the right direction. The rest is just a search away.
I am developing an Android app. I am not good in Android development. In my app, I am using RecyclerView and CardView with StaggeredGridLayoutManager. Because I want each cell size in the list different to each other and staggered like in below image.
But when I run my app, cells are not staggered and they are equal in size to each other.
This is screenshot
This is my recycler view XML
<android.support.v7.widget.RecyclerView
android:id="#+id/df_rv_destination"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
This is XML for cell item
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/di_iv_image"
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:textSize="17dp"
android:textColor="#color/white"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:id="#+id/di_tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
</android.support.v7.widget.CardView>
This is how I configure my RecyclerView with StaggerGridLayoutManager
StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(2, 1);
rcDestinations.setLayoutManager(staggeredGridLayoutManager);
rcDestinations.setItemAnimator(new DefaultItemAnimator());
regionsList = new ArrayList<Region>();
destinationsAdapter = new DestinationsAdapter(getActivity(),regionsList);
rcDestinations.setAdapter(destinationsAdapter);
So why is my RecyclerView not staggered? How can I fix it?
set your imageview with android:adjustViewBounds="true"
Your cell items all got the same size because there is nothing that would change size... I guess you want to get bigger items if you got bigger pics
First of all change this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
to this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
then instead of:
<ImageView
android:id="#+id/di_iv_image"
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
try:
<ImageView
android:id="#+id/di_iv_image"
android:scaleType="center"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
and scale the images height to your wished size before adding them ;)
with cropCenter you always get the images cropped to the same size
666
You need to force height resizing to have the effect you wanted.
I am using data binding so, a set the height like this:
public int getHeight(int position) {
Random r = new Random();
int randomHeight = r.nextInt(Math.abs(mRecyclerViewHeight)/9) + Math.abs(mRecyclerViewHeight)/4;
if(position%2 == 0){
randomHeight += Math.abs(mRecyclerViewHeight)/9;
}
return randomHeight;
}
#Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
((DiscoveryViewHolder) holder).bindRepository(mPostList.get(position), getHeight(position));
holder).bindRepository(mPostList.get(position));
}
I'm trying to make simple GridLayout with 3 columns but although I get 3 columns I get strange gap between rows. So, I get 3 images in row than one row that is empty (which it seems has height matching height of the row abov(that has images), then row of 3 images, than strange gap...etc. I expected not to get than blank gap. How to remove this blank gap? Trying to set wrap_content to layout_height on recycler view, and fragment didn't helped.
This is my code:
final GridLayoutManager layoutManager = new GridLayoutManager(this,3);
layoutManager.setOrientation(LinearLayoutManager.VERTICAL);
recyclerView.setLayoutManager(layoutManager);
recyclerView.setAdapter(adapter);
This is xml of the activity:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context="com.adriagate.adriagateonlineandroid.activities.ImagesActivity">
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:id="#+id/fragmentImagesHeader"
android:name="com.adriagate.adriagateonlineandroid.fragments.ImagesHeader"
tools:layout="#layout/fragment_images_header" android:layout_width="match_parent"
android:layout_height="match_parent" >
</fragment>
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:id="#+id/fragmentImagesGrid"
android:name="com.adriagate.adriagateonlineandroid.fragments.ImagesList"
tools:layout="#layout/fragment_images_list" android:layout_width="match_parent"
android:layout_height="wrap_content" >
</fragment>
</RelativeLayout>
Notice that this layout has an important fragment called fragmentImagesGrid which has this layout:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.adriagate.adriagateonlineandroid.fragments.ImagesList">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view_images"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:listitem="#layout/recycler_view_images_one_row"
>
</FrameLayout>
This i the layout of the one element inside recycler view:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:tools="http://schemas.android.com/tools"
>
<ImageView
android:id="#+id/imageViewImagesAllOneRow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
tools:src="#drawable/slika_200_200"
/>
</FrameLayout>
Looks like it happens because your images have different sizes.
Change your item to LinearLayout and set its layout height and width to match_parent. Set gravity="center" (Of the linear layout).
Another issue is android:layout_height="wrap_content". The RecyclerView doesn't work well when you set the height property to wrap_content. If you still want to use RecyclerView with wrap_content, you can ckeck this solution
I have requirement like play store app where there is view pager with images and videos
and scroll to view details .Unfortunately when user scrolls the scroll is jumpy but if i remove the scrollview the view pager works perfectly fine .
The layout look and feel is something like this
http://cl.ly/MBRB
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" android:fillViewport="true">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="160dp"
android:background="#drawable/loading_image"
android:gravity="top"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="#+id/product_image_pager"
android:layout_width="fill_parent"
android:layout_height="match_parent" />
<com.viewpagerindicator.CirclePageIndicator
android:id="#+id/titles"
style="#style/CirclePageIndicator"
android:layout_alignParentBottom="true"
android:padding="10dip"
android:paddingBottom="10dp" />
</RelativeLayout>
<include layout="#layout/app_screen_menu" />
</LinearLayout>
</ScrollView>
Btw i am loading images from server .
Thanks
You are using 2 scrollisteners
A viewpager uses a scrolllistener
A scrollview uses a scrolllistener
These two scrollistener are fighting for the ScrollEvent.
You can solve this by implementing onInterceptTouch. In this method you can decide who wins the fight over the ScrollEvent
Take a look at this protected post regarding a similair issue containing 2 scrollviews