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.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()            }        }    }} |
