Introduction

This article demonstrates how to create a draggable panel in an Android application using Android Studio. Draggable Panel is an Android library created to build a draggable user interface similar to the new YouTube draggable video component based on Fragments or Views.
Understanding the basics
  • This Android library offers you the two classes to use and to create your own awesome user interfaces - If you want to use it with fragments, add DraggablePanel to your layout. If you want to use it with Views, use DraggableView and put your Views inside.
  • This library works on Android 4.X or higher versions but not in lower versions because the scale effect is not going to work properly when the user tries to drag the view. The clickable zone on a scaled view in Android 2.Xis bigger than the real scaled zone.
Step 1
Create a new project in Android Studio from File >> Project and fill all the necessary details.
Next, go to Gradle Scripts >> build.gradle (Module: app).Select build.gradle, The app Gradle compile the code and build types will appear. Just replace that the following code. To make a Button, ImageView, and ListView in your layout XML and add the DraggablePanel in your project or you can also Gradle
Download the latest JARs or grab via Gradle,
Compile Code
  1. dependencies {
  2. compile 'com.github.pedrovgs:draggablepanel:1.9'
  3. }
or Maven
  1. <dependency>
  2. <groupId>com.github.pedrovgs</groupId>
  3. <artifactId>draggablepanel</artifactId>
  4. <version>1.9</version>
  5. <type>aar</type>
  6. </dependency>
Step 2
Next, go to app >> res >> layout >> activity_main.xml. Select the activity page. The XML code will appear, Just the following code. Create the layout of the Button and draggable panel.
Activity_Main.xml Code
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:app="http://schemas.android.com/apk/res-auto"
  4. xmlns:tools="http://schemas.android.com/tools"
  5. android:layout_width="match_parent"
  6. android:layout_height="match_parent"
  7. tools:context="com.example.ravi.draggablepanel.MainActivity">
  9. <com.github.pedrovgs.DraggablePanel
  10. android:id="@+id/draggable_panel"
  11. android:layout_width="match_parent"
  12. android:layout_height="match_parent">
  13. <RelativeLayout
  14. android:layout_width="match_parent"
  15. android:layout_height="match_parent">
  16. <Button
  17. android:id="@+id/button"
  18. android:layout_centerInParent="true"
  19. android:layout_width="wrap_content"
  20. android:layout_height="wrap_content"
  21. android:text="CLICK ME" />
  22. </RelativeLayout>
  23. </com.github.pedrovgs.DraggablePanel>
  25. </RelativeLayout>
Next, go to app >> res >> values >> string.xml. Select string page. The XML code will appear, Just the following code or add string - array items. Create the layout of the "array - items" 1 - 10.
String.xml Code
  1. <resources>
  2. <string name="app_name">DraggablePanel</string>
  4. <string-array name="items">
  5. <item>1</item>
  6. <item>2</item>
  7. <item>3</item>
  8. <item>4</item>
  9. <item>5</item>
  10. <item>6</item>
  11. <item>7</item>
  12. <item>8</item>
  13. <item>9</item>
  14. <item>10</item>
  16. </string-array>
  17. </resources>
Step 3
Next, go to app >> res >> layout right click to add New >> Layout Resource File.
After that, open the Dialog Box and Click ok then again add another one page. (Page Name: one, two)
One.xml Code
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <android.support.constraint.ConstraintLayout
  3. xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
  4. android:layout_height="match_parent">
  6. <ImageView
  7. android:layout_width="match_parent"
  8. android:scaleType="centerCrop" //ImageView
  9. android:src="@drawable/image"
  10. android:layout_height="match_parent" />
  12. </android.support.constraint.ConstraintLayout>
Two.xml Code
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout
  3. xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
  4. android:layout_height="match_parent">
  6. <ListView
  7. android:layout_width="match_parent"
  8. android:layout_height="match_parent" //ListView
  9. android:background="#ffffff"
  10. android:entries="@array/items">
  12. </ListView>
  14. </LinearLayout>
First Page and Second Page Design View
Step 4
In this step, go to app >> Java >> domain name right-click to add >> new >> Java Class. After that, open the Dialog Box and Click ok then again add another one page (Page Name: one, two), the java code will appear. I have provided the code; you can use this code or you can use your own code.
One.java Code
  1. package com.example.ravi.draggablepanel;
  3. import android.os.Bundle;
  4. import android.support.annotation.Nullable;
  5. import android.support.v4.app.Fragment;
  6. import android.view.LayoutInflater;
  7. import android.view.View;
  8. import android.view.ViewGroup;
  10. public class one extends Fragment {
  11. @Nullable
  12. @Override
  13. public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
  14. View view = inflater.inflate(R.layout.one, container, false);
  15. return view;
  16. }
  17. }
Two.java Code
  1. package com.example.ravi.draggablepanel;
  3. import android.os.Bundle;
  4. import android.support.annotation.Nullable;
  5. import android.support.v4.app.Fragment;
  6. import android.view.LayoutInflater;
  7. import android.view.View;
  8. import android.view.ViewGroup;
  10. public class two extends Fragment {
  11. @Nullable
  12. @Override
  13. public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
  14. View view = inflater.inflate(R.layout.two, container, false);
  15. return view;
  16. }
  17. }
Step 5
Next, go to app >> src >> >>main >> java >> MainActivity.java. The java code will appear. Just replace that with the following java code
MainActivity.java Code
  1. package com.example.ravi.draggablepanel;
  3. import android.os.Handler;
  4. import android.support.v7.app.AppCompatActivity;
  5. import android.os.Bundle;
  6. import android.view.View;
  7. import android.widget.Button;
  8. import com.github.pedrovgs.DraggablePanel;
  10. public class MainActivity extends AppCompatActivity {
  12. Button button;
  13. DraggablePanel draggablePanel;
  15. @Override
  16. protected void onCreate(Bundle savedInstanceState) {
  17. super.onCreate(savedInstanceState);
  18. setContentView(R.layout.activity_main);
  20. draggablePanel =(DraggablePanel) findViewById(R.id.draggable_panel);
  21. draggablePanel.setFragmentManager(getSupportFragmentManager());
  22. draggablePanel.setTopFragment(new one());
  23. draggablePanel.setBottomFragment(new two());
  24. draggablePanel.setTopViewHeight(300);
  25. draggablePanel.initializeView();
  27. Handler handler = new Handler();
  28. handler.postDelayed(new Runnable() {
  29. @Override
  30. public void run() {
  31. draggablePanel.closeToLeft();
  32. }
  33. },100);
  36. button = (Button) findViewById(R.id.button);
  37. button.setOnClickListener(new View.OnClickListener() {
  38. @Override
  39. public void onClick(View view) {
  40. draggablePanel.maximize();
  41. }
  42. });
  43. }
  44. }
Step 6
Next, go to Android Studio and deploy the application, Select Emulator or your Android mobile with USB debugging enabled. Give it a few seconds to make installations and set permissions.
Run the application in your desired emulator (Shift + F10)

Summary

Finally, we have successfully created DraggablePanel Application. Later we will discuss more Android Applications.