Moving A Button in CollapsingToolbarLayout

Moving A Button in CollapsingToolbarLayout - android

I'm trying to make toolbar button to stay at the bottom when collapsingToolbarLayout is expanded and moves up and get pinned when the collapsingToolbarLayout is collapsed. The way it behave now is always pinned on top. Here is what I have:
<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:id="#+id/col"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark"
android:fitsSystemWindows="true">
<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"
app:elevation="4dp"
android:transitionName="#string/pic_transition_name"
app:layout_collapseMode="parallax">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/clpsToolbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:collapsedTitleTextAppearance="#style/CollapsedText"
app:contentScrim="#color/colorPrimary"
app:expandedTitleTextAppearance="#style/ExpandedText"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
>
<ImageView
android:id="#+id/iv_gallery"
android:layout_width="match_parent"
android:layout_height="320dp"
android:layout_gravity="center_horizontal"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="center"
app:layout_collapseMode="pin"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<Button
android:id="#+id/mmv_toggle_detail"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="right"
/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
The toggle button always stays on top place, I want it to behave similar to WhatsApp edit button in group detail when it moves up and down as you expand the toolbar layout.

Solved it by taking the button out of the toolbar and putting it a child of the CollapsingToolbarLayout with margin bottom and collapsing mode as pin
<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:id="#+id/col"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark"
android:fitsSystemWindows="true">
<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"
app:elevation="4dp"
android:transitionName="#string/pic_transition_name"
app:layout_collapseMode="parallax">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/clpsToolbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:collapsedTitleTextAppearance="#style/CollapsedText"
app:contentScrim="#color/colorPrimary"
app:expandedTitleTextAppearance="#style/ExpandedText"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
>
<ImageView
android:id="#+id/iv_gallery"
android:layout_width="match_parent"
android:layout_height="320dp"
android:layout_gravity="center_horizontal"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="center"
app:layout_collapseMode="pin"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.v7.widget.Toolbar>
<Button
android:id="#+id/mmv_toggle_detail"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="right|bottom"
app:layout_collapseMode="pin"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

For complex behaviors you need to code this in behavior classes
Step # 1:
Create a Custom Behavior
public class BottomBarBehavior extends CoordinatorLayout.Behavior<LinearLayout> {
private int defaultDependencyTop = -1;
public BottomBarBehavior(Context context, AttributeSet attrs) {
super(context, attrs);
}
public BottomBarBehavior() {
}
#Override
public boolean layoutDependsOn(CoordinatorLayout parent, LinearLayout child, View dependency) {
return dependency instanceof AppBarLayout;
}
#Override
public boolean onDependentViewChanged(CoordinatorLayout parent, LinearLayout child, View dependency) {
//do something with the layout. see commented
return true;
}
}
Step # 2
Assign the behavior to the toolbar.
Either via xml:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="center"
**app:layout_behavior=".BottomBarBehavior"**
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<Button
android:id="#+id/mmv_toggle_detail"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="right"
/>
</android.support.v7.widget.Toolbar>
More info here: https://developer.android.com/reference/android/support/design/widget/CoordinatorLayout.Behavior.html

Try this, I hope it will help you ...
<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:id="#+id/col"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark"
android:fitsSystemWindows="true">
<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"
app:elevation="4dp"
android:transitionName="#string/pic_transition_name"
app:layout_collapseMode="parallax">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/clpsToolbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:collapsedTitleTextAppearance="#style/CollapsedText"
app:contentScrim="#color/colorPrimary"
app:expandedTitleTextAppearance="#style/ExpandedText"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
>
<ImageView
android:id="#+id/iv_gallery"
android:layout_width="match_parent"
android:layout_height="320dp"
android:layout_gravity="center_horizontal"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="center"
app:layout_collapseMode="pin"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<Button
android:id="#+id/mmv_toggle_detail"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center|bottom"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|center" />
</android.support.design.widget.CoordinatorLayout>
in JavaClass you will add below code .
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (Math.abs(verticalOffset) == appBarLayout.getTotalScrollRange()) {
// Collapsed
} else if (verticalOffset == 0) {
// Expanded
if (yourBtn.getVisibility()==View.VISIBLE) {
yourBtn.setVisibility(View.INVISIBLE);
}
} else {
// Somewhere in between
if (yourBtn.getVisibility()==View.VISIBLE) {
yourBtn.setVisibility(View.INVISIBLE);
}
}
}
});

Related

RecyclerView just scrolls 1 item

my layout is:
<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:background="#color/pureWhite"
tools:context=".ControllerPickerActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#00cc3d"
app:layout_scrollFlags="scroll|enterAlways"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/controllers_picker_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/pureWhite"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#drawable/ic_plus_30dp" />
</android.support.design.widget.CoordinatorLayout>
my problem is that my RecyclerView view doesn't scroll properly. I have 20 items but it shows 9 elements on the first screen and I can just scroll 1 item and not anymore. I can just get to 10th element.
I'm new using RecyclerView in CoordinatorLayout, and none of the tutorials I saw helped me solve my problem.
can anyone show me how to solve this problem or show me an example to handle a RecyclerView in a CoordinatorLayout?
my recyclerview item:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"
android:orientation="vertical"
android:paddingBottom="#dimen/row_padding_vertical"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/row_padding_vertical">
<TextView
android:id="#+id/controller_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:textColor="#color/pureBlack"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/controller_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/pureBlack"
android:layout_below="#id/controller_title" />
my Adapter:
public class ControllerPickerAdapter extends RecyclerView.Adapter<ControllerPickerAdapter.MyViewHolder> {
private List<Controller> controllerList;
public static class MyViewHolder extends RecyclerView.ViewHolder {
public TextView title,id;
public MyViewHolder(View v) {
super(v);
title = v.findViewById(R.id.controller_title);
id = v.findViewById(R.id.controller_id);
}
}
public ControllerPickerAdapter(List<Controller> controllerList) {
this.controllerList = controllerList;
}
#Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.controller_list_row, parent, false);
MyViewHolder vh = new MyViewHolder(v);
return vh;
}
#Override
public void onBindViewHolder(MyViewHolder holder, int position) {
Controller controller = controllerList.get(position);
holder.title.setText(controller.getTitle());
holder.id.setText("" + controller.getId());
}
#Override
public int getItemCount() {
return controllerList.size();
}
}

You have not added scroll flags to your RecyclerView. Try adding it using below code, use scroll value that suits your requirement.
app:layout_scrollFlags="scroll|enterAlways"

Why u put RecyclerView inside AppBarLayout? is it necessary? if not, then use this one:
<?xml version="1.0" encoding="utf-8"?>
<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:background="#color/pureWhite"
tools:context=".ControllerPickerActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
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="#00cc3d"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/controllers_picker_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
android:background="#color/pureWhite" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#drawable/ic_plus_30dp" />
</android.support.design.widget.CoordinatorLayout>
or u can try this one:
<?xml version="1.0" encoding="utf-8"?>
<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:background="#color/pureWhite"
tools:context=".ControllerPickerActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
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="#00cc3d"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.v7.widget.RecyclerView
android:id="#+id/controllers_picker_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/pureWhite"
app:layout_scrollFlags="scroll" />
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#drawable/ic_plus_30dp" />
</android.support.design.widget.CoordinatorLayout>

Fragment's RelativeLayout -> under AppBar in Activity (Fragment overlays Toolbars)

I am struggling with this problem.
I have Activity with toolbars (2 and 1 TAB). But after creating Fragment with RecyclerView, this RecyclerView just ignores Toolbars and is all over screen (fullscreen / in front).
fragment_category.xml
<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:id="#+id/relativelayout_recycler"
android:layout_height="match_parent">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe_refresh_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="#dimen/spacing_small"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.v4.widget.SwipeRefreshLayout>
</RelativeLayout>
Part of activity_main.xml
<RelativeLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
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">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="enterAlways">
<include layout="#layout/toolbar" />
</FrameLayout>
<View
android:id="#+id/toolbar_delimiter"
android:layout_width="match_parent"
android:layout_height="1px"
android:background="#color/view_background"
android:visibility="gone"
app:layout_scrollFlags="scroll|enterAlways|snap" />
<FrameLayout
android:id="#+id/frame_filters_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:visibility="gone"
app:layout_scrollFlags="scroll|enterAlways|snap">
<include layout="#layout/toolbar_filters" />
</FrameLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="fixed" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/frame_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/tabs"
android:visibility="gone"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
<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_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="#dimen/spacing_large"
android:clickable="true"
android:src="#drawable/ic_no_item"
android:tint="#android:color/white" />
</RelativeLayout>
FragmentCategory.java
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
view = inflater.inflate(R.layout.fragment_category, null);
context = getActivity();
// activate fragment menu
setHasOptionsMenu(true);
db = new DatabaseHandler(getActivity());
sharedPref = new SharedPref(getActivity());
resolveCategory();
lyt_not_found = view.findViewById(R.id.lyt_not_found);
recyclerView = (RecyclerView) view.findViewById(R.id.recycler);
recyclerView.setLayoutManager(new GridLayoutManager(getActivity(), Tools.getGridSpanCount(getActivity())));
recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
#Override
public void onScrollStateChanged(RecyclerView v, int state) {
super.onScrollStateChanged(v, state);
if(state == RecyclerView.SCROLL_STATE_DRAGGING || state == RecyclerView.SCROLL_STATE_SETTLING){
ActivityMain.animateFab(true);
} else {
ActivityMain.animateFab(false);
}
}
});
swipeLayout = (SwipeRefreshLayout) view.findViewById(R.id.swipe_refresh_layout);
swipeLayout.setOnRefreshListener(this);
swipeLayout.setColorSchemeResources(
R.color.colorAccent, R.color.colorAccentDark);
displayDataFromDatabase();
return view;
}
I know that I am just doing some stupid mistake, but I can´t just figure it out. Sorry for my poor english and skills. And thanks if you try to help me :)

You can change activity_main.xml to this.
<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.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">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="enterAlways">
<include layout="#layout/toolbar"/>
</FrameLayout>
<View
android:id="#+id/toolbar_delimiter"
android:layout_width="match_parent"
android:layout_height="1px"
android:background="#color/view_background"
android:visibility="gone"
app:layout_scrollFlags="scroll|enterAlways|snap"/>
<FrameLayout
android:id="#+id/frame_filters_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:visibility="gone"
app:layout_scrollFlags="scroll|enterAlways|snap">
<include layout="#layout/toolbar_filters"/>
</FrameLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="fixed"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/frame_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/tabs"
android:visibility="gone"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<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_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/spacing_large"
android:clickable="true"
android:src="#drawable/ic_no_item"
android:tint="#android:color/white"/>
</android.support.design.widget.CoordinatorLayout>
You can add ViewPager and FloatingActionButton to CoordinatorLayout.
And you can add some app:layout_behavior to it.

Collapsible Toolbar - Make Fragment Footer Always Visible in Android

I am making an app that has a ProfilePage with three fragments - About | Posts | Gallery, and I am using a collapsible toolbar with user's image. My second and third fragment will have a footer that should always be visible, but this is what I get:
When my image is expanded the footer disappears. What I want is for my two fragments to have these footers always visible and not depending on toolbar being collapsed or not. My gallery footer should be similar to post footer.
profile_layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<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="256dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
contentScrim="?attr/colorPrimary"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/profile_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:contentDescription="#string/profile_photo"
app:layout_collapseMode="none"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin">
<ImageView
android:id="#+id/toolbarEdit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:contentDescription="#string/block"
android:paddingEnd="20dp"
android:paddingStart="5dp"
app:srcCompat="#drawable/ic_icon_edit" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.design.widget.TabLayout
android:id="#+id/myProfileTabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:tabContentStart="72dp"
app:tabGravity="fill"
app:tabMode="scrollable" />
<android.support.v4.view.ViewPager
android:id="#+id/myProfileViewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</LinearLayout>
posts_fragment.xml:
<LinearLayout 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"
android:background="#drawable/tile_bg"
android:orientation="vertical" >
<ListView
android:id="#+id/list_view_messages"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#null"
android:divider="#null"
android:transcriptMode="alwaysScroll"
android:stackFromBottom="true">
</ListView>
<LinearLayout
android:id="#+id/llMsgCompose"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:orientation="horizontal"
android:weightSum="4" >
<EditText
android:id="#+id/inputMsg"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="3"
android:background="#color/bg_msg_input"
android:textColor="#color/text_msg_input"
android:paddingLeft="6dp"
android:paddingRight="6dp"/>
<Button
android:id="#+id/btnSend"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#color/ppdColorOrange"
android:textColor="#color/white"
android:text="#string/send" />
</LinearLayout>
My PostsFragment (not yet implemented):
public class MyProfilePostsFragment extends Fragment {
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.navdrawer_my_profile_fragment_posts, container, false);
return view;
}
}

I had the same requirement for my one of apps. I just did workaround.
Add your required layout in tab layout:
<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="256dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
contentScrim="?attr/colorPrimary"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/profile_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:contentDescription="#string/profile_photo"
app:layout_collapseMode="none"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin">
<ImageView
android:id="#+id/toolbarEdit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:contentDescription="#string/block"
android:paddingEnd="20dp"
android:paddingStart="5dp"
app:srcCompat="#drawable/ic_icon_edit" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.design.widget.TabLayout
android:id="#+id/myProfileTabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:tabContentStart="72dp"
app:tabGravity="fill"
app:tabMode="scrollable" />
<android.support.v4.view.ViewPager
android:id="#+id/myProfileViewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</LinearLayout>
<-- Your required layout -->
<LinearLayout
android:id="#+id/tab123"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:gravity="bottom"
android:orientation="horizontal"
android:visibility="gone"
android:weightSum="4">
<EditText
android:id="#+id/inputMsg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="3"
android:paddingLeft="6dp"
android:paddingRight="6dp" />
<Button
android:id="#+id/btnSend"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="send" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
Add following code in your Tab activity:
TabLayout tabLayout;
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);//add your viewpager to TabLayout
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab) {
viewPager.setCurrentItem(tab.getPosition());
LinearLayout l=(LinearLayout) findViewById(R.id.tab123);
final EditText text=(EditText) findViewById(R.id.inputMsg);
Button send=(Button) findViewById(R.id.btnSend);
if (tab.getPosition() == 0) {
l.setVisibility(View.GONE);
System.out.println("About tab");
} else if (tab.getPosition() == 1) {
l.setVisibility(View.VISIBLE);
System.out.println("Posts tab");
send.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
String msg = null;
msg = text.getText().toString(); //get input
// Perform your desired task.
}
});
} else if (tab.getPosition() == 2) {
l.setVisibility(View.VISIBLE);
System.out.println("Gallery tab");
send.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
String msg = null;
msg = text.getText().toString(); //get input
//Perform your desired task.
}
});
}
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
}
});

How to handle scroll in NestedScrollView

What I want to do is to handle the scroll NestedScrollView.
But when I "setOnScrollChangedListener" to it, and then I scroll the view, nothing happens, the method "setOnScrollChangedListener" even isn't be called...
Who could tell me why? And when will the method "setOnScrollChangedListener" be called?
<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:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/MyAppbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:background="#color/material_deep_teal_500"
android:fitsSystemWindows="true">
<ImageView
android:id="#+id/bgheader"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:background="#drawable/example"
app:layout_collapseMode="parallax" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="24dp">
<android.support.v7.widget.CardView
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/error_color"
android:textSize="20sp"
android:text="This text is part of first Cardview\n\n"/>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:textColor="#color/abc_search_url_text"
android:text="This text is part of second Cardview\n\n"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
In MainActivity, I want to listen to the scroll. I did like this:
public class MainActivity extends AppCompatActivity {
private NestedScrollView nestedScrollView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
nestedScrollView = (NestedScrollView) findViewById(R.id.scroll);
nestedScrollView.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener() {
#Override
public void onScrollChange(NestedScrollView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
System.out.println("I am scrolling the view...");
}
});
}
}

I tried the same code without
app:layout_behavior="#string/appbar_scrolling_view_behavior"
in the NestedScrollView and it worked for me. Give it a try

How to do Collapsing ToolBar Layout collapses with a button click?

I don't know if it's possible control when it collapses. Or if an effect similar can be done with an ImageView. I would like to do an effect similar to the app Yummly

AppBarLayout has two methods that let you control the collapsing of the CollapsingToolbarLayout: setExpanded(expanded, animate) and setExpanded(expanded). Call one of them inside your OnClickListener.

Expand/Collapse Toolbar with a FloatingActionButton click using CoordinatorLayout, AppBarLayout, setExpanded(boolean expanded) (Support Library v23+)
<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"
tools:context=".MainActivity" >
<!--This view depends heavily on being used as a direct child within a CoordinatorLayout-->
<android.support.design.widget.AppBarLayout
android:id="#+id/appbarLayout"
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="wrap_content"
android:background="#b71c1c"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:minHeight="96dp"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Expandable/Collapsible Toolbar" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:id="#+id/v2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="24dp"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Content" />
</RelativeLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/ic_add_white_24px"
app:layout_anchor="#id/v2"
app:layout_anchorGravity="top|right|end"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
appBarLayout.setExpanded(true/false)
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final AppBarLayout appbarLayout = (AppBarLayout)findViewById(R.id.appbarLayout);
FloatingActionButton fab = (FloatingActionButton)findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
if (appbarLayout.getTop() < 0)
appbarLayout.setExpanded(true);
else
appbarLayout.setExpanded(false);
}
});
}
Image: Expand/Collapse Toolbar with FAB click

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.

Moving A Button in CollapsingToolbarLayout - android

Related

RecyclerView just scrolls 1 item

Fragment's RelativeLayout -> under AppBar in Activity (Fragment overlays Toolbars)

Collapsible Toolbar - Make Fragment Footer Always Visible in Android

How to handle scroll in NestedScrollView

How to do Collapsing ToolBar Layout collapses with a button click?

Categories

Resources