This is a custom ListView with Images and Text.In fact we shall be using CardViews with Images and Text as our View Items for our ListView.We shall define the cardview as our rootView in our Model.xml Layout.
Its this model layout that shall be inflated in our Custom adapter to a single view item.
We then see how to handle ItemClicks for our custom listview.
We are using BaseAdapter with arraylist spacecrafts objects that has name,propellant and image.
Android Custom ListView CardViews Images text
Section 1 : Our Build.Gradle
apply plugin: 'com.android.application' android { compileSdkVersion 24 buildToolsVersion "24.0.0" defaultConfig { applicationId "com.tutorials.hp.listviewcustomcardviews" minSdkVersion 15 targetSdkVersion 24 versionCode 1 versionName "1.0" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } } dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) testCompile 'junit:junit:4.12' compile 'com.android.support:appcompat-v7:24.0.0' compile 'com.android.support:cardview-v7:24.0.0' }
Section 2 : Our Model Class
package com.tutorials.hp.listviewcustomcardviews; public class Spacecraft { int image; String name,propellant; public int getImage() { return image; } public void setImage(int image) { this.image = image; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getPropellant() { return propellant; } public void setPropellant(String propellant) { this.propellant = propellant; } }
Section 3 : CustomAdapter class
package com.tutorials.hp.listviewcustomcardviews; 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; import android.widget.Toast; import java.util.ArrayList; public class CustomAdapter extends BaseAdapter { Context c; ArrayList<Spacecraft> spacecrafts; public CustomAdapter(Context c, ArrayList<Spacecraft> spacecrafts) { this.c = c; this.spacecrafts = spacecrafts; } @Override public int getCount() { return spacecrafts.size(); } @Override public Object getItem(int i) { return spacecrafts.get(i); } @Override public long getItemId(int i) { return i; } @Override public View getView(int i, View view, ViewGroup viewGroup) { if(view==null) { view= LayoutInflater.from(c).inflate(R.layout.model,viewGroup,false); } final Spacecraft s= (Spacecraft) this.getItem(i); ImageView img= (ImageView) view.findViewById(R.id.spacecraftImg); TextView nameTxt= (TextView) view.findViewById(R.id.nameTxt); TextView propTxt= (TextView) view.findViewById(R.id.propellantTxt); nameTxt.setText(s.getName()); propTxt.setText(s.getPropellant()); img.setImageResource(s.getImage()); view.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(c, s.getName(), Toast.LENGTH_SHORT).show(); } }); return view; } }
Section 4 : MainActivity class
package com.tutorials.hp.listviewcustomcardviews; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.widget.ListView; import java.util.ArrayList; public class MainActivity extends AppCompatActivity { CustomAdapter adapter; ListView lv; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); lv= (ListView) findViewById(R.id.lv); adapter=new CustomAdapter(this,getData()); lv.setAdapter(adapter); } private ArrayList getData() { ArrayList<Spacecraft> spacecrafts=new ArrayList<>(); Spacecraft s=new Spacecraft(); s.setName("Pioneer"); s.setPropellant("Chemical Energy"); s.setImage(R.drawable.pioneer); spacecrafts.add(s); s=new Spacecraft(); s.setName("Spitzer"); s.setPropellant("Warp Drive"); s.setImage(R.drawable.spitzer); spacecrafts.add(s); s=new Spacecraft(); s.setName("Enterprise"); s.setPropellant("Anti Matter"); s.setImage(R.drawable.enterprise); spacecrafts.add(s); s=new Spacecraft(); s.setName("Hubble"); s.setPropellant("Laser Beam"); s.setImage(R.drawable.herbal); spacecrafts.add(s); s=new Spacecraft(); s.setName("Voyager"); s.setPropellant("Solar Energy"); s.setImage(R.drawable.voyager); spacecrafts.add(s); s=new Spacecraft(); s.setName("Kepler"); s.setPropellant("Solar Energy"); s.setImage(R.drawable.kepler); spacecrafts.add(s); s=new Spacecraft(); s.setName("Rosetter"); s.setPropellant("Nuclear Energy"); s.setImage(R.drawable.rosetta); spacecrafts.add(s); s=new Spacecraft(); s.setName("WMAP"); s.setPropellant("Nuclear Energy"); s.setImage(R.drawable.wmap); spacecrafts.add(s); s=new Spacecraft(); s.setName("Columbia"); s.setPropellant("Chemical Energy"); s.setImage(R.drawable.columbia); spacecrafts.add(s); return spacecrafts; } }
Section 5 : Our XML Layouts
ActivityMain.xml
<?xml version="1.0" encoding="utf-8"?> <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="com.tutorials.hp.listviewcustomcardviews.MainActivity"> <ListView android_id="@+id/lv" android_layout_width="match_parent" android_layout_height="wrap_content" /> </RelativeLayout>
Model.xml
<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.CardView android_orientation="horizontal" android_layout_width="match_parent" android_layout_margin="10dp" card_view_cardCornerRadius="5dp" card_view_cardElevation="5dp" android_layout_height="200dp"> <LinearLayout android_orientation="horizontal" android_layout_width="match_parent" android_layout_height="match_parent"> <ImageView android_id="@+id/spacecraftImg" android_layout_width="150dp" android_layout_height="wrap_content" /> <LinearLayout android_orientation="vertical" android_layout_width="wrap_content" android_layout_height="wrap_content"> <TextView android_layout_width="wrap_content" android_layout_height="wrap_content" android_textAppearance="?android:attr/textAppearanceLarge" android_text="Name" android_id="@+id/nameTxt" android_padding="10dp" android_textColor="@color/colorAccent" android_textStyle="bold" android_layout_alignParentLeft="true" /> <TextView android_layout_width="wrap_content" android_layout_height="wrap_content" android_textAppearance="?android:attr/textAppearanceLarge" android_text="Propellant....................." android_lines="1" android_id="@+id/propellantTxt" android_padding="10dp" android_layout_alignParentLeft="true" /> </LinearLayout> </LinearLayout> </android.support.v7.widget.CardView>
Resources
No. | Resource | Direct Links |
---|---|---|
1. | Page | |
2. | YouTube | Channel |