Android Tutorial : Custom ListView Example with Image

In my previous android programming tutorial we implemented a sample android login app. If you missed you can read from below:

In this blog we will create a Custom ListView Android App with Image using Android Studio.

Android Programming : Custom Android ListView with Image App

Assumptions

Let’s get started with Custom ListView example Android App.

  • Open your Android Studio.
  • Click on Start a New Android Studio Project.
  • Write your Application Name CustomListview”. Leave other fields blank as it is. Click NEXT.
  • Select the Minimum SDK API 15: Android 4.0.3(IceCreamSandwich)I selected API 15 because it covers 94% device and it has almost all the features. If you want to cover 100% device then you can select API 8: Android 2.2(Froyo). But it has limitation on features.
  • After selecting your API click on NEXT.
Android Programming : ListView in Android with Image Choose Api

Android Programming : ListView in Android with Image Choose Api

  • Select blank activity. Click NEXT.
  • Write the activity name “MainActivity”. Leave everything as it is. Click Finish.
  • After clicking Finish, it takes around 5 minutes to build your first activity, which is CustomListview.
  • To create “Custom List View with Image” we have to create another layout which will be responsible for the Text and Image display.
  • Go to app -> res -> layout -> Right Click -> New -> XML -> Layout XML file. Name it as “mylist”.

In custom ListView with image android tutorial there are two activities:

  • The first activity is to design the front end, which is user view. Means how user will view our app.
  • The second activity is how to write the back end code for the Android Custom ListView with Image Application.

Part1 – Custom Android ListView with Image Front End 

  • Go to activity_main.xml file. app -> res -> layout -> activity_main.xml. Pick ListView from Palette.
  • Go to mylist.xml file.  app -> res -> layout -> mylist.xml.
  • Pick one ImageView and one Large Text from Palette.
Android Programming Tutorial : Choose TextView & ImageView

Android Programming Tutorial : Choose TextView & ImageView

  • Put one image in the drawable folder and name it as Images1. You can get the path of drawable folder by right clicking on drawable folder. You will see a list of options. Select copy path.
  • I will share my code for activity_main.xml and mylist.xml  file.

 

Part2 – Custom Android ListView with Image Back End 

  • In the previous part we saw how to design UI of Custom ListView with Image Android app.
  • In this part we will see how to write the code behind the our Android app.
  • Go to the java file in which we will do the code for the action performed by button.
  • Go to app -> Java -> Com.abhinavhackpundit.customListview ->MainActivity.
  • The code or logic behind the action of app is shown below:

  • Below is the explanation of each highlighted line. Those java code is logic behind the Custom Listview with Image Activity.
  • Line 9: Here MainActivity class is defined and it extends ListActivity class.(List activity displays a list item by binding the data source such as Integer array, String array etc).
  • Line 11 to Line 16: Here we define a String Array Blog[].
  • Line 23 to Line 26: setListAdapter() is used to set the custom list.

Congratulations!

We are ready to run our custom ListView with image android app. To run our app I used Genymotion emulator as it’s fast and efficient. Its performance is better than default Android default emulator. If you have not already installed Genymotion emulator, I highly recommend installing it. You can install from here – Android Emulator Genymotion Step by Step Installation

  • Click on Genymotion device manager. After selecting your custom device in Genymotion device manager window click NEXT.
  • Click on Run. A window will popup “Choose device“. Choose Genymotion Custom device and click OK. You will see your Custom ListView with Image Android App.
Android Programming Tutorial : Custom ListView Example with Image : Choose Device

Android Programming Tutorial : Custom ListView Example with Image : Choose Device

  • Here is the output of your activity.
Android Programming : Android ListView Example Output 3 images with Title

Android Programming : Android ListView Example Output 3 images with Title

Hope you enjoyed the article. This is a beginner android tutorial for android developers for implementing custom listview with image android app. Read below articles for more advanced android tutorials.

Thank you for reading my android programming article on Custom Android ListView example with Image. If you face any problem or having any doubts, just let me know in comment box.

If you like my article please like our Facebook page and also follow on Twitter. By doing so you will get regular updates about Android tutorials. For regular updates you can also subscribe to hackpundit.com with your email.

Please also share on Facebook and Twitter to help other android developers. Thank You..!

  • http://hugestreet.info/ Vishal Chopra

    Nice tutorial Abhinav. If you would like to post a tutorial for creating an android application for bloggers. So, that we can able to provide a free app to our blog readers. Then, it can be great helpful not only for me but for all bloggers. Thanks…….

    • http://www.hackpundit.com Abhay Kumar

      @vishalchopra13:disqus Sure!
      We are working on building android app for hackpundit where we will show all hackpundit blogs. We will post the tutorial and source code after it’s done!

      • http://hugestreet.info/ Vishal Chopra

        Thanks.