Saturday, February 7, 2015
How To CREATE Android Custom ListView with Example
Android Custom ListView with Images and Text Example
Creating Project:
Make sure you have properly setup the Android SDK, AVD for Testing the Application. Create a New project in Eclipse IDE with the package as “hirparagroup.customlistview”. Create the Main Activity as “MainActivity” and the main Layout as “activity_main”.
Creating Layout:
The Main layout for our project is “activity_main” which has a ListView to display the array with images.
activity_main.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" > <ListView android:id="@+id/list" android:layout_width="wrap_content" android:layout_height="wrap_content" > </ListView></RelativeLayout> |
Next step is to create a layout for the list item that is to be displayed in ListView. Create the layout as list_single.xml which has a TextView to display to the Array and a ImageView to display set of images in each list item. Here I have created the layout as TableLayout with ImageView and TextView in a Row.
list_single.xml
<?xml version="1.0" encoding="utf-8"?> android:layout_width="match_parent" android:layout_height="match_parent" > <TableRow> <ImageView android:id="@+id/img" android:layout_width="50dp" android:layout_height="50dp"/> <TextView android:id="@+id/txt" android:layout_width="wrap_content" android:layout_height="50dp" /></TableRow></TableLayout> |
Creating Activity:
Before Creating the MainActivity we must create a CustomList class for our custom ListView.
CustomList.java
package learn2crack.customlistview;import android.app.Activity;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.ArrayAdapter;import android.widget.ImageView;import android.widget.TextView;public class CustomList extends ArrayAdapter<String>{private final Activity context;private final String[] web;private final Integer[] imageId;public CustomList(Activity context,String[] web, Integer[] imageId) {super(context, R.layout.list_single, web);this.context = context;this.web = web;this.imageId = imageId;}@Overridepublic View getView(int position, View view, ViewGroup parent) {LayoutInflater inflater = context.getLayoutInflater();View rowView= inflater.inflate(R.layout.list_single, null, true);TextView txtTitle = (TextView) rowView.findViewById(R.id.txt);ImageView imageView = (ImageView) rowView.findViewById(R.id.img);txtTitle.setText(web[position]);imageView.setImageResource(imageId[position]);return rowView;}} |
Next step is to create MainActivity. Here we are defining the array “web” which is displayed as text in ListView. Next we define a array imageId to store the Image Id. The images should be placed in the location /res/drawable/. Next custom list adapter is displayed. When a list item is clicked it shows a Toast that it is clicked.
MainActivity.java
package learn2crack.customlistview;import android.os.Bundle;import android.view.View;import android.widget.AdapterView;import android.widget.ListView;import android.widget.Toast;import android.app.Activity;public class MainActivity extends Activity { ListView list; String[] web = { "Google Plus", "Twitter", "Windows", "Bing", "Itunes", "Wordpress", "Drupal" } ; Integer[] imageId = { R.drawable.image1, R.drawable.image2, R.drawable.image3, R.drawable.image4, R.drawable.image5, R.drawable.image6, R.drawable.image7 }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); CustomList adapter = new CustomList(MainActivity.this, web, imageId); list=(ListView)findViewById(R.id.list); list.setAdapter(adapter); list.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { Toast.makeText(MainActivity.this, "You Clicked at " +web[+ position], Toast.LENGTH_SHORT).show(); } }); }} |
Creating Manifest:
No other special Permissions are required for our project.
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android" package="learn2crack.customlistview" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:targetSdkVersion="17" /> <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity android:name="learn2crack.customlistview.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> </application></manifest> |
Subscribe to:
Post Comments (Atom)
0 Responses to “How To CREATE Android Custom ListView with Example”
Post a Comment