Horizontal ListView Android Without RecyclerView | Custom Example

Horizontal ListView Android Without RecyclerView is the heart of this example tutorial.

We will create horizontal custom ListView With Image example Using Android studio.

Generally, we create listview in vertical position, but sometimes we need to make it horizontally.

Android provides a method using which you can make horizontal recyclerview easily, but unfortunately, android’s built in system does not provide any method to create horizontal listview.

Here, I have used one class that will convert the position of listview to horizontal instead of vertical.

So let us go through all the steps to accomplish our target.

Step 1. Adding Attributes

We will add some attributes to support horizontal display.

For this, first create a new xml file in values directory. Keep the name of this file as attrs.xml

You can get reference from the below image to understand the directory structure.

horizontal listview android

Values->attr.xml

Now copy the following code in attrs.xml

Step 2. Horizontal Class

We need to create one new class named HorizontalListView.java

Write down the below lines in HorizontalListView.java

Above class is very big so I am not writing it here.

For the above class, I have taken reference from this github library.

Visit above to view all the coding lines but you can find this in my source code also which you can download at the end of this tutorial.

Step 3. Images of vehicle

  • In this listview, I will show images of various vehicles in the each row.
  • So we need to add some images in drawable folder.

Download the images using the below link.

[sociallocker]Download Vehicle images[/sociallocker]

  • Save these images in the res->drawable directory.

Step 4. ListView Row Layout

Make a new layout file in res->layout directory.

Set the name of this file as lv_row.xml

Add the below coding lines in lv_row.xml

  • I have taken one imageview and one textview. Both these UI widgets are the children of the Linearlayout which has vertical orientation.
  • Textview holds the name of the Image of the vehicle.

Step 5. Model For Horizontal ListView

Let us prepare a new java class and give it a name as “Model.java”

Write down the following lines in “Model.java”

  • This model class creates proper data structure.
  • It holds getter ans setter methods to operate the data in efficient way.

Step 6. Horizontal Adapter

Now it is time to create an adapter class. Make a new java class again.

Name of the the new Java class should be “HorizontalAdapter.java”

Copy and paste the following code snippet in “HorizontalAdapter.java”

  • This class will receives an arraylist (objects of Model class) via the second parameter of it’s constructor.

See the below lines which shows the constructor

  • As you can see in above code, first parameter is context and second is imageModelArrayList

Now look at the following code of getView() method.

  • This method will first inflate the row layout file lv_row.xml which we created in the fourth step.

Step 7. Main Activity Modification

Last thing is to change the main files.

Update the code of activity_main.xml as per the below snippet.

  • As you can see in the above code that we have taken <com.example.parsania……HorizontalListView> instead of just <ListView>
  • This will create a listview from the class HorizontalListView.java (written in second step)

Make the source code for MainActivity.java as a following look

Thoughts on above code

Pay attention at the below code

  • First line will simply create an object of HorizontalListView class.
  • Second one will give us an object of adapter class.
  • Third will create an arraylist with objects of the Model class.
  • Fourth will create an integer array (myImageList). This myImageList holds the integer reference of all the images that we have added in the drawable folder.
  • Last line will define a string array named myImageNameList which includes the names of the vehicles.

Below line is creating a data

  • Here, compiler will use populateData() method.

Code for  populateData() method is as the following

Thus, it was all wording about horizontal listview in android studio example.

You can read the below tutorial to make horizontal recyclerview.

Android Horizontal RecyclerView example with Cardview

See the video

Download Source Code For Horizontal ListView Android

[sociallocker]Download Source Code For ListView_Horizontal[/sociallocker]

Hardik Parsania

I am mobile app developer. I am always passionate about solving complex and real world problems.I have developed many apps with great interest and superior logical skills.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *