android listView with tab fragments

Question

I have created a page which has two tabs and in both the tabs i want to add a list which has name and an image in each row. so i have done the coding for listview with images separately but i am confused about how to add that listview in the tab fragment page. Can anyone help me for this. Below is my code for the same. Thank You.

Code for tab fragment:-

TabPagerAdapter.java

package com.example.mygoaguide;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentStatePagerAdapter;
/* This class is used to display tab fragments */

 public class TabPagerAdapter extends FragmentStatePagerAdapter
 {

public TabPagerAdapter(FragmentManager fm)
{
    super(fm);

}

@Override
public Fragment getItem(int i) 
{
    switch (i) {
    case 0:
        // Fragment for beach tab
        return new Beaches();

    case 1:
        //fragment for others tab
        return new Other();
    }
    // TODO Auto-generated method stub
    return null;
}

@Override
public int getCount() {
    // no. of tabs
    return 2;
}

}

 Beaches.java

package com.example.mygoaguide;


import android.support.v4.app.Fragment;
import android.content.Intent;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class Beaches extends Fragment
{

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) 
{
    View v=inflater.inflate(R.layout.beach_fragment,container, false);
    ((TextView)v.findViewById(R.id.textView1)).setText("Beach");
    return v;   
}


 }

Other.java

package com.example.mygoaguide;


import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class Other extends Fragment
{


@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {
    View v=inflater.inflate(R.layout.other_fragment,container, false);
    ((TextView)v.findViewById(R.id.textView1)).setText("Others");
    return v;
}


}

MainActivity.java

package com.example.mygoaguide;
import android.os.Bundle;
import android.app.ActionBar;
import android.app.FragmentTransaction;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
public class MainActivity extends FragmentActivity {
ViewPager Tab;
TabPagerAdapter TabAdapter;
ActionBar actionBar;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    TabAdapter = new TabPagerAdapter(getSupportFragmentManager());
    Tab = (ViewPager)findViewById(R.id.pager);
    Tab.setOnPageChangeListener(
            new ViewPager.SimpleOnPageChangeListener() {
                @Override
                public void onPageSelected(int position) {
                  actionBar = getActionBar();
                  actionBar.setSelectedNavigationItem(position);                    }
            });
    Tab.setAdapter(TabAdapter);
    actionBar = getActionBar();
    //Enable Tabs on Action Bar
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
    ActionBar.TabListener tabListener = new ActionBar.TabListener(){
  @Override
  public void onTabReselected(android.app.ActionBar.Tab tab,
      FragmentTransaction ft) {
    // TODO Auto-generated method stub
  }
  @Override
   public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
          Tab.setCurrentItem(tab.getPosition());
      }
  @Override
  public void onTabUnselected(android.app.ActionBar.Tab tab,
      FragmentTransaction ft) {
    // TODO Auto-generated method stub
  }};
  //Add New Tab
  actionBar.addTab(actionBar.newTab().setText("Beaches").setTabListener(tabListener));
  actionBar.addTab(actionBar.newTab().setText("More").setTabListener(tabListener));

   }
}

Code for ListView :-

MainActivity.java

package com.example.goa;

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.view.Choreographer.FrameCallback;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.HashMap;



public class MainActivity extends Activity 
{

private ListView listView;
private ArrayList<HashMap<String,Object>> data;
private ListAdapter adapter;

@Override
public void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    listView = (ListView) findViewById(R.id.listView);

    data = new ArrayList<HashMap<String, Object>>();
    prePareListData();
    adapter = new ListAdapter(this,data);
    listView.setAdapter(adapter);


}
private void prePareListData(){

    HashMap<String,Object> row1 = new HashMap<String, Object>();
    row1.put("ID",1);
    row1.put("IMAGE",R.drawable.aguada_beach);
    row1.put("NAME","Aguada Beach");
    row1.put("ARROWIMAGE",R.drawable.arrow_icon);
    data.add(row1);

    HashMap<String,Object> row2 = new HashMap<String, Object>();
    row2.put("ID",2);
    row2.put("IMAGE",R.drawable.anjuna_beach);
    row2.put("NAME","Anjuna Beach");
    row2.put("ARROWIMAGE",R.drawable.arrow_icon);
    data.add(row2);

    HashMap<String,Object> row3 = new HashMap<String, Object>();
    row3.put("ID",3);
    row3.put("IMAGE",R.drawable.arambol_beach);
    row3.put("NAME","Arambol Beach");
    row3.put("ARROWIMAGE",R.drawable.arrow_icon);
    data.add(row3);


    HashMap<String,Object> row4 = new HashMap<String, Object>();
    row4.put("ID",4);
    row4.put("IMAGE",R.drawable.baga_beach);
    row4.put("NAME","Baga Beach");
    row4.put("ARROWIMAGE",R.drawable.arrow_icon);
    data.add(row4);

    HashMap<String,Object> row5 = new HashMap<String, Object>();
    row5.put("ID",5);
    row5.put("IMAGE",R.drawable.calangute_beach);
    row5.put("NAME","Calangute beach");
    row5.put("ARROWIMAGE",R.drawable.arrow_icon);
    data.add(row5);


    HashMap<String,Object> row6 = new HashMap<String, Object>();
    row6.put("ID",6);
    row6.put("IMAGE",R.drawable.candolim_beach);
    row6.put("NAME","Candolim Beach");
    row6.put("ARROWIMAGE",R.drawable.arrow_icon);
    data.add(row6);

    HashMap<String,Object> row7 = new HashMap<String, Object>();
    row7.put("ID",7);
    row7.put("IMAGE",R.drawable.miramar_beach);
    row7.put("NAME","Miramar Beach");
    row7.put("ARROWIMAGE",R.drawable.arrow_icon);
    data.add(row7);

    HashMap<String,Object> row8 = new HashMap<String, Object>();
    row8.put("ID",8);
    row8.put("IMAGE",R.drawable.morjim_beach);
    row8.put("NAME","Morjim Beach");
    row8.put("ARROWIMAGE",R.drawable.arrow_icon);
    data.add(row8);


    HashMap<String,Object> row9 = new HashMap<String, Object>();
    row9.put("ID",9);
    row9.put("IMAGE",R.drawable.palolem_beach);
    row9.put("NAME","Palolem Beach");
    row9.put("ARROWIMAGE",R.drawable.arrow_icon);
    data.add(row9);

    HashMap<String,Object> row10 = new HashMap<String, Object>();
    row10.put("ID",10);
    row10.put("IMAGE",R.drawable.vagator_beach);
    row10.put("NAME","Vagator Beach");
    row10.put("ARROWIMAGE",R.drawable.arrow_icon);
    data.add(row10);


}

class ListAdapter extends BaseAdapter{

    private Context context;
    private ArrayList<HashMap<String,Object>> list;
    public ListAdapter(Context context,ArrayList<HashMap<String,Object>> list){
        this.context = context;
        this.list = list;
    }

    @Override
    public int getCount() {
        return list.size();
    }

    @Override
    public Object getItem(int position) {
        return list.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder;
        if(convertView == null){
            holder = new ViewHolder();
            convertView = LayoutInflater.from(context).inflate(R.layout.row_beach,null,false);
            holder.imgItemImage = (ImageView) convertView.findViewById(R.id.imgItemImage);
            holder.imgItemArrow = (ImageView) convertView.findViewById(R.id.imgItemArrow);
            holder.txtItemName = (TextView) convertView.findViewById(R.id.txtItemName);
            convertView.setTag(holder);
        }else{
            holder = (ViewHolder) convertView.getTag();
        }
        holder.imgItemImage.setImageResource((Integer)list.get(position).get("IMAGE"));
        holder.imgItemArrow.setImageResource((Integer)list.get(position).get("ARROWIMAGE"));
        holder.txtItemName.setText(list.get(position).get("NAME").toString());

        return convertView;
    }

    class ViewHolder{
        ImageView imgItemImage;
        ImageView imgItemArrow;
        TextView  txtItemName;
    }
 }

}

  activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@android:color/background_light"
 >

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:orientation="vertical" >

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    </ListView>

</LinearLayout>

 row_beach.xml


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">

<ImageView
    android:id="@+id/imgItemImage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:src="@drawable/ic_launcher" />

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="40dp"
    android:layout_marginLeft="5dp"
    android:layout_weight="0.92" >

    <TextView
        android:id="@+id/txtItemName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:textColor="@android:color/black"/>
</LinearLayout>

<ImageView
    android:id="@+id/imgItemArrow"
    android:layout_width="15dp"
    android:layout_height="15dp"
    android:src="@drawable/ic_launcher"
    android:layout_marginRight="5dp"/>

Answer 1

You need to have your ListView added to each of your fragments layouts i.e:

1) The layout in your activity_main.xml should be the one you use in: layout.beach_fragment.xml and layout.other_fragment.xml. So move the content of that layout to your fragments Layout.

2) In each of your fragments get a reference to your ListView and build your adapter the same way you are doing in your Activity.

Basically you need to move the logic that you have in your Activity to each one of your fragments.

So I would do something like this:

a)

public abstract class BaseListFragment extends Fragment {

   protected ListView mListView;
   protected BaseAdapter mAdapter;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup parent, Bundle savedInstanceState){

        View view = inflater.inflate(getLayoutId(),parent,false);
        mListView = view.findViewById(R.id.listview);
        return view;
    }

    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
          super.onViewCreated(view,savedInstanceState);

          mAdapter = newListAdapter();
          mListView.setAdapter(mAdapter);

    }

    //Build your adapter with data that you need by implementing this.
    protected abstract BaseAdapter newListAdapter();
    // This is the layout id that you use to inflate the view
    protected abstract int getLayoutId();
}

///

b) In your Beaches and Other fragments, extends that base fragment and implement the required methods.

Example for Beaches

public class Beaches extends BaseListFragment {

  private List<HashMap<String,Object>> data ; // this is the list you defined in your main Activity.

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup parent, Bundle savedInstanceState) {
      return super.onCreateView(inflater,parent,savedInstanceState);

  }

  @Override
  public BaseAdapter newListAdapter(){
      // call your  prePareListData();
      prePareListData();
      return new ListAdapter(this,data);
  }

  @Override
  public int getLayoutId(){
      return R.layout.beach_fragment;
  }
}

======
Some notes:
1) You will need to implement a ListAdapter for each of your fragments Beaches and Others as they do not have the same row layout .

2) move your layout content of activity_main.xml to both beach_fragment.xml and other_fragment.xml.

3) You do not have to use the abstraction I used above. My assumption is that you might need different things in each of the two tabs in addition to a listview hence the abstraction : getLayoutId(). If not you could just inflate the same layout for each of the fragment

4) You could also extend the ListFragment for both your fragments in which case you would only need to implement the Adapters for each of them. here is a link : http://developer.android.com/reference/android/app/ListFragment.html

5) Also I would suggest you go through the links posted above. First master ListView in a fragment. Then you can move on to adding multiple ListFragments to Tabs . Hope it helps,