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 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 = "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 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);
}
} |
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: