In my last tutorial, I have shown you how to load the built-in JSON data file to initialize the app. I am building a new data array from JSON file and apply the data array to ListView. For each item in the Android ListView, I will customize the item layout by adding one imageView, two textField and one button.
In Android, ListView is composed of several item views. Each item view is a normal Android View. Therefore, the concept for customizing Android ListView item is quite simple. In this tutorial, I will show you how to define a customized ListView item.
This is the 3rd tutorial of my Android ListView Based App Tutorial series. The whole tutorial has 4 sessions:
- Android ListView App Template Guide: Start From Planning
- Android ListView App Template Guide: Loading Local JSON Configuration File
- Android ListView App Template Guide: Customize ListView Item Layout Style
- Android ListView App Template Guide: Play MP3 File From ListView Playlist
- Android ListView App Template Guide: Listen EditText Changes (Coming Soon)
Define Layout XML
First, we need to define a layout xml for ListView. If you are not familiar with Android ListView, I recommend to read this post first: Android ListView and ArrayAdapter. As I mentioned above, I will put an ImageView in the ListView with two TextView and one button. Here is my item View layout source code.
<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="wrap_content"
android:paddingBottom="@dimen/fivedp"
android:paddingLeft="@dimen/fivedp"
android:paddingRight="@dimen/fivedp"
android:paddingTop="@dimen/fivedp">
<ImageView
android:id="@+id/fruitImage"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="@drawable/apple"
android:contentDescription="@string/fruit_picture"/>
<TextView
android:id="@+id/wordTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/fruitImage"
android:layout_toLeftOf="@+id/voiceButton"
android:layout_toRightOf="@+id/fruitImage"
android:maxLines="1"
android:text="April 12, 2013"
android:textSize="30sp" />
<TextView
android:id="@+id/translationTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/wordTextView"
android:layout_below="@+id/wordTextView"
android:layout_marginTop="5dp"
android:layout_toLeftOf="@+id/voiceButton"
android:ellipsize="end"
android:maxLines="2"
android:text="This is a good Post, I hope it will have 2 lines. Please give me 2 lines"
android:textIsSelectable="false"
android:textSize="16sp" />
<Button
android:id="@+id/voiceButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:background="@drawable/ic_action_volume_on" />
</RelativeLayout>
I am using RelativeLayout in this item View layout. It is easy to set the position and size of the child views. For example, I fix the image position by layout_alignParentLeft and layout_alignParentTop. I am also using the same way to fix the button position. Then I can use android:layout_toLeftOf and android:layout_toRightOf to set the TextView’s size and position in the middle. Here is how my customized ListView looks like:
Assign Image Resource to ImageView in Customized ListView By Name
Now, let’s talk about how to assign the data to this item view. In my app, I will assign the data in getView function in the adapter like normal ListView. But I will only assign the image source and text value. In this step, the challenge is assigning the image reource to ImageView in the ListView item. In this example app, all resource are built in the app. For each ListView item, the image is different. All the images are differentiated by name, the same as the text value. So I will get a built in image resource in the res drawable folder by name. Here is the example source code:
int resID = context.getResources().getIdentifier(datas.get(position).word , "drawable", context.getPackageName()); viewHolder.fruitImage.setImageResource(resID);
The above code get the R.drawable id by image name. After getting the id, I set the image source to the item ImageView. Here is the full source code of the getView function.
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder viewHolder;
if (convertView == null) {
convertView = inflater.inflate(R.layout.worditem, null);
viewHolder = new ViewHolder();
viewHolder.fruitImage = (ImageView) convertView.findViewById(R.id.fruitImage);
viewHolder.wordTextView = (TextView) convertView
.findViewById(R.id.wordTextView);
viewHolder.translationTextView = (TextView) convertView
.findViewById(R.id.translationTextView);
viewHolder.voiceButton = (Button) convertView
.findViewById(R.id.voiceButton);
convertView.setTag(viewHolder);
viewHolder.voiceButton.setOnClickListener(voiceButtonClickListener);
} else {
viewHolder = (ViewHolder) convertView.getTag();
}
int resID = context.getResources().getIdentifier(datas.get(position).word , "drawable", context.getPackageName());
viewHolder.fruitImage.setImageResource(resID);
viewHolder.wordTextView.setText(datas.get(position).word);
viewHolder.translationTextView.setText(datas.get(position).translation);
return convertView;
}
Try The Android App
You can download and install this android app from Google Play, or scan the following QR code to download and install on your android phone simply. If you feel it is helpful, please support me by clicking the banner inside the app.
Scan the following QR code to download this app in Google Play easy and fast.
Get Full Android App Template Source Code under $5.99
You will get whole Android App ListView template source code at $5.99. With this source code, you can do everything you want:
- Feed your own content;
- Monetize the app with your own AdMob publish id;
- Use the source code in your own project;
- Publish this app in your android develop account;