How to do touch and drag slide animation

How to do touch and drag slide animation - android

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

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

Related

Navigation bar with scroll view android

This is my layout which is using the nav bar and scroll view.
<android.support.design.widget.CoordinatorLayout
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:context=".AccountActivity">
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!-- your content layout -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
app:elevation="0dp" />
</android.support.design.widget.AppBarLayout>
<!--content of account activity-->
<ScrollView
android:layout_height="fill_parent"
android:layout_width="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
>
<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:id="#+id/activity_setup"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".AccountActivity">
<ImageView
android:layout_width="match_parent"
android:background="#drawable/listgrad"
android:id="#+id/imageView"
android:layout_height="100dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:text="Name"
android:layout_below="#+id/profilepic"
android:id="#+id/accountnamefield"
android:textSize="18sp"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Recently Match"
android:id="#+id/recentMatchTitle"
android:textSize="18sp"
android:layout_below="#+id/accountnamefield"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<android.support.v7.widget.RecyclerView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/recentMatchProductList"
android:layout_below="#+id/recentMatchTitle"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true">
</android.support.v7.widget.RecyclerView>
<ImageButton
android:layout_width="150dp"
android:layout_height="150dp"
app:srcCompat="#mipmap/ic_account_circle_white_36dp"
android:id="#+id/profilepic"
android:background="#drawable/round_button"
android:layout_marginTop="21dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
</ScrollView>
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/drawer" />
</android.support.v4.widget.DrawerLayout>
I am using scroll view with the nav drawer. Why do I open and close the nav drawer then the view will scroll to bottom position? Can I move it to top or remain the same position? Please give me some helps.

Remove android:inputType="textPersonName" part first for TextView.Then
add android:scrollbars="vertical" to your ScrollView .It worked fine for me.
Here I will post the code I used for testing, ScrollView kept same position while using NavigationDrawer
<android.support.design.widget.CoordinatorLayout
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:context=".MainActivity">
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!-- your content layout -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
app:elevation="0dp" />
</android.support.design.widget.AppBarLayout>
<!--content of account activity-->
<ScrollView
android:layout_height="fill_parent"
android:layout_width="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:scrollbars="vertical"
>
<LinearLayout 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:id="#+id/activity_setup"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/bla"
android:id="#+id/accountnamefield"
android:textSize="18sp"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Recently Match"
android:id="#+id/recentMatchTitle"
android:textSize="18sp"
android:layout_below="#+id/accountnamefield"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</LinearLayout>
</ScrollView>
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>

Your layout has bunch of problems:
android:layout_alignParentStart="true" - the same thing as left (or right for RTL)
android:layout_alignParentEnd="true" - the same thing as right (or
left for RTL)
It's wrong to declare start and left in the same time
Using a recycler view inside ScrollView - bad practice and will never work. You can use nested scroll view (RecyclerView inside ScrollView is not working), but the better solution is put what you want inside scroll view (as headers and footers).
I think there is no way to measure your layout. Try to figure out how android is drawing views (https://medium.com/#britt.barak/measure-layout-draw-483c6a4d2fab#.y7nd8gyql).
P.S. You have much more problems with your layout, it's easier to write a new one, than pointing all problems.

Scrolling problems inside AppBarLayout

I have CoordinatorLayout:
<android.support.design.widget.CoordinatorLayout 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:background="#color/background"
android:clickable="true"
android:focusableInTouchMode="true">
<android.support.v7.widget.RecyclerView
android:id="#+id/bottom_recycle_view"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:background="#drawable/border_gray_solid_background_nop"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/background">
<com.app.views.textviews.OpSearchView
android:id="#+id/search_top"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/default_margin"
android:layout_marginRight="#dimen/default_margin"
android:layout_marginTop="#dimen/_20sdp"
app:hint="#string/filter_categories"
app:layout_scrollFlags="scroll"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="#dimen/_10sdp"
app:layout_scrollFlags="scroll">
<TextView
android:id="#+id/top_heading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/default_margin"
android:layout_marginLeft="#dimen/default_margin"
android:layout_marginRight="#dimen/default_margin"
android:layout_marginTop="#dimen/home_screen_sector_spacing"
android:gravity="left"
android:textColor="#color/heading_gray"
android:textSize="#dimen/_14sdp"
android:textStyle="bold"/>
<com.app.views.recycleview.HorizontalRecycleView
android:id="#+id/top_recycle_view"
android:layout_width="match_parent"
android:layout_height="#dimen/categories_row_height"
android:clipToPadding="false"
android:paddingLeft="#dimen/default_margin"/>
<TextView
android:id="#+id/bottom_heading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/default_margin"
android:layout_marginRight="#dimen/default_margin"
android:layout_marginTop="#dimen/home_screen_sector_spacing"
android:gravity="left"
android:textColor="#color/heading_gray"
android:textSize="#dimen/_14sdp"
android:textStyle="bold"/>
</LinearLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
I would like to make OpSearchView sticky to the top of the layout.
I try to remove app:layout_scrollFlags="scroll" from OpSearchView but all childs from AppBarLayout became sticky.
If I move OpSearchView from the AppBarLayout under RecyclerView, the RecyclerView(with layout_behavior) became invisible.
How to make OpSearchView without scrolling behavior?

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:focusableInTouchMode="true"
>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#eeeeee"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="?android:actionBarSize"
android:paddingBottom="10dp"
app:layout_scrollFlags="scroll"
>
<TextView
android:id="#+id/top_heading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/single_margin"
android:layout_marginLeft="#dimen/single_margin"
android:layout_marginRight="#dimen/single_margin"
android:gravity="start"
android:textStyle="bold"
android:text="top heading"
/>
<!-- com.app.views.recycleview.HorizontalRecycleView -->
<View
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#cccccc"
/>
<TextView
android:id="#+id/bottom_heading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/single_margin"
android:layout_marginRight="#dimen/single_margin"
android:gravity="start"
android:textStyle="bold"
android:text="bottom heading"
/>
</LinearLayout>
<!-- toolbar with the searchview in it -->
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:actionBarSize"
android:background="#dddddd"
app:layout_scrollFlags="scroll|enterAlways"
app:layout_collapseMode="pin"
>
<SearchView
android:id="#+id/search_top"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:queryHint="Search"
app:layout_scrollFlags="scroll"
app:layout_collapseMode="pin"
/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!-- scrolling contents -->
<android.support.v7.widget.RecyclerView
android:id="#+id/recycle_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
This is the layout that I came up with working with your layout, I took a few liberties to make things work, you should make your own changes to get it back to your original layout, like your custom SearchView and HorizontalRecyclerView.
P.S. For layout_width and layout_height, match_parent and fill_parent are the same thing, and you should only use match_parent as per Google's documentation suggests.

Add Footer to CoordinatorLayout

I want to add a Footer to CoordinatorLayout which contains a TabView + ViewPager.
Here is the main.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="#+id/drawer_layout"
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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.entree.entree.activity.StoreActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/black"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_action_tray"
android:layout_gravity="right"
android:layout_marginRight="15dp"
android:scaleType="centerInside"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_action_find"
android:layout_gravity="right"
android:scaleType="centerInside"
android:layout_marginRight="10dp"
/>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:background="#android:color/white"
app:tabIndicatorColor="#00000000"
style="#style/MyCustomTabLayout"
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_above="#+id/llTray" />
</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:visibility="gone"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_search"
app:menu="#menu/activity_search_drawer" />
</android.support.v4.widget.DrawerLayout>
And here is the Xml Content:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/container"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.entree.entree.activity.StoreActivity$PlaceholderFragment">
<GridView
android:id="#+id/gridView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:numColumns="1"
android:stretchMode="columnWidth">
</GridView>
<LinearLayout
android:id="#+id/llTray"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3"
android:visibility="gone"
android:gravity="center_vertical"
android:layout_centerVertical="true"
android:background="#color/divider"
android:layout_alignParentBottom="true">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_gravity="left"
android:gravity="left"
android:layout_height="wrap_content">
<ImageButton
android:id="#+id/btnTray"
android:src="#drawable/ic_action_tray_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:textStyle="bold"
android:layout_gravity="center_horizontal|center_vertical"
android:gravity="center_horizontal|center_vertical"
android:layout_weight="1"
android:text="#string/view_tray" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:layout_marginRight="10dp"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tvTotalPrice"
android:layout_width="wrap_content"
android:textSize="20sp"
android:textStyle="bold"
android:text="#string/Rs"
android:layout_height="wrap_content" />
</RelativeLayout>
</LinearLayout>
The footer is in xml content.
If i remove:
app:layout_behavior="#string/appbar_scrolling_view_behavior"
in the main Xml View Pager, footer appears , else it's not shown.
How can i get the footer visible?

You already have:
<GridView
android:id="#+id/gridView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:numColumns="1"
android:stretchMode="columnWidth" />
With match_parent for both height and width which it doesn't seems to be good.
Also, Perhaps you will need to show that ViewPager with NestedScrollView for scrolling the content in future.(needs a trick, but you can achieve this).
So, my suggest is, you should be able to show that footer all the time in the below of that ViewPager by adding it like this:
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_above="#+id/llTray" />
<!-- Footer aligned to bottom -->
<RelativeLayout
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#FC0"
android:gravity="center"
app:layout_anchor="#id/main_content"
app:layout_anchorGravity="bottom">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:text="Fixed Footer"
android:textColor="#000"
android:textSize="20sp" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
This should show the footer all the time (even when ViewPager is collapsing).
Or if you want to show it in your ViewPager:
you should add this in your contents:
app:layout_behavior="#string/appbar_scrolling_view_behavior"
Which means, it will put the contents below the AppbarLayout
Anyways, your contents problem is coming from that GridView like i said, it will match all the content and you don't have ScrollView or even NestedScrollView to show the other contents.

Android Design Support Library: Use ViewPager/TabLayout with scrolling toolbar and sticky button

I have a TabLayout combined with an ViewPager. In the tabs some Fragments are displayed. One Fragment consist of a NestedScrollView and a sticky button which should always be visible, even if the user scrolls down/up.
Additionally I would like to hide the toolbar, if the user scrolls down.
Currently the scrolling works, but my sticky button is not visible at startup and appears only, if I scroll down.
This is my setup (basically taken from Chris Banes cheese-sample https://github.com/chrisbanes/cheesesquare):
The layout containing the ViewPager and the Toolbar:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
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"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_done" />
</android.support.design.widget.CoordinatorLayout>
My fragment with a NestedScrollView and a Sticky Button:
<FrameLayout android:id="#+id/container"
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.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="52dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="Item 1" />
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="Item 2" />
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="Item 3" />
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="Item 4" />
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="Item 5" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<Button
android:layout_width="match_parent"
android:layout_height="52dp"
android:layout_gravity="bottom"
android:text="Button" />
</FrameLayout>
The result I would like to achieve (initial state after startup) - Button with text "Button" should show up - please ignore the FAB:
This is the result I currently get - button with text "Button" not visible - please ignore the FAB:
If I scroll down my button "Button" should remain visible and the toolbar should collapse:
Do you have any ideas?

You need put your sticky button into root CoordinatorLayout with attribute
android:layout_gravity="bottom|center_horizontal"
or make bottom margin of sticky button which equals ?android:actionBarSize.

Put NestedScrollView like this
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="52dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
and set Button like this
<Button
android:layout_width="match_parent"
android:layout_height="52dp"
android:elevation="10dp"
android:layout_marginTop="-55dp"
android:layout_gravity="bottom"
android:text="Button" />
And let me know if this works

In your fragment take parent as relative layout put button in Framelayout and put android:layout_alignParentBottom="true" this to Framelayout.
<FrameLayout android:id="#+id/container"
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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="52dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="Item 1" />
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="Item 2" />
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="Item 3" />
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="Item 4" />
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="Item 5" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<FrameLayout android:id="#+id/test"
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
android:layout_height="match_parent">
<Button
android:layout_width="match_parent"
android:layout_height="52dp"
android:text="Button" />
</FrameLayout>
</RelativeLayout>
</FrameLayout>
Try this code i modify it.

Android ScrollView not scrolling in Activity with Drawer Layout

Let me introduce you to my activity:
<RelativeLayout
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">
<include
android:id="#+id/toolbar_actionbar"
layout="#layout/toolbar_default"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<FrameLayout
android:id="#+id/main_fragment_container"
android:layout_width="match_parent"
android:layout_below="#+id/toolbar_actionbar"
android:layout_height="match_parent"/>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar_actionbar">
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:clickable="true"
android:layout_height="match_parent"/>
<!-- android:layout_marginTop="?android:attr/actionBarSize"-->
<fragment
android:id="#+id/fragment_drawer"
android:name="com.package.name.navigationdrawer.NavigationDrawerFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:layout="#layout/fragment_navigation_drawer"/>
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>
FrameLayout main_fragment_container is where I load different fragments depending on Navigation Drawer selections but when I load a fragment with a ScrollView scroll does not work, I can see the scrollbar when the fragment is loaded indicating that only a small section is on screen at the moment but it will never scroll. I tried some suggestions that mentioned encasing the ScrollView inside a LinearLayout, it made no difference.
I suspect the navigation drawer is "intercepting" the events which should reach the ScrollView but I'm lost as to what to do. This is the fragment:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical">
<ScrollView
android:id="#+id/fragment_who_scrollview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/header_pic_s"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="17sp"
android:text="TEEEEEST"
android:gravity="center"
android:padding="20dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="17sp"
android:text="TEEEEEST"
android:gravity="center"
android:padding="20dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="17sp"
android:text="TEEEEEST"
android:gravity="center"
android:padding="20dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="17sp"
android:text="TEEEEEST"
android:gravity="center"
android:padding="20dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="17sp"
android:text="TEEEEEST"
android:gravity="center"
android:padding="20dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="17sp"
android:text="TEEEEEST"
android:gravity="center"
android:padding="20dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="17sp"
android:text="TEEEEEST"
android:gravity="center"
android:padding="20dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="17sp"
android:text="TEEEEEST"
android:gravity="center"
android:padding="20dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="17sp"
android:text="TEEEEEST"
android:gravity="center"
android:padding="20dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="17sp"
android:text="TEEEEEST"
android:gravity="center"
android:padding="20dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="17sp"
android:text="TEEEEEST"
android:gravity="center"
android:padding="20dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="17sp"
android:text="TEEEEEST"
android:gravity="center"
android:padding="20dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="17sp"
android:text="TEEEEEST"
android:gravity="center"
android:padding="20dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="17sp"
android:text="TEEEEEST"
android:gravity="center"
android:padding="20dp"/>
</LinearLayout>
</ScrollView>
</LinearLayout>
Thanks for your time.
UPDATE - LET ME ADD SOME ADDITIONAL INFO:
The problem here is not the ScrollView per se but the fact that in my activity layout the DrawerLayout is 'above' the ScrollView preventing any touch events reaching the ScrollView. If I remove the DrawerLayout the ScrollView scrolls JUST FINE.
Similarly if I put ScrollView after DrawerLayout in activity layout the scroll works alright in the ScrollView but of course the DrawerLayout does not work as intended since it must be on top of everything else.
I hope I explained myself properly, by testing I'm sure of what the problem is but I'm not sure on how to fix it, my experience with Navigation Drawer is limited and I have no idea how to let the scroll event pass to the ScrollView instead of having the DrawerLayout intercept it.

You should move the framelayout with id "main_fragment_container" inside drawerlayout like this:
<RelativeLayout 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">
<include
android:id="#+id/toolbar_actionbar"
layout="#layout/toolbar_default"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar_actionbar">
<FrameLayout
android:id="#+id/main_fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar_actionbar" />
<!-- android:layout_marginTop="?android:attr/actionBarSize"-->
<fragment
android:id="#+id/navigation_drawer"
android:name="vodafone.navdrawertest.NavigationDrawerFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:layout="#layout/fragment_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>

Try reorder of your layout:
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer"
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">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent“>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
orientation="vertical">
<include
android:id="#+id/toolbar_actionbar"
layout="#layout/toolbar_default"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<FrameLayout
android:id="#+id/main_fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
<!-- android:layout_marginTop="?android:attr/actionBarSize"-->
<fragment
android:id="#+id/fragment_drawer"
android:name="com.ulusol.knowmyshop.navigationdrawer.NavigationDrawerFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:layout="#layout/fragment_navigation_drawer"/>
</android.support.v4.widget.DrawerLayout>

Thanks to Thomas for guiding me to the answer.
The FrameLayout where the ScrollView goes must be inside the DrawerLayout to be scrollable. I also ditched the other container Layout because it was not being used. This is how the activity remains:
<RelativeLayout
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">
<include
android:id="#+id/toolbar_actionbar"
layout="#layout/toolbar_default"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar_actionbar">
<FrameLayout
android:id="#+id/main_fragment_container"
android:layout_width="match_parent"
android:layout_below="#+id/toolbar_actionbar"
android:layout_height="match_parent"/>
<!-- android:layout_marginTop="?android:attr/actionBarSize"-->
<fragment
android:id="#+id/fragment_drawer"
android:name="com.package.name.navigationdrawer.NavigationDrawerFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:layout="#layout/fragment_navigation_drawer"/>
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>

Try adding the following behavior in parent layout:
app:layout_behavior="#string/appbar_scrolling_view_behavior"
I had almost similar issue in AppBarLayout which is under DrawerLayout. This might work.

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

How to do touch and drag slide animation - android

Related

Navigation bar with scroll view android

Scrolling problems inside AppBarLayout

Add Footer to CoordinatorLayout

Android Design Support Library: Use ViewPager/TabLayout with scrolling toolbar and sticky button

Android ScrollView not scrolling in Activity with Drawer Layout

Categories

Resources