Android - Simple Custom List View With Image

Ricis · Wednesday at 4:48 PM

Operating System

Android

In this tutorial we will create a Simple Custom List View With Image using Android. This simple app display a list with image using custom array. Android is basically a piece of software which allows your hardware to function. It used in several gadget like smartphone, tablet, and even television. The android is an open source operating system it's free and user friendly to mobile developers. So let's now do the coding...

Getting Started:

First you will have to download & install the Android Development IDE (Android Studio or Eclipse). Android Studio is an open source development feel free to develop your things.

Here's the link for the Android Studio https://developer.android.com/studio/index.html.

Layout Design

We will now create the design for the application, first locate the layout file called activity_main.xml, this is the default name when create a new activity. Then write these codes inside your layout file.

<?

xml version=

"1.0"

encoding=

"utf-8"

?>
<

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"
tools:

context=

"com.razormist.simplelistviewwithimage.MainActivity"

>
<

ListView
android:

layout_width=

"match_parent"
android:

layout_height=

"match_parent"
android:

id=

"@+id/lv_content"

/>
</

RelativeLayout>

Now that we're done with the main layout we will create then a layout that display the value of the list. First right click on resource then create a new layout resource namely laptop_list then write these codes inside your layout file.

<?

xml version=

"1.0"

encoding=

"utf-8"

?>
<

LinearLayout xmlns:

android=

"http://schemas.android.com/apk/res/android"
xmlns:

app=

"http://schemas.android.com/apk/res-auto"
android:

orientation=

"horizontal"

android:

layout_width=

"match_parent"
android:

layout_height=

"match_parent"

>
<

LinearLayout
android:

orientation=

"horizontal"
android:

layout_width=

"match_parent"
android:

layout_height=

"wrap_content"

>
<

TextView
android:

id=

"@+id/tv_list"
android:

layout_width=

"wrap_content"
android:

layout_height=

"wrap_content"
android:

text=

"TextView"
android:

layout_marginTop=

"30dp"
android:

fontFamily=

"monospace"

/>
<

LinearLayout
android:

orientation=

"horizontal"
android:

layout_width=

"match_parent"
android:

layout_height=

"wrap_content"
android:

gravity=

"right"

>
<

ImageView
android:

id=

"@+id/iv_image"
android:

layout_width=

"wrap_content"
android:

layout_height=

"wrap_content"
app:

srcCompat=

"@mipmap/ic_launcher"
android:

padding=

"3dp"

/>
</

LinearLayout>
</

LinearLayout>
</

LinearLayout>

Android Manifest File

The Android Manifest file provides essential information about your app to the Android system in which the system must required before running the code. It describe the overall information about the application. It contains some libraries that needed to access the several method within the app.

<?

xml version=

"1.0"

encoding=

"utf-8"

?>
<

manifest xmlns:

android=

"http://schemas.android.com/apk/res/android"
package

=

"com.razormist.simplelistviewwithimage"

>
<

application
android:

allowBackup=

"true"
android:

icon=

"@mipmap/ic_launcher"
android:

label=

"@string/app_name"
android:

roundIcon=

"@mipmap/ic_launcher_round"
android:

supportsRtl=

"true"
android:

theme=

"@Style/AppTheme"

>
<

activity android:

name=

".MainActivity"
android:

configChanges=

"orientation"
android:

screenOrientation=

"portrait"

>
<

intent-

filter>
<

action android:

name=

"android.intent.action.MAIN"

/>
<

category android:

name=

"android.intent.category.LAUNCHER"

/>
</

intent-

filter>
</

activity>
</

application>
</

manifest>

Creating the Custom Adapter

This code handle the list of data that will be needed to display. First create a new java file namely ListHandler, then open the newly create file and extend the class by adding extends ArrayAdapter

. Next write these variables inside the ListHandler class

String

[

]

name_list;
int

[

]

laptop;
Context

context;

After assigning the variables we will now create a certain methods to handle each data that will be listed. To do that write these methods inside the class.

public

ListHandler(

Context

context, String

[

]

name_list, int

[

]

laptop)

{
super

(

context, R.layout

.laptop_list

)

;
this

.name_list

=

name_list;
this

.laptop

=

laptop;
this

.context

=

context;
}
@Override
public

int

getCount(

)

{
return

name_list.length

;
}
@NonNull
@Override
public

View

getView(

int

position, View

convertView, ViewGroup parent)

{
TagHolder tagHolder =

new

TagHolder(

)

;
if

(

convertView ==

null

)

{
LayoutInflater inflater =

(

LayoutInflater)

context.getSystemService

(

Context

.LAYOUT_INFLATER_SERVICE

)

;
convertView =

inflater.inflate

(

R.layout

.laptop_list

, parent, false

)

;
tagHolder.iv_image

=

(

ImageView)

convertView.findViewById

(

R.id

.iv_image

)

;
tagHolder.tv_list

=

(

TextView)

convertView.findViewById

(

R.id

.tv_list

)

;
convertView.setTag

(

tagHolder)

;
}

else

{
tagHolder =

(

TagHolder)

convertView.getTag

(

)

;
}
tagHolder.iv_image

.setImageResource

(

laptop[

position]

)

;
tagHolder.tv_list

.setText

(

name_list[

position]

)

;
return

convertView;
}
static

class

TagHolder{
ImageView iv_image;
TextView tv_list;
}

The Main Function

This code contains the main function of the application. This code will automatically call the list method to display it inside the resource layout. To start with first locate your MainActivity java file and open it, then write this variable inside the MainActivity class.

ListView

lv_content;
String

[

]

name_list =

{
"ASUS VivoBook Max X441UR"

,
"Acer Aspire One D270-268"

,
"Lenovo Ideapad 100S 11"

,
"Dell Inspiron 11-3162"

,
"HP 11-D002TU"

,
"MSI GV62 7RC"

,
"Sony Vaio VPCW126AG"
}

;
int

[

]

laptop =

{
R.drawable

.asus_vivobook_max_x441ur_l

,
R.drawable

.acer_aspire_one_d270_268_l

,
R.drawable

.dell_inspiron_11_3162_l

,
R.drawable

.lenovo_ideapad_100s_11_ph_l

,
R.drawable

.hp_11_d002tu_l

,
R.drawable

.msi_gv62_7rc_l

,
R.drawable

.sony_vpcw_126ag_l_5
}

;

Finally, initialize the require methods inside the onCreate method to run the application.

lv_content =

(

ListView

)

findViewById(

R.id

.lv_content

)

;
ListHandler listHandler =

new

ListHandler(

MainActivity.this

, name_list, laptop)

;
listHandler.sort

(

new

Comparator<

String>

(

)

{
@Override
public

int

compare(

String

lhs, String

rhs)

{
return

lhs.compareTo

(

rhs)

;
}
}

)

;
lv_content.setAdapter

(

listHandler)

;

Try to run the app and see if it worked.

There you have it we have created a Simple Custom List View With Image using Android. I hope that this tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.

2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Download

You must upgrade your account or reply in the thread to view the hidden content.

Android - Simple Custom List View With Image

More options

Ricis

452,496

327,345

327,353