Android Horizontal ScrollView with Example
Android Horizontal ScrollView with Example
Difficulty level : Very-Easy * Last Updated On : 28th May, 2021
A Horizontal Scrollview is a FrameLayout. The android.widget.HorizontalScrollView class provides the functionality of horizontal scroll view. Horizontal Scroll View is used to scroll the child elements or view in an horizontal direction. Horizontal Scroll View only supports horizontal scrolling. Horizontal ScrollView is used when a programmer needs the user to scroll in a horizontal manner and not in vertical manner.
Horizontal scrollview save's lots of space on a screen as it is scrollable in horizontal manner.
Horizontal scrollview can have widgets like buttons,imageView, TextView, Edit Text and all other widgets that are in android.
These all widget can be used as a child element in the horizontal scrollview.
Horizontal scrollview can have only one child inside it, we will be looking the example of such condition below.
Below is the picture showing the horizontal scroll view in light and dark mode
The Source Code for the above output is as follows: -
To display the imageview on the screen xml code is used.
XML CODE : (file name - activity_main.xml)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<!-- Horizontal ScrollView Starts -->
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="@+id/layoutMore"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:id="@+id/firstImage"
android:layout_width="200dp"
android:layout_height="200dp"
android:src="@drawable/image"
android:layout_marginTop="20dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
app:tint="@color/color4" />
<ImageView
android:id="@+id/secondImage"
android:layout_width="150dp"
android:layout_height="150dp"
android:src="@drawable/photo_gallery"
android:layout_marginTop="48dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp" />
<ImageView
android:id="@+id/thirdImage"
android:layout_width="200dp"
android:layout_height="200dp"
android:src="@drawable/image"
android:layout_marginTop="20dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
app:tint="@color/color4" />
<ImageView
android:id="@+id/fourthImage"
android:layout_width="150dp"
android:layout_height="150dp"
android:src="@drawable/photo_gallery"
android:layout_marginTop="48dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp" />
</LinearLayout>
</HorizontalScrollView>
<!-- Horizontal ScrollView Ends -->
</RelativeLayout>
The colors that are used in the application or on the widget are written in the colors file of the android project.
COLORS FILE CODE : (file name - colors.xml)
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="purple_200">#FFBB86FC</color>
<color name="purple_500">#FF6200EE</color>
<color name="purple_700">#FF3700B3</color>
<color name="teal_200">#FF03DAC5</color>
<color name="teal_700">#FF018786</color>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
<color name="color1">#EE82EE</color>
<color name="color2">#FDBE3B</color>
<color name="color3">#FF4842</color>
<color name="color4">#3a52fc</color>
<color name="color5">#000000</color>
</resources>
Java file is used to write the program and all the actions that are performed on the widget while on the screen is done by the Java file.
MAIN ACTIVITY CODE : (file name - MainActivity.java)
package com.example.differentandroidcodes;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
ImageView imageView,imageView1,imageView2,imageView3;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageView = findViewById(R.id.firstImage);
imageView1 = findViewById(R.id.secondImage);
imageView2 = findViewById(R.id.thirdImage);
imageView3 = findViewById(R.id.fourthImage);
imageView.setOnClickListener(v -> Toast.makeText(MainActivity.this, "First Image In Horizontal Scroll View", Toast.LENGTH_SHORT).show());
imageView1.setOnClickListener(v -> Toast.makeText(MainActivity.this, "Second Image In Horizontal Scroll View", Toast.LENGTH_SHORT).show());
imageView2.setOnClickListener(v -> Toast.makeText(MainActivity.this, "Third Image In Horizontal Scroll View", Toast.LENGTH_SHORT).show());
imageView3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "Fourth Image In Horizontal Scroll View", Toast.LENGTH_SHORT).show();
}
});
}
}
Note : -> this symbol in the above code represents that the method is written in lambda expression and the (new) keyword represents the normal way of writing the method
-> lambda expression is the new way of writing the method.
Manifest file is generated automatically. You can view this file by clicking on the manifest option that is show the project structure image.
MANIFEST FILE CODE: (file name - AndroidManifest.xml)
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.differentandroidcodes">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/Theme.DifferentStyleButtons">
<activity android:name="com.example.differentandroidcodes.MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
Note : The two files in the drawable folder of i.e. images.xml and photo_gallery.png are the two iamges that are important in this horizontal scrollview code.
OUTPUT :
Light Theme
Dark Theme
Project Structure in Android Studio
Note : The Selected Files are the important files and the code of those files are given in this article.
0 Comments