Horizontal scroll in android listView - android

I want to create list view, with ability to scrool horizontaly and vertically.
Image shows row item from list view.
Everything should act as normal list view - ability to scroll verticaly.
Besides Title ( Teszt Elk Nev ) rest data in row should also scrool horizontaly. ( as you can see on image - second row )
When I scroll horizontaly all rows in list view should scrool horizontaly, so all rows has the same horizontaly scrool position.
I spent few hours try to solve it. Best solution so far is horizontal scrool only one row.
My code for row item layout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/tvOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_marginRight="30dp"
android:text="one" />
<com.example.testproject.CustomHorScroll
android:id="#+id/myHorScroll"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/myLay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="70dp"
android:text="two" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="70dp"
android:text="three" />
<!-- rest items goes here --!>
</LinearLayout>
</com.example.testproject.CustomHorScroll>
</LinearLayout>
I want to handle horizontal scrool movement and propagate to all row in listview to set horizontalscroolView.scrolBy(x,0).
But I can't make it works. :/
Another idea is to skip listview and create custom layout with scroll view and horizontalScroll.

Unfortunately, Android doesn't support scrolling items within scrolling items generally speaking.
Your best bet is probably to use something such as a ScrollView or a HorizontalScrollView, and a LinearLayout containing lists (or other scrollable items) inside of that: http://developer.android.com/reference/android/widget/ScrollView.html

You probably want to look into use the two way listview library.
https://github.com/lucasr/twoway-view

Related

ListView with multiple clickable things - padding to ignore accidental clicks?

Each of my list items has a Star (styled checkbox) for making the item favourite and the item itself (whole row) can be clicked to open the item.
It works but the issue is slightly clicking off the star causes the click event for main ListItem to fire, I tried to fix this via padding/margin to the Star but clicking that padding area causes a click on the main list item causing the item to be opened when the user missed the tap on the star by a few pixels.
Whats the best way to ignore clicks on the list item say a small margin to the left and completely above and below and to the right of the star ?
(How do I ignore clicks on the red area in the image below?)
So far I think padding is the best solution. Give enough padding to your favourite button. But if you say you have already done that, then the other alternative is not to use ListView onItemClickListener and use separate onClickListener for the row items. For example, you can modify your ListView item row layout by giving weights to the child (one to the view which opens item detail and other to the your favourite button) and apply separate onClickListener to both.
Add tag on each view you need to add action on then use view.gettag() and switch on tags
After a lot of investigation it seems the easiest way to fix this is this:
Add this to the root element of the list item layout:
android:descendantFocusability="blocksDescendants"
Add this to the parent of the "Star"/Checkbox, in my case the checkbox lives inside a LinearLayout with some padding on that, so I added this to my LinearLayout:
android:clickable="true"
This causes the "Clicks" on the LinearLayout around my CheckBox to be swallowed up by it and don't go to the ListItem OnClick event that the rest of the ListItem responds to.
My whole code for the ListItem layout looks like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:addStatesFromChildren="false"
android:descendantFocusability="blocksDescendants"
android:id="#+id/listitem" >
<LinearLayout
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center_vertical">
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceListItemSmall"
android:gravity="center_vertical"
android:text="Item 1"
/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:clickable="true"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right">
<Space
android:layout_width="15dp"
android:layout_height="match_parent"/>
<CheckBox
android:id="#+id/favouriteCheckBox"
android:button="#drawable/checkbox_selector"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:gravity="center"
android:layout_gravity="fill"
android:visibility="visible" />
<Space
android:layout_width="15dp"
android:layout_height="match_parent"/>
</LinearLayout>
</LinearLayout>

Display list of lists using mvxlistview

I want to display a list of lists My data is an ObservableCollection where the SomeClass has another ObservableCollection in it.
Here is the code:
This is the main list:
<Mvx.MvxListView
android:id="#+id/MenuList"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
local:MvxBind="ItemsSource Path=Dishes"
local:MvxItemTemplate="#layout/menuitemtemplate"
android:background="#color/backgroundlightgray"
android:layout_weight="1" />
Here is the item template which has another list inside it
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res/Com.TasteITAndroidClient"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:minWidth="25px"
android:minHeight="25px">
<TextView
android:text="Text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/textView1"
android:gravity="right"
android:textSize="16dp"
android:textStyle="bold"
android:textColor="#ff000000"
android:background="#color/white"
android:padding="10dp" />
<Mvx.MvxListView
android:id="#+id/CategoryDishes"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
local:MvxBind="ItemsSource Path=Items"
local:MvxItemTemplate="#layout/userpagedishtemplate"
style="#style/ToolBarImage"
android:background="#color/backgroundlightgray"
android:layout_below="#+id/textView1"
android:layout_marginTop="5dp" />
The userpagedishtemplate displays the item.
Basically it works but I am getting very small sized lists which show 1-2 items although I specified height=wrap_content on the subList.
Have I missed something? should I be doing something else?
Thanks
Amit
Placing a ListView that scrolls vertically inside another ListView which scrolls vertically is likely to cause touch area confusion for your users - which list scrolls...
If you really want a list within a list then you cab use the layout you've started on - but you will probably need to give the inner lists some assistance with their vertical sizing - something more than wrap_content
Alternatively, for very small inner lists, you could consider switching to MvxLinearLayout.
Alternatively, you could consider making the inner lists scroll horizontally.
Alternatively, you could consider collapsing your lists into a single list using a polymorphic-aware adapter to determine whether to show a header cell or an inner cell.

Trying to get textView to stick to gridView scroll

I have a fragment with a textView giving instructions, and below a gridView. I wanted for the textView to scroll upwards with the gridView. In other words: for textView to disappear off screen when gridView is scrolling.
My idea of how to accomplish this is to give the gridView a fixed height that would make the entire layout scrollable - including the textView. However, up until I cannot achieve this. Is there a way to do this?
Layout no scroll:
When scrolled:
Any help/advice would be appreciated.
My layout XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/LightGrey"
android:gravity="center_horizontal|center_vertical"
android:orientation="vertical" >
<TextView
android:id="#+id/chooseLine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="18dp"
android:text="#string/chooseLine"
android:textAppearance="?android:attr/textAppearanceLarge" />
<GridView
android:id="#+id/gridLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnWidth="130dp"
android:fitsSystemWindows="false"
android:gravity="center"
android:horizontalSpacing="5dp"
android:numColumns="auto_fit"
android:paddingTop="0dp"
android:stretchMode="columnWidth"
android:verticalSpacing="25dp" />
</LinearLayout>
Achieving this is is not going to be trivial. What you need is ListView's capability to add a header view, but unfortunately, GridView doesn't offer that functionality.
What I have done in the past to solve this problem is to convert the GridView to a ListView, and then add the header to the ListView. I created a wrapper adapter that takes the original adapter and combines a horizontal row's worth of grid cells into a single list row.
The tricky parts include: dynamically adapting the number of columns in a row based on the width of the screen, accounting for all combinations of view types within a row and remaining empty columns in the last row, and handling click interactions properly.
Put the whole LinearLayout in a ScrollView (How to use ScrollView in Android?) and for the GridView set android:layout_height="wrap_content"

Android: Nested List Views and item heights

I am currently trying to create a nested ListView.
An outer ListView contains items, of which each consists of a TextView, as caption, and another ListView with children.
Filling the ListViews works really nice using another nested ListView adapter, yet, when it comes to actually displaying the content on the device, the nested list items are not high enough to display all the children. To be exact, only the first nested list item is displayed.
My current layout approach is the following:
Outer list item:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5px"
>
<TextView android:id="#+id/day"
android:textSize="14sp"
android:textStyle="bold"
android:textColor="#ff5e00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scrollHorizontally="false"/>
<ListView android:id="#+id/innerList"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fadingEdge="none"
/>
</LinearLayout>
and an inner list layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5px"
>
<TextView android:id="#+id/innertextview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scrollHorizontally="false"
android:singleLine="false"/>
</LinearLayout>
Is there any chance to adapt the size of the outer list item in a way that all the inner list items will be displayed?
I also looked at ExpandableListViews. This approach worked, yet, I do not want to have the list items collapsed.
Thank you very much,
Matthias
I did not really like this solution, so I looked into this issue some more and found another solution:
ExpandableListView inherits from ListView. What it does is overriding the getView method from BaseAdapter and make a distinction between child and parent items. It is not a real nested list, but it flattens the list by using different layout items.
The same can be done for creating a NestedListView. Inherit from ListView and expect a self created adapter, which makes a distinction between child and parent layout items.
For each one return the appropriately filled layout items.
Done.
You should be able to make the items in an ExpandableListView uncollaposable. This is probably you best option. For instructions on how disable collapsing, checkout this SO Post.

Android layout - listview and edittext below

I'm trying to mimic the behaviour of the HTC SMS application (tradional view), where all messages are shown, and an EditTextis shown below. As you can see in the screenshot, when scrolling upwards, the EditText scrolls away at the bottom.
I'm stuck with this, even after reading multiple posts (eg Android Layout with ListView and Buttons and this website: http://www.finalconcept.com.au/article/view/android-keeping-buttons-visible), it's not working as expected.
Thanks to the comments and EditText now showing under ListView, I've managed to have my ListView take all available space and start scrolling once completed. The EditText is showing at the bottom of the screen now - always. I'd like it to disappear at the bottom when I scroll up though - now it remains at the bottom
Current Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:id="#android:id/android:list"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
<TableLayout
android:layout_weight="0"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TableRow>
<EditText android:id="#+id/newmessagecontent"
android:layout_height="150dp"
android:singleLine="false"
android:gravity="top"
android:layout_width="250dp"
android:layout_alignParentTop="true"
/>
<Button android:layout_height="wrap_content"
android:id="#+id/sendmessage"
android:text="Send"
android:layout_width="wrap_content"
/>
</TableRow>
</TableLayout>
</LinearLayout>
i think what you need to implement here is some sort of modification of the SeparatedListAdapter from Jeff Sharkey from this Article. In this article he not only manages to add two Adapters to a ListView but also explains how to have Headers to separate them if you want (you can remove that part of the code).
So what i mean, is your first Adapter will be the data with It's rows, and the second Adapter will be a dummy one with no data that just points to a View with your controls or whatever.
this way the ListView and what you want to add at the bottom are gonna be all scrollable.
Hope this helps.
A ListView automatically scrolls if all the items in it take up more space than the view provides. What happens if you remove the ScrollView?

Categories

Resources