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
<?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
<?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
<?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.
Java
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(); } }); }} |
Kotlin
import android.os.Bundleimport android.view.LayoutInflaterimport android.view.Viewimport android.widget.Buttonimport androidx.appcompat.app.AppCompatActivityimport com.anthonyfdev.dropdownview.DropDownViewclass 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() } } }} |
