DropDownView is another exciting feature used in most Android applications. It is a unique way of representing the menu and other options in animated form. We can get to see the list of options under one heading in DropDownView. In this article, we are going to see how to implement DropDownView in Android. A sample GIF is given below to get an idea about what we are going to do in this article. We are going to implement this project using both Java and Kotlin Programming Language for Android.
Applications of DropDownView
- A unique way of representing data in the Animated form.
- Make it easy to navigate and find many options under one heading.
- Large options can be displayed easily.
Attributes of DropDownView
Attributes |
Description |
---|---|
layout_width | To give width to the layout. |
layout_height | To give height to the layout. |
containerBackgroundColor | To give Background color to the container. |
overlayColor | To give Overlay Color. |
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: Add the Required Dependencies
Navigate to the Gradle Scripts > build.gradle(Module:app) and Add the Below Dependency in the Dependencies section.
implementation 'com.github.AnthonyFermin:DropDownView:1.0.1'
Add the Support Library in your settings.gradle File. This library Jitpack is a novel package repository. It is made for JVM so that any library which is present in Github and Bitbucket can be directly used in the application.
dependencyResolutionManagement { repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS) repositories { google() mavenCentral() // add the following maven { url "https://jitpack.io" } } }
After adding this Dependency, Sync the Project and now we will move towards its implementation.
Step 3: Working with the XML Files
Next, go to the activity_main.xml file, which represents the UI of the project. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.
<? xml version = "1.0" encoding = "utf-8" ?>
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:orientation = "vertical"
tools:context = ".MainActivity" >
<!-- DropDown Menu -->
< com.anthonyfdev.dropdownview.DropDownView
android:id = "@+id/drop_down_view"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
app:containerBackgroundColor = "@color/purple_200"
app:overlayColor = "#EEEEEE" />
</ LinearLayout >
|
Create New Layout Resource Files
Navigate to the app > res > layout > right-click > New > Layout resource file and name the files as header and footer.
Below is the code for the header.xml File
<? xml version = "1.0" encoding = "utf-8" ?>
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:orientation = "vertical"
android:padding = "10dp" >
<!-- Header for drop down -->
< TextView
android:id = "@+id/textView2"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:text = "Amazing" />
</ LinearLayout >
|
Below is the code for the footer.xml File
<? xml version = "1.0" encoding = "utf-8" ?>
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:orientation = "vertical"
android:padding = "10dp" >
<!-- Items in drop down -->
< TextView
android:id = "@+id/textView"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:text = "Awesome" />
< TextView
android:id = "@+id/textView1"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:layout_marginTop = "10dp"
android:text = "Line 1" />
< TextView
android:id = "@+id/textView2"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:layout_marginTop = "10dp"
android:text = "Line 2" />
< TextView
android:id = "@+id/textView3"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:text = "Line 3" />
< TextView
android:id = "@+id/textView4"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:text = "Line 4" />
< TextView
android:id = "@+id/textView5"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:text = "Line 5" />
< TextView
android:id = "@+id/textView6"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:text = "Line 6" />
< TextView
android:id = "@+id/textView7"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:text = "Line 7" />
</ LinearLayout >
|
Step 5: 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.
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import androidx.appcompat.app.AppCompatActivity;
import com.anthonyfdev.dropdownview.DropDownView;
public class MainActivity extends AppCompatActivity {
Button button;
@Override
protected void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Drop down menu given using id
DropDownView dropDownView = (DropDownView) findViewById(R.id.drop_down_view);
View collapsedView = LayoutInflater.from( this ).inflate(R.layout.header, null , false );
View expandedView = LayoutInflater.from( this ).inflate(R.layout.footer, null , false );
dropDownView.setHeaderView(collapsedView);
dropDownView.setExpandedView(expandedView);
collapsedView.setOnClickListener(v -> {
// on click the drop down will open or close
if (dropDownView.isExpanded()) {
dropDownView.collapseDropDown();
} else {
dropDownView.expandDropDown();
}
});
}
} |
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.widget.Button
import androidx.appcompat.app.AppCompatActivity
import com.anthonyfdev.dropdownview.DropDownView
class MainActivity : AppCompatActivity() {
private lateinit var button: Button
override fun onCreate(savedInstanceState: Bundle?) {
super .onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// Drop down menu given using id
val dropDownView: findViewById<DropDownView>(R.id.drop_down_view)
val collapsedView: View = LayoutInflater.from( this ).inflate(R.layout.header, null , false )
val expandedView: View = LayoutInflater.from( this ).inflate(R.layout.footer, null , false )
dropDownView.setHeaderView(collapsedView)
dropDownView.setExpandedView(expandedView)
collapsedView.setOnClickListener {
// on click the drop down will open or close
if (dropDownView.isExpanded()) {
dropDownView.collapseDropDown()
} else {
dropDownView.expandDropDown()
}
}
}
} |