Open In App

Horizontal ListView in Android

Improve
Improve
Like Article
Like
Save
Share
Report

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
    xmlns:tools="http://schemas.android.com/tools"
    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="GeeksforGeeks"
                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="GeeksforGeeks"
                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="GeeksforGeeks"
                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="GeeksforGeeks"
                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="GeeksforGeeks"
                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="GeeksforGeeks"
                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 Android
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;
  
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:



Last Updated : 16 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads