Develop Reference

How to make ListView items expand on click

Right now I have a ListView, with a custom ArrayAdapter to populate the items. Right now the items each only show a little bit of information, I want to be able to tap on an item, and have it 'expand', showing the rest of the information. I would like there to be an animation when it expands. I also want to get there to only be one item 'expanded' at once (ie if one is open, and I tap on another, the first one goes back to normal). I would also like to have expanded items stay expanded, even if they are scrolled out of the view.
This is the code I have now
single_row.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="FIRST INFO"
android:id="#+id/first"/>
<Space
android:layout_width="match_parent"
android:layout_height="15dp"
android:id="#+id/space"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SECOND INFO"
android:id="#+id/hidden"/>
</RelativeLayout>
my_cards.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#191919"
android:id="#+id/card_layout"
android:weightSum="1">
<Space
android:layout_width="match_parent"
android:layout_height="29dp"
android:layout_gravity="center_horizontal"/>
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:overScrollMode="never"
android:id="#+id/list_view"
android:divider="#191919"
android:layout_marginRight="23dp"
android:layout_marginLeft="23dp"
android:dividerHeight="12dp"
android:layout_gravity="center_horizontal"/>
</LinearLayout>
MyCards.java
public class MyCards extends android.support.v4.app.Fragment{
private ListView mListView;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
//Inflate the view
View view = inflater.inflate(R.layout.my_cards, container, false);
//Arrays for test information
String[] names = {"Tim", "Kevin", "Bob", "John","Evan", "Roy", "Tristan", "Ronald"};
String[] company = {"Apple", "Microsoft", "China", "Xiaomi","Facebook", "Unemployed", "CCP", "Government"};
//Get reference to the listview
mListView = (ListView) view.findViewById( R.id.list_view );
//Initialize the adapter, and set it to the listview
customAdapter adapter = new customAdapter(getContext(),names,company);
mListView.setAdapter(adapter);
return view;
}
}
class customAdapter extends ArrayAdapter<String>{
Context mContext;
String[] mName;
String[] mCompany;
customAdapter(Context c, String[] names, String[] companies){
super(c, R.layout.single_row, R.id.name, names);
this.mContext = c;
this.mName = names;
this.mCompany = companies;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View mRow = inflater.inflate(R.layout.single_row, parent, false);
TextView mNameText = (TextView) mRow.findViewById(R.id.name);
TextView mCompanyText = (TextView) mRow.findViewById(R.id.company);
mNameText.setText(mName[position]);
mCompanyText.setText(mCompany[position]);
mRow.setBackgroundResource(R.drawable.custom_listview_shape);
return mRow;
}
}
Now, I have tried to have a go at getting this to work. I tried adding this to my onCreateView method
mListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
TextView hidden = (TextView) view.findViewById(R.id.hidden);
if ( hidden.getVisibility() == View.GONE)
{
//expandedChildList.set(arg2, true);
hidden.setVisibility(View.VISIBLE);
}
else
{
//expandedChildList.set(arg2, false);
hidden.setVisibility(View.GONE);
}
}
});
Now, while this technically does what I want it to do (cause item to expand on click), it doesn't do it the way I would like to. There is no animation, multiple items can be expanded at once, and it goes back to normal as soon as it is scrolled out of view.
Any help with this would be greatly appreciated.

Android: button showing up multiple times in list view

I trying to write code to highlight the selected value of the list with "Next" button at the bottom of the layout. But for some reason, after every list item, "next" button also shows up. Can someone please help me resolve this problem?
Here is the layout file:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/questionLayout"
>
<TextView android:id="#+id/txtExample"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="25sp"
android:textColor="#000000"
android:background="#FF0000"
/>
<ListView
android:id="#+id/listExample"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#CCCCCC"
android:choiceMode="singleChoice"
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<Button
android:id = "#+id/next"
android:text="Next"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_gravity="center"
android:layout_weight="50"
/>
<Button
android:id = "#+id/submit"
android:text="Submit"
android:layout_width = "0dp"
android:layout_height = "wrap_content"
android:layout_weight="50"
android:layout_gravity="center"
/>
</LinearLayout>
</LinearLayout>
Java Code:
public class updateList extends Activity {
private SelectedAdapter selectedAdapter;
private ArrayList<String> list;
int correct_answer;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
list = new ArrayList<String>();
list.add("Choice One");
list.add("Choice Two");
list.add("Choice Three");
selectedAdapter = new SelectedAdapter(this,0,list);
selectedAdapter.setNotifyOnChange(true);
ListView listview = (ListView) findViewById(R.id.listExample);
listview.setAdapter(selectedAdapter);
listview.setOnItemClickListener(new OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> arg0, View view,
int position, long id) {
// user clicked a list item, make it "selected"
selectedAdapter.setSelectedPosition(position);
}
});
}
}
Thanks in advance
SSP
Selected Adaptor class:
public class SelectedAdapter extends ArrayAdapter{
// used to keep selected position in ListView
private int selectedPos = -1; // init value for not-selected
public SelectedAdapter(Context context, int textViewResourceId,
List objects) {
super(context, textViewResourceId, objects);
}
public void setSelectedPosition(int pos){
selectedPos = pos;
// inform the view of this change
notifyDataSetChanged();
}
public int getSelectedPosition(){
return selectedPos;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View v = convertView;
// only inflate the view if it's null
if (v == null) {
LayoutInflater vi = (LayoutInflater)this.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
v = vi.inflate(R.layout.activity_main, null);
}
// get text view
TextView label = (TextView)v.findViewById(R.id.txtExample);
// change the row color based on selected state
if(selectedPos == position){
label.setBackgroundColor(Color.CYAN);
}else{
label.setBackgroundColor(Color.WHITE);
}
label.setText(this.getItem(position).toString());
/*
// to use something other than .toString()
MyClass myobj = (MyClass)this.getItem(position);
label.setText(myobj.myReturnsString());
*/
return(v);
}
}

change your listview in xml as like this
<ListView
android:id="#+id/listExample"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"//===== set maximum heighthere
android:layout_marginBottom="50dp"// === give some space at bottom so that buttons will appear
android:background="#CCCCCC"
android:choiceMode="singleChoice"
/>

But for some reason, after every list item, "next" button also shows up.
The ListView's row layout is determined by the layout you inflate in getView() or pass to your Adapter's super class if you haven't overridden getView(). Double check this layout and remove the unwanted code.
Addition
The layout for your ListView's items only needs to be one TextView since you only want to display a phrase in each. However you are currently passing your entire main layout, this creates the Buttons, an unused ListView, and everthing else in every row...
Instead use android.R.layout.simple_list_item_1 in getView(), of course you'll need to change the id you pass to findViewById() as well:
if (v == null) {
LayoutInflater vi = (LayoutInflater)this.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
v = vi.inflate(android.R.layout.simple_list_item_1, null);
}
// get text view
TextView label = (TextView)v.findViewById(android.R.id.text1);
Please watch Android's Romain Guy discuss writing an efficient adapter to speed things up.

Delete button on ListView items (like for iPhone)

I have a ListView (with an Adapter of my own) where I'd like to add a delete button by swaping an item on the ListView (like on iPhones).
I really don't know how to do it and where to start ...
Could you please give me some hints ?
Thanks

What you want to implement is a custom ListView. You need a layout for your row, here's an example
res/layout/row.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#android:color/transparent">
<TextView android:id="#+id/Browse_DateTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent" />
<ImageButton android:id="#+id/delete"
android:layout_width="wrap_content"
android:layout_height="fill_parent" />
</LinearLayout>
Then you need to overide the getView() method of your adapter, a little like this:
setListAdapter(new ArrayAdapter<Object>(this, R.layout.row, R.id.Browse_DateTime, ourRows) {
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View v = convertView;
if (v == null) {
LayoutInflater vi = (LayoutInflater)BrowseActivity.this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
v = vi.inflate(R.layout.row, null);
}
TextView time = (TextView) v.findViewById (R.id.Browse_DateTime);
time.setText(ourRows[position].dateTime);
ImageButton delete = (ImageButton) v.findViewById(R.id.delete);
delete.setFocusable(false);
delete.setImageDrawable(BrowseActivity.this.getResources().getDrawable(R.drawable.deletebutton));
delete.setOnClickListener(BrowseActivity.this);
delete.setId(position);
return v;
}
};)
Best regards.
PS: this is cut&paste from my code, BrowseActivity is just the name of the activity this code resides in, R.layout.row is my row.xml file, you name it any which way, just put it in /res/layout/, and if your delete button is an imagebutton, you DO need the delete.setFocusable(false); (try it without and see why).

Button press add new row to a ListView programmatically, how to?

My main layout main.xml has only a Button, a EditText and an empty ListView as below:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
>
<LinearLayout
android:id="#+id/input_area"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<EditText
android:id="#+id/input_field"
android:layout_height="40dip"
android:layout_width="fill_parent"
android:layout_weight="5"
/>
<Button
android:id="#+id/send_btn"
android:layout_width="60dip"
android:layout_height="30dip"
android:text="#string/send"
android:layout_weight="1"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/output_area"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#006633"
android:visibility="gone"
>
<ListView
android:id="#+id/output_list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="10dip"
>
<!-- When "send" button in above input_area is pressed,
text from EditText field show here programmatically as a new row of the listview-->
</ListView>
</LinearLayout>
</LinearLayout>
As you see above, there are two child LinearLayout hosted by main LinearLayout.
The 1st child LinearLayout with id input_area consists of a EditText and a Button.
The 2nd child LinearLayout with id output_area is an LinearLayout with an empty ListView, AND its visibility is set to "gone".
The feature I am going to implement is very simple, that's in the input_area, when user input some text in the EditText field, and press the send button, then the input string should be shown in the output LinearLayout as a new row of the listview programmatically.
What I tried is the java code below:
EditText inputTxt = (EditText) findViewById(R.id.input_field);
Button sendBtn = (Button) findViewById(R.id.send_btn);
LinearLayout outputArea = findViewById(R.id.output_area);
//Updated by Saurabh
ListView lv = findViewById(R.id.output_list);
MyListAdapter mAdapter = new MyListAdapter(this, arraylist);
//Update finished
sendBtn.setOnClickListener(new OnClickListener(){
#Override
public void onClick(View v){
int visibility = outputArea.getVisibility();
if(visibility==View.GONE)
// set ListView visible
outputArea.setVisibility(View.VISIBLE);
//get user input
String userInput = inputTxt.getText().toString(); // show this string in a new row of listview
//BUT how to dynamically add new row to the listview here???
}
});
But I am not sure how to add new row to the listview programmatically, anyone can help me?
By the way, I have another layout xml fiel (row.xml) which defined each row's layout.
-----------------------UPDATE------------------------------------
Each row of the list contain a icon and a text string. My list adapter and row layout are showing below:
My adapter:
private static class MyListAdapter extends BaseAdapter {
private LayoutInflater mInflater;
ArrayList<String> arraylist;
public MyListAdapter(Context context, ArrayList<String> arraylist) {
mInflater = LayoutInflater.from(context);
this.arraylist = arraylist;
}
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;
if (convertView == null) {
convertView = mInflater.inflate(R.layout.row, null);
holder = new ViewHolder();
holder.icon = (ImageView) convertView.findViewById(R.id.icon);
holder.userInput = (TextView) convertView.findViewById(R.id.user_input);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
holder.icon.setImage(???);
holder.userInput.setText(arraylist.get(position));
return convertView;
}
static class ViewHolder {
ImageView icon;
TextView userInput;
}
}
my list row layout:
<?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="horizontal"
>
<ImageView
android: id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/user_input"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:textSize="10dip"/>
</LinearLayout>

Make a Global variable as below
ArrayList<String> arraylist = new ArrayList<String>();
On Click of send button update the adapter that you are setting on ListView by adding
String userInput = inputTxt.getText().toString();
arraylist.add(userInput)
in adapter and then call
adapter.notifyDataSetChanged();
Update
I updated answer in your question and in this post copy your new Adapter class and use that

Removing an Item with a Button in ListView with Custom ArrayAdapter

I have custom list_row :
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="wrap_content" android:baselineAligned="false">
<Button android:layout_width="30dip" android:layout_marginTop="7dip" android:gravity="right"
android:id="#+id/delete" android:layout_height="30dip" android:background="#drawable/delete"
android:layout_gravity="top"></Button>
<TextView android:textSize="20dip"
android:text="TextView" android:id="#+id/tavsiye" android:layout_marginTop="10dip"
android:layout_gravity="top" android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
</LinearLayout>
I have a ListView like that:
<ListView
android:id="#+id/tavsiyeler"
android:layout_height="300dip"
android:layout_width="170dip"
android:fastScrollEnabled="true"
android:scrollbars="vertical"/>
and a custom adapter which extends ArrayAdapter :
public class HekimTavsiyeleriAdapter extends ArrayAdapter<String> {
private Context context;
private int resource;
private ArrayList<String> tavsiyeler;
public HekimTavsiyeleriAdapter(Context context, int resource,
ArrayList<String> objects) {
super(context, resource, objects);
this.context=context;
this.resource=resource;
this.tavsiyeler=objects;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View v = convertView;
if (v == null) {
LayoutInflater vi = (LayoutInflater)this.context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
v = vi.inflate(this.resource, null);
}
if (this.tavsiyeler.size()!=0) {
TextView tavsiye = (TextView) v.findViewById(R.id.tavsiye);
Button but= (Button) v.findViewById(R.id.delete);
if (tavsiye != null) {
String st=this.tavsiyeler.get(position);
tavsiye.setText(st);
}
if( but!=null){
but.setId(position);
but.setOnClickListener(new AdapterView.OnClickListener() {
#Override
public void onClick(View v) {
int id=v.getId();
tavsiyeler.remove(id);
notifyDataSetChanged();
}
});
}
}
return v;
}
I am creating adapter and fill the list like that :
eklenecekTavsiyeler=new ArrayList<String>();
adapter= new HekimTavsiyeleriAdapter(context,
R.layout.hekim_tavsiyeleri_row, eklenecekTavsiyeler);
ListView tavsiyelerListesi = (ListView)findViewById(R.id.tavsiyeler);
tavsiyelerListesi.setAdapter(adapter);
And adding new items like that:
this.adapter.add(<some-string>);
this.adapter.notifyDataSetChanged();
and my list view is seen like that:
http://imageshack.us/photo/my-images/97/listir.jpg/
Here is my question:
I am adding new items to the list. I have fixed height for the list. When I fill the list until all height is occupied, then I add one new item to the list which requires scrolling becasue overflow in list height. The last item I added gets wrong id and when I pressed the cross button, it removes wrong item. However, when the list is not overflowed, everything works fine. After overflow, the ids of buttons are set wrongly (seems randomly). By the way, for setting the button's id, I am using getView's position argument.
Thanks in advance.

I am afraid that you have flaw in the code.
You have to stop calling but.setId(). With this you are overriding internal id of the view which is the value of R.id.delete. Probably you meant to use but.setTag() / but.getTag()?