How to make ListView items expand on click - android

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.

Related

Custom listview is not showing and getView is not called

I have problem that my list view is not showing and the getView method never invoked
here is my list view inside the onCreate in the MainActivity
l = (ListView) findViewById(R.id.listvv);
CustomAdapter adapter = new CustomAdapter(MainActivity.this, maainimg);
l.setAdapter(adapter);
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/white"
tools:context=".MainActivity">
<ListView
android:id="#+id/listvv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:divider="#b4be"
android:dividerHeight="2dp"></ListView>
<LinearLayout
android:id="#+id/ad_holder"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center|bottom"
android:layout_alignParentBottom="true">
<com.google.android.gms.ads.AdView
android:id="#+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
ads:adSize="BANNER"
ads:adUnitId="#string/BottomBanner">
</com.google.android.gms.ads.AdView>
</LinearLayout>
</LinearLayout>
and here is my CustomAdapter Class it is inside the MainActivity
public class CustomAdapter extends ArrayAdapter<String> {
int[] img;
Activity activity;
ImageButton imageButton;
public CustomAdapter(Activity act, int [] images) {
super(act, R.layout.custom_row);
this.activity=act;
this.img=images;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
Log.d("getView","Called!");
View row = convertView;
if(row==null){
LayoutInflater inflater = (LayoutInflater) activity
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
row = inflater.inflate(R.layout.custom_row, parent, false);
imageButton = (ImageButton) row.findViewById(R.id.preview);}
imageButton.setImageResource(img[position]);
Log.d("added",position+"");
if (getSelectedcolor() == 0) {
imageButton.setColorFilter(Color.RED);
setSelectedcolor(Color.RED);
} else {
imageButton.setColorFilter(Color.parseColor(colorToHexString(getSelectedcolor())));
}
return row;
}
}
and the custom_row.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background">
<ImageButton
android:id="#+id/preview"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="10dp"
android:src="#drawable/ic_1_red"
android:scaleType="fitXY"
android:background="#drawable/roundedbutton"
/>
</LinearLayout>
Update
here is my array maainimg its not empty
maainimg = new int[]{R.drawable.ic_1_red,R.drawable.ic_2_red,R.drawable.ic_3_red,R.drawable.ic_4_red,R.drawable.ic_5_red,R.drawable.ic_6_red,
R.drawable.ic_7,R.drawable.ic_8,R.drawable.ic_8,R.drawable.ic_9,R.drawable.ic_10,R.drawable.ic_11,R.drawable.ic_12
,R.drawable.ic_13,R.drawable.ic_14,R.drawable.ic_15,R.drawable.ic_16,R.drawable.ic_17,R.drawable.ic_18,R.drawable.ic_19,R.drawable.ic_20,
R.drawable.ic_21,R.drawable.ic_22,R.drawable.ic_23,R.drawable.ic_24,R.drawable.ic_25};
While you call super(act, R.layout.custom_row); (without passing the objects), you need to override getCount() method, otherwise your adapter can't figure out how many items you have, and this is why there is no call of getView() method.
#Override
public int getCount(){
return img.length;
}
The first problem I see is your Layout.
<ListView
android:id="#+id/listvv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:divider="#b4be"
android:dividerHeight="2dp"></ListView>
<LinearLayout
android:id="#+id/ad_holder"
android:layout_width="fill_parent"
Your ListView has no room left because the bottom linear layout is using FILL_PARENT (which is deprecated btw, use MATCH_PARENT instead).
Try making your ListView height (and width) to be both MATCH_PARENT. And then deal with the "Ad".
You could have the LinearLayout replaced by a RelativeLayout and have the Ad pin at the bottom of its parent and below the listview.
Second: Why are you using an ArrayAdapter<String> if you're internally using an array of int.
Third: since you're using the wrong type of adapter, you're not correctly implementing it, you need to override more methods (getCount() for example), to tell the underlying adapter: hey, this is the number of items we have.
Since you're not using the provided array of strings, but your custom array of ints that you pass during construction, try overriding getCount() and return the size of your int array instead.
I this there is a issue in your Adapter class, Try this, But keep in mind that there are cleaner ways of writing this same code,
public class CustomAdapter extends ArrayAdapter<Integer> {
int[] img;
Context context;
ImageButton imageButton;
public CustomAdapter(Context context, Integer [] images) {
super(context, R.layout.custom_row, images);
this.context=context;
this.img=images;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
Log.d("getView","Called!");
View row = convertView;
if(row==null){
LayoutInflater inflater = (LayoutInflater) activity
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
row = inflater.inflate(R.layout.custom_row, parent, false);
}
imageButton = (ImageButton) row.findViewById(R.id.preview);
imageButton.setImageResource(img[position]);
Log.d("added",position+"");
if (getSelectedcolor() == 0) {
imageButton.setColorFilter(Color.RED);
setSelectedcolor(Color.RED);
} else {
imageButton.setColorFilter(Color.parseColor(colorToHexString(getSelectedcolor())));
}
return row;
}
}

ListView with Custom Adapter [Android]

I'm trying to build a ListView with a custom layout but so far have not been able to successfully do it. I'm a beginner and have been following tutorials to get it done.
This is what I'm doing:
//this is where I want the custom list items to be displayed.
//GroupAdapter is the constructor of the class in which I'm trying to make a custom adapter
stringArray = new String[10];
groupItemArrayAdapter = new GroupAdapter(this,stringArray);
groupListView = (ListView) findViewById(R.id.mainList);
groupListView.setAdapter(groupItemArrayAdapter);
//this is the code in GroupAdapter.java class
public class GroupAdapter extends ArrayAdapter{
private LayoutInflater inflater;
public GroupAdapter(Activity activity, String[] items){
super(activity,R.layout.group_view);
inflater=activity.getWindow().getLayoutInflater();
}
#Override
public View getView(int position, View convertView, ViewGroup parent){
return inflater.inflate(R.layout.group_view,parent,false);
}
}
When i start the app, a blank screen appears. Initially when i used Android default layout for the list, list items were displayed but not anymore... I don't understand what I'm doing wrong. Can anyone help?
Here is the group_view.xml file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:padding="30dp" >
<TextView
android:id="#+id/gName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Group Name"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_marginRight="100dp"
android:textStyle="bold" />
<TextView
android:id="#+id/activity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/signIn"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:text="5"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textStyle="bold" />
</LinearLayout>
You can replace all your code by next
stringArray = new String[10];
groupItemArrayAdapter = new GroupAdapter(this,stringArray);
groupListView = (ListView) findViewById(R.id.mainList);
groupListView.setAdapter(new ArrayAdapter<String>(this, R.layout.group_view, R.id.gName, stringArray));
it's for case when you want to show strings at gName field, if you want to shot them at activity, then you need to use
groupListView.setAdapter(new ArrayAdapter<String>(this, R.layout.group_view, R.id.activity, stringArray));
Answer for "Why it's blank?"
#Override
public View getView(int position, View convertView, ViewGroup parent){
return inflater.inflate(R.layout.group_view,parent,false);
}
You only inflate empty view and does not assign strings to fields. It would be (simplest version)
#Override
public View getView(int position, View convertView, ViewGroup parent) {
convertView = inflater.inflate(R.layout.group_view, parent, false);
TextView textView = (TextView)convertView.findViewById(R.id.gName);
String item = getItem(position)
textView.setText(item);
return convertView;
}
You'll be able to implement better version after read article Making ListView Scrolling Smooth

Change the background of a Full Activity?

I have this Activity and a XML for constructing a listview. From the listview I can only design a single row but now I want to change the color of full background means the color of the full Activity.
public class MyActivity extends Activity implements
AdapterView.OnItemClickListener, View.OnClickListener {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ListView list = new ListView(this);
setContentView(list);
String[] items = { "Tom", "Sally", "Bill", "John", "Santiago",
"Isabella" };
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
R.layout.review, R.id.textView1, items) {
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View row = super.getView(position, convertView, parent);
View text = row.findViewById(R.id.seemore);
text.setTag(position);
text.setOnClickListener(MyActivity.this);
View left = row.findViewById(R.id.imageView1);
left.setBackgroundResource(R.drawable.newapture);
left.setTag(position);
left.setOnClickListener(MyActivity.this);
return row;
}
};
and the XML code is:
<?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"
android:orientation="vertical"
android:background="#272727">
<ImageView
android:id="#+id/one"
android:layout_width="140dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/title"
android:layout_marginLeft="15dp"
android:layout_marginTop="14dp"
android:clickable="true"
/>
</RelativeLayout>
Here #272727 changes the color of a single row; I want to change the background.
In activity layout xml, use android:background attribute or
In onCreate
getWindow().setBackgroundDrawableResource(R.drawable.bg_img);

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.

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()?

Categories

Resources