android nested listview - android

is it possible/advisable to have a nested listview?
i.e. a listView that's contained within a row of another listview?
an example would be where my main list is displaying blog posts, and then in each row, you'd have another list view for the comments for each post (that would be collapsible)

I had the same problem today, so this is what I did to solve it:
I have a ListView, with a CustomAdapter, and on the getView of the customAdapter, I have something like this:
LinearLayout list = (LinearLayout) myView.findViewById(R.id.list_musics);
list.removeAllViews();
for (Music music : albums.get(position).musics) {
View line = li.inflate(R.layout.inside_row, null);
/* nested list's stuff */
list.addView(line);
}
So, resuming, It's not possible to nest to ListViews, but you can create a list inside a row using LinearLayout and populating it with code.

Is what you're looking for the ExpandableListView? Of course, that's limited to only two levels of listings (but that sounds like it would work for your needs).

This sound like what you're looking for? If you're not, or if this doesn't work, I would suggest having two list views: one of, say, blog posts, and the second of comments, and an action on a blog post item takes you to the second view, populated with the relevant comments.

you can do it like this :
inside the parent listview row xml layout add the following table layout
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/table_show"
android:background="#beb4b4">
</TableLayout>
then you have to make a layout for the child list with name reply_row.xml
<?xml version="1.0" encoding="utf-8"?>
<TableRow android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tv_reply_row"
android:textColor="#000"/>
</TableRow>
in your parent listview adapter getview method add the following code :
TableLayout replyContainer = (TableLayout)
// vi is your parent listview inflated view
vi.findViewById(R.id.table_show);
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
//child listview contents list
String [] replys = {"a","b","c","d"};
for (int i=0;i<replys.length;i++)
{
final View comments = inflater.inflate(R.layout.reply_row, null);
TextView reply_row = (TextView) comments.findViewById(R.id.tv_reply_row) ;
reply_row.setText(replys[i]);
//for changing your tablelayout parameters
TableLayout.LayoutParams tableRowParams=new TableLayout.LayoutParams
(TableLayout.LayoutParams.FILL_PARENT,TableLayout.LayoutParams.WRAP_CONTENT);
int leftMargin=3;
int topMargin=2;
int rightMargin=3;
int bottomMargin=2;
tableRowParams.setMargins(leftMargin, topMargin, rightMargin, bottomMargin);
comments.setLayoutParams(tableRowParams);
TableRow tr = (TableRow) comments;
replyContainer.addView(tr);
}

You'd better use one ListView, not nested. Nesting ListView is an inefficient way. Your ListView may not scroll smoothly and take up more memory.
You could organize your data structure to show nested data in one ListView. Or you can use this project PreOrderTreeAdapter.
It is convenient to show nested data in ListView or RecyclerView. It can be used to make ListView or RecyclerView collapsible, just change the way you provide your data than notify the adapter.

Related

Adding a custom view multiple times in a layout

I have a custom XML file. I want to repeat this in a layout (say Relative) n number of times, dynamically (obviously).
I have seen many posts, but none helped. I am not looking for a ListView or Adapters or so. It's as simple as - A RelativeLayout. Inside it, adding the custom XML one above another. Any number of times.
With a static LinearLayout (Vertical orientation), adding the view dynamically results in rendering it once, not one below another. Don't know why. Although a TextView or so do repeat one below the other in a loop inside a LinearLayout (Vertical).
Then I dynamically created the layout (Relative), and inflated the custom XML. Displayed one. When I tried for another below the first it told me to remove child's parent first (Exception). If I do that and add again, its as good as removing the first rendered view and adding it again.
So how can I get multiple views in same layout?
A rough presentation of what I've attempted:
mainLayout = (RelativeLayout)findViewById(R.id.mainlay); //Mainlayout containing some views already
params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT);
params.addRule(RelativeLayout.BELOW,R.id.sideLayout); //sideLayout is an existing LinearLayout within the main layout.
View child = getLayoutInflater().inflate(R.layout.dynamiccustomlayout,null);
RelativeLayout r1 = new RelativeLayout(this);
r1.setLayoutParams(params);
r1.addView(child);
mainLayout.addView(r1);
mainLayout.setLayoutParams(params);
mainLayout.addView( child);
/* r2 = new RelativeLayout(this);
r2.setLayoutParams(params);
r2.addView(contentLayout); [Gives exception] */
This is how it worked out for me...
Before that, the issue with android is:
If you add dynamic views inside a LinearLayout (Horizontal), they will appear horizontally with new created instances, added to the view.
However, shockingly, it's not the same in case of LinearLayout (Vertical orientation). Hence the whole mess.
Solution:
The RelativeLayout layout file was binded with the variable, somewhat like this:
customLay = (RelativeLayout) mainLay.findViewById(R.id.dynamicCustomLayout);
Then, a Dynamic RelativeLayout was created within which the former variable is added/wrapped.
customLayout = new RelativeLayout(this);
customLayout.addView(customLay);
Every layout is assigned an id:
customLayout.setId(i);
And then a loop is run (2 if conditions for i=0 and i>0)
for i>0 (indicates the 2nd dynamic layout, to be added below the first), LayoutParameter is created:
params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
And then for i>0, using the ids of dynamic views, they are added one below the other:
//Following code below used id to place these views below each other to attain list type arrangement of views//
// i==0 for first view on top//
if (i == 0) {
params.addRule(RelativeLayout.BELOW, R.id.sideLayout);
customLayout.setLayoutParams(params);
}
// i>0 for views that will follow the first top//
else {
params.addRule(RelativeLayout.BELOW, i - 1);
customLayout.setLayoutParams(params);
}
Then added to main root layout, where all these views or cards need to be displayed:
includeLayout.addView(customLayout);
Ofcourse, the code is not just this. I have written the essential points that helped me achieve the target and that may help others in future.
So the main essence was ---
using a Dynamic RelativeLayout, to
bind the static RelativeLayout, and
assigning ids to the Dynamic RelativeLayout wrappers, and
on basis of ids use RelativeLayoutParameters to place the following
ids below the previous ones.
You have to instanciate every child by itself
View child = getLayoutInflater().inflate(R.layout.dynamiccustomlayout,null);
r1.addView(child);
View child2 = getLayoutInflater().inflate(R.layout.dynamiccustomlayout,null);
r1.addView(child2);
//ok, i do a analog thing in obne of my apps. here is the code:
public class FlxForm extends LinearLayout {
public FlxForm(Context context) {
super(context);
inflater = LayoutInflater.from(context);
inflater.inflate(R.layout.flxform, this);
this.setPadding(0, 0, 0, 0);
container = (LinearLayout) this.findViewById(R.id.flxform);
this.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.WRAP_CONTENT));
//here is my funtion to calculate the items i want to add, its a little bit too complicated, but in the end it works like:
for(int i=0;i<10;i++){
View x = inflater.inflate(R.layout.dynamiccustomlayout,null);
container.addview(x);
}
}
}
XML for the Form
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/flxform"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:focusable="false"
android:background="#android:color/transparent"
android:orientation="vertical" >
</LinearLayout>
Then you can instantiate a "Form" Objekt and add it into a ScrollView
For doing this You would have to nest your RelativeLayout inside a ScrollView and Manage all the Scrolling, items adding, memory management, etc manually.
So the simple solution for adding n Number of Custom Views is to use a RecyclerView, ListView, GridView, etc with a neat CustomAdapter and Your Custom View.
Here is a nice example of using RecyclerView with custom Adapter :
http://code.tutsplus.com/tutorials/getting-started-with-recyclerview-and-cardview-on-android--cms-23465
I hope this Helps.

android listview without scrolling

I've got a LinearLayout which includes among others two ListViews. Each ListView has it's own ArrayAdapter. Now the Scrolling shouldn't be in the ListViews, the user should see the whole Lists and scroll the whole view. Sourrounding the LinearLayout with a ScrollView doesn't work because of the inerhit Scrolling Views... .
How can I expand the ListViews and let the user scroll only the outer view?
You should not use a ListView this way.
List Views are meant to recycle views, which it cannot do if its not the view that is scrolling.
You could simply use a LinearLayout and add every single view to the layout. This would be better than using a ListView.
(This does not mean it is the best solution)
This can be done easily in RecyclerView. But in this case you are using ListViews so try listView.setScrollContainer(false);
may be it works for you
You should inflate Views Like this.
// from content View of activity or fragment
listView = (LinearLayout) findViewById(R.id.sos_list_view);
listView.removeAllViews();
List<SosObject> sosList = batabase.getAllItems();
for(SosObject t: sosList) {
LayoutInflater inflater = (LayoutInflater) this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
// Item layout
View view = inflater.inflate(R.layout.sos_prewivew_item, null);
TextView comment = (TextView) view.findViewById(R.id.sos_comment_text);
TextView date = (TextView) view.findViewById(R.id.sos_date_text);
TextView id = (TextView) view.findViewById(R.id.sos_answer_id);
TextView tittle = (TextView) view.findViewById(R.id.answer_tittle);
listView.addView(view);
}
}
Your xml Should look like:
<ScrollView>
<LinearLayout>
</LinearLayout > // Fist list
</LinearLayout > // Second list
</LinearLayout>
</ScrollView>
ListViews cannot be overriden to lose the scrolling ability. They seem to be designed as top-level objects that occupy the whole screen.
So basically you have 2 options here:
Convert all your elements into ListView's items
use LinearLayouts instead of ListViews and wrap all elements in a ScrollView

ListView Create cell programmatically

I need to put a series of checkboxes in the cell of a ListView. The problem is that I do not know ahead of time how many. I am guessing, but please correct me if I am wrong, that I need to create it programmatically. There will only be a few cells so I am not worried about reusability. How do I approach doing that?
No xml just build the cell in the getView method --> is this as simple as creating a View and add to it?
xml but append checkboxes to the xml --> I have no idea how to do this.
Is there some sort of dynamic xml CheckBox list that I can use?
I always prefer to use XML to separate the presentation of the controller (or code that controls the app)..
You just need to create a list view and define it's adapter. The adapter will have an XML (a row) where you can design the checkbox and the other elements that you want...
Check out the documentation where you can see an example of a listview with an adapter.
-- edit:
In your case you need to add the checkboxes programmatically in your adapter. Just define a view in your xml where you can add your checkboxes.
-- edit2:
Here is an example XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="50dp" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/checkboxContainer" >
</RelativeLayout>
</RelativeLayout>
In your adapter you
//get the container
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View rowView = inflater.inflate(R.layout.NAME_OF_YOUR_XML, parent, false);
RelativeLayout your_container = (RelativeLayout) rowView.findViewById(R.id.checkboxContainer);
//declare your checkbox
CheckBox cb = new CheckBox(context);
cb.setText("your text");
// add the checkbox to your container
your_container.addView(cb);
This is just an example. I didn't test the code. Maybe you should use a linear layout instead of a relative layout to place your checkboxes easily..
easiest and most flexible is to use the ArrayAdapter and make an XML layout that looks like the single cell you'd want. Put your data in the array, create the Adapter and assign it to the ListView, and boom, your list has the right number of rows (cells). You can also customize the binding easily so that each cell has some information based on the corresponding Array entry.

Android How to reuse a header layout as an empty view in a ListView

I've been grappling with this problem throughout the life of my project. I have many lists in my project and most of them have headers. I have been making a separate layout file and adding it to the list using addHeaderView(). The problem is that when the data (ArrayList, in my case) is empty, the header doesn't appear. After hours of searching for a way to reuse the header layout as an empty view, I gave up and decided to replicate the layout in code and assign it as an empty view using setEmptyView(). The problem with this is that a lot of the headers contain clickable views and so I have to double all of my clickable logic for every view that is duplicated. I tried to include the header before but failed, mostly because I still don't quite understand how layouts are inflated, etc.
Finally, I have come up with a solution that I would like to share with the community, in case others are having a similar problem. I don't know if this is the best way to solve this problem and any feedback or suggestions would definitely be welcomed.
here is the code for the layout that contains the list list view:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<ListView
android:id="#+id/lv_my_list"
style="#style/ListStyle"
android:headerDividersEnabled="false"
/>
<include
layout="#layout/my_list_header"
android:id="#+id/my_list_empty"
/>
</LinearLayout>
the style defines the layout width and height among other things.
now I have the layout file that contains the header view
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/my_list_header"
>
<Button
android:id="#+id/my_list_button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Click Me"
/>
</LinearLayout>
I know LinearLayout is not very efficient and I am experimenting with using merge or other efficiency measures, but this is the first version that works so I'm going with it for now. Finally the code:
// set up the header
myListView = (ListView)findViewById(R.id.lv_my_list);
View header = View.inflate(this, R.layout.my_list_header, null);
Button b = (Button)header.findViewById(R.id.my_list_button);
b.setOnClickListener(this);
myListView.addHeaderView(header);
// set up the empty view
LinearLayout ll = (LinearLayout)findViewById(R.id.my_list_empty);
b = (Button)ll.findViewById(R.id.my_list_button);
b.setOnClickListener(this);
meLocalListView.setEmptyView(ll);
The reason I wrapped the button in a layout is because I can set each instance of the button to use this as an OnClickListener and then refer to both of them with a single id: R.id.my_list_button in my onClick method. I need to test this a lot more but it seems to work for now. I haven't implemented it on all my lists yet, just the one so it might not work in all situations. If you have any suggestions please let me know because this has been a problem for me for a long time now. One problem might be that if you want to instantiate the button from the ID you would probably have to go through this entire process again to access the correct IDs?
If you want to show the header of a ListView when the list is empty, what you really want to do is to show the list itself rather than a separate empty view. So, the simplest way is to check whether your list is empty and set the list visible if it is not already:
getListView().setVisibility(View.VISIBLE);
You can test this very easily with the following code:
public class TestListActivity extends ListActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.test_listview);
// create the empty grid item mapping
String[] from = new String[] {};
int[] to = new int[] {};
// prepare the empty list
List<HashMap<String, String>> fillMaps = new ArrayList<HashMap<String, String>>();
// fill in the grid_item layout
SimpleAdapter adapter = new SimpleAdapter(this, fillMaps, R.layout.test_listitem, from, to);
View listHeader =
((LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE))
.inflate(R.layout.test_listheader, null, false);
getListView().addHeaderView(listHeader);
getListView().setAdapter(adapter);
}
}
The list is empty, but the header is visible.
My solution is to create a view with the layout for the header, but set the background to be the same as the list items.
android:background="#android:drawable/list_selector_background"
But my solution does not work if I use 'include' to embed the header layout from another layout file. Do not know why.

Android: (Newb Question) Programatically creating views based on xml

Sorry for the Newb-ness.
I want to create a list of view elements in a LinearLayout (vertical). I created an xml layout that is a TableLayout called "category_list.xml"
<TableLayout>
<TableRow>
<ImageView />
<TextView />
<CheckBox />
</TableRow>
</TableLayout>
I want to iterate an array, on each iteration create a new TableLayout view and add it to the LinearLayout. The peice I'm missing is creating a new TableLayout based on the above xml.
Something like
TableLayout t = new TableLayout( R.layout.category_list );
Can someone point me in the right direction? Is it better to generate the TableLayout programatically?
Or by using the static View.inflate function
TableLAyout t = (TableLayout) View.inflate(this, R.layout.category_list, null);
Anyway, be carefull with inflating and deleting too many views in your app, as short lived objects leak memory. Consider using an ListView with and Adapter instead.
You want to use a LayoutInflater to "inflate" the xml files. You can get LayoutInflater in an activity by using getLayoutInflater(). Here's how it works (assuming the id of your LinearLayout is "parent"):
LinearLayout parent = (LinearLayout) findViewById(R.id.parent);
LayoutInflater inflater = getLayoutInflater();
TableLayout t = (TableLayout) inflater.inflate(R.layout.category_list, parent);

Categories

Resources