How to keep RecyclerView always above View in RelativeLayout - android

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.

Related

Distance between recyclerview items

This is how my app shows items in RecyclerView.
This is how it should be looked like.
What changes can I make to achieve the same?
<LinearLayout android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:layout_below="#+id/ln1"
android:layout_toRightOf="#+id/setimage">
<android.support.v7.widget.RecyclerView
android:id="#+id/horizontal_recycler_view"
android:layout_width="wrap_content"
android:layout_height="50dp" />
</LinearLayout>
Since the RecyclerView is horizontal in orientation, you need to make the layout_width of the linear layout a fixed value (or wrap_content) to remove the unwanted space shown in the image.

Wrap content is not working on Vertical line in Relative Layout?

I am using View with a background colour to create a vertical line in a Relative layout . Wrap content is not working , the line is taking the entire viewport as height. Why is this happening ? attaching my code which is not working
<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:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#f5f5f5"
android:orientation="vertical"
tools:ignore="MissingPrefix">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:layout_width="2dp"
android:layout_alignParentTop="true"
android:layout_height="wrap_content"
android:layout_marginLeft="21.5dp"
android:background="#a9382b" />
<TextView
android:id="#+id/seeall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginRight="20dp"
android:textColor="#a9382b"
android:textSize="11sp"
tools:text="SEE ALL" />
</RelativeLayout>
</LinearLayout>
Setting the height to wrap_content in this case simply will not work.
In general, wrap_content will give the view enough size to contain everything "inside" it (whether that's child views or just the text in a TextView, etc), but your View tag doesn't have anything "inside" it to define the height. In this case, it will grow to fill all available space.
If you want your RelativeLayout to be as tall as the TextView inside of it, and you want the line to go from top to bottom of that size, use the following for your View tag:
<View
android:layout_width="2dp"
android:layout_height="match_parent"
android:layout_alignTop="#+id/seeall"
android:layout_alignBottom="#+id/seeall"
android:layout_marginLeft="21.5dp"
android:background="#a9382b">

Horizontal Scroll View, Scrolling Issue Android

I am new to android programming. I am implementing a simple calculator and I am facing issues with horizontal scroll View. I am using an edit text within Horizontal scroll view. It works completely fine for the first time but as soon as I clear the screen it retains it scrolling limit, meaning that even though there are few digits on the screen I am able to scroll more than it. What I want to achieve is to limit its scrolling. Below are the screen shots and XML code.
First Time
[Second Time][2]
It is still scroll-able even though there are few digits
<HorizontalScrollView
android:id="#+id/hsvMain"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:scrollbars="none"
>
<EditText
android:id="#+id/mainEditText"
android:paddingTop="10dp"
android:paddingRight="2dp"
android:background="#ffff"
android:ellipsize="end"
android:focusable="false"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="55sp"
android:textStyle="bold"
/>
</HorizontalScrollView>
Try changing round the layout height/width attributes, make HorizontalScrollView layout_width="fill_parent" and EditText layout_width="wrap_content" and layout_height="wrap_content"
<HorizontalScrollView
android:id="#+id/hsvMain"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:scrollbars="none">
<EditText
android:id="#+id/mainEditText"
android:paddingTop="10dp"
android:paddingRight="2dp"
android:background="#ffff"
android:ellipsize="end"
android:focusable="false"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="55sp"
android:textStyle="bold"/>
</HorizontalScrollView>
Edit:
The reason why is wasn't working before because you were telling the scrollview to wrap the content regardless the size of the EditText, so it would only scroll around the EditText. But if you tell the ScrollView to match_parent, it'll always be the width of the screen and then the EditText can be scroll within the parent (ScrollView) regardless of the size.
Note: use match_parent instead of fill_parent, fill_parent is now deprecated. (Although still works)

HorizontalScrollView Not Scrolling Completely to the Right

My Current Implementation
I have a HorizontalScrollView which I create in XML that houses a few LinearLayout children. I have added this code below.
There are two LinearLayout containers with the id's group_one and group_two and these are populated programmatically at run time.
I also fix the width of the HorizontalScrollView at run time depending on the amount of View objects I will be inserting.
This solution works great for when the children fit in the HorizontalScrollView without the need to scroll.
The Issue
As soon as I need to scroll (there are more children than can be displayed within the fixed width HorizontalScrollView) then the scrollbar will not go all the way to the right, even though I can see that the child layout is of the correct width, and I can see the scrollbar just will not go any further.
My Question
Why would there be a limit on the scrollbar moving any further right?
My Code
HorizontalScrollView XML
<!-- THIS IS WHERE THE PLUGIN BUTTONS ARE HOUSED -->
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="horizontal"
android:id="#+id/map_plugin_scroll_view"
android:background="#color/map_plugin_background">
<!-- Enclosing box to layout the two groups.-->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_margin="8dp"
android:id="#+id/group_container">
<!-- These layouts contain the map plugins. -->
<LinearLayout
android:id="#+id/group_one"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"/>
<LinearLayout
android:id="#+id/group_two"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"/>
</LinearLayout>
</HorizontalScrollView>
What Is Happening
This is an image of the correct scroll to the left. The edge of the scroll view starts on the right of the red bar. Notice the distance between the two.
This is an image of the incorrect scroll right. Compare the distances between the edges of the scroll view and where the scroll bar is stopping.
This is how I want it to look when I scroll at either end.
I have been playing with this for a while now and finally found the solution.
I was trying to add the left and right margins to the LinearLayout with the ID group_container. However for some reason the HorizontalScrollView was not respecting this and this is why I was seeing this issue.
Instead I added the left and right margins to the group_one and group_two LinearLayouts. Now the HorizontalScrollView respected these and it functions as I expected. Here is my modified code.
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="horizontal"
android:id="#+id/map_plugin_scroll_view"
android:background="#color/map_plugin_background">
<!-- Enclosing box to layout the two groups.-->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:id="#+id/group_container">
<!-- These layouts contain the map plugins. -->
<LinearLayout
android:id="#+id/group_one"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"/>
<LinearLayout
android:id="#+id/group_two"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"/>
</LinearLayout>
</HorizontalScrollView>
set padding right to your scrollview like this :
android:paddingRight="20dp"

horizontalscrollview set child elements to fill horizontalscrollview width

Basically I have a horizontal scroll view which, by monitoring the onTouch event I'm paging (ie:each visible part of the scroll view (page) "clicks" into the next when scrolling, rather than just having a standard ScrollView. see paged scrollviews in iOS).
Now I want to find a way to have inner children inherit the same width as the scrollview (which is set at "fill_parent").
Here is my XML to help:
<HorizontalScrollView
android:id="#+id/scrollview"
android:layout_height="0dp"
android:layout_width="fill_parent"
android:layout_weight="1"
android:background="#drawable/scrollviewbg">
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="fill_parent">
<ImageView
android:src="#drawable/content1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:src="#drawable/content2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:src="#drawable/content3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</HorizontalScrollView>
As you can see the scrollview is set to width fill_parent and there is a LinearLayout inside it. Now at the moment there are three images which have a set width and height similar to the width of the screen, but what I want to do is change that for 3 LinearLayouts.
Each LinearLayout needs to inherit the same width as the scroll view, so that each one takes up a whole "page" when my code is applied, as it were.
How would I do this? Is it something I will have to do using code? What code will I need?
Thank you.
I know its not direct answer, but its much easier to user ViewPager from Compatibility Package for paging functionality. You can find an example in samples folder (see src/com/example/android/supportv4/app/FragmentPagerSupport.java for source code).
Try this:
android:fillViewport="true"
<HorizontalScrollView
android:fillViewport="true"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_gravity="right"
android:background="#drawable/black_border"
android:id="#+id/displayText"
android:layout_width="match_parent"
android:scrollHorizontally="true"
android:layout_height="wrap_content"
android:gravity="right"
android:padding="20dp"
android:text=""
android:textSize="20sp" />
</HorizontalScrollView>
inside horizontal scroll view, i have a text view, you can try for image view
Set all the layout_height parameters as fill_parent. You should see the image in full screen then.

Categories

Resources