ImageView edges get cut off while rotating in GridView - android

I'm making memory game in Android.
I decided to use GridView with adapter, which inflates image inside every of cell.
Problem is that images in first row get cut of while 3D rotating around y axis,
like this:
This does not happen with images in last row.
Only way I managed to avoid this behaviour was to increase padding for each image, but that changes by layout too much. I also tried adding top padding and/or margin to GridView, but that did not help.
Is there any way to make images in first rotate without this issue?
Here is my layout code:
<?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"
android:background="#color/colorPrimary"
tools:context="com.example.alen.matchinggameaddiko.activities.GameActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="150dp"
android:layout_height="0px"
android:layout_marginLeft="26dp"
android:layout_marginTop="0dp"
android:src="#drawable/addiko_logo_white"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<GridView
android:id="#+id/grid_game"
android:layout_width="0px"
android:layout_height="0px"
android:layout_marginBottom="10dp"
android:layout_marginEnd="#dimen/gridImagesMarginLeft"
android:layout_marginStart="#dimen/gridImagesMarginRight"
android:numColumns="4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
</android.support.constraint.ConstraintLayout>
Thanks!

Have you tried ViewGroup.setClipChildren(false)? The rotation looks like it's leaving the ViewGroup's bounds.

In a RecyclerView that I had the same issue, what worked was adding android:clipChildren="false" in the RecyclerView and android:clipToPadding="false" in the root layout of the adapter of the RecyclerView.

Related

Align two views in opposites sides (one at the top and one at the bottom) and be able to push the bottom view when the top view grows?

I basically have an EditText aligned at the top of the view and there's a RecyclerView on the bottom of the view that can also grow (with the newest item on the bottom)
That's easily doable with a constraint layout but my problem is that when the EditText grows it should start pushing down the list. But the list was initially aligned at the bottom of the parent. (and everything should be scrollable)
I hope this image makes things more clear
The trick here is to avoid forming a vertical chain (so that the EditText at the top always stays in place) and also to leverage the app:layout_constrainedHeight attribute on the RecyclerView in order to make it shrink when the EditText grows.
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="#+id/text"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/list"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/text"
app:layout_constraintVertical_bias="1"/>
</androidx.constraintlayout.widget.ConstraintLayout>
The combination of android:layout_height="wrap_content" and app:layout_constrainedHeight="true", along with both top and bottom constraints, means that the RecyclerView will always be only as tall as its items or the available space below the EditText, whichever is smaller.
The app:layout_constraintVertical_bias="1" attribute ensures that, when the list doesn't fill the screen, it sits at the bottom.
I would add to the previous answer and if you want to be able to scroll your layout you can use sth like this:
<androidx.core.widget.NestedScrollView 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="match_parent"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent" />
<androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/edit_text"
app:layout_constraintVertical_bias="1.0" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
This will make everything align as you want to and you are able to scroll down to see your full recyclerView. NestedScrollView will make sure that everything runs smoothly.

Android wrap_content not working on recyclerview

I have a very simple RecyclerView that loads data from a Firestore database. There are no issues with the code to get the data but the RecyclerView does not show anything when I set the view holder to wrap_content. However it does load the data when I set it to match_parent. I have tried using
firestoreRecycler.setHasFixedSize(true)
but it doesnt do anything, the data is just not shown at all when I use wrap_content and using match_parent makes it so that i have to scroll a lot to see a single item.
Here is the code for the RecyclerView row layout
<?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"
android:padding="15dp">
<TextView
android:id="#+id/listOfficeName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/listOfficeAddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/listOfficeName" />
</androidx.constraintlayout.widget.ConstraintLayout>
There is nothing relevant about the rest, there is functionality only for the RecyclerView that I got from a tutorial in which wrap_content actually worked.
Thanks in advance!
The distance of the recyclerview used in ConstraintLayout as a view is disabled because it does not fit the logic of ConstraintLayout. So edit the height value of recyclerview as follows:
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="0dp" />
height = 0dp

Drag drop views in constraintlayout move views to top left corner

I am new to constrain layout and after reading documentations i know that view must have 1 horizontal and 1 vertical coordinates but whenever i drag a new view into design it move to 0,0 coordinates
My XML
<?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">
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="181dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#tools:sample/avatars" />
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="#+id/imageView3"
app:layout_constraintEnd_toEndOf="#+id/imageView3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_add_friend" />
</androidx.constraintlayout.widget.ConstraintLayout>
I already set views vertical and horizontal constrain but it still hangs at the top left also tried with vertical and horizontal bias but views sticks to top left.Please help
I also checked this and this but not working for me.
It happens sometimes if we move around commits. For me it's mostly build related issue. Building the project or make project would fix this issue.

How can I make a recyclerView to take up to half the screen(max) in android constraint layout?

I have a screen that contains 2 views, a map(top) and a recycler(bottom)
The rules are simple .
the recycler view is allowed to extend up to the middle of the screen, if more space is needed then it should scroll instead, the map will occupy the rest of the space, Of course if the recycler has less elements then it should shrink leaving more space for the map ..
I am trying to achieve this using constraint layout, also I am trying to avoid solutions that involved calculations .
Check image below for more information on what I am trying to achieve :
Here is my code
<?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"
android:background="#color/white"
tools:context="com.qmic.itraffic.ui.activities.crowdsourcing.CrowdSourceReportingDetailsActivity">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/halfScreenGuideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/categories"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:background="#color/manatee"
/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/categories"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:clipToPadding="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/halfScreenGuideline" />
</androidx.constraintlayout.widget.ConstraintLayout>
My Question is can I achieve this behaviour using xml only (constraint layout )?or I would need to do calculation ?
Could you please try the following code in your recyclerview xml
android:layout_height="wrap_content"
app:layout_constrainedHeight="true"
Change the height to wrap content and add the second the line. This way the recyclerview should have the height same as its content but never exceeds the guideline/contraint.
The answer by Akhil Soman is correct but missing one thing
app:layout_constraintVertical_bias="1.0"
Without it the RecyclerView was floating above the bottom of the screen leaving an empty space .
for reference here is the complete answer
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/categories"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="0dp"
android:layout_marginBottom="0dp"
android:clipToPadding="false"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/halfScreenGuideline"
app:layout_constraintVertical_bias="1.0" />
Also the suggestion by the Jaymin seems interesting and can fix this problem, but I haven't applied it because I already used Akil solution .

Make GridView fit its container/constraints

I'm making small android memory game.
I've been troubling for a few hours with this issue, regarding GridView inside constraint layout. I'd want it to fit its constraints, without need to scroll.
Is there any way to make the GridView completely fit inside the container, so the horizontal axis is going to be exact? Bottom edge should match #+id/text_time top edge. Internet and Stackoverflow are full of these examples, but for a ImageView.ScaleType.
Below is a short layout code:
<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"
android:background="#color/colorPrimary"
tools:context="com.example.alen.matchinggameaddiko.activities.GameActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="#dimen/gameLogoSize"
android:layout_height="0px"
android:layout_marginLeft="#dimen/gameLogoMarginLeft"
android:layout_marginTop="#dimen/gameLogoMarginTop"
android:src="#drawable/addiko_logo_white"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<GridView
android:id="#+id/grid_game"
android:layout_width="0px"
android:layout_height="0px"
android:layout_marginBottom="10dp"
android:layout_marginTop="#dimen/gameGridMarginTop"
android:gravity="center"
android:horizontalSpacing="#dimen/gameGridHorizontalSpacing"
android:numColumns="4"
android:verticalSpacing="#dimen/gameGridVerticalSpacing"
app:layout_constraintBottom_toTopOf="#id/text_time"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<TextView
android:id="#+id/text_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/timerMarginBottom"
android:layout_marginRight="#dimen/timerMarginRight"
android:textColor="#color/colorText"
android:textSize="#dimen/timerTextSize"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
Here is a photo. I draw a red line, so it's more clear where the GridView should end.
Thanks a lot guys.
I've seen your Layout.xml Try to set your GridView, Match_Parent in Both Width and Height. set constraintEnd_toEndOf and toStartof and toTopof and etc on "parent" For the GridView.
Then set those Textview and ImageView to be Aligned with the GridView.
What you've done is to set ImageView and TextView first then you Aligned GridView with them, What I'm Suggesting is Set your GridView to be Matched with Parent, Then put anything else Aligned with the GridView.
Also You must check if XML is not giving you any Warning for Height of the GridView. You may have to Set GridView Height to WRAP_PARENT. Just Check

Categories

Resources