androidandroid-coordinatorlayoutandroid-appbarlayoutnestedscrollview
How to hide ImageView on AppBar like Facebook Profile?
I want to do a Profile Activity with an appbar with coordinator layout Facebook like, but I don't know how to hide the views when the appbar is scrolling up and I get my view stuck behind the toolbar
What I want: Full profile -> fading out when scrolling -> action bar when full scrolled
What I have:
I used the scrolling activity example from Android Studio and edited 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"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:fitsSystemWindows="true"
tools:context=".ScrollingActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:fitsSystemWindows="true"
android:layout_height="@dimen/app_bar_height"
android:layout_width="match_parent"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bg_proflie"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary">
<android.support.v7.widget.Toolbar android:id="@+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:layout_collapseMode="pin"
app:popupTheme="@style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
<LinearLayout
android:weightSum="5"
android:orientation="horizontal"
android:layout_marginTop="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="2"
android:orientation="vertical"
android:padding="12dp"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/img_profile_pic"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerInside"
android:adjustViewBounds="true"
android:src="@drawable/ic_profile"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="3"
android:layout_gravity="center_vertical"
android:orientation="vertical"
android:layout_height="wrap_content">
<TextView
android:id="@+id/txt_alias"
android:textSize="28sp"
android:textColor="@color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/txt_name"
android:textSize="14sp"
android:textColor="@color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/txt_district"
android:textSize="14sp"
android:textColor="@color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<RelativeLayout
android:visibility="gone"
android:id="@+id/rlt_player_status"
android:background="@drawable/profile_box"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/txt_profile_status"
android:text="@string/txt_profile_status_unknown"
android:textColor="@color/white"
android:textSize="11sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
</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"
android:src="@drawable/ic_edit_profile" />
</android.support.design.widget.CoordinatorLayout>
Solution
I find how to fix this via XML, just replacing the layout where it should be, in the CollpasingBarLayout not in the toolBar.
So this:
<?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:id="@+id/root_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".ScrollingActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:fitsSystemWindows="true"
android:layout_height="@dimen/app_bar_height"
android:layout_width="match_parent"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bg_proflie"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary">
<LinearLayout
android:weightSum="5"
android:orientation="horizontal"
android:layout_marginTop="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="2"
android:orientation="vertical"
android:padding="12dp"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/img_profile_pic"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerInside"
android:adjustViewBounds="true"
android:src="@drawable/ic_profile"
/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="3"
android:layout_gravity="center_vertical"
android:orientation="vertical"
android:layout_height="wrap_content">
<TextView
android:id="@+id/txt_alias"
android:textSize="28sp"
android:text="JD"
android:textColor="@color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/txt_name"
android:textSize="14sp"
android:text="John Doe"
android:textColor="@color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/txt_district"
android:textSize="14sp"
android:text="Free Town"
android:textColor="@color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<RelativeLayout
android:visibility="visible"
android:id="@+id/rlt_player_status"
android:background="@drawable/profile_box"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/txt_profile_status"
android:text="@string/txt_profile_status_unknown"
android:textColor="@color/white"
android:textSize="11sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:layout_collapseMode="pin"
app:popupTheme="@style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
And it looks like this:
- Populating Spinner using ArrayList in Android
- How to make Room work with "pre-packaged" databases with different schemas?
- Ionic Capacitor - Unknown Kotlin JVM target: 21
- Check if selected file using edmodo cropper library is an image or not
- Android Studio stuck on loading devices
- how to do a "Gradle sync" with terminal command?
- Activity RESULT_OK never seems to happen
- How to setImageCaptureResolutionSelector() in CameraController?
- Add callback for when a Toast message closes
- android.security.KeyStoreException: Signature/MAC verification failed
- how do i restric a float value to only one placess after decimal in kotlin android
- Android - How to remove app name from ActionBar
- Android Install on Device Failure [INSTALL_CANCELED_BY_USER]
- A failure occurred while executing com.android.build.gradle.internal.tasks.FinalizeBundleTask$BundleToolRunnable
- Where is specified the highest Java language version that the d8 compiler accepts?
- Could not find colorpicker-0.0.13.aar (com.github.QuadFlask:colorpicker:0.0.13)
- How to implement a scrolling behavior in Jetpack Compose similar to YouTube's channel UI?
- LibGDX Android Gdx.app.exit() doesnt work, how to close app in another way?
- Flutter: I want to show dropdown list under dropdown flutter
- Correct way to launch camera via TakePicture contract and have the image saved in the Gallery
- Android App locale changes back to English on Theme Change
- Trust Anchor not found for Android SSL Connection
- Missing material icons in Android Jetpack Compose
- rpId validation failed in Passkeys PoC on Android using Jetpack Compose
- Android Fatal signal 11 (SIGSEGV) at 0x636f7d89 (code=1). How can it be tracked down?
- More than one file was found with OS independent path 'META-INF/LICENSE'
- Month name from Month Numbers in android
- Lottie animation is showing as a still image but not playing
- Foreground service crash andorid 14
- Date formatting based on user locale on android