Android Custom Listview with Image and text from Mysql database

Android Custom Listview with Image and text from Mysql database

Hello guys. Today we are going to create Android Custom Listview with Image and text. Previous post we learned how to connect Android app with MySQL database using PHP  and display data in a Listview that means this post is a continuation of what we learned.

Prerequisites for this article.


  1. Wamp Server, Xampp or Lamp
  2. Android Studio


  1.  PHP-Prior Php knowledge is required for this article. You will connect the MySQL database using PHP to retrieve the image URLs and text.
  2. SQL-is a standard language for storing, manipulating and retrieving data from the databases. Examples of databases are MYSQL, SQL Server, Oracle etc. Read more about SQL. Let get started now.

Save images inside the server.

Go to C:xampphtdocs and create a new folder and name it customlistview. Inside the folder create another folder img where we will save at least 3 images.
Images inside xampp httdoc folder

Create a Database and table.

Open phpMyAdmin and create a database and name it blog. Create table posts inside the database. Your table should look like one below.

android custom listview example table
MySQL table

Add the image paths. Remember to change the localhost to your computer IP address to use a real device connected on the same wifi.

Write PHP code to retrieve table details and parse data in JSON format.

Write below code and save it inside customlistview folder as getPosts.php.

Running above code in the browser >>http://localhost/customlistview/getPosts.php will output a JSON data format.

Coding android app with custom Listview.

Its time now to tackle the elephant in the room. Its now gets interesting here.Steps.

Create an android project.

Open Android Studio. Click File>New Project and enter project name as CustomListView.

Add empty activity to the project. See more details on how to create android studio project.

Add activitiy_main.xml code.

In activity_main.xml code, we will add a Listview and make it fill the whole screen.

Create XML Layout

Let now create XML layout that will hold the ImageView and two Textview. One Textview will have the post title and the other will have the post views.

Create class

Create class

Final class code