I would like to know if there is a max height of RecycleView rows. I created a simple RecycleView.Adapter which row layout does not fit in. It gets chopped and new row starts. I do not use fixed height or width anywhere so it should expand as much as layout requires, unless there is a maximum of row height in RecycleView? I will be able to post some code later.
For the sake of argument, I left only this code to inflate (as you can see for testing purpose I set android:layout_height="100000dp"):
<RelativeLayout
android:id="#+id/feed_photo_user_container"
android:layout_width="match_parent"
android:layout_height="100000dp"
android:background="#color/WHITE">
<com.github.siyamed.shapeimageview.CircularImageView
android:id="#+id/feed_photo_user_image"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginBottom="15dp"
android:layout_marginLeft="15dp"
android:layout_marginTop="15dp"
android:src="#drawable/user_icon" />
<TextView
android:id="#+id/feed_photo_user_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/feed_photo_user_image"
android:layout_alignTop="#id/feed_photo_user_image"
android:layout_marginLeft="8dp"
android:layout_toEndOf="#id/feed_photo_user_image"
android:layout_toRightOf="#id/feed_photo_user_image"
android:gravity="center"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:scaleType="fitXY"
android:src="#drawable/seperator_line" />
</RelativeLayout>
And the result is the same, RecycleView somehow limits my row height.
As you can see it can expand till some maximum height
They key point was to change layout height from MACH_PARENT to wrap_content. All good now.
Related
I want the width of the cell to change depending on the length of the inner text.
Currently, width = 160dp is fixed, but
If I put wrapcontent
As you can see, each cell is set according to the length of the data, even if they correspond to the same column.
The number of rows can be changed, but the number of columns is 4.
I want to go through all data content in that column and set the width of that column to fit the longest text in that column.
RecyclerViewitem.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="160dp"
android:layout_height="match_parent"
android:text=""
android:padding="3dp"
android:id="#+id/tv_po"
android:textStyle="bold"
android:gravity="center" />
<TextView
android:layout_width="160dp"
android:layout_height="match_parent"
android:text=""
android:padding="3dp"
android:id="#+id/tv_qty"
android:textStyle="bold"
android:gravity="center" />
<TextView
android:layout_width="160dp"
android:layout_height="match_parent"
android:text=""
android:padding="3dp"
android:id="#+id/tv_material"
android:textStyle="bold"
android:gravity="center" />
<TextView
android:layout_width="350dp"
android:layout_height="match_parent"
android:text=""
android:padding="3dp"
android:id="#+id/tv_info"
android:textStyle="bold"
android:gravity="center" />
</LinearLayout>
</LinearLayout>
I'm not sure you're going to want to do that, the RV adapter loads one View at a time until the RecyclerView is full. Every time a bigger View gets loaded by the adapter all the existing Views would need to be redrawn. Then if the largest view gets removed from the screen you would need to refresh all the views to match the new existing view. This will use a lot of resources to continuously reload the images and could cause the app to freeze. But If you are really keen on setting this up check out the following question.
How to set textview height for the largest string in android recyclerview?
You can use Chips(Material Design) for your requirement.
https://material.io/components/chips/android#using-chips
I'm trying to create a message layout in a chat application.
This message layout should contain:
Message Textview in a rounded rectangle
Message status check icon ImageView within that same rectangle
Message send time TextView outside the rounded rectangle and to its right.
When text is short, the whole layout should align itself to the right.
When the text is long, message TextView is going to expand itself to the left and upon touching the left side of the screen, it expands to a new row.
The problem is: Rounded rectangle stretches to the whole screen regardless of the message being short or long although underlying FrameLayout width is set to wrap_content.
Here is an image of the problem:
The layout I am using is:
<RelativeLayout
android:id="#+id/outer_rl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="8dp"
android:paddingTop="8dp">
<TextView
android:id="#+id/text_message_time"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:textSize="10sp"
app:showDate="#{message.postedAt}" />
<RelativeLayout
android:id="#+id/bubble_ll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/text_message_time"
android:background="#drawable/rounded_rectangle_bubble_sent"
android:padding="8dp">
<ImageView
android:id="#+id/iv_check"
android:layout_width="12dp"
android:layout_height="12dp"
android:layout_alignParentRight="true"
android:layout_gravity="center_vertical"
android:layout_marginLeft="4dp"
app:setStatusPng="#{message.status}" />
<TextView
android:id="#+id/messagetext_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
android:layout_marginTop="2dp"
android:layout_toLeftOf="#id/iv_check"
android:singleLine="false"
android:text="#{message.messageText}"
android:textColor="#ffffff" />
</RelativeLayout>
</RelativeLayout>
The inner RelativeLayout named bubble_ll has its width equals wrap_content.
What I am expecting is:
text_message_time TextView should be attached to the right of the screen due to its layout_alignParentEnd property set true.
bubble_ll stands left of the text_message_time view, due to its layout_toLeftOf property set. And it should have a width of its contents.
I have tried other layouts such as Linear, ConstraintLayout etc.
The LinearLayout approach did not work, since the width is set to wrap_content for TextView always overlaps status info checks and message time make them disappear when the message in the TextView is long.
With ConstraintLayout I could not align bubble to stay still on the right. It stays on the center of the screen horizontally since it is constrained on both horizontal sides of the screen.
Any help will be appreciated.
I have come up with the following layout which is a combination of RelativeLayout and LinearLayout. I hope this serves your purpose. Please change the drawables and the ids if necessary.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/outer_rl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:padding="8dp">
<TextView
android:id="#+id/text_message_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/message_container"
android:layout_alignParentRight="true"
android:layout_margin="4dp"
android:text="10:30 am"
android:textSize="10sp" />
<LinearLayout
android:id="#+id/message_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_toLeftOf="#+id/text_message_time"
android:background="#android:color/holo_blue_dark"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="#+id/messagetext_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:layout_weight="1"
android:padding="4dp"
android:singleLine="false"
android:text="You have a long message here. This is so long that it takes two lines inside the TextView. No wonder, now its taking three lines and now its four. How long this message can go? I now have that question!!!"
android:textColor="#android:color/white" />
<ImageView
android:id="#+id/iv_check"
android:layout_width="12dp"
android:layout_height="12dp"
android:layout_centerVertical="true"
android:layout_margin="8dp"
android:src="#android:drawable/presence_online" />
</LinearLayout>
</RelativeLayout>
I have a widget that uses PercentRelativeLayout to position 4 ImageViews inside it. I need the percent feature because I’m putting the images along the 4 sides of the box but with different relative sizes: the top child takes up ~60 percent of the height. I have previewed this layout by itself and it works great, no problem. This widget does wrap_content for w and h (w I don’t care about so much, but h is important, as you will see.)
I need this widget inside a larger layout. Now I have another parent RelativeLayout. This layout should contain the described widget at the top, then some buttons below it, in a mostly linear fashion: |--(group widget)--(text button)--(image button)—-|, where the ‘|’ indicates it should be snug to the parent. (The reason this is a Relative is that I want to float another view at the bottom right.)
So the goal is: this parent layout should be sized to some predefined size (basically the screen, although in my full code there is more above this level as well - but my problem occurs just isolating at this level), the 2 buttons should calculate their natural size and use it, then the PercentRelativeLayout at the top should take the ‘remaining’ height and use that for its children % sizing.
In practice, as the screenshot shows (from the layout preview tool) - the PercentRelativeLayout sucks up all the size.
In short, can you pin together a sequence of views in a relative layout and have a variable child? In iOS I would pin the first view to the parent top, the last view to the parent bottom, and everything to the thing above it, the buttons have their intrinsic size and then my mystery widget sucks up the remainder.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#f2dce8ff"
android:layout_marginTop="8dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
xmlns:tools="http://schemas.android.com/tools"
android:animateLayoutChanges="true"
android:id="#+id/matchPlay">
<ImageView
android:src="#drawable/model_2"
tools:background="#954f47"
app:layout_heightPercent="59%"
app:layout_aspectRatio="100%"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:adjustViewBounds="false"
android:id="#+id/avatarView1"
android:scaleType="centerInside" />
<ImageView
android:src="#drawable/model_2"
tools:background="#ff0000"
app:layout_heightPercent="20%"
app:layout_aspectRatio="100%"
app:layout_marginTopPercent="2%"
android:layout_below="#id/avatarView1"
android:layout_alignParentLeft="true"
android:adjustViewBounds="false"
android:id="#+id/avatarView2"
android:scaleType="centerCrop" />
<ImageView
android:src="#drawable/model_2"
tools:background="#00ff00"
app:layout_heightPercent="20%"
app:layout_aspectRatio="100%"
app:layout_marginTopPercent="2%"
android:layout_below="#id/avatarView1"
android:layout_alignParentRight="true"
android:adjustViewBounds="false"
android:id="#+id/avatarView3"
android:scaleType="centerCrop" />
<ImageView
android:src="#drawable/model_2"
tools:background="#0000ff"
app:layout_heightPercent="22%"
app:layout_aspectRatio="100%"
android:layout_below="#id/avatarView2"
android:layout_centerHorizontal="true"
android:adjustViewBounds="false"
android:id="#+id/avatarView4"
android:scaleType="centerCrop" />
</android.support.percent.PercentRelativeLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/matchplay_add_shout"
android:id="#+id/shoutButton"
android:enabled="false"
android:layout_centerHorizontal="true"
android:layout_below="#id/matchPlay" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/submitButton"
android:src="#drawable/matchplay_submit"
android:layout_centerHorizontal="true"
android:layout_below="#id/shoutButton"
android:minWidth="50dp"
android:contentDescription="#string/matchplay_send_contentdesc" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/passButton"
android:src="#drawable/matchplay_pass"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:contentDescription="#string/matchplay_pass_contentdesc" />
Edit: I updated this code to not use alignParentBottom, thinking that was the key issue; I instead used alignParentTop. No change. ALso tried using vertical LinearLayout at the root. :(
By the way the image group widget will be a PercentRelativeLayout subclass, so if I need to make some magic happen with some overrides there, I can do that.
I learned some things about the RelativeLayout beast:
Child size and location seem to go hand in hand. There's no attempt to compute sizes separately from location.
RelativeLayout doesn't seem to do second pass for measuring. It's quite greedy: when it reaches a given child to decide where to put it, it makes a decision then and there. Maybe there are some situations it does, I'm not sure, but they're probably not common.
Last, the thing that ties it all together: how you specify the relations matter, because RL computes a dependency order for width and height; since things that are depended on are sized first, using a greedy property from above, if that child does not have a fixed size it will suck up whatever remaining space the RL offers it. Therefore, since I arranged things to depend on what's above and matchPlay was the root, therefore matchPlay was sized first.
Thus I just made the dependencies backward, where things were pinned to the bottom, thus matchPlay was last in the dependency chain. The strange but functioning XML is below. Very strange aspect of implementation, and further the documentation does not state this lack of associativity in the relative layout_ attrs. (Clearly it should, because it can greatly affect how you use the relative attrs!)
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#f2dce8ff"
android:layout_marginTop="8dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/matchplay_add_shout"
android:id="#+id/shoutButton"
android:layout_above="#+id/submitButton"
android:layout_marginTop="15dp"
android:layout_centerHorizontal="true"
android:enabled="false" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:id="#+id/submitButton"
android:src="#drawable/matchplay_submit"
android:minWidth="50dp"
android:contentDescription="#string/matchplay_send_contentdesc" />
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/shoutButton"
xmlns:tools="http://schemas.android.com/tools"
android:animateLayoutChanges="true"
android:id="#+id/matchPlay">
<ImageView
android:src="#drawable/model_2"
tools:background="#954f47"
app:layout_heightPercent="60%"
app:layout_aspectRatio="100%"
app:layout_marginBottomPercent="2%"
android:layout_centerHorizontal="true"
android:adjustViewBounds="false"
android:id="#+id/avatarView1"
android:scaleType="centerInside" />
<ImageView
android:src="#drawable/model_2"
tools:background="#ff0000"
app:layout_heightPercent="23%"
app:layout_aspectRatio="100%"
android:layout_below="#id/avatarView1"
android:adjustViewBounds="false"
android:id="#+id/avatarView2"
android:scaleType="centerCrop" />
<ImageView
android:src="#drawable/model_2"
tools:background="#00ff00"
app:layout_heightPercent="23%"
app:layout_aspectRatio="100%"
android:layout_below="#id/avatarView1"
android:layout_alignParentRight="true"
android:adjustViewBounds="false"
android:id="#+id/avatarView3"
android:scaleType="centerCrop" />
<ImageView
android:src="#drawable/model_2"
tools:background="#0000ff"
app:layout_heightPercent="23%"
app:layout_aspectRatio="100%"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:adjustViewBounds="false"
android:id="#+id/avatarView4"
android:scaleType="centerCrop" />
</android.support.percent.PercentRelativeLayout>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/passButton"
android:src="#drawable/matchplay_pass"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:contentDescription="#string/matchplay_pass_contentdesc" />
I have to create a RecyclerView(Trying to achieve listView using RecyclerView) with user Image and Name. I pull the users dynamically. So I don’t know the user count. I have to list the users in recycler view with user profile image and user name. I tried below layout for RecyclerView item. But I could not get the perfect view. It adjusts the width of ImageView and TextView correctly but I could not bring in equally fixed height of the row. Also I am trying to fix the size of the image view. Is it possible for me to fix the size of an image view without using dp so that its flexible for various screen sizes?
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/user"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/portrait"
android:layout_marginTop="24dp"
android:layout_marginBottom="24dp"
android:layout_marginLeft="24dp"
android:layout_weight="3" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Large Text"
android:id="#+id/nameLabel"
android:layout_weight="5"
android:paddingTop="24dp"
android:paddingBottom="24dp"
android:paddingLeft="24dp"
android:textSize="24sp" />
</LinearLayout>
I'm trying to create a simple component in my layout, where there are two TextViews horizontally next to each other. The one on the right should start where the one on the left finishes. My code for this is as follows:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true"
android:textColor="#android:color/white"
android:textIsSelectable="false"
android:textSize="25sp" />
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:textColor="#android:color/white"
android:textSize="20sp" />
</LinearLayout>
I programmatically set the text on each TextView after the view has rendered. However, sometimes the text does not display correctly in the first TextView- I can see that the width has been set correctly, as the second TextView is not next to it, but the text is truncated rather than using the space. If I lock/unlock the device to refresh the screen then the text displays correctly (without the widths of the TextViews changing).
I've tried changing this to use a RelativeLayout, but I see the same issue.
Any ideas?
Although i dont understant what exactly you mean, would suggest you to use weightSum property in the parent view and android:layout_weight in child views. The same allows to put many child views inside a parent view with respect to ratio (like navigation tabs).
for eg :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1" >
<TextView
android:id="#+id/text1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true"
android:textColor="#android:color/white"
android:textIsSelectable="false"
android:textSize="25sp"
android:layout_weight="0.4" /> //60% width
<TextView
android:id="#+id/text2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:textColor="#android:color/white"
android:textSize="20sp"
android:layout_weight="0.6" /> //40% width
</LinearLayout>
also, dont forget to put the width if child views as 0dp. as that will result in ignoring the calculations regarding the width of view. or you can set the width of child view as "match_parent" as well. any other property to width will not work. (and if you want half matchparent for both child views set layout_width to 0.5 both views.. ithink thats obvious to note)
Hopw it helps.