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.
I am trying to use a gridView for a game with different board sizes. I sets the number of columns programmatically for the GridView, each column got an fixed size button inside it.The GridView width is set to "wrap_content" in the xml. However - The gridView is always spread as "match_parent" to the entire screen. Here hows it look:
This is mine GridView xml (It in a constrain layout). I already tried to add weight or wrap it with linear layout. I added : android:gravity="center" and
android:layout_centerInParent="true"
In addition I tried changing the stretchMode but it just got the columns to be with a huge spacing between each other, or got them to be rectangle when I really want to keep them squre.
<GridView
android:id="#+id/gridView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginBottom="24dp"
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
android:layout_marginTop="32dp"
android:layout_weight="0.5"
android:columnWidth="64dp"
android:gravity="center"
android:layout_centerInParent="true"
android:horizontalSpacing="2dp"
android:stretchMode="none"
android:verticalSpacing="4dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView2"></GridView>
I couldn't find any working solution online,
Hope you can help, Thanks !
Im using com.android.support:recyclerview-v7:23.2.1 and with that version it should be possible to use WRAP_CONTENT on a RecyclerView height. I for now have the following layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:importantForAccessibility="no">
<android.support.v7.widget.RecyclerView
android:id="#+id/message_list_row_parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/message_list_message_divider"
android:layout_alignParentTop="true"
android:clipToPadding="false"
android:divider="#null"
android:importantForAccessibility="no"
android:listSelector="#android:color/transparent"
android:padding="10dp"
android:textColor="#color/textcolorprimary" />
<View
android:id="#+id/message_list_message_divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_above="#+id/message_list_layout_message"
android:layout_gravity="center"
android:background="#android:color/darker_gray"
android:importantForAccessibility="no" />
<RelativeLayout
android:id="#+id/message_list_layout_message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:importantForAccessibility="no"
android:orientation="horizontal">
<EditText
android:id="#+id/message_list_edittext_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_marginEnd="10dp"
android:layout_toStartOf="#+id/message_list_button_send"
android:background="#color/transparent"
android:hint="#string/message_input"
android:inputType="textMultiLine"
android:maxLines="10"
android:minLines="3"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:textColor="#color/primaryColor"
android:textSize="16sp" />
<ImageButton
android:id="#+id/message_list_button_send"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:background="#null"
android:contentDescription="#string/content_description_image_send"
android:gravity="center"
android:scaleType="fitXY"
android:src="#drawable/custom_button_send" />
</RelativeLayout>
</RelativeLayout>
The Preview in Android Studio is showing the correct layout with the RecyclerView above the dummy line View i inserted. I need this kind of layout because the RelativeLayout with the EditText inside can grow in height (if there are mor than 3 lines the EditText is growing in height and also the RelativeLayout).
When i install it on my Phone there is a problem. The RecylcerView is not above the view i defined. it is filling the complete height of the device. so the last row of my recylcerview is always behind the relative layout.
Why that? And how can i fix it? I need the RecyclerView to stay ALWAYS above the my divider and to shrink in height when relativelayout is growing in height.
Edit I want to provide some screenshots to show you the problem. The first Screenshot shows my Chat with the current layout:
But there is missing one item because the scroll height is bigger than defined by the layout. The missing item you can see here after i scrolled down:
When i now (just to find the source of the problem) remove alignParentTop from the RecyclerView and set its height to 300dp, the change of the height gets correctly respected:
But as you can see several items are missing now because they are hiding out of the field of view (yes... even when i programmatically scroll to bottom after initialization). To show that all elements are there:
So the height gets correctly set... but the last elements arent showing up until i manually scroll down. programmatically scrolling does not have an effect.
Add this to the RelativeLayout with EditText inside it layout_below="#+id/message_list_message_divider". And remove the layout_above on the divider
I fixed a similar problem with placing the element you want ti have on top as last child of the parent layout or try putting android:translationZ="1dp" into the recyclerview.
How to show a vertical line on the background, such as the one highlighted in blue on the image below?
In this example, I have a ListView with ImageView elements (and TextView, but it is not related to the line), and I want a vertical line on the background of these items to feel like they are "connected" to each one.
And also, note that the vertical line does not fill all the background.
The vertical line is on the left, and it is not equal for the all cases. Sometimes it fills all the row height (in most of ListView rows) and sometimes it just fills the half of row height (in the last item of the ListView and outside of the ListView, on the top, where we can see the big ImageView with the star icon).
Updated
I tried the suggestion proposed by Hellboy, and it almost work perfectly. I modified the proposed code for my case:
<RelativeLayout
android:layout_width="40dp"
android:layout_height="match_parent"
android:gravity="center"
android:layout_marginLeft="15dp">
<View
android:layout_width="4dp"
android:layout_height="match_parent"
android:background="#3399CC"
android:gravity="center"
android:layout_centerHorizontal="true"/>
<ImageView
android:id="#+id/user_image"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:gravity="center"
android:background="#android:color/holo_blue_light" >
</ImageView>
</RelativeLayout>
the RelativeLayout with the width="40dp" (the same as the original ImageView I was working with), height="match_parent (the same as he said), gravity="center" (to let them in the center of the row height) and layout_marginLeft="15dp" (to let a space to the left margin). In the ImageView, I added marginTop="10dp" and marginBottom="10dp", and with it, the blue vertical line appears. But I have other elements in the same row, so I have a parent layout (a linear layout). My parent layout is:
<?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:orientation="horizontal"
android:gravity="center"
android:id="#+id/linearlayoutservicerow">
So, this parent layout above, has the described RelativeLayout and other LinearLayout with the other row elements. But the code results in flattened images. Why does this happen?! It seems like the RelativeLayout consider its height as the ImageView height (40dp) and does consider its marginTop and marginBottom, and with this the image is flattened.
Waiting more answers to this problem. I'll try another alternatives.
You can replace your ImageView with something like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="4dp"
android:layout_height="match_parent"
android:background="#color/navy_blue"
android:layout_centerHorizontal="true"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/image"/>
</RelativeLayout>
and of course in your first and last element you need to manipulate the height of the View and align it to Top or Bottom
I got it.
I've persisted in trying to fix the problem of the Updated section of my question (based on the solution initially proposed by #Hellboy) and I got results! So, how I achieved an answer to my own question, I decided to put as an answer.
The first step was to configure the XML file such as the code below.
Part of the final XML corresponding to the row layout:
<?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:orientation="horizontal"
android:gravity="center"
android:id="#+id/linearlayoutservicerow">
<RelativeLayout
android:layout_width="40dp"
android:layout_height="match_parent"
android:gravity="center"
android:layout_marginLeft="15dp">
<View
android:layout_width="4dp"
android:id="#+id/verticallineview"
android:layout_height="match_parent"
android:background="#3399CC"
android:gravity="center"
android:layout_centerHorizontal="true"/>
<RelativeLayout
android:layout_width="40dp"
android:layout_height="match_parent"
android:gravity="center"
android:paddingBottom="10dp"
android:paddingTop="10dp">
<ImageView
android:id="#+id/user_image"
android:layout_width="40dp"
android:layout_height="40dp"
android:gravity="center"
android:background="#android:color/holo_blue_light" >
</ImageView>
</RelativeLayout>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/layoutotherrowelements">
</LinearLayout>
</LinearLayout>
Explaining the XML:
Here we have the parent layout (linearlayoutservicerow) and inside it: a RelativeLayout (proposed by #HellBoym, with the structured discussed in the final of my question) and the LinearLayout to other elements of the row (layoutotherrowelements). Summarizing... What I modified?
The initial code resulted in flattened images because the RelativeLayout (parent) did not consider the ImageView marginTop and marginBottom, so the image was flattened vertically. (And if we let without margin, the RelativeLayout would mantain the same size and the vertical line would not appear on the top and on the bottom of image.) We must have a space between the ImageView and the RelativeLayout initially proposed, in order to show the line, but if it does not recognize the margin, how to create this space?
I just "encapsulated" the ImageView in another RelativeLayout (inside that parent RelativeLayout), and changed the margin parameters of the ImageView to padding parameters of this capsule RelativeLayout.
The problem of the last row
It results in the layout with a line background, but we still have the problem of the last row. In fact, this row is different, and in this case, it must have its height modified to not have the same parent's height. I decided to put at least, the ImageView's height and it worked! Remember to convert the value in dp to pixel, because the function getLayoutParams has all parameters expressed in pixels.
So, in the Adapter, we put the following code:
if(position==(getCount()-1)){
View my_line = (View)
row.findViewById(R.id.verticallineview);
//40dp, this is the ImageView height
int dpsize = 40;
//convert the height in dp unit to pixel (because the parameter is in px)
int px = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpsize, context.getResources().getDisplayMetrics());
my_line.getLayoutParams().height = px;
}
And that is it!!!
It is worth mentioning that #dinesh sharma proposed other interesting alternative using 9-patch, that I will try later.
I did not want to use image as background (that is why I started asking about drawable), because my final goal was to improve this solution to make all dynamic (including the vertical line color), and I believe with image I could not achieve it. But in my original question I did not mention that, so if I have success with this other approach, I will accept it as correct answer.
Thanks for all your help! In my current solution I used the #Hellboy's clue of using a RelativeLayout and a View, and the #dinesh sharma's clue to verify if it is the last row of the ListView. I hope this answer and the others helps more people with similar problems.
You can use transparent 9-patch image as a background for you list view.
For creating nine-patch image please follow this:
http://developer.android.com/tools/help/draw9patch.html
Now verified answer
your image in item layout:
<RelativeLayout
android:id="#+id/rl"
android:layout_width="60dp"
android:layout_height="60dp"
android:background="#drawable/m"
android:paddingBottom="10dp"
android:paddingTop="10dp" >
<ImageView
android:id="#+id/grid_item_image"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerInParent="true"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
three bg nine patch images for drawable
Handling in Adapter:
if(position==0)
holder.rl.setBackgroundResource(R.drawable.b);
if(position==(getCount()-1))
holder.rl.setBackgroundResource(R.drawable.t);
Finaly got output:
I'm trying to achieve the layout on the right of the image below. What I am currently getting is on the left.
Here is my layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ImageView
android:id="#+id/garment_grid_item_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/gridview_image_placeholder"
android:contentDescription="#string/blank"
android:scaleType="centerCrop"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/garment_grid_item_on_loan"
android:src="#drawable/icon_borrowed"
android:contentDescription="#string/blank"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:visibility="gone"
/>
<View
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/item_border"
/>
</RelativeLayout>
#drawable/item_border (lime green is just to highlight the transparent areas):
The RelativeLayout is used as an item template for a GridView. garment_grid_item_image is being populated in code. garment_grid_item_on_loan is the purple triangle in the top right whose visibility is controlled in code.
The View at the bottom uses a 9 patch and it is the one I'm having trouble with. I want it to be as tall as the parent RelativeLayout but neither match_parent or fill_parent work. What can I do to get it to work?
I've just tried your layout with some similar images and it works fine when set as the root element in an Activity.
It could be to do with your RelativeLayout having wrap_content as its size, with the child Views not specifying a size to wrap. Try specifying a fixed size just to see if the problem goes away, then go from there.