Android Grid Layout Manager not centering elements - android

I have the following recycler view inside a Constraint Layout (very simple)
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".activities.PokemonFavoritesActivity"
tools:showIn="#layout/activity_pokemon_favorites">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_pokemon_favorites"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="2dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
And here is the method where I initialize the Recycler View:
private void initializeRecyclerViewComponents() {
favoritesRecyclerView = findViewById(R.id.rv_pokemon_favorites);
layoutManager = new GridLayoutManager(this, 4);
favoritesRecyclerView.setLayoutManager(layoutManager);
pokemonFavoritesAdapter = new PokemonFavoritesAdapter(this, favoritePokemon);
pokemonFavoritesAdapter.setClickListener(this);
favoritesRecyclerView.setAdapter(pokemonFavoritesAdapter);
}
And here is the item_layout:
<?xml version="1.0" encoding="utf-8"?>
<com.mikhaellopez.circularimageview.CircularImageView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/civ_pokemon_favorite"
android:layout_width="100dp"
android:layout_height="100dp" />
However , as you can see in the image , the view is not "centered" (there is a lot of extra margin at the end of each row in comparison to the start)
How can I do to center the 4 columns in order to have the same start and end spacing ?

Try wrapping your item view in a linearlayout and center the image in this. That should fix it.

Related

Limit android SimpleExoPlayerView height to control buttons

How to limit the height of SimpleExoPlayerView to take only the height of control buttons instead of taking all the screen height?
Here is the layout of my activity :
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<com.google.android.exoplayer2.ui.SimpleExoPlayerView
android:id="#+id/player_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:show_timeout="0"
app:hide_on_touch="false"
app:layout_constraintBottom_toBottomOf="parent"/>
</android.support.constraint.ConstraintLayout>
The result is this :
And I would like something like this without having to manually set SimpleExoPlayerView height in dp:
I managed to do want I needed to do by overriding layout file exo_simple_player_view.xml and keep only the part that contains controls. I have created the layout file in res/layout/exo_simple_player_view.xml (the name must not be changed).
exo_simple_player_view.xml
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<View android:id="#id/exo_controller_placeholder"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</merge>
you can get the controller_view Height and set it to SimpleExoPlayerView height
playerView.exo_player_control.post {
playerView.layoutParams.height = playerView.exo_player_control.height
podcastFragmentBinding.playerView.requestLayout()
}

Adjust Items inside recycler view + orientation changes

I have this problem - I guess someone can surely put light on what the heck is going wrong here...
My overall flow goes like this - Activity(#+id/activity) shows a fragment(#+id/image_container) from screen bottom when a button is tapped(keyboard closes if present and fragment shown sliding upwards from bottom), this fragment shows a viewpager with page indicator in linear layout, viewpager shows another fragment which contains recycler view with horizontal gridlayoutmanager. This recycler view contains various imageview and i need to arrange them keeping my rows fixed say 3 but columns can be variable based on screen width and density. Imageview has fixed height and width.
This is my activity layout
<?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:id="#+id/activity">
<include
layout="#layout/toolbar"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_alignParentTop="true" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="4dp"
android:id="#+id/divider"
android:layout_below="#+id/toolbar"/>
<include
layout="#layout/edit_bar"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_below="#+id/divider"/>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/edit_bar" />
<FrameLayout
android:id="#+id/image_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/container"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
// Fragment inside the image_container
<?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:weightSum="1">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="12dp"
android:layout_weight=".9"/>
<LinearLayout
android:id="#+id/sliderDots"
android:layout_width="match_parent"
android:layout_height="0dp"
android:gravity="center_vertical|center_horizontal"
android:orientation="horizontal"
android:layout_weight=".1"/>
// Fragment inside viewpager
<?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.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="26dp"
android:paddingRight="26dp">
</android.support.v7.widget.RecyclerView>
</LinearLayout>
// Item inside recycler view
<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/imageView"
android:layout_width="48dp"
android:layout_height="48dp"
tools:visibility="visible"
android:layout_margin="6dp"/>
// Fragment code which gets added to image_container upon button tap
FragmentManager fm = activity.getSupportFragmentManager();
FragmentTransaction fragmentTransaction = fm.beginTransaction();
fragmentTransaction.setCustomAnimations(R.anim.view_transition_up_from_bottom, R.anim.view_transition_down_to_bottom);
fragmentTransaction.add(R.id.image_container, new ImageFragment(activity.getApplicationContext())).commit();
Inside this ImageFragment i calculate the rows(this is fixed let's say 3) and columns(Math.round((dpWidth - 52) / 60)) - 52(26*2 - for both side of recycler view, 60 - space occupied my 1 item including width and margin(L+R)), hence i know the images to be shown in each page and pass it to ImageViewFragment containing the recycler view which is used by adapter.
I use
recyclerView.setLayoutManager(new CustomGridLayoutManager(getActivity(), 3, CustomGridLayoutManager.HORIZONTAL, false));
to make my recycler view and hence i use fixed rows.
So my question is -
1. I wrote the code to keep my rows fixed and calculate columns based on screen width but sometimes i see too much spacing from right side of recycler view to screen edge, i kept it fixed with 26 dp but it shows more that that. How can i implement this type of functionality where i see uniform spacing in grid form??
2. How to handle orientation change when grid fragment is open, my activity is not redrawn. as i see i can only override onConfigurationChanged.

Android Studio - How to inflate an xml layout containing a view that use percentage params

I am here because I would like to use multiple times the same cardView layout, changing simply some information contained in it and then adding it to a view contained in the main xml layout.
The problem is that the view to which append the created cardViews is a PercentRelativeLayout, so I need to specify cardView's xml layout using Percent params.
I show you an example of what I tried (with no success) to make it a bit more clear.
main_layout.xml
<ScrollView
android:id="#+id/scrollview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/textview"
percent:layout_heightPercent="85%"
percent:layout_marginTopPercent="0.5%">
<android.support.percent.PercentRelativeLayout
android:id="#+id/scrollview_prl"
android:layout_width="match_parent"
android:layout_height="match_parent">
...here I want to add views programmatically...
</android.support.percent.PercentRelativeLayout>
...
cardView_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:percent="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_width="match_parent"
percent:layout_heightPercent="65%"
percent:layout_marginTopPercent="2%"
percent:layout_marginLeftPercent="2%"
percent:layout_marginRightPercent="2%"
card_view:cardCornerRadius="2dp"
card_view:cardElevation="4dp">
</android.support.v7.widget.CardView>
Then, this is the piece of Java code I wrote (in a fragment, but this does not matter now)
myfragment.java
...
CardView cv = (CardView)
LayoutInflater.from(getActivity()).inflate(R.layout.cardView_layout, null)
cv.setId(currentId++);
PercentRelativeLayout prl = (PercentRelativeLayout)
view.findViewById(R.id.scrollview_prl);
prl.addView(cv);
...
As you can see I simply keep a currentId variable to assign different ids to the cardviews I am going to create.
Clearly, these cardviews must be one below the other, and I do not even know how to add this other param to them programmatically.
The final layout I would like to obtain is something like this:
<ScrollView
android:id="#+id/scrollview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/textview"
percent:layout_heightPercent="85%"
percent:layout_marginTopPercent="0.5%">
<android.support.percent.PercentRelativeLayout
android:id="#+id/scrollview_prl"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
xmlns:percent="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#id/firstcardview"
android:layout_width="match_parent"
percent:layout_heightPercent="65%"
percent:layout_marginTopPercent="2%"
percent:layout_marginLeftPercent="2%"
percent:layout_marginRightPercent="2%"
card_view:cardCornerRadius="2dp"
card_view:cardElevation="4dp">
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
xmlns:percent="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#id/secondcardview"
android:layout_width="match_parent"
percent:layout_heightPercent="65%"
percent:layout_marginTopPercent="2%"
percent:layout_marginLeftPercent="2%"
percent:layout_marginRightPercent="2%"
card_view:cardCornerRadius="2dp"
card_view:cardElevation="4dp">
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
xmlns:percent="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#id/thirdcardview"
android:layout_width="match_parent"
percent:layout_heightPercent="65%"
percent:layout_marginTopPercent="2%"
percent:layout_marginLeftPercent="2%"
percent:layout_marginRightPercent="2%"
card_view:cardCornerRadius="2dp"
card_view:cardElevation="4dp">
</android.support.v7.widget.CardView>
....
</android.support.percent.PercentRelativeLayout>
...
Thanks in advance for your help.
The problem is in your inflate() call. You have to pass a parent value in order for the inflated view's LayoutParams to be interpreted correctly.
Try this instead:
CardView cv = (CardView) LayoutInflater.from(getActivity()).inflate(R.layout.cardView_layout, prl, false);
By passing prl (the PercentRelativeLayout) to inflate(), everything should work.

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>

GridLayoutManager 3 columns in RecyclerView

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

Categories

Resources