Hello guys.Today we discuss about Android Custom ListView Master Detail interface.
Our ListView shall have images and text.
SECTION 1 : Our MainActivity
This is our main activity.
It is our master view.
The master view will display a ListView with Player objects.
package com.example.listviewmasterdetail; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.view.View; import android.widget.AdapterView; import android.widget.AdapterView.OnItemClickListener; import android.widget.ListView; public class MainActivity extends Activity { ListView lv; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); lv=(ListView) findViewById(R.id.listView1); //ADAPTER CustomAdapter adapter=new CustomAdapter(this); lv.setAdapter(adapter); //EVENTS lv.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> arg0, View v, int pos, long id) { // TODO Auto-generated method stub Intent i=new Intent(getApplicationContext(), PlayerActivity.class); //PASS INDEX OR POS i.putExtra("Position", pos); startActivity(i); } }); }
SECTION 2 : Our DetailActivity
This is our detail activity.
This class will display the details of a single player object.
package com.example.listviewmasterdetail; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.ImageView; import android.widget.TextView; public class PlayerActivity extends Activity { int pos=0; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_player); //GET PASSED DATA Intent i=getIntent(); pos=i.getExtras().getInt("Position"); //GET VIEWS final CustomAdapter adapter=new CustomAdapter(this); final ImageView img=(ImageView) findViewById(R.id.imageView1); final TextView nameTv=(TextView)findViewById(R.id.nameTxt); final TextView goalTv=(TextView) findViewById(R.id.goalTxt); //SET DATA img.setImageResource(adapter.images[pos]); nameTv.setText(adapter.names[pos]); goalTv.setText(adapter.goals[pos]); Button nextBtn=(Button) findViewById(R.id.button1); //NEXT CLICKED nextBtn.setOnClickListener(new OnClickListener() { @Override public void onClick(View arg0) { // TODO Auto-generated method stub int position=pos+1; //set data img.setImageResource(adapter.images[position]); nameTv.setText("Name: "+adapter.names[position]); goalTv.setText("Goals: "+adapter.goals[position]); if(!(position>=adapter.getCount()-1)) { pos +=1; }else { pos = -1; } } }); } }
SECTION 3 : Our CustomAdapter:
This is our adapter class.
This class will derive from android.widget.BaseAdapter
class.
As an adapter it will be responsible for first inflating our model.xml
into a view object. Then it will bind data to that inflated view.
We will also listen to click events for that view then open the detail activity.
package com.example.listviewmasterdetail; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.ImageView; import android.widget.TextView; public class CustomAdapter extends BaseAdapter { private Context c; String[] names={"Michael Carrick","Diego Costa","Ander Herera","Juan Mata","Oscar","Aaron Ramsey","Wayne Rooney","Alexis Sanchez","Van Persie"}; String[] goals={"3","25","9","11","9","11","14","18","13"}; int[] images={R.drawable.carrick,R.drawable.costa,R.drawable.herera,R.drawable.mata,R.drawable.oscar,R.drawable.ramsey,R.drawable.rooney,R.drawable.sanchez,R.drawable.vanpersie}; ; public CustomAdapter(Context ctx) { // TODO Auto-generated constructor stub this.c=ctx; } @Override public int getCount() { // TODO Auto-generated method stub return names.length; } @Override public Object getItem(int pos) { // TODO Auto-generated method stub return names[pos]; } @Override public long getItemId(int pos) { // TODO Auto-generated method stub return pos; } @Override public View getView(int pos, View convertView, ViewGroup parent) { // TODO Auto-generated method stub if(convertView==null) { LayoutInflater inflater=(LayoutInflater) c.getSystemService(Context.LAYOUT_INFLATER_SERVICE); convertView=inflater.inflate(R.layout.player, null); } //GET VIEWS TextView nameTxt=(TextView) convertView.findViewById(R.id.nameTv); TextView goalsTxt=(TextView) convertView.findViewById(R.id.goalsTv); ImageView img=(ImageView) convertView.findViewById(R.id.imageView1); //SET DATA nameTxt.setText(names[pos]); goalsTxt.setText(goals[pos]); img.setImageResource(images[pos]); return convertView; } }
SECTION 4 : Our MainActivity Layout
This layout will be inflate into the UI for our Main activity.
This layout will contain a ListView.
<RelativeLayout 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" > <ListView android_id="@+id/listView1" android_layout_width="match_parent" android_layout_height="wrap_content" android_layout_alignParentLeft="true" android_layout_alignParentTop="true" > </ListView> </RelativeLayout>
SECTION 5 : Our DetailActivity Layout
This is our detail activity layout. It will contain an imageview, textview and button.
<RelativeLayout 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=".PlayerActivity" > <ImageView android_id="@+id/imageView1" android_layout_width="190dp" android_layout_height="275dp" android_layout_alignParentTop="true" android_scaleType="fitCenter" android_src="@drawable/carrick" /> <Button android_id="@+id/button1" android_layout_width="wrap_content" android_layout_height="wrap_content" android_layout_alignParentBottom="true" android_layout_alignParentRight="true" android_text="Next" /> <TextView android_id="@+id/goalTxt" android_layout_width="wrap_content" android_layout_height="wrap_content" android_layout_alignParentLeft="true" android_layout_below="@+id/nameTxt" android_layout_marginTop="24dp" android_text="Goals : " android_textAppearance="?android:attr/textAppearanceLarge" /> <TextView android_id="@+id/textView1" android_layout_width="wrap_content" android_layout_height="wrap_content" android_layout_alignParentLeft="true" android_layout_below="@+id/imageView1" android_text="PLAYER PROFILE" android_textAppearance="?android:attr/textAppearanceLarge" /> <TextView android_id="@+id/nameTxt" android_layout_width="wrap_content" android_layout_height="wrap_content" android_layout_alignParentLeft="true" android_layout_below="@+id/textView1" android_layout_marginTop="17dp" android_text="Name" android_textAppearance="?android:attr/textAppearanceLarge" /> </RelativeLayout>
SECTION 6: Our RowModel Layout
This is our custom listview row model.
It defines how each Listview row will appear.
In this case we have an imageview and two textviews.
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout android_layout_width="match_parent" android_layout_height="match_parent" android_orientation="horizontal" > <TextView android_id="@+id/nameTv" android_layout_width="wrap_content" android_layout_height="wrap_content" android_layout_alignParentTop="true" android_layout_marginLeft="28dp" android_layout_toRightOf="@+id/imageView1" android_text="Name" android_textAppearance="?android:attr/textAppearanceMedium" /> <TextView android_id="@+id/goalsTv" android_layout_width="wrap_content" android_layout_height="wrap_content" android_layout_alignBottom="@+id/imageView1" android_layout_alignLeft="@+id/nameTv" android_layout_marginBottom="16dp" android_text="Goals" android_textAppearance="?android:attr/textAppearanceSmall" /> <ImageView android_id="@+id/imageView1" android_layout_width="65dp" android_layout_height="71dp" android_layout_alignParentLeft="true" android_layout_alignParentTop="true" android_layout_marginLeft="26dp" android_padding="10dp" android_src="@drawable/herera" /> </RelativeLayout>
SECTION 7 : Our Manifest
This is our android mainfest. Just make sure both our two activities are registered.
<?xml version="1.0" encoding="utf-8"?> <manifest package="com.example.listviewmasterdetail" android_versionCode="1" android_versionName="1.0" > <uses-sdk android_minSdkVersion="19" android_targetSdkVersion="19" /> <application android_allowBackup="true" android_icon="@drawable/ic_launcher" android_label="@string/app_name" android_theme="@style/AppTheme" > <activity android_name="com.example.listviewmasterdetail.MainActivity" android_label="@string/app_name" > <intent-filter> <action android_name="android.intent.action.MAIN" /> <category android_name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android_name="com.example.listviewmasterdetail.PlayerActivity" android_label="@string/title_activity_player" > </activity> </application> </manifest>
Best Regards, Oclemy.