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: White on White Spinner

I have a spinner in a Layout, it is defined as
<Spinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/bithYearSpinner"
android:layout_marginTop="15dp" />
Spinner declaration and Adapter:
birthYearSpinner = (Spinner) findViewById(R.id.bithYearSpinner);
String[] years = getResources().getStringArray(R.array.bithYears);
ArrayAdapter<String> adapter = new ArrayAdapter<String(this,android.R.layout.simple_spinner_dropdown_item,years);
birthYearSpinner.setAdapter(adapter);
The problem is, spinner shows up with white text on white background which is impossible to see its items. I have done a research about it, some people have the same problem and there are some solutions but they dont work out for me. How can i fix this ? Any help would be appreciated.

To fix it, you can use custom xml layout for spinner item. By doing this, you can customize your spinner item text color and background.
Create item_spinner.xml and then,
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="19sp"
android:textColor="#111111"
android:padding="8dp"
/>
And set your custom layout to adapter like this :
birthYearSpinner = (Spinner) findViewById(R.id.bithYearSpinner);
String[] years = getResources().getStringArray(R.array.bithYears);
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.item_spinner, years);
birthYearSpinner.setAdapter(adapter);
Edit
If it is in fragment, try to replace this with getActivity() . Please look at this answer for reference.

create custom rowlayout for spinner and name it as spinner_item.xml
<?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:background="#color/theme_color"
android:orientation="vertical">
<TextView
android:id="#+id/spinnerText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#ff00ff"
android:gravity="center"
android:paddingBottom="5dip"
android:paddingTop="5dip"
android:text=""
android:textColor="#000000"
android:textSize="18sp" />
</LinearLayout>
now create Adapter and name it as DropDownAdapter.java
package com.ronem.adapters;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;
import com.ronem.goldsilverpricenepal.R;
public class DropDownAdapter extends ArrayAdapter<String> {
LayoutInflater inflater;
String[] genereValue;
public DropDownAdapter(Context context, int textViewResourceId,
String[] genereValue) {
super(context, textViewResourceId, genereValue);
inflater = LayoutInflater.from(context);
this.genereValue = genereValue;
}
#Override
public View getDropDownView(int position, View convertView, ViewGroup parent) {
return getCustomView(position, convertView, parent);
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
return getCustomView(position, convertView, parent);
}
public View getCustomView(int position, View convertView, ViewGroup parent) {
// LayoutInflater inflater = getLayoutInflater();
convertView = inflater.inflate(R.layout.spinner_item_layou, parent, false);
TextView label = (TextView) convertView.findViewById(R.id.spinnerText);
label.setText(genereValue[position]);
return convertView;
}
}
now initialize and set custom adapter as shown in your activity
DropDownAdapter dAdapter = new DropDownAdapter(this, R.layout.spinner_item_layou, spinnerValues);
itemSpinner.setAdapter(dAdapter);

When i change my resource array <array name=""> to <string-array name="">, spinner items show up properly and no need to use a custom adapter.

Android ListView :: Scrolling ListView while item is selected causes display problems

Alright, so I'm using a ListView with a custom adapter. Everything works fine and dandy...until the user selects a ListView row and tries to scroll.
When the user selects a row, the background color of that row changes to blue (which is good).
But, problems occur when we begin scrolling: When we scroll past the selected row, the blue fixes itself to either the bottom or the top of the ListView, depending on which way we were scrolling.
Selected row changes color on touch (good)
Part of the background of selected row is fixed to top when scrolling down (not good)
Part of the background of selected row is fixed to bottom when scrolling up (not good)
Here is my source code:
List View that I'm populating dynamically
<ListView
android:id="#+id/tallyDataListView"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:divider="#000000"
android:dividerHeight="1dp"
android:fadeScrollbars="false"
android:listSelector="#0099FF" >
layout_list_view_row.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="wrap_content"
android:orientation="horizontal" >
<View
android:focusable="false"
android:focusableInTouchMode="false"
style="#style/tableSideBorderLine" />
<TextView
android:id="#+id/COLUMN_PIPE_NUMBER"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
style="#style/tableColumn"
xmlns:android="http://schemas.android.com/apk/res/android" />
<View
android:focusable="false"
android:focusableInTouchMode="false"
style="#style/tableColumnDivider" />
<TextView
android:id="#+id/COLUMN_TOTAL_LENGTH"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
style="#style/tableColumn"
xmlns:android="http://schemas.android.com/apk/res/android" />
<View
android:focusable="false"
android:focusableInTouchMode="false"
style="#style/tableColumnDivider" />
<TextView
android:id="#+id/COLUMN_ADJUSTED"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
style="#style/tableColumn"
xmlns:android="http://schemas.android.com/apk/res/android" />
<View
android:focusable="false"
android:focusableInTouchMode="false"
style="#style/tableSideBorderLine" />
</LinearLayout>
My Custom Adapter
import android.app.Activity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;
import java.util.ArrayList;
public class ListViewAdapter extends ArrayAdapter<String>{
LayoutInflater inflater;
private final ArrayList<String> adjustedValues;
private final ArrayList<String> pipeNumbers;
private final ArrayList<String> totalLengthValues;
public ListViewAdapter(Activity pContext, ArrayList<String> pPipeNumbers,
ArrayList<String> pTotalLengthValues, ArrayList<String> pAdjustedValues)
{
super(pContext, R.layout.layout_list_view_row, pAdjustedValues);
adjustedValues = pAdjustedValues;
pipeNumbers = pPipeNumbers;
totalLengthValues = pTotalLengthValues;
inflater = pContext.getLayoutInflater();
}
#Override
public View getView(int pPosition, View pView, ViewGroup pParent)
{
View view = inflater.inflate(R.layout.layout_list_view_row, pParent, false);
TextView col1 = (TextView)view.findViewById(R.id.COLUMN_PIPE_NUMBER);
col1.setText(pipeNumbers.get(pPosition));
TextView col2 = (TextView)view.findViewById(R.id.COLUMN_TOTAL_LENGTH);
col2.setText(totalLengthValues.get(pPosition));
TextView col3 = (TextView)view.findViewById(R.id.COLUMN_ADJUSTED);
col3.setText(adjustedValues.get(pPosition));
return view;
}
}

This is the common problem about the listview. When you scroll down it creates the new view every time. That is why the selected element from the top gets out of the focus and another element is selected.
For this problem you have to extend the BaseAdapter class and
#Override
public View getView(int position, View convertView, ViewGroup parent) {
Vehical vehical = vehicals.get(position);
ViewHolder viewHolder = null;
if(convertView==null)
{
viewHolder = new ViewHolder();
convertViewactivity.getLayoutInflater().inflate(R.layout.list_item,null);
convertView.setTag(viewHolder);
}
else
{
viewHolder = (ViewHolder) convertView.getTag();
}
viewHolder.tvVehicalName = (TextView) convertView.findViewById(R.id.vehicle_name);
viewHolder.tvVehicalName.setText(vehical.getVehicalName());
if(vehical.isSelected()){
viewHolder.tvVehicalName.setTextColor(Color.RED);
}
else
{
viewHolder.tvVehicalName.setTextColor(Color.BLACK);
}
return convertView;
}
//On listener of the listview
searchList.setOnItemClickListener(
new OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> arg0, View view, int position, long arg3) {
if(searchAdapter.isItemSelected(position))
{
searchAdapter.setSelectedItem(position,false);
selectedList.remove(((Vehical)searchAdapter.getItem(position)).getVehicalName());
}
else
{
if(selectedList.size()<new_vehiclelimit){
searchAdapter.setSelectedItem(position,true);
selectedList.add(((Vehical)searchAdapter.getItem(position)).getVehicalName());
}
else
{
Toast.makeText(getApplicationContext(), "Vechicle Limit is Over", Toast.LENGTH_SHORT).show();
}
}

Keep a reference for selected row position in your Adapter, say
int selectedPos = -1;
The value will be -1 when no row is selected. And in the OnItemClickListener of the listview,update selectedPos with the clicked position and call notifyDatasetChanged() on the adapter. In the getView method of the adapter, check for the selectedPos value and highlight the row accordingly.

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 GridView is empty

EDIT: This problem has been resolved, so the code in my original post does not apply anymore. Thanks to everyone who contributed.
First off, I have checked other similar questions but they either don't match mine or use the BaseAdapter. What I'm trying to do is display a text-image combination as part of a GridView. The actual app is larger, but my problem is that the GridView is blank in the very first activity!
I'd appreciate if someone can take a quick look at it and tell me what's wrong.
Code for layout file used for GridView elements:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical" >
<ImageView
android:id="#+id/iv_grid"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/tv_grid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
Layout file of first Activity:
<RelativeLayout 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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".CategoriesActivity" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="54dp"
android:text="Select a category to learn more" />
<TextView
android:id="#+id/tv_grid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="26dp"
android:text="Lessons from History"
android:textSize="18sp" />
<GridView
android:id="#+id/gridView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textView2"
android:layout_marginTop="25dp"
android:numColumns="3" >
</GridView>
</RelativeLayout>
And finally, the Java file:
package com.example.historicpersonalities;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.TextView;
public class CategoriesActivity extends Activity {
GridView gv_categories;
public int selected; //which category is selected [0-4]?
String[] data; //holds the data for GridView
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layout_categories);
populate();
selected = -1;
gv_categories = (GridView) findViewById(R.id.gridView1);
gv_categories.setAdapter(new MyAdapter(this,
android.R.layout.simple_expandable_list_item_1));
gv_categories.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> arg0, View arg1, int index,
long arg3) {
}
});
}
class MyAdapter extends ArrayAdapter<String> {
public MyAdapter(Context context, int textViewResourceId) {
super(context, textViewResourceId);
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View v = inflater.inflate(R.layout.layout_grid_scheme, null);
TextView item = (TextView) findViewById(R.id.tv_grid);
item.setText(data[position]);
ImageView img = (ImageView) findViewById(R.id.iv_grid);
img.setImageResource(R.drawable.dummy);
Log.d("ankush", ""+position);
return v;
}
}
private void populate() {
data = new String[5];
data[0] = "Writers";
data[1] = "Painters";
data[2] = "Conquerors";
data[3] = "Chemists";
data[4] = "Actors";
}
}

I think the problem is the height of your gridView. GridView is a scrollable container and can contain any amount of content in any height. Try to set background color to your gridView and you will see, that there is no gridview on the screnn.
It's because you use wrap_content for gridview, but it's incorrect.

If I'm not wrong, it seems that in your constructor you don't pass any data to the adapter.
public MyAdapter(Context context, int textViewResourceId) {
super(context, textViewResourceId);
}
In this code snippet, your are using ArrayAdapter (Context context, int textViewResourceId) which initialize an empty arraylist as the objects to represent in the GridView.
public ArrayAdapter(Context context, int textViewResourceId) {
init(context, textViewResourceId, 0, new ArrayList<T>());
}
Therefore your GridView should be empty. In addition to that, it seem you didn't properly implement the getView.(findViewById() parts should be handled as shown in the Opiatefuchs's answer)
If you want to extend ArrayAdapter, you should be calling a constructor which takes an array of objects as a parameter. (Of course there are many ways to make a custom adapter you can extend BaseAdapter or while extending ArrayAdapter you can override some other methods)
This way it should work:
class MyAdapter extends ArrayAdapter<String> {
public MyAdapter(Context context, int textViewResourceId, String[] objects) {
super(context, textViewResourceId, objects);
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View view;
if (convertView == null) {
LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
view = inflater.inflate(R.layout.layout_grid_scheme, null);
} else {
view = convertView;
}
TextView item = (TextView) view.findViewById(R.id.tv_grid);
item.setText(getItem(position));
ImageView img = (ImageView) view.findViewById(R.id.iv_grid);
img.setImageResource(R.drawable.dummy);
}
}

Don´t know if this causes the problem, but You have to set Your TextView and ImageView in Your adapter like this:
TextView item = (TextView) v.findViewById(R.id.tv_grid);
item.setText(data[position]);
ImageView img = (ImageView) v.findViewById(R.id.iv_grid);
img.setImageResource(R.drawable.dummy);
EDIT
First of all, the best way is to combine all three solutions. BUT, I have seen another issue in Your xml layout: You put the same id to the TextView inside Your GridView Element xml and Your Activity layout xml. Both TextViews got id="#+id/tv_grid" . This could never work, change the id´s to different ones