Draggable Panel In An Android Application

Ravi Shankar
6y
1.5k
0
2

Article

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

dependencies {
compile 'com.github.pedrovgs:draggablepanel:1.9'
}

or Maven

<dependency>
<groupId>com.github.pedrovgs</groupId>
<artifactId>draggablepanel</artifactId>
<version>1.9</version>
<type>aar</type>
</dependency>

Step 2

Next, go to app >> res >> layout >> activity_main.xml. Select activity page. The XML code will appear, Just the following code. Create the layout of the Button and draggable panel.

Activity_Main.xml Code

<?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="com.example.ravi.draggablepanel.MainActivity">
<com.github.pedrovgs.DraggablePanel
android:id="@+id/draggable_panel"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CLICK ME" />
</RelativeLayout>
</com.github.pedrovgs.DraggablePanel>
</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

<resources>
<string name="app_name">DraggablePanel</string>
<string-array name="items">
<item>1</item>
<item>2</item>
<item>3</item>
<item>4</item>
<item>5</item>
<item>6</item>
<item>7</item>
<item>8</item>
<item>9</item>
<item>10</item>
</string-array>
</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

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:scaleType="centerCrop" //ImageView
android:src="@drawable/image"
android:layout_height="match_parent" />
</android.support.constraint.ConstraintLayout>

Two.xml Code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent" //ListView
android:background="#ffffff"
android:entries="@array/items">
</ListView>
</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

package com.example.ravi.draggablepanel;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class one extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.one, container, false);
return view;
}
}

Two.java Code

package com.example.ravi.draggablepanel;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class two extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.two, container, false);
return view;
}
}

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

package com.example.ravi.draggablepanel;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import com.github.pedrovgs.DraggablePanel;
public class MainActivity extends AppCompatActivity {
Button button;
DraggablePanel draggablePanel;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
draggablePanel =(DraggablePanel) findViewById(R.id.draggable_panel);
draggablePanel.setFragmentManager(getSupportFragmentManager());
draggablePanel.setTopFragment(new one());
draggablePanel.setBottomFragment(new two());
draggablePanel.setTopViewHeight(300);
draggablePanel.initializeView();
Handler handler = new Handler();
handler.postDelayed(new Runnable() {
@Override
public void run() {
draggablePanel.closeToLeft();
}
},100);
button = (Button) findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
draggablePanel.maximize();
}
});
}
}

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.