Width of clickable area in ListView w/ onListItemClick - android

I'm trying to get my list items in a ListView clickable. At the moment they are clickable (see my screenshot) but they're only clickable within the rectangle the text takes up.
I'm using protected void onListItemClick(ListView l, View v, int position, long id) {
for the clickable list items.
Here is my list.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ListView android:id="#+id/android:list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/android:empty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/no_favorites"/>
and my row.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView android:id="#+id/artist"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/songtitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_alignParentRight="true"/>
<TextView android:id="#+id/album"
android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_alignParentRight="true"/>
<TextView android:id="#+id/playtime"
android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_alignParentRight="true"/>
<TextView android:id="#+id/playlistnum"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_alignParentRight="true"
android:visibility="gone" />
</LinearLayout>
And here's the screenshot example:
(New users aren't allowed to post images... grumble... have a hyperlink!)
In list.xml, the Listview has android:layout_width="fill_parent" so it should be the full width of the screen. (All of the items in row.xml are also width="fill_parent".) What am I missing?

The TextView in your list.xml needs to be set to fill_parent. The selection will then fit the width of the parent ListView.
android:layout_width="wrap_content"

Related

3 vertical listViews in one scrollview

I need to implement such a screen :
So, I've created the adapter with ImageView, 2 TextViews and CheckBox.
I need to implement 3 listViews and make the screen scrollable.
I tried to implemen the solution, but that is not workable for me - so I made like this :
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:fillViewport="true"
android:orientation = "vertical" android:layout_height="match_parent">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:orientation="vertical"
android:weightSum="1.0"
>
<LinearLayout android:layout_weight="0.5"
android:orientation="vertical"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<TextView
android:text="#string/textview_settings_categories"
style="#style/settings_label"/>
<ListView android:id="#+id/listView1"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
</ListView>
</LinearLayout>
<LinearLayout android:layout_weight="0.25"
android:orientation="vertical"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<TextView
android:text="#string/textview_settings_categories"
style="#style/settings_label"/>
<ListView android:id="#+id/listView2"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
</ListView>
</LinearLayout>
<LinearLayout android:layout_weight="0.25"
android:orientation="vertical"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<TextView
android:text="#string/textview_settings_categories"
style="#style/settings_label"/>
<ListView android:id="#+id/listView3"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
</ListView>
</LinearLayout>
</LinearLayout>
</ScrollView>
I also tried this one solution, but both not workable for me - the ScrollView can't be scrollable.
I also tried to implement 3 vertical ListFragments one above another, listviews are scrollable inside, but the scrollview is not - so I can't see the bottom of the screen.
It's not the best practice, but if you really want that functionality, you can just disallow the touch event of the parent scrollview once you touch it and re allow it once you leave the child container.
This is how I have done it before, where "listScanners" is my listview:
listScanners.setOnTouchListener(new View.OnTouchListener()
{
#Override
public boolean onTouch(View v, MotionEvent event)
{
v.getParent().requestDisallowInterceptTouchEvent(true);
return false;
}
});
And this is the part of my layout that is relevant to the question:
/* Theres more before this ... */
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scrollbarSize="0dp" >
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="5dp"
android:layout_gravity="center"
android:gravity="center"
android:background="#null"
>
<TextView
android:id="#+id/emptylist1"
android:layout_width="450dp"
android:layout_height="80dp"
android:textColor="#6f6f6f"
android:textSize="20sp"
android:padding="3dp"
android:layout_marginBottom="3dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:text="No Scanners have been added..."/>
<ListView
android:id="#+id/listview_scanners"
android:layout_width="450dp"
android:layout_height="80dp"
android:padding="3dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:cacheColorHint="#00000000"
android:divider="#DEDEDE"
android:dividerHeight="1px">
</ListView>
</RelativeLayout>
/* Theres more after this ... */
Correct Way:
Ideally you should rather have something like this, where your layout looks like this:
Where it is very important to have this in your linear layout:
android:isScrollContainer="true"
isScrollContainer means that the linearlayout contains a view that scrolls, meaning that it can be a certain size within the linear layout, however, it may contain much more when you scroll it. Here is the layout:
<?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"
android:background="#afafaf"
android:isScrollContainer="true">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:background="#FF63FF9B"
android:layout_height="50dp"
>
<TextView
android:id="#+id/textview_heading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="25sp"
android:layout_marginTop="5dp"
android:layout_marginLeft="10dp"
android:textColor="#ffffff"
android:text="View First List"/>
</LinearLayout>
<RelativeLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="150dp"
android:layout_marginTop="5dp"
android:background="#null"
>
<ListView
android:id="#+id/listview1"
android:layout_width="fill_parent"
android:layout_height="130dp"
android:cacheColorHint="#00000000"
android:divider="#DEDEDE"
android:dividerHeight="1px">
</ListView>
</RelativeLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:background="#FF63FF9B"
android:layout_height="50dp"
>
<TextView
android:id="#+id/textview_heading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="25sp"
android:layout_marginTop="5dp"
android:layout_marginLeft="10dp"
android:textColor="#ffffff"
android:text="View Second List"/>
</LinearLayout>
<RelativeLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="150dp"
android:layout_marginTop="5dp"
android:background="#null"
>
<ListView
android:id="#+id/listview2"
android:layout_width="fill_parent"
android:layout_height="130dp"
android:cacheColorHint="#00000000"
android:divider="#DEDEDE"
android:dividerHeight="1px">
</ListView>
</RelativeLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:background="#FF63FF9B"
android:layout_height="50dp"
>
<TextView
android:id="#+id/textview_heading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="25sp"
android:layout_marginTop="5dp"
android:layout_marginLeft="10dp"
android:textColor="#ffffff"
android:text="View Third List"/>
</LinearLayout>
<RelativeLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="150dp"
android:layout_marginTop="5dp"
android:background="#null"
>
<ListView
android:id="#+id/listview3"
android:layout_width="fill_parent"
android:layout_height="130dp"
android:cacheColorHint="#00000000"
android:divider="#DEDEDE"
android:dividerHeight="1px">
</ListView>
</RelativeLayout>
</LinearLayout>
I just made this in 5 minutes and you get a layout looking like this: (this is just a draft, obviously just to give you an idea)
And last but not least, in your code where you display the lists, you will have something like this:
public class Screen_View_Lists extends Activity
{
BaseAdapter listAdapter;
ListView list1,list2,list3;
#Override
public void onCreate(Bundle icicle)
{
super.onCreate(icicle);
setContentView(R.layout.screen_view_packages);
list1 = (ListView) findViewById(R.id.listview1);
list2 = (ListView) findViewById(R.id.listview2);
list2 = (ListView) findViewById(R.id.listview3);
listAdapter = new Adapter_List_Main(this, packages);//This is my own adapter, you probably use your own custom one as well.
list1.setAdapter(listAdapter);
//Setup list to support context menu
registerForContextMenu(list1);
//Setup list to support long click events.
list1.setLongClickable(true);
//Action Listener for long click on item in the list
list1.setOnItemLongClickListener(new AdapterView.OnItemLongClickListener()
{
public boolean onItemLongClick(AdapterView<?> parent, View v, int position, long id)
{
//do things here
}
});
//Action Listener for short click on item in the list
list1.setOnItemClickListener(new AdapterView.OnItemClickListener()
{
public void onItemClick(AdapterView<?> parent, View v, int position, long id)
{
//do things here
}
});
//And so one . . .
}
}
I would suggest you to have a better look at the documentation of ListView or if you want to work a little bit more to RecyclerView. The latter one will allow you definitely more flexibility and maintainability.
Anyway, a base solution, that flattens a little bit your UI hierarchy is to use only one ListView/RecyclerView. Then in your adapter you can decide the type of view that your container is going to present.
In your design I'd identify 2 types:
TYPE_HEADER
TYPE_CHECKBOX
Once you have this things in place in your getView(...) you can decide based on the position and type what view instantiate(have a look at how to reuse them efficiently) and bind.
If you can try to avoid complexities those will become impossible to maintain :)

Wrapping a ListView inside a LinearLayout

I'm trying to make a screen with a TextView at the top, the ListView in the middle and a Button at the bottom. I'd like it to be so that the TextView always is the top at the screen and the button always is the bottom, and then the ListView is in between. When the ListView exceeds the "space in the middle" I'd like the scroll-function to be only between the TextView and Button. With my attempt it just expands beyond the TextView and Button.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/paper" >
<TextView
android:id="#+id/tvLOL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Standardvarer"
android:textSize="40dp" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/tvLOL"
android:layout_alignBottom="#+id/bNyVare"
android:orientation="vertical" >
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
<Button
android:id="#+id/bNyVare"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Tilføj ny vare"
android:textSize="30dp" />
</RelativeLayout>
See if this helps(the LinearLayout wrapping the ListView should be removed(and move the layout_above/below to the ListView) if you only use it to wrap the ListView and nothing else):
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/paper" >
<TextView
android:id="#+id/tvLOL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Standardvarer"
android:textSize="40dp" />
<Button
android:id="#+id/bNyVare"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Tilføj ny vare"
android:textSize="30dp" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/tvLOL"
android:layout_above="#id/bNyVare"
android:orientation="vertical" >
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>
Just an alternative solution to that of #Luksprog, although that's definitely the way to go for more complex layouts. I would ditch the LinearLayout that surrounds the ListView though, as it doesn't add anything, except for unnecessary complexity in the view hierarchy.
A relatively simple layout as described in your question can also be written using a LinearLayout as root and a weight on the ListView to dynamically fill up all space inbetween the TextView and Button. This weight also pushes the Button all the way to the bottom, without pushing it off.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="#drawable/paper" android:orientation="vertical">
<TextView android:id="#+id/tvLOL" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_gravity="center_horizontal"
android:text="Standardvarer" android:textSize="40dp" />
<ListView android:id="#android:id/list" android:layout_width="fill_parent"
android:layout_height="0dp" android:layout_weight="1" />
<Button android:id="#+id/bNyVare" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:text="Tilføj ny vare"
android:textSize="30dp" />
</LinearLayout>

Creating a ListView with Checkboxes

I have a listview with each item containing an image, a textview and a checkbox. I am trying to have it so wherever you click within the item it highlights the checkbox. As stated in this response I set the focusable attribute of the checkbox to false, but I am still only able to click the checkbox to change its state. What's even more interesting is when I click on a checkbox every proceeding 10th item is also highlighted. Any suggestions?
Here is my xml for an item.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image"
android:layout_width="50dip"
android:layout_height="50dip"
android:src="#drawable/stub"
android:scaleType="centerCrop"/>
<TextView
android:id="#+id/text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="left|center_vertical"
android:textSize="20dip"
android:layout_marginLeft="10dip"/>
<CheckBox
android:id="#+id/checkBox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="false"/>
</LinearLayout>
Main xml
<?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="#+id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"/>
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Clear Cache"/>
</LinearLayout>
create a CheckableLinearLayout or CheckableRelativeLayout for your ListView's item layout container,
set your listview's mode to 'multipleChoice'
find more details in the links below:
http://tokudu.com/2010/android-checkable-linear-layout/
http://www.marvinlabs.com/2010/10/custom-listview-ability-check-items/
in the process of populating the list, you can set a OnItemClickListener and change the checkbox to checked. try something like this:
list.setOnItemClickListener(new OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {
ListItem item = (ListItem) adapter.getItem(position);
if(item.checkbox.isChecked())
item.checkbox.setChecked(false);
else
item.checkbox.setChecked(true);
}
});
in the main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" android:layout_marginTop="5dp">
<RelativeLayout
android:layout_width="450dp"
android:layout_height="25dp"
android:layout_marginLeft="7dp"
android:layout_marginTop="3dp">
<ListView
android:id="#+id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="450dp"
android:layout_height="25dp"
android:layout_marginLeft="7dp"
android:layout_marginTop="3dp">
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Clear Cache"/>
</RelativeLayout>
</LinearLayout>
Hope this help you...

Android ListView embedded within another ListView height not wrapping

I have a ListView with a custom view rendered by an adapter. It contains an image, some text and another ListView. In the getView method of adapter I creator another adapter to set up the embedded ListView.
It all works fine, but for some reason the height of the embedded ListView is only enough to view one list item. If I manually set the height to pixels I can see more items in the list. All heights are set to wrap_content so I'm not sure why it's not working.
My first ListView looks like this:
<ListView
android:id="#+id/newswire"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:cacheColorHint="#ffffff"
/>
The item that gets rendered for this ListView:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
>
<ImageView
android:id="#+id/aggSparkAvatar"
android:layout_width="45dp"
android:layout_height="45dp"
android:scaleType="centerCrop"
/>
<LinearLayout
android:orientation="vertical"
android:paddingLeft="10dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/aggSparkName"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#1B5F7C"
android:textStyle="bold"
/>
<TextView
android:id="#+id/aggSparkDateStamp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textStyle="bold"
/>
<View
android:layout_height="1dp"
android:layout_width="fill_parent"
android:background="#F2F2F2"
/>
<ListView
android:id="#+id/aggSparkList"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:cacheColorHint="#ffffff"
/>
</LinearLayout>
</LinearLayout>
Then for the embedded ListView each item looks like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
>
<ImageView
android:id="#+id/sparkAvatar"
android:layout_width="45dp"
android:layout_height="45dp"
android:scaleType="centerCrop"
/>
<LinearLayout
android:orientation="vertical"
android:paddingLeft="10dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/sparkTitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textStyle="bold"
/>
<TextView
android:id="#+id/sparkText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
/>
<TextView
android:id="#+id/sparkDateStamp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#A2A2A2"
/>
</LinearLayout>
</LinearLayout>
it's never a good practice to include scrollable views inside another scrollable view. you should consider redesigning your application.
in your case, the ListView you're embedding is set to wrap_content, wrap_content - also not a recommended practice. a ListView is designed to show a list of items that collectively will be too big for the screen to show at once. using wrap_content, wrap_content doesn't make much sense.

Android, Stop overlapping listview items by the page footer

In my Java android application I use a listview to display information loading from the SQLite DB And a page footer also there in this page.
The problem is When there are more items loaded to the listview and need to scroll, since footer appears in the bottom of the page, the footer covers the the last item in the listview.
Simply I want to stop overlapping listview items by the footer.
Can any one help me achieve this please. Thanks inadvance.
Edits
<RelativeLayout android:id="#+id/relativeLayout1" android:layout_height="wrap_content" android:layout_width="match_parent">
<ListView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/companylistView"
android:listSelector="#drawable/item_focus_bkg">
</ListView>
<LinearLayout android:id="#+id/linearLayout1" android:layout_height="wrap_content" android:layout_width="match_parent" android:orientation="vertical" android:layout_alignParentBottom="true" android:background="#android:color/darker_gray" >
<TextView android:text="Footer Text"
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000" >
</TextView>
</LinearLayout>
</RelativeLayout>
Based on your requirement(And as you haven't posted XML layout here that you have tried so far), i assume and can suggest the following:
give bottom margin to your listview: android:layout_marginBottom="60dip"
If you are using RelativeLayout then just give listview as android:layout_above="#+id/footer"
I suggest to you go with 2nd option.
Update:
Based on the XML you have posted, try this correct XML layout:
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_height="wrap_content"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ListView android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/companylistView"
android:layout_above="#+id/textView1">
</ListView>
<TextView
android:text="Footer Text"
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:layout_alignParentBottom="true">
</TextView>
</RelativeLayout>
You should use list footer like this:
View footerView = ((LayoutInflater)getApplicationContext().getSystemService(getApplicationContext().LAYOUT_INFLATER_SERVICE)).inflate(R.layout.listview_footer, null, false);
list.addFooterView(footerView,null,false);
try this:
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical" >
<ListView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/companylistView"
android:listSelector="#drawable/item_focus_bkg" />
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#android:color/darker_gray" >
<TextView
android:text="Footer Text"
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:layout_alignParentBottom="true" />
</RelativeLayout>
</LinearLayout>

Categories

Resources