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 HorizontalExample. 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
//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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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.
Leave a Reply