All CategoriesAndroid App Development

Implement Horizontal ListView in Android

Before we get ahead with creating Horizontal ListView in Android let us first understand what Horizontal ListView is? Through this blog we will explain step by step process to create Horizontal ListView in Android.
Horizontal ListView is an Android ListView widget which can be scrolled horizontally.
Let us now get ahead with the step by step implementation of Horizontal ListView using Android Studio.
The steps for the same are:
1. Create a New Project and give its name as Horizontal Example. Click on Next.

 
2. Select the form factors on which you want to run your app and click on Next.

 
3. Add a blank activity to Mobile and click on Next.

4. Customize your activity and click on Finish.
5. You get – Building “HorizontalExample” Gradle Project Info as shown below:

6. In activity_main.xml, we are embedding LinearLayout with HorizontalScrollView as follows:
<HorizontalScrollView

android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="none" >
<LinearLayout
android:id="@+id/casts_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:gravity="center_vertical"
android:orientation="horizontal" />
</HorizontalScrollView>

7. Add one more .xml file in layout named as ‘clickable_column.xml’ and take ImageView for each cast used for display cast items horizontally.

<RelativeLayout
android:id="@+id/thumbnail_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="1dp" >
<ImageView
android:id="@+id/thumbnail_image"
android:layout_width="50dp"
android:layout_height="75dp"
android:contentDescription="@string/app_name"
android:scaleType="fitXY" />
</RelativeLayout>

8. Here we should divide the image list horizontally for separating list items. For this, add one more xml file ‘horizontal_divider.xml’ in layout folder.

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/app_name"
android:paddingLeft="3dp"
android:paddingRight="3dp"
android:src="@drawable/ic_divider" />

9. Here in MainActivity.java, we are using LayoutInflator class and when user will click on item, it will display a toast by clicking on casts.

//create LayoutInflator class
LayoutInflater inflater = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);
int size = casts.size();
for (int i = 0; i < size; i++) {
Cast cast = casts.get(i);
// create dynamic LinearLayout and set Image on it.
if (cast != null) {
LinearLayout clickableColumn = (LinearLayout) inflater.inflate(
R.layout.clickable_column, null);
ImageView thumbnailImage = (ImageView) clickableColumn
.findViewById(R.id.thumbnail_image);
TextView titleView = (TextView) clickableColumn
.findViewById(R.id.title_view);
TextView subTitleView = (TextView) clickableColumn
.findViewById(R.id.subtitle_view);
thumbnailImage.setImageResource(R.drawable.ic_launcher);

 
10. Add a code in MainActivity.java.

clickableColumn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Cast cast = (Cast) v.getTag();
Toast.makeText(getApplicationContext(), cast.getName(), Toast.LENGTH_SHORT).show();
//Click able view for casts
}
});

Output:
Finally, you will get a Horizontal View for different Casts as shown below:

 
Now click on any single cast item and you will get a toast with item name.

 
Hope this blog was informative in creating Horizontal ListView in Android.

Related Popular Courses:

Android Programming

Tags

One Comment

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Articles

Close
Close