For understanding horizontal ListView in android, first, we have to know about list view in android. ListView is scrollable collection of views, where each view is positioned immediately below the previous view in the list. This can be implemented using RecyclerView.
Horizontal ListView
A Horizontal ListView is a type of view in which many views are there and all the available views are scrollable horizontally. Each view is places by side of another view. This can be implemented by HorizontalScrollView. A sample video is given below to get an idea about what we are going to do in this article.
Note: This Android article covered in both Java and Kotlin languages.
Step by Step Implementation
Step 1: Create a New Project in Android Studio
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. The code for that has been given in both Java and Kotlin Programming Language for Android.
Step 2: Working with activity_main.xml
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.
XML
<!-- XML code for implementing horizontal list view --><?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/white" tools:context=".MainActivity"> <!-- linear layout for textView --> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" tools:ignore="MissingConstraints"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text=" horizontal Scroll View Example" android:textSize="20dp" android:layout_margin="10dp" android:textColor="@color/purple_700" android:layout_gravity="center"/> </LinearLayout> <!-- Horizontal scrollView --> <HorizontalScrollView android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginTop="120dp"> <!-- using linear layout to store multiple view inside a Horizontal Scroll View --> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:background="@color/white"> <!-- multiple button views to show a scrollable horizontal list --> <Button android:id="@+id/C" android:layout_width="wrap_content" android:layout_height="100dp" android:text="Lazyroar" android:padding="4dp" android:layout_margin="10dp" android:backgroundTint="@color/white" android:textColor="@color/black"/> <Button android:id="@+id/Co" android:layout_width="wrap_content" android:layout_height="100dp" android:layout_margin="10dp" android:backgroundTint="@color/white" android:padding="4dp" android:text="Lazyroar" android:textColor="@color/black" /> <Button android:id="@+id/L" android:layout_width="wrap_content" android:layout_height="100dp" android:padding="4dp" android:layout_margin="10dp" android:backgroundTint="@color/white" android:text="Lazyroar" android:textColor="@color/black"/> <Button android:id="@+id/Ha" android:layout_width="wrap_content" android:layout_height="100dp" android:padding="4dp" android:layout_margin="10dp" android:backgroundTint="@color/white" android:text="Lazyroar" android:textColor="@color/black"/> <Button android:id="@+id/Hah" android:layout_width="wrap_content" android:layout_height="100dp" android:padding="4dp" android:backgroundTint="@color/white" android:layout_margin="10dp" android:text="Lazyroar" android:textColor="@color/black"/> <Button android:id="@+id/ge" android:layout_width="wrap_content" android:layout_height="100dp" android:padding="4dp" android:layout_margin="10dp" android:backgroundTint="@color/white" android:text="Lazyroar" android:textColor="@color/black"/> </LinearLayout> </HorizontalScrollView> </androidx.constraintlayout.widget.ConstraintLayout> |
Step 3: Working with the MainActivity File
Go to the MainActivity File and refer to the following code. Below is the code for the MainActivity File. Comments are added inside the code to understand the code in more detail.
Java
// JAVA code for show horizontalListView in Androidpackage com.example.gfgfirstapp; import androidx.appcompat.app.ActionBar;import androidx.appcompat.app.AppCompatActivity; import android.graphics.Color;import android.graphics.drawable.ColorDrawable;import android.os.Bundle; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // for change the background color of title bar ActionBar aBar; aBar= getSupportActionBar(); ColorDrawable cd = new ColorDrawable(Color.parseColor("#FF00FF00")); aBar.setBackgroundDrawable(cd); }} |
Kotlin
package com.example.gfgfirstapp; import androidx.appcompat.app.ActionBar;import androidx.appcompat.app.AppCompatActivity; import android.graphics.Color;import android.graphics.drawable.ColorDrawable;import android.os.Bundle; class MainActivity : AppCompatActivity() { var nurl:String?=null override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) // for changing the background color of title bar val aBar = supportActionBar val cd = ColorDrawable(Color.parseColor("#FF00FF00")) aBar?.setBackgroundDrawable(cd) }} |
Output:
