This is the layout of my navigation drawer:
<?xml version="1.0" encoding="utf-8"?>
<!-- the root view is now a LinearLayout, all other Views are children of this -->
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:background="#121314"
android:orientation="vertical">
<!-- a separate section to go above the list -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp">
<!-- your image, you can set it later (see NavDrawerFrag) -->
<ImageView
android:id="#+id/nav_image"
android:layout_width="150dp"
android:layout_height="150dp"
android:padding="15dp"
android:src="#android:drawable/ic_menu_myplaces"/>
<!-- a bit of test or a title to go with it
<TextView
android:id="#+id/nav_text"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:text="Default text"/>-->
</LinearLayout>
<!-- some divider thing
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:padding="20dp"
android:background="#000000"/>-->
<!-- your ListView is now a child View -->
<ListView
android:id="#+id/nav_listView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:listSelector="#drawable/colors"/>
</LinearLayout>
I want a custom font in the ListView, but I've been busting my head for two days straight on this. I just can't seem to get it working.
This is the part where the Navigation Drawer is created:
public View onCreateView(LayoutInflater inflater,
ViewGroup container,
Bundle savedInstanceState)
{
// need site names for list
siteNames = getActivity().getResources().getStringArray(R.array.site_names);
Log.d(TAG, "number of sites loaded: " + siteNames.length);
// inflate the parent view (the entire layout)
View view = inflater.inflate(R.layout.fragment_navigation_drawer, container, false);
// now grab the separate child views from inside it
mDrawerListView = (ListView) view.findViewById(R.id.nav_listView);
mDrawerImage = (ImageView) view.findViewById(R.id.nav_image);
//mDrawerText = (TextView) view.findViewById(R.id.nav_text);
// configure the Views
mDrawerImage.setImageResource(R.drawable.orange);
mDrawerListView.setOnItemClickListener(this);
mDrawerListView.setAdapter(new ArrayAdapter<String>(getActionBar().getThemedContext(),
android.R.layout.simple_list_item_1, android.R.id.text1, siteNames));
mDrawerListView.setItemChecked(mCurrentSelectedPosition, true);
// and return the inflated view up the stack
return view;
}
Instead of using the android.R.id.text1 as your textview resource, you should create your own textview xml layout. You could do something like this
<?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="vertical"
android:id= "#+id/listView >
<TextView
android:id="#+id/listItem"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</TextView
</LinearLayout>
The following is the custom adapter you will need so you can set your custom styles to your individual items.
public class listAdapter extends BaseAdapter {
String[] siteNames;
Activity a;
public listAdapter(Activity a, String[] siteNames) {
this.a = a;
this.siteNames = siteNames;
}
public int getCount() {
return siteNames.length;
}
public Object getItem(int position) {
return position;
}
public long getItemId(int position) {
return position;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
View vi = convertView;
vi = a.getLayoutInflater().inflate(R.layout.listView, null);
Typeface tf = Typeface.createFromAsset(a.getAssets(), "fonts/Raleway-Thin.otf");
TextView tv = (TextView) vi.findViewById(R.id.listItem);
tv.setTypeface(tf);
//whatever other changes you want to make to your list items.
return vi;
}
}
You then create a new adapter from this "listAdapter" class, or whatever you would like to name it. Then you can set your listview with this adapter and you should be good to go.
Related
I am trying to display 6 rows inside a linear layout. I want to do this through fragments as the content will be dynamic and the number of rows will also be dynamic later on. I have the following code but only one row appears on the screen. I have SettingsActivity.java, settings.xml ThemeRowFragment,java and theme_row_layout.xml.
SettingsActivity.java
//imports
public class SettingsActivity extends FragmentActivity {
private int NUM_THEMES = 7;
ThemeRowFragment[] view_themes;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.settings);
view_themes = new ThemeRowFragment[NUM_THEMES];
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager
.beginTransaction();
for (int i = 0; i < view_themes.length; i++) {
view_themes[i] = new ThemeRowFragment(COLOR_MAP[i]);
fragmentTransaction.add(R.id.theme_linear_layout, view_themes[i],
"Row" + i);
}
fragmentTransaction.commit();
}
}
settings.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
android:id="#+id/theme_linear_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/string_theme"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/string_theme"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#cde21c" />
</LinearLayout>
ThemeRowFragment.java
public class ThemeRowFragment extends Fragment {
private int[] colors;
public ThemeRowFragment(int colors[]) {
super();
this.colors = colors;
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.theme_row_layout, container,
false);
return view;
}
}
theme_row_layout.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:orientation="horizontal" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/pick_colors" >
</TextView>
</LinearLayout>
Fragments will inflate themselves into the View you add them to. So you really can't do it this way. So you need to have X empty containers, one for each fragment you are going to inflate. Add each fragment to the same container will actually layer them all on top of each other, sort of making them really hard to see and use when the screen renders.
Alternatives:
You could do something like the following:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
android:id="#+id/theme_linear_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/string_theme"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/string_theme"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#cde21c" />
<FrameLayout android:id="#+id/fragment_container1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout android:id="#+id/fragment_container2"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout android:id="#+id/fragment_container3"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout android:id="#+id/fragment_container4"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout android:id="#+id/fragment_container5"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<!-- etc. -->
</LinearLayout>
Or just add each FrameLayout programatically via the LinearLayout's addView() with a unique ID for each FrameLayout.
LinearLayout layout = (LinearLayout)findViewById(R.id.linear);
FragmentTxn txn = getFragmentManager.beginTransaction();
int i = 1; // This seems really fragile though
for (Fragment f : fragments) {
FrameLayout frame = new FrameLayout(this);
frame.setId(i);
layout.addView(frame);
txn.add(i, f);
i++;
}
txn.commit();
Or the other way would be to just use a listView and add each row that way. Not using Fragments at all.
<TextView
android:id="#+id/string_theme"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/string_theme"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#cde21c" />
<ListView android:id="#+id/listview"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
then later on do something like this:
ListView view = (ListView)findViewById(R.id.listview);
view.setAdapter(new ArrayAdapter(items) { // items is a collection of objects you are representing
public View getView(int position, View view, ViewGroup parent) {
view = LayoutInflator.from(parent.getContext()).inflate(R.layout.theme_row_layout, parent, false);
// manipulate the view
return view;
});
You are creating a instance of ThemeRowFragment n number of times. The problem is you are creating this as an fragment and trying to add it dynamically. Since you instantiate the same Fragment i suggest you to use ListView and use a custom adapter and set CustomView and override the getView method of your adapter to adjust your views
How can I populate a listview using a Dictionary from a fragment for each row and use a custom layout ? In layout of row, contains two textview and one Imageview.
My Layout with listview:
<?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">
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
android:background="#ff04aefa" />
</LinearLayout>
Layout Row:
<?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="wrap_content">
<ImageView
android:src="#android:drawable/ic_menu_gallery"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imageView1" />
<LinearLayout
android:id="#+id/singleMessageContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dip"
android:paddingLeft="10dip"
android:text="Texview 1"
android:textColor="#android:color/background_light" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dip"
android:paddingLeft="10dip"
android:textColor="#android:color/background_light" />
</LinearLayout>
</LinearLayout>
My ListFragment.cs:
Dictionary <string,string> _Dic = new Dictionary<string,string>();
string[] _ValuesOfDic = { };
public override View OnCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
_Dic = MyProject.UtilDic.ReturnDic ();
_ValuesOfDic = new string[_Dic.Count];
int cont = 0;
foreach (var item in _Dic) {
_ValuesOfDic[cont] = item.Value;
cont++;
}
View view = inflater.Inflate(Resource.Layout.LayoutListOfValues, null); //Layout with listView
ListView listview = (ListView)view.FindViewById (Android.Resource.Id.List);
listview.Adapter = new ArrayAdapter <string> (this.Activity,
Android.Resource.Layout.SimpleListItem1,
_ValuesOfDic); //Here I want to use the layout for the rows of listview
return view;
}
public override void OnListItemClick (ListView l, View v, int position, long id)
{
string value = l.Adapter.GetItem (position).ToString ();
string key = _Dic.FirstOrDefault (x => x.Value.Contains (value)).Key;
Console.WriteLine ("Value: " + value);
Console.WriteLine ("Key: " + key);
}
Create a Custom Adapter, which inherits from BaseAdapter and can take your Dictionary and present accordingly. ArrayAdapter only takes lists or arrays.
So something like:
public class MyDictionaryAdapter : BaseAdapter
{
private Dictionary<TX,TY> _dict;
public MyDictionaryAdapter(Dictionary<TX, TY> dict)
{
_dict = dict;
}
public override View GetView (int position, View convertView, ViewGroup parent)
{
// populate your listview items here
}
}
You can read more about ListView and Adapters here: http://developer.xamarin.com/guides/android/user_interface/working_with_listviews_and_adapters/
I tried to use a ListFragment with a custom layout: Simple static headline, below the ListContent given with the SimpleCursorAdapter. The list itself also has a custom layout. The SimpleCursorAdapter works (Query is fine, Custom Layout for List works). As long as I do not use custom layout for the Fragment itself, everything works fine.
If I add the layout for the Fragment, only the headline (Textview) works, the list keeps empty.
Custom Layout for the List:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp" >
</TextView>
<TextView
android:id="#+id/value"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:gravity="right"
android:layout_gravity="right"
android:textSize="20sp" >
</TextView>
Custom Layout for the Fragment:
<?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" >
<TextView
android:id="#+id/last_update"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</TextView>
<ListView
android:id="#id/android:list"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</ListView>
<TextView android:id="#id/android:empty"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FF0000"
android:text="No data">
</TextView>
I commented some stuff out - it was worth a try because i read that it helped - for me it was not helping.
Last bot not least the Code of the Fragment:
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.viewfragment, container, false);
}
#Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
TableDataGateway tableGate = new TableDataGateway(getActivity());
tableGate.UpdateUIRecords();
TextView tv = (TextView) getView().findViewById(R.id.last_update);
tv.setText(tableGate.getLastUpdateDate());
Cursor cursor = tableGate.selectUIRecords();
dBadapter = new SimpleCursorAdapter(getActivity(), R.layout.viewlayout, cursor, new String[] { DB_COL_GUI_LABEL, DB_COL_LAST_KNOWN_VALUE }, new int[] { R.id.label, R.id.value }, 0);
super.setListAdapter(dBadapter);
}
Question is: Why is the ListAdapter not connecting with the fragment layout?
Regards
Flizz
CLARIFICATION OF THE PROBLEM
I have a similar problem like Android + ListFragment with a custom view hierarchy
But i do not have stacked the content over each other, i only see the TextView content in the top corner of the screen and below where the list should be is just a white background.
I was pretty sure to have done anything as Google told to do (http://developer.android.com/reference/android/app/ListFragment.html keyword Screen Layout)
Update:
I am unsure whether i have to change my main_activity.xml:
<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=".MainActivity" >
</RelativeLayout>
I have not considered the fragment in there, do not know whether this is needed. Yesterday i tried a few functions to understand my problem in detail. I used getView().isShown() and get the return FALSE - this seems wrong to my, but I have no clue what is wrong here ...
Your ListView id must be #android:id/list in a ListFragment.
Maybe you should also replace super.setListAdapter to just setListAdapter.
Hey Here is a snippet of correct usage of CustomAdapter:
private class MyCustomAdapter extends BaseAdapter {
private ArrayList<String> mData = new ArrayList<String>();
private LayoutInflater mInflater;
public MyCustomAdapter() {
mInflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
public void addItem(final String item) {
mData.add(item);
notifyDataSetChanged();
}
#Override
public int getItemViewType(int position) {
if(position < LIST_ITEM_TYPE_1_COUNT)
return LIST_ITEM_TYPE_1;
else
return LIST_ITEM_TYPE_2;
}
#Override
public int getViewTypeCount() {
return LIST_ITEM_TYPE_COUNT;
}
#Override
public int getCount() {
return mData.size();
}
#Override
public String getItem(int position) {
return mData.get(position);
}
#Override
public long getItemId(int position) {
return position;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder = null;
int type = getItemViewType(position);
if (convertView == null) {
holder = new ViewHolder();
switch(type) {
case LIST_ITEM_TYPE_1:
convertView = mInflater.inflate(R.layout.list_item_type1, null);
holder.textView = (TextView)convertView.findViewById(R.id.list_item_type1_text_view);
break;
case LIST_ITEM_TYPE_2:
convertView = mInflater.inflate(R.layout.list_item_type2, null);
holder.textView = (TextView)convertView.findViewById(R.id.list_item_type2_button);
break;
}
convertView.setTag(holder);
} else {
holder = (ViewHolder)convertView.getTag();
}
holder.textView.setText(mData.get(position));
return convertView;
}
}
public static class ViewHolder {
public TextView textView;
}
}
After reviewing
Blank ListView with SimpleCursorAdapter
http://developer.android.com/samples/CustomChoiceList/src/com.example.android.customchoicelist/MainActivity.html
http://developer.android.com/samples/CustomChoiceList/res/layout/sample_main.html
i found the solution - everything is right so far. I just messed up the layout file:
Both contents ListView as TextView had the value "match_parent" - so there was not enough layout room for the other component. The component which comes first in the layout file overwrites everything else.
I adjusted the layout file to this:
<?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" >
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1">
</ListView>
<TextView android:id="#android:id/empty"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:background="#FF0000"
android:text="No data">
</TextView>
<TextView
android:id="#+id/last_update"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</TextView>
</LinearLayout>
and everything works fine. Do NOT use the fragment layout for the activity - it should have its own layout, else it will lead to errors.
Thanks everybody for helping.
Rgds
Flizz
Copying other people's code that I only half understand, I have succeeded in making a listview, each element of which contains three TextViews and a CheckBox.
The code involves the following two xml files. First "customrowview.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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="142dp"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView android:id="#+id/text1"
android:layout_width="match_parent"
android:layout_height="fill_parent"/>
<TextView android:id="#+id/text2"
android:layout_width="match_parent"
android:layout_height="fill_parent"/>
<TextView android:id="#+id/text3"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right" >
<CheckBox
android:id="#+id/checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="" />
<Button
android:id="#+id/editbut"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Edit" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
Then "customlistview.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/android:list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#000fff"
android:layout_weight="2"
android:drawSelectorOnTop="false">
</ListView>
<TextView android:id="#id/android:empty"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFff00"
android:text="No data"
/>
</LinearLayout>
I get access to the list via:
listView = (ListView) findViewById(R.id.mylist);
The code also involves:
SimpleAdapter adapter = new SimpleAdapter(
this,
list,
R.layout.custom_row_view,
new String[] {"label","daysordate","time"},
new int[] {R.id.text1,R.id.text3, R.id.text2}
);
listView.setAdapter(adapter);
Now what I want to do is something like listView.setlistenerforbuttonwithinlist() !
But can not work out how to do it. I know there have been related questions on SO before, but I can not understand the answers :-(
EDIT: After seeing azgolfers answer... I made a custom adapter as follows:
public class myadapter extends SimpleAdapter
{
LayoutInflater mLayoutInflater;
public void myadapter(Context context)
{
mLayoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
#Override
public View getView(int position, View convertView, ViewGroup parent)
{
View view = null;
if (convertView != null)
{
view = convertView;
}
else
{
view = mLayoutInflater.inflate(R.layout.custom_row_view, null);
}
Button buttonEdit = (Button) view.findViewById(R.id.editbut);
buttonEdit.setOnClickListener(new OnClickListener()
{
public void onClick(View arg0)
{
Log.i("xx","Button pressed!");
}
});
return super.getView(position, convertView, parent);
}
public myadapter(Context context, List<? extends Map<String, ?>> data,int resource, String[] from, int[] to)
{
super(context, data, resource, from, to);
// TODO Auto-generated constructor stub
}
}
Unfortunatly this crashes at the line
view = mLayoutInflater.inflate(R.layout.custom_row_view, null);
With a null pointer exception... not sure why :-(
First, you need to extend your own Adapter, probably from an ArrayAdapter. ArrayAdapter has a method called getView that you will need to override and provide the UI for a listview row at a certain position. e.g.
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View view = null;
if (convertView != null) {
view = convertView;
} else {
view = mLayoutInflater.inflate(R.layout.custom_row_view, null);
}
Button buttonEdit = (Button) view.findViewById(R.id.editbut);
buttonEdit.setOnClickListener(...);
}
In getView(), since you are building the UI of the row, you have a chance here to set the click handler on your button.
Also, you also need to add this to your Button's xml tag:
android:focusable="false"
android:focusableInTouchMode="false"
Without that, button inside a listview will not fire OnClick event when pressed.
try to сhange
view = mLayoutInflater.inflate(R.layout.custom_row_view, null);
to
view = mLayoutInflater.inflate(R.layout.custom_row_view, parent, false);
Good luck!
This is probably a stupid question.
I know I can wrap a ListView in ViewFlipper, but can we wrap individual ListView Items in a ViewFlipper? For instance, the latest Twitter app uses a ListView to display Tweets. It also allows you to set settings on individual items by sliding the tweet out of the way exposing the setting option icons below. Is this a custom implementation or do we have the ability to create something similar using ListView and ViewFlipper? Thanks, any advice is appreciated!
I've spent some time on this and got the ListView to display additional content via the ViewFlipper. However, the view only seems to "flip" on the last item in the ListView. How do I get each item to flip when clicked? Here's some code:
row.xml
<?xml version="1.0" encoding="utf-8"?>
<ViewFlipper xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/flipper" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:id="#+id/toptext" android:layout_width="fill_parent"
android:layout_height="0dip" android:layout_weight="1"
android:gravity="center_vertical" />
<TextView android:id="#+id/bottomtext" android:layout_width="fill_parent"
android:layout_height="0dip" android:layout_weight="1"
android:gravity="center_vertical" />
</ViewFlipper>
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/android:list" android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
ListActivityView.java - extends ListActivity
...
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
...
}
#Override
protected void onListItemClick(ListView l, View v, int position, long id) {
super.onListItemClick(l, v, position, id);
// doesn't matter which line is clicked
// only the last item in the ListView displays the bottomText
viewFlipper.showNext();
}
ListingAdapter.java - extends ArrayAdapter
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View v = convertView;
if (v == null) {
LayoutInflater vi = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
v = vi.inflate(R.layout.row, null);
viewFlipper = (ViewFlipper) v.findViewById(R.id.flipper);
}
If I am getting your question correct - you can use ViewFlipper inside a layout that defines a row in your list and init it the way you like when rendering corresponding view
Below code helps you achieve a requirement for having a view flipper in list view with invidual row flipping
## xml file ##
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/regularLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="#dimen/activity_horizontal_margin">
<ViewFlipper
android:id="#+id/row_item_flipper"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<TextView
android:id="#+id/list_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Regular Layout"
android:textSize="28sp" />
<Button
android:text="Flip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/front_button" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<TextView
android:id="#+id/backTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Flip row done"
android:textSize="18sp" />
<Button
android:text="Flip back"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/back_button" />
</LinearLayout>
</ViewFlipper>
</LinearLayout>
----------
## Java code ##
#Override
public ItemViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.row_item, parent, false);
return new ItemViewHolder(itemView);
}
#Override
public void onBindViewHolder(final ItemViewHolder holder, int position) {
final CustomItem data = dataList.get(position);
holder.regularLayout.setVisibility(View.VISIBLE);
holder.swipeLayout.setVisibility(View.GONE);
holder.listItem.setText(data.dataItemValue );
holder.backTextView.setText(data.dataItemValue + " position : "+ position);
holder.viewFlipper.setFlipInterval(0);
holder.viewFlipper.setInAnimation(null);
holder.viewFlipper.setOutAnimation(null);
if(holder.viewFlipper.getDisplayedChild()==0 && data.isFlipON){
holder.viewFlipper.setDisplayedChild(1);
} else if(holder.viewFlipper.getDisplayedChild()==1 && !data.isFlipON){
holder.viewFlipper.setDisplayedChild(0);
}else if(data.isFlipON){
holder.viewFlipper.setDisplayedChild(1);
}else{
holder.viewFlipper.setDisplayedChild(0);
}
holder.frontButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
AnimationFactory.flipTransition(holder.viewFlipper, AnimationFactory.FlipDirection.LEFT_RIGHT);
data.isFlipON = true;
}
});
holder.backButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
data.isFlipON = false;
AnimationFactory.flipTransition(holder.viewFlipper, AnimationFactory.FlipDirection.LEFT_RIGHT);
}
});
}