Skip to content

Instantly share code, notes, and snippets.

@codinginflow
Created January 30, 2022 21:50
Show Gist options
  • Save codinginflow/94c8c1d4698d7e004847760834219b39 to your computer and use it in GitHub Desktop.
Save codinginflow/94c8c1d4698d7e004847760834219b39 to your computer and use it in GitHub Desktop.
Collapsing Toolbar With Image Tutorial
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="300dp"
app:contentScrim="@color/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed|snap"
app:toolbarId="@id/toolbar">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="@drawable/image"
app:layout_collapseMode="parallax" />
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="@string/dummy_text" />
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.codinginflow.collapsingtoolbar">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity"
android:theme="@style/AppTheme.NoActionbar">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:title="Action"
app:showAsAction="never" />
</menu>
package com.codinginflow.collapsingtoolbar
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.Menu
import kotlinx.android.synthetic.main.activity_main.*
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
setSupportActionBar(toolbar)
}
override fun onCreateOptionsMenu(menu: Menu?): Boolean {
menuInflater.inflate(R.menu.example_menu, menu)
return true
}
}
<resources>
<string name="app_name">Collapsing Toolbar</string>
<string name="dummy_text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere rhoncus aliquam. Vivamus luctus velit rhoncus felis rhoncus, a convallis diam sollicitudin. Donec vitae magna varius, congue ante quis, semper dui. Integer lectus sapien, convallis a purus ac, aliquet posuere lacus. Nam sed mauris at sapien convallis venenatis. Nullam at gravida dolor. Fusce scelerisque, ante finibus faucibus dictum, sem erat dignissim mi, vel tincidunt ante nisi ac magna. Pellentesque vestibulum placerat sapien, eu fringilla mi sodales ac. Fusce mi diam, volutpat sit amet faucibus quis, suscipit ut urna. Maecenas lacinia eleifend leo, sit amet mollis diam vestibulum vehicula. Suspendisse ullamcorper, arcu tempus ullamcorper luctus, sapien lectus tempor sem, eget mattis ipsum est in erat. In ut finibus nisi. Aliquam at tincidunt elit. Integer bibendum laoreet diam sed aliquam. Suspendisse gravida malesuada urna, vehicula sodales massa vestibulum non.
Donec vitae porta risus. Vestibulum imperdiet erat ut dui tempus eleifend. Vestibulum tempor sagittis odio, laoreet consectetur mi eleifend nec. Ut pellentesque blandit sem. Proin commodo tincidunt risus a rutrum. Etiam eu mi vitae nunc volutpat feugiat. Pellentesque non consequat tellus, vitae blandit neque. Suspendisse potenti. Mauris consectetur viverra dui vel faucibus. Integer in mauris id neque blandit semper.
Nulla in sapien neque. In maximus justo vel felis convallis condimentum. Mauris eu urna id massa venenatis sagittis. Nulla convallis magna quis scelerisque aliquet. Quisque vitae lacus quis justo convallis blandit vitae non risus. Integer quis malesuada mauris. Vestibulum vestibulum tortor at dui vehicula lacinia. Nunc tempor lobortis aliquet. Sed lacinia, enim quis auctor bibendum, justo lectus consectetur mi, ut posuere velit sapien sit amet libero. Aenean facilisis nisl et orci fermentum, vel placerat tortor lacinia. Sed congue ante est. Fusce eget magna et erat aliquam congue. Nunc eget neque vitae enim dapibus dictum sed vitae erat. In efficitur, massa rutrum convallis consequat, felis justo sodales augue, et accumsan nibh nulla sed velit. Sed id arcu et nunc mollis ullamcorper.
Mauris posuere sem eu nulla blandit, id malesuada velit volutpat. Mauris a vulputate elit. Morbi pharetra tortor quis odio cursus, quis dictum odio sagittis. Vestibulum viverra tempus nibh vel luctus. Sed metus ex, dapibus vulputate tellus vel, aliquet efficitur justo. Curabitur scelerisque urna vitae dignissim ornare. Donec congue dolor et magna ultricies, porta laoreet turpis imperdiet. Suspendisse eu dolor sollicitudin, convallis lorem vel, rhoncus libero. Sed a vestibulum ex. Curabitur vestibulum ipsum purus, nec fermentum ipsum vehicula sed. Mauris quis pellentesque ligula. Sed et turpis ac est tempor bibendum sit amet et tellus. Nunc laoreet egestas arcu ut rhoncus. Fusce et congue sem.
Quisque lobortis mollis venenatis. Quisque eu pulvinar nulla. Morbi urna libero, elementum ac viverra a, finibus id libero. Mauris ut sapien tempor, tincidunt urna eget, varius elit. Pellentesque non aliquet mauris. Mauris non velit interdum quam mattis venenatis vel at sem. Nam sit amet suscipit ipsum, et egestas erat. Quisque a congue sem. Duis imperdiet massa vitae ornare efficitur. Sed tincidunt mattis mi non sodales. Vestibulum eu risus lacinia, laoreet ante in, molestie est. Fusce congue, erat sit amet congue molestie, erat ligula fermentum velit, ac bibendum lacus mauris sit amet metus. Donec lobortis consequat ultrices. Vestibulum mi nibh, vehicula vel ex eu, mollis porttitor mauris. Aenean in iaculis justo, eget ultricies elit. Nunc sit amet scelerisque ligula.
In facilisis porttitor odio a volutpat. Maecenas malesuada sapien feugiat elit commodo egestas. Nam quis congue nulla. Quisque augue libero, bibendum id ex nec, ornare tincidunt purus. Curabitur varius lorem vel ante viverra, in pulvinar ante rutrum. Mauris nec hendrerit sapien. Duis a pretium justo, vel feugiat risus.
Vivamus consequat vulputate nunc nec cursus. Curabitur eget gravida enim, nec efficitur leo. Suspendisse potenti. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut eget est vitae purus volutpat ultricies. Vestibulum vel vulputate felis, id tempus dolor. Nunc sit amet lorem magna. In rhoncus augue at nulla vestibulum, eu malesuada purus interdum.
Nulla et ipsum dapibus, bibendum purus vitae, vulputate arcu. Aenean cursus ut nisi pharetra placerat. Mauris ultrices sodales ante. Donec aliquet finibus neque. Nulla eget vulputate nulla. Aliquam congue est enim, in accumsan libero aliquam ac. Sed vestibulum, ipsum vitae feugiat consectetur, ex neque scelerisque eros, id facilisis lacus felis id tellus. Pellentesque dignissim, ex et faucibus porttitor, nibh arcu porttitor est, non consequat diam felis vel dui. Curabitur libero ante, rhoncus quis pulvinar nec, commodo sit amet tortor. Integer maximus turpis finibus quam eleifend eleifend. Fusce quis odio pellentesque, lacinia urna quis, consectetur sem.
Nulla auctor, augue at pretium pharetra, risus dui porttitor urna, eu hendrerit libero dolor a quam. Curabitur tempus euismod enim rutrum tincidunt. Nunc mollis consequat leo, vel interdum ligula laoreet nec. Vivamus orci lorem, maximus ac blandit vel, bibendum pulvinar velit. Vestibulum id tortor eget ex luctus interdum mattis a elit. Nulla nunc nunc, gravida luctus diam sed, ultrices consequat elit. Donec vel placerat augue. Pellentesque vel purus tincidunt, feugiat lorem sed, mattis tellus. Praesent tortor quam, vulputate ac arcu non, volutpat consectetur urna. Morbi vehicula lorem neque, sit amet dignissim leo lacinia eget.
Phasellus a turpis nisl. Pellentesque id rhoncus ex. Donec eleifend commodo dui, a dapibus erat consectetur ac. Proin dapibus feugiat enim ultrices finibus. Pellentesque et mauris tellus. Duis finibus nisl nunc, non pellentesque tortor commodo quis. Morbi dapibus ex in lorem sagittis iaculis vitae sit amet odio. Nunc tempor massa erat, ut hendrerit neque malesuada non. Aenean viverra tristique pretium. Duis eleifend neque vitae leo porta vehicula finibus et ipsum. Pellentesque at magna orci. Sed vitae urna vel sem mollis dignissim ac eu erat. Maecenas vehicula metus gravida mattis pharetra. Duis egestas neque mollis tempor viverra.
In pulvinar odio nisi, eget semper leo lacinia vel. Etiam rhoncus est eu nunc posuere bibendum. Donec laoreet diam mi, ac sollicitudin tortor dapibus vitae. Curabitur viverra, augue sollicitudin fringilla volutpat, est sem fermentum mauris, euismod scelerisque enim lorem ac massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus porttitor id sapien at facilisis. Mauris porta ante a sollicitudin eleifend. In hac habitasse platea dictumst. Praesent semper tempor tortor sit amet ornare. Nam eu ligula et diam ultricies tincidunt vel tincidunt nisi. Pellentesque auctor, augue eget ornare convallis, justo dui bibendum massa, eget euismod nibh urna eu justo. Nullam nisl mi, interdum sit amet tempus a, faucibus a elit. Nullam bibendum sem quis odio ornare ultrices.
</string>
</resources>
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="AppTheme.NoActionbar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>
</style>
</resources>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment