I have Scrolling activity and I have a CardView in it which behave like this floating action button as shown in this animation.
As you can see fab is fading (in and out), but the card view is not behaving like that.
My layout.xml is as follows:
<?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:fitsSystemWindows="true"
tools:context="com.rhcloud.arshadali.task.ScrollingActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_scrolling" />
<android.support.v7.widget.CardView
android:id="#+id/id_card"
android:layout_width="match_parent"
android:layout_height="46dp"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
android:foreground="#android:color/white"
android:layout_margin="5dp">
<ImageView
android:id="#+id/app_googleplay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:maxWidth="30dp"
android:maxHeight="30dp"
android:layout_gravity="center_vertical"/>
<TextView
android:id="#+id/app_apk"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="com.javiersantos"
android:fontFamily="sans-serif-thin"
android:textColor="#android:color/black"
android:gravity="center"/>
</android.support.v7.widget.CardView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
app:srcCompat="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
Any way to achieve this?
I think the Card View should be a child of your collapsing toolbar for the effects to take place (Place it above 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.rhcloud.arshadali.task.ScrollingActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.CardView
android:id="#+id/id_card"
android:layout_width="match_parent"
android:layout_height="46dp"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
android:foreground="#android:color/white"
android:layout_margin="5dp">
<ImageView
android:id="#+id/app_googleplay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:maxWidth="30dp"
android:maxHeight="30dp"
android:layout_gravity="center_vertical"/>
<TextView
android:id="#+id/app_apk"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="com.javiersantos"
android:fontFamily="sans-serif-thin"
android:textColor="#android:color/black"
android:gravity="center"/>
</android.support.v7.widget.CardView>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_scrolling" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
app:srcCompat="#android:drawable/ic_dialog_email" />
Put CardView inside a LinearLayout and move it to the top of Toolbar.
It works.
Like this:
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:titleEnabled="false"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.5"
android:layout_marginTop="60dp"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:padding="10dp">
</android.support.v7.widget.CardView>
</LinearLayout>
<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/AppTheme.Overlay.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
Perhaps my answer is too late, but you can try this simplest way. Put the card view in the "Content Activity" which is usually automatically generated when you choose Scrolling Activity template in android studio. Remember, if you want to have multiple card view, you should put those card views under one Linear/Relative Layout in the Content Activity.
This work:
if you are using Databinding this is the perfect solution:
In same Class:
#BindingAdapter("hideWithAppBarLayout")
public static void hideWithAppBarLayout(View view, AppBarLayout appBarLayout) {
if (appBarLayout == null) return;
if (view.getParent() instanceof CoordinatorLayout) {
CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) view.getLayoutParams();
lp.setAnchorId(appBarLayout.getId());
appBarLayout.addOnOffsetChangedListener((AppBarLayout.BaseOnOffsetChangedListener) (appBar, verticalOffset) -> {
float percentage = ((float) Math.abs(verticalOffset) / appBar.getTotalScrollRange());
//on collapsing
if (percentage == 1) view.setVisibility(View.GONE);
//on expending
if (percentage == 0) view.setVisibility(View.VISIBLE);
});
}
}
In xml layout do this:
<androidx.cardview.widget.CardView
app:layout_anchor="#id/appbar"
app:hideWithAppBarLayout="#{appbar}"
app:layout_anchorGravity="bottom|center_horizontal">
//todo
</androidx.cardview.widget.CardView>
Related
I am having trouble getting the Toolbar and TabLayout to hide when I scroll up. I have 3 different xml files: 1) Toolbar, 2) TabLayoutFragment (here I have the TabLayout and ViewPager, and I include the toolbar here, and 3) HomeFragment (contains the RecyclerView). I need for the Toolbar to hide when I scroll up, and I have seen in many other posts that most people use a CoordinatorLayout instead of a Relative Layout or Linear Layout, and then they have to add app:layout_scrollFlags="scroll|enterAlways" which I have done, but I still can't get the Toolbar to hide when scrolling the RecyclerView up.
I've also added this to the RecyclerView, but still nothing... app:layout_behavior="#string/appbar_scrolling_view_behavior"
Could someone point out what is missing here?
Toolbar
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar_events"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/bar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_home_fragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:fontFamily="#font/scriptbl"
android:text="Events"
android:textColor="#color/colorBlack"
android:textSize="60sp" />
<ImageView
android:id="#+id/search"
style="#style/SelectableIconThemeBackground"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginEnd="10dp"
android:contentDescription="#string/camera"
android:padding="10dp"
android:src="#drawable/icon_search" />
<ImageView
android:id="#+id/filter"
style="#style/SelectableIconThemeBackground"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toStartOf="#+id/search"
android:contentDescription="#string/camera"
android:padding="10dp"
android:src="#drawable/icon10_sort" />
<ImageView
android:id="#+id/options"
style="#style/SelectableIconThemeBackground"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_marginStart="10dp"
android:contentDescription="#string/options"
android:padding="10dp"
android:src="#drawable/icon_short_text" />
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
TabLayoutFragment
<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/fragment_home_tab_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:tag="Home"
tools:context=".Fragment.TabLayoutFragment">
<include
android:id="#+id/toolbar_events"
layout="#layout/toolbar_events" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:background="#fff"
app:layout_scrollFlags="scroll|enterAlways"
app:tabIndicatorColor="#000"
app:tabIndicatorFullWidth="false"
app:tabRippleColor="#android:color/transparent"
app:tabSelectedTextColor="#color/colorBlack"
app:tabTextColor="#color/colorBlack" />
<androidx.viewpager.widget.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</LinearLayout>
HomeFragment
<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/fragment_home"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical"
android:tag="fragment_home"
tools:context=".Fragment.HomeFragment">
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="#+id/refresh"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar">
<TextView
android:id="#+id/welcome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="100dp"
android:gravity="center"
android:text="Welcome to Events!"
android:textColor="#d9d9d9"
android:textSize="36sp"
android:visibility="gone" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawablePadding="5dp"
android:gravity="center_horizontal"
android:padding="8dp"
app:drawableStartCompat="#drawable/icon_loc" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/location"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</RelativeLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_view_following"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</RelativeLayout>
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
</RelativeLayout>
You can make it programmatically by adding the addOnScrollListener method.
On the RecyclerView.SCROLL_STATE_DRAGGING method hide the toolbar and TabLayout and on RecyclerView.SCROLL_STATE_IDLE method you can show it again if you want to show them again.
You can try it in such way:
recyclerview.addOnScrollListener(new RecyclerView.OnScrollListener() {
#Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
if (newState == RecyclerView.SCROLL_STATE_IDLE) {
// Show your view again.. If you want to show them..
} else if (newState == RecyclerView.SCROLL_STATE_DRAGGING) {
// Hide your view..
}
super.onScrollStateChanged(recyclerView, newState);
}});
Or You can use recycler view's addOnScrollListener method:
Refer: addOnScrollListener
recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
#Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
if (dy > 0) {
//Scrolling down
// Show your controllers from here
} else if (dy < 0) {
//Scrolling up
// Hide your controllers from here
}
}});
Also, you can add some animations there to show and hide your toolbar and tab layouts.
Place the toolbar and the tablayout within the ScrollView group to get the scrolling part.
<ScrollView>
<Toolbar></Toolbar>
<Tablayout></Tablayout>
</ScrollView>
I need to shift a RecyclerView down by the size of my actionBar when a Button click occurs.
I tried this code
params = (CoordinatorLayout.LayoutParams) myrv.getLayoutParams();
public void changeRecyclerViewPosition() {
params.setMargins(0, android.R.attr.actionBarSize, 0, 0);
myrv.setLayoutParams(params);
}
And as a result the RecyclerView disapears when the Button is clicked.
So I tried to log the android.R.attr.actionBarSize value and it's too big (2130903043).
I thought that maybe the result is in pixels and it needs to be converted to dp.
So can you guys explain to me what's wrong and the reason behind that behaviour ?
EDIT:
<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:padding="8dp"
tools:context=".Activities.LoadSavedCoffretDataActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
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/white"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<ImageView
android:id="#+id/cancel_img"
android:layout_marginTop="?attr/actionBarSize"
android:elevation="5dp"
android:layout_width="48dp"
android:layout_height="48dp"
android:src="#drawable/cancel" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerview_id"
android:layout_marginTop="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal">
<ImageView
android:id="#+id/delete_img"
android:layout_width="70dp"
android:layout_height="70dp"
android:src="#drawable/ic_delete_forever_black_24dp"/>
</LinearLayout>
You can get Action bar height by
public void changeRecyclerViewPosition() {
TypedValue tv = new TypedValue();
int actionBarHeight = 0;
if (getActivity().getTheme().resolveAttribute(R.attr.actionBarSize, tv, true))
{
actionBarHeight = TypedValue.complexToDimensionPixelSize(tv.data,getResources().getDisplayMetrics());
}
params.setMargins(0,actionBarHeight, 0, 0);
myrv.setLayoutParams(params);
}
Use this xml for fixed App Bar Size
the main line is
**android:minHeight="?attr/actionBarSize"**
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/appBar"
android:minHeight="?attr/actionBarSize"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/toolBar"
android:theme="#style/Theme.AppCompat.Light.DarkActionBar"/>
</com.google.android.material.appbar.AppBarLayout>
I have a CollapsingToolbarLayout with a toolbar and relative Layout.the contentScrim for the CollapsingToolbarLayout is set to transparent.what i want is on scroll,every content that goes under the toolbar should be invisible. this is what i have tried so far
<?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:fancy="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.spacewek.spacewek.ProfileActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/my_appbar_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:paddingTop="20dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed|enterAlways">
<RelativeLayout
android:id="#+id/root_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="45dp"
android:padding="#dimen/activity_padding"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed">
<com.github.siyamed.shapeimageview.RoundedImageView
android:id="#+id/profile_image"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginRight="15dp"
android:src="#drawable/images"
app:siBorderAlpha="0.01"
app:siBorderWidth="1dp"
app:siRadius="2dp"
/>
<TextView
android:id="#+id/profile_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/profile_image"
android:text="Suulisin Osman Diyaka"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="#+id/current_job_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/profile_name"
android:layout_toRightOf="#id/profile_image"
android:hint="Software engineer"
android:textSize="13sp" />
<TextView
android:id="#+id/current_place_of_work"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/current_job_title"
android:layout_toRightOf="#id/profile_image"
android:text="SpaceWek"
android:textSize="13sp" />
<TextView
android:id="#+id/personal_statement"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/profile_image"
android:layout_marginTop="10dp"
android:ellipsize="none"
android:maxLines="2"
android:scrollHorizontally="false"
android:text="I am Ghanaian taught African trianed banana eater whose jump from tree to tree" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_gravity="top"
android:layout_marginBottom="0dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:background="#color/transparent"
android:contentInsetEnd="0dp"
android:contentInsetLeft="0dp"
android:contentInsetRight="0dp"
android:contentInsetStart="0dp"
android:elevation="0dp"
android:minHeight="45dp"
android:popupTheme="#android:style/ThemeOverlay.Material.Light"
app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:stateListAnimator="#null" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="-2dp"
android:orientation="vertical">
<Button
android:id="#+id/cancel_btn"
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_weight="1"
android:drawableLeft="#drawable/ic_chevron_left_black_24dp"
android:gravity="left|center_vertical"
android:text="Back" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycular_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:paddingTop="50dp"
android:clipToPadding="false"/>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/nestedContainer"
android:paddingTop="10dp"
android:paddingBottom="10dp"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/profile_image"
android:layout_below="#id/personal_statement"
android:layout_marginTop="0dp"
android:gravity="center"
android:orientation="horizontal"
android:tag="sticky">
<mehdi.sakout.fancybuttons.FancyButton
android:id="#+id/btnLinks"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:paddingBottom="6dp"
android:paddingTop="6dp"
fancy:fb_borderColor="#FFFFFF"
fancy:fb_borderWidth="1dp"
fancy:fb_defaultColor="#3b5998"
fancy:fb_focusColor="#5577bd"
fancy:fb_fontIconSize="25sp"
fancy:fb_iconPaddingRight="5dp"
fancy:fb_iconPosition="left"
fancy:fb_iconResource="#drawable/ic_links"
fancy:fb_radius="10dp"
fancy:fb_text="Links"
fancy:fb_textColor="#FFFFFF" />
<mehdi.sakout.fancybuttons.FancyButton
android:id="#+id/btnEdit"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:paddingBottom="6dp"
android:paddingTop="6dp"
fancy:fb_borderColor="#FFFFFF"
fancy:fb_borderWidth="1dp"
fancy:fb_defaultColor="#color/colorPrimary"
fancy:fb_focusColor="#5577bd"
fancy:fb_fontIconSize="25sp"
fancy:fb_iconPaddingRight="5dp"
fancy:fb_iconPosition="left"
fancy:fb_iconResource="#drawable/ic_edit_black_24dp"
fancy:fb_radius="10dp"
fancy:fb_text="Edit"
fancy:fb_textColor="#FFFFFF" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
then in my java file i am setting the background for the AppBarLayout like
Bitmap bitmap = ((BitmapDrawable) imageView.getDrawable()).getBitmap();
appBarBackground= UtilManager.blur(bitmap,context);
appBarLayout.setBackgroundDrawable( new BitmapDrawable( context.getResources(), appBarBackground ) );
Add attribute app:layout_collapseMode="parallax" to your RelativeLayout.
Try this:
..........
.................
<RelativeLayout
android:id="#+id/root_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="45dp"
android:padding="#dimen/activity_padding"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
app:layout_collapseMode="parallax">
...........
.................
Hope this works~
I have an ImageView inside a CollapsingToolbarLayout and the ImageView takes up the whole screen with some info at the bottom. When user clicks on the ImageView i'd like the height of the CollapsingToolBarLayout to become 150dp. How do I set the height of the CollapsingToolBarLayout to have a smooth animation to be set to height of 150dp. I'd like the height to smoothly and slowly get to 150dp not quick, to have a nice animation.
How can i achieve this?
activity_scrolling.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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.myapplication.foodapp.ScrollingActivity"
android:id="#+id/coordinator_layout"
android:animateLayoutChanges="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.PopupOverlay"
android:animateLayoutChanges="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_tool_bar_layout"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:animateLayoutChanges="true">
<ImageView
android:id="#+id/chipotle_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_gravity="fill_vertical"
android:src="#mipmap/food1"
android:adjustViewBounds="true"
android:scaleType="fitXY"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Chipotle Chicken Fajitas"
android:textSize="27sp"
android:layout_gravity="bottom"
android:layout_marginBottom="40dp"
android:layout_marginLeft="5dp"
android:textColor="#fff"
android:id="#+id/first_food_title"/>
<me.grantland.widget.AutofitTextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="16 ingredients | 284 Calories | 1 hour"
android:singleLine="true"
android:textAlignment="center"
android:textColor="#fff"
android:layout_gravity="bottom"
android:textSize="20sp"
android:id="#+id/spec_text"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="150dp"
app:layout_collapseMode="pin"
android:animateLayoutChanges="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="25dp"
android:layout_height="25dp"
android:src="#mipmap/arrow"
android:id="#id/back_Arrow"
android:layout_marginTop="5dp"
/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!-- ** CONTENT SCROLLING LAYOUT ** -->
<include layout="#layout/content_scrolling">
</include>
</android.support.design.widget.CoordinatorLayout>
You can achieve this with ValueAnimator.
ValueAnimator anim = ValueAnimator.ofInt(viewToIncreaseHeight.getMeasuredHeight(), finalValue);
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
int val = (Integer) valueAnimator.getAnimatedValue();
ViewGroup.LayoutParams layoutParams = viewGroup.getLayoutParams();
layoutParams.height = val;
viewGroup.setLayoutParams(layoutParams);
}
});
anim.start();
I have been implementing a FloatingActionButton but somehow hasn't been responding at all. There's no error, nothing happens.
Here is respective Java and xml code:
I have replaced the code in Click event with a Log Event
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Log.e("ABCD","ABCD");
}
});
activity_main.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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="edu.ahduni.seas.gyapak.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
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="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
<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"
android:clickable="true"
android:src="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
content_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
android:id="#+id/textlayout"
tools:context="edu.ahduni.seas.gyapak.MainActivity">
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/grid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnWidth="90dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"
android:padding="10dp" />
</LinearLayout>
Lets put the Toolbar and AppbarLayout below the fab, and see what happens:
<?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/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<LinearLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<!-- include your layout here -->
</LinearLayout>
<!-- when the screen is loading, in your case optional -->
<LinearLayout
android:id="#+id/progress"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:visibility="gone">
<include layout="#layout/layout_loading"></include>
</LinearLayout>
<!-- when the screen is empty no data, in your case optional -->
<LinearLayout
android:id="#+id/empty"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:visibility="gone">
<include layout="#layout/layout_empty"></include>
</LinearLayout>
<!-- a fab -->
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
app:backgroundTint="#009688"
style="#style/FabStyle"
android:layout_gravity="bottom|end"
android:layout_marginBottom="20dp"
android:visibility="invisible" />
<!-- the toolbar layout -->
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
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:title="#string/app_name"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
First check the fab click without the content, then try it with the content in content linear layout.
I modified your layout to this (removed all the content) and the click is
working
<?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:fitsSystemWindows="true">
<!--<include layout="#layout/content_main" />-->
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:layout_gravity="bottom|end"
android:clickable="true"
android:src="#android:drawable/ic_dialog_email"
app:backgroundTint="#FF0000"
app:rippleColor="#FFF" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
So your grid view must be taking all the click passthroughs, let me check and get back again.
[Edit]
It is not GridView after all. There was one unnecessary line in the code.
Voila found your problem, remove this line on your onPostExecute() of ParseActivity
MainActivity.this.setContentView(R.layout.activity_main);
near Line number 286 probably.
this sets the layout again and doesn't register the on click listener, thats why when it was in the layout file (DownloadZip), it was working.
If it is necessary for you then reinit the layout i.e. find the fab and put another setOnClickListener. you could put those code in a method and call them on the places you need to reinit layout.
Replace the code of activity_main with these :
<?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:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"></android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
<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="20dp"
android:src="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
The code is right. Are you sure that you are override
protected void onCreate(#Nullable Bundle savedInstanceState)
instead of
public void onCreate(Bundle savedInstanceState, PersistableBundle persistentState)
?
Example:
#Override
protected void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_incoming_call);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fabCall);
fab.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Log.d("mylog" , "it happens...");
}
});
}