Reputation: 231

How to do touch and drag slide animation

I am trying to code a audio player that streams audio from internet all is going well, but i want an animation look like this.

EDITED

This is my Activity:

My Activity Explained :P

My Layout XML:

    <?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    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"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/main_content"
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                android:fitsSystemWindows="true"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

            <android.support.design.widget.TabLayout
                android:id="@+id/tabLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>

        </android.support.design.widget.AppBarLayout>

        <android.support.v4.view.ViewPager
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingBottom="70dp"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

        <LinearLayout
            android:id="@+id/newactivity"
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:background="@color/md_teal_500"
            android:clickable="true"
            android:elevation="5dp"
            android:gravity="bottom|center"
            android:orientation="vertical"
            app:layout_anchor="@id/container"
            app:layout_anchorGravity="bottom|right|end">

            <SeekBar
                android:id="@+id/seekBar1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_column="0"
                android:layout_marginLeft="-20dp"
                android:layout_marginRight="-20dp"
                android:maxHeight="3dp"
                android:minHeight="3dp"
                android:padding="0dp"
                android:progressDrawable="@drawable/seekbar"
                android:thumb="@null"
                />


            <RelativeLayout
                android:layout_width="280dp"
                android:layout_gravity="start"
                android:layout_height="match_parent"
                >

                <TextView
                    android:id="@+id/title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentStart="false"
                    android:layout_alignParentTop="false"
                    android:layout_marginLeft="15dp"
                    android:layout_marginTop="10dp"
                    android:ellipsize="marquee"
                    android:fadingEdge="horizontal"
                    android:lines="1"
                    android:marqueeRepeatLimit="marquee_forever"
                    android:maxLines="1"
                    android:scrollHorizontally="true"
                    android:text="No Marasiya Selected"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:textColor="@android:color/white"/>

                <TextView
                    android:id="@+id/album"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignLeft="@+id/title"
                    android:layout_alignStart="@+id/title"
                    android:layout_below="@+id/title"
                    android:maxLines="1"
                    android:text="Album"
                    android:textAppearance="?android:attr/textAppearanceSmall"
                    android:textColor="#80cbc4"/>

                <TextView
                    android:id="@+id/duration"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/title"
                    android:layout_marginLeft="10dp"
                    android:layout_toEndOf="@+id/album"
                    android:layout_toRightOf="@+id/album"
                    android:text="00:00"
                    android:textAppearance="?android:attr/textAppearanceSmall"
                    android:textColor="#80cbc4"/>

                <TextView
                    android:id="@+id/totalSec"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/title"
                    android:layout_toEndOf="@+id/duration"
                    android:layout_toRightOf="@+id/duration"
                    android:text=" / 00:00"
                    android:textAppearance="?android:attr/textAppearanceSmall"
                    android:textColor="#80cbc4"/>

            </RelativeLayout>

        </LinearLayout>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:layout_marginBottom="35dp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="24dp"
            android:layout_marginTop="16dp"
            android:elevation="8dp"
            android:src="@drawable/ic_play_button"
            android:tint="@color/md_brown_700"
            app:layout_anchorGravity="bottom|right|end"/>

    </android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:menu="@menu/drawer_menu"/>


</android.support.v4.widget.DrawerLayout>

I have using viewpager with fragments added to main activity. And the bottom bar is added in main xml layout itself

Upvotes: 2

Answers (1)

Jossy Paul

Reputation: 1287

You can do this using AndroidSlidingUpPanel. You can get the demo code from here: https://github.com/umano/AndroidSlidingUpPanel. Simply add the following dependency to your build.gradle file to use this.

compile 'com.sothree.slidinguppanel:library:3.2.1'

After that edit the following xml for your specific use:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".DemoActivity" >

<com.sothree.slidinguppanel.SlidingUpPanelLayout
    xmlns:sothree="http://schemas.android.com/apk/res-auto"
    android:id="@+id/sliding_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="bottom"
    sothree:umanoPanelHeight="68dp"
    sothree:umanoShadowHeight="4dp"
    sothree:umanoParallaxOffset="100dp"
    sothree:umanoDragView="@+id/dragView"
    sothree:umanoOverlay="true"
    sothree:umanoScrollableView="@+id/list">

    <!-- MAIN CONTENT -->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <android.support.v7.widget.Toolbar
            xmlns:sothree="http://schemas.android.com/apk/res-auto"
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/main_toolbar"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            sothree:theme="@style/ActionBar"
            android:layout_width="match_parent"/>
        <TextView
            android:id="@+id/main"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="?attr/actionBarSize"
            android:gravity="center"
            android:text="Main Content"
            android:clickable="true"
            android:focusable="false"
            android:focusableInTouchMode="true"
            android:textSize="16sp" />
    </FrameLayout>

    <!-- SLIDING LAYOUT -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ffffff"
        android:orientation="vertical"
        android:clickable="true"
        android:focusable="false"
        android:id="@+id/dragView">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/name"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="14sp"
                android:gravity="center_vertical"
                android:paddingLeft="10dp"/>

            <Button
                android:id="@+id/follow"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:textSize="14sp"
                android:gravity="center_vertical|right"
                android:paddingRight="10dp"
                android:paddingLeft="10dp"/>

        </LinearLayout>

    </LinearLayout>
</com.sothree.slidinguppanel.SlidingUpPanelLayout>

Below the main MAIN CONTENT add your viewpager. Below SLIDING LAYOUT add your linear layout

UPDATE: AppCompat v23.2 have introduced BottomSheetBehavior behavior in CoordinatorLayout.

By attaching a BottomSheetBehavior to a child View of a CoordinatorLayout (i.e., adding app:layout_behavior=”android.support.design.widget.BottomSheetBehavior”), you’ll automatically get the appropriate touch detection to transition between five state:

STATE_COLLAPSED: this collapsed state is the default and shows just a portion of the layout along the bottom. The height can be controlled with the app:behavior_peekHeight attribute (defaults to 0)
STATE_DRAGGING: the intermediate state while the user is directly dragging the bottom sheet up or down
STATE_SETTLING: that brief time between when the View is released and settling into its final position
STATE_EXPANDED: the fully expanded state of the bottom sheet, where either the whole bottom sheet is visible (if its height is less than the containing CoordinatorLayout) or the entire CoordinatorLayout is filled
STATE_HIDDEN: disabled by default (and enabled with the app:behavior_hideable attribute), enabling this allows users to swipe down on the bottom sheet to completely hide the bottom sheet

You can get a sample app for implementing this from here: https://github.com/NikolaDespotoski/BottomSheetSample

Upvotes: 2

How to do touch and drag slide animation

Answers (1)

Related Questions