当前位置：网站首页>Android kotlin material design technology points
Android kotlin material design technology points
2022-07-02 13:30:00 【lpf_ wei】
1.Material design Definition
Material design By google Our design engineers are based on excellent design principles , A new set of interface design language developed by combining rich creativity and science and Technology , Including vision 、 motion 、 Interactive effects and other features .
2.Toolbar Use
Toolbar Not only did it inherit ActionBar All functions of , And it's very flexible , Can cooperate with other controls to complete some Material Design The effect of .
When creating a project, it will use ActionBar, This is in AppTheme As defined in . If you want to use toolbar Need to specify without ActionBar The theme of . In general use Theme.AppCompat.NoActionBar perhaps Theme.Appcompat.Light.NoActionBar.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".MaterialActivity">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
/>
</FrameLayout>
Assign... To the layout file of an interface ToolBar, And then in Activity Set in setSupportActionBar(toolBar), You can display the title , Looks like ActionBar The effect is the same , But it's not ActionBar 了 , yes ToolBar 了 .
Appoint ToolBar Use of copywriting label label
<activity android:name=".MaterialActivity"
android:label=" beauty ">
It looks monotonous now , Set up a menu to ToolBar, stay Res New under file menu Folder , establish toolbar.xml file
<?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:id="@+id/backup"
android:icon="@mipmap/ic_backup"
android:title="Backup"
app:showAsAction="always"/>
<item android:id="@+id/delete"
android:icon="@mipmap/ic_delete"
android:title="Delete"
app:showAsAction="ifRoom"/>
<item android:id="@+id/settings"
android:icon="@mipmap/ic_settings"
android:title="settings"
app:showAsAction="never"/>
</menu>
stay activity Two methods of rewriting menus in , One is onCreateOptionsMenu This is the creation menu , Just go back to the menu above , The other is onOptionsItemSelected This is the menu click callback .
override fun onCreateOptionsMenu(menu: Menu?): Boolean {
menuInflater.inflate(R.menu.toolbar,menu)
return true
}
override fun onOptionsItemSelected(item: MenuItem): Boolean {
when(item.itemId){
R.id.backup -> showToast("backup")
R.id.delete -> showToast("delete")
R.id.settings -> showToast("settings")
}
return true
}
3. Slide menu DrawerLayout
DrawerLayout It's a sliding menu , It can be hidden when not in use , The use of use shows it by sliding . It saves screen controls and has a very good animation effect , yes Material Design Recommended practices in .
DrawerLayout Two direct child controls are allowed , The first is the content of the displayed main screen , The other is the content of the submenu , Examples are as follows ：
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".materila.MaterialActivity">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
/>
</FrameLayout>
<TextView android:layout_width="match_parent"
android:text="this is menu"
android:background="#fff"
android:textSize="29sp"
android:layout_gravity="start"
android:layout_height="match_parent"/>
</androidx.drawerlayout.widget.DrawerLayout>
Note that this must be specified ： android:layout_gravity=“start”, In this way, you can slide right to display this menu . Because the user may not know that there is such a menu , Generally, you need to add a navigation button .
override fun onCreate(savedInstanceState: Bundle?) {
...
setSupportActionBar(toolBar)
supportActionBar?.let {
it.setDisplayHomeAsUpEnabled(true)
it.setHomeAsUpIndicator(R.mipmap.ic_menu)
}
}
override fun onOptionsItemSelected(item: MenuItem): Boolean {
when(item.itemId){
android.R.id.home -> {
drawerLayout.openDrawer(GravityCompat.START)
}
...
}
return true
}
}
So it's set up Home Navigation button , And click events ,ToolBar The leftmost button is Home Button , The default image is a return arrow
4.NavigationView
This control is very suitable for sliding menu content , The effect is very good , The implementation is also very simple .
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/navCall"
android:icon="@mipmap/nav_call"
android:title="Call"/>
<item android:id="@+id/navFriends"
android:icon="@mipmap/nav_friends"
android:title="Friends"/>
<item android:id="@+id/navLocation"
android:icon="@mipmap/nav_location"
android:title="Location"/>
<item android:id="@+id/navMail"
android:icon="@mipmap/nav_mail"
android:title="Mail"/>
<item android:id="@+id/navTask"
android:icon="@mipmap/nav_task"
android:title="Tasks"/>
</group>
</menu>
establish NavMenu
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:padding="10dp"
android:background="@color/colorPrimary"
android:layout_height="180dp">
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/iconImage"
app:civ_border_width="2dp"
app:civ_border_color="#fff"
android:layout_width="70dp"
android:src="@mipmap/nav_icon"
android:layout_centerInParent="true"
android:layout_height="70dp"/>
<TextView
android:id="@+id/mailText"
android:layout_width="wrap_content"
android:layout_alignParentBottom="true"
android:textColor="#fff"
android:textSize="14sp"
android:text=" She is skiing at the ski resort "
android:layout_height="wrap_content"/>
<TextView
android:id="@+id/userText"
android:layout_width="wrap_content"
android:textColor="#fff"
android:textSize="14sp"
android:layout_height="wrap_content"
android:layout_above="@+id/mailText"
android:text=" Liu Ruoxi and the snowman "
/>
</RelativeLayout>
establish Nav_Header
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
...
<com.google.android.material.navigation.NavigationView
android:id="@+id/navView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/nav_menu"
app:headerLayout="@layout/nav_header"
/>
</androidx.drawerlayout.widget.DrawerLayout>
take nav_menu and nav_header Add to NavigationView in .
override fun onCreate(savedInstanceState: Bundle?) {
...
navView.setCheckedItem(R.id.navCall) // Select a by default item
navView.setNavigationItemSelectedListener {
when(it.itemId){
R.id.navCall-> showToast("Call")
R.id.navLocation-> showToast("Location")
}
drawerLayout.closeDrawers()
true
}
}
Set up navicationView Click event and default selection
5. Hover button FloatingActionButton
This is the hover button with shadow at the bottom , It has a three-dimensional effect , By default colorAccent As the color of the button .
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".materila.MaterialActivity">
...
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_gravity="bottom|end"
android:layout_margin="15dp"
android:src="@mipmap/ic_done"
app:elevation="4dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</FrameLayout>
...
</androidx.drawerlayout.widget.DrawerLayout>
Add this control to the layout file , Can pass elcvation This attribute sets the height value , The larger the height value, the smaller the projection range .
backgroundTint With this attribute, you can change the default background color
fab.setOnClickListener {
showToast("FAB click")
}
Set the click event for the hover button
6.SnackBar
This control is more Toast similar , But it's not Toast substitute , It has different application scenarios ,SnackBar It can also provide an interactive design while giving users tips .
fab.setOnClickListener {
Snackbar.make(it,"Data deleted",Snackbar.LENGTH_LONG).setAction("Done"){
showToast("confirm delete data")
}.show()
}
It can be seen that the usage is similar to Toast similar , Added one setAction Methods .SnackBar Pop from the bottom , And with animation effect , Will automatically disappear from the bottom .
7.CoordinatorLayout
It's popping up SnackBar Will block FloatActionButton, This time you can use CoordinatorLayout To solve this small bug 了 ,CoordinatorLayout This is FrameLayout The enhanced . This container extends event listening for child controls , And automatically help us make the most reasonable response .
Repair FloatActionButton The problem of being covered , Only need to FrameLayout Replace with CoordinatorLayout Can , There are no other problems after the replacement . eject SnackBar after , The levitation button will automatically move upward .SnackBar The disappear hover button will automatically return to its original position , The whole process is very smooth with animation .
8.MaterialCardView And RecyclerView
MaterialCardView It is an important control for card layout effect , It's also a FrameLayout, Only additional rounded corners and shadow effects are provided .
RecyclerView yes ListView Enhanced version of .
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_margin="6dp"
app:cardCornerRadius="4dp"
android:layout_height="wrap_content">
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" >
<ImageView android:id="@+id/girlImage" android:layout_width="match_parent" android:layout_height="100dp" android:scaleType="centerCrop"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal"
android:layout_margin="5dp"
android:textSize="15sp"
android:id="@+id/girlName"
/>
</LinearLayout>
</com.google.android.material.card.MaterialCardView>
Create cards Item Layout
class GirlAdapter(private val context:Context, private val girlList:List<BeautyGirl>): RecyclerView.Adapter<GirlAdapter.GirlHolder>() {
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): GirlHolder {
val view:View = LayoutInflater.from(context).inflate(R.layout.girl_item,parent,false)
return GirlHolder(view)
}
override fun getItemCount(): Int {
return girlList.size
}
override fun onBindViewHolder(holder: GirlHolder, position: Int) {
val girl= girlList[position]
holder.girlName.text = girl.name
Glide.with(context).load(girl.imageId).into(holder.girlImage)
}
class GirlHolder(view : View) : RecyclerView.ViewHolder(view){
var girlImage:ImageView = view.findViewById(R.id.girlImage)
var girlName:TextView = view.findViewById(R.id.girlName)
}
}
newly build RecyclerView Adapter used , Set the data through the construction method
private fun initRecyclerView() {
val girls= mutableListOf(BeautyGirl(" beauty 1",R.mipmap.g1),BeautyGirl(" beauty 2",R.mipmap.g2),BeautyGirl(" beauty 3",R.mipmap.g3),
BeautyGirl(" beauty 4",R.mipmap.g4),BeautyGirl(" beauty 5",R.mipmap.g5),BeautyGirl(" beauty 6",R.mipmap.g6))
val layoutManger=GridLayoutManager(this,2)
recyclerView.layoutManager=layoutManger
val adapter=GirlAdapter(this,girls)
recyclerView.adapter=adapter
}
initialization RecyclerView, And set the data , This card style view It can be displayed on the mobile phone , The whole list is elegant and beautiful .
9.AppBarLayout
When showing the list above , I found the list blocked ToolBar. The traditional solution is , Give Way RecyclerView Set up marginTop The value size is Toolbar Height , When the outer container is currently used CoordinatorLayout, With the help of AppBarLayout This control can fix this problem , The advantage of using this control is ：AppBarLayout With the Material Design Design concept of .
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<com.google.android.material.appbar.AppBarLayout android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
/>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
/>
...
</androidx.coordinatorlayout.widget.CoordinatorLayout>
It's not much changed , It only needs take ToolBar Move to AppBarLayout inside , And then RecyclerView Appoint behavior Behavior Can , among appbar_scrolling_view_behavior stay material Inside the library .
When RecyclerView When rolling AppBarLayout You can receive the sliding event , So I didn't see Material Design effect . Because AppBarLayout Slip event received , Sliding event is not handled .
to ToolBar Add one app:layout_scrollFlags, And set the value to sroll|enterAlways|snap
scroll Express ： When RecyclerView When rolling ,Toolbar Will scroll with , And realize hiding .
enterAlways Express ： When RecyclerView When you scroll down ToolBar Will scroll down and reappear
snap Express ： When Toolbar It's not completely hidden or displayed yet , According to the current rolling distance , Automatically choose whether to show or hide .
10. Implement pull-down refresh SwipeRefreshLayout
Refresh the drop-down list , There are various implementation versions , There are various styles and formats , Here's how to use Google Official SwipeRefreshLayout Implement pull-down refresh .
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.0.0'
Increase this dependency
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="@+id/swipeRefreshLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
/>
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
take RecyclerView Add to SwipeRefreshLayout, Pay attention to the above behavior Add to SwipeRefreshLayout above , In this way, it automatically has the function of pull-down refresh .
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
...
swipeRefreshLayout.setColorSchemeResources(R.color.colorPrimary)
swipeRefreshLayout.setOnRefreshListener {
refreshGirls()
}
}
fun refreshGirls(){
thread {
Thread.sleep(2000)
runOnUiThread{
initGirls()
adapter.setData(girls)
swipeRefreshLayout.isRefreshing=false
}
}
}
Add specific refresh code logic
11. Collapse the title bar CollapsingToolbarLayout
CollapsingToolbarLayout It is a function of Toolbar Based on the layout file , It can make toolbar The effect becomes colorful , This control cannot exist independently , Only as AppBarLayout Sub layout of , and AppBarLayout It has to be CoordinatorLayout Sub layout of .
Create a detail page , The layout file is as follows
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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=".materila.GirlDetailActivity">
<com.google.android.material.appbar.AppBarLayout android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="250dp">
<com.google.android.material.appbar.CollapsingToolbarLayout android:id="@+id/collapsingToolBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentScrim="@color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/girlImage"
android:layout_width="match_parent"
android:scaleType="centerCrop"
android:layout_height="match_parent"
app:layout_collapseMode="parallax"
/>
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolBar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:layout_collapseMode="pin"
/>
</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">
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<com.google.android.material.card.MaterialCardView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="15dp" app:cardCornerRadius="4dp">
<TextView android:id="@+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
/>
</com.google.android.material.card.MaterialCardView>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
<com.google.android.material.floatingactionbutton.FloatingActionButton android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="@mipmap/ic_comment"
app:layout_anchor="@id/appBar"
app:layout_anchorGravity="bottom|end"
/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
1. The outermost container is CoordinatorLayout, because AppBarLayout The parent container must be CoordinatorLayout
2.toolBar Part of the outermost layer is AppBarLayout, Inside is CollapsingToolBarLayout,CollapsingToolBarLayout This control sets 3.app:contentScrim="@color/colorPrimary" This represents the color that tends to be folded or after folding
4.exitUntilCollapsed： Said when collapsingToolBarLayout After folding, it will remain on the interface , Don't move out of the screen anymore
5.app:layout_collapseMode=“parallax” The said Style during folding , Set to parallax It means that there is a certain dislocation effect in the folding process , Poor dislocation vision .
6.NestedScrollView Compared with ScrollView Added Nested response scrolling events , And assign a layout behavior to this control , Only one child control is allowed inside
7. Finally, a hover button is added ,
- layout_anchor： Specify an anchor , The anchor here is AppBarLayout
- app:layout_anchorGravity=“bottom|end” ： Relative to the position of the anchor
class GirlDetailActivity : AppCompatActivity() {
companion object{
const val GIRL_NAME="girl_name"
const val GIRL_IMAGE="girl_image"
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_gril_detail)
val girlName=intent.getStringExtra(GIRL_NAME)?:""
val girlImageId=intent.getIntExtra(GIRL_IMAGE,0)
setSupportActionBar(toolBar)
supportActionBar?.setDisplayHomeAsUpEnabled(true)
collapsingToolBar.title=girlName
Glide.with(this).load(girlImageId).into(girlImage)
content.text = initContent(girlName)
}
private fun initContent(girlName:String): String =girlName.repeat(500)
override fun onOptionsItemSelected(item: MenuItem): Boolean {
when(item.itemId){
android.R.id.home->{
finish()
return true
}
}
return super.onOptionsItemSelected(item)
}
}
Here is the code logic of the details page , Set up collapsingToobar The title of , Launched the HomeButton Rewrote menu Click events for
class GirlAdapter(private val context:Context): RecyclerView.Adapter<GirlAdapter.GirlHolder>() {
private val mGirlList:MutableList<BeautyGirl> =ArrayList()
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): GirlHolder {
val view:View = LayoutInflater.from(context).inflate(R.layout.girl_item,parent,false)
val holder=GirlHolder(view)
holder.itemView.setOnClickListener {
val position=holder.adapterPosition
val girl=mGirlList[position]
val intent= Intent(context,GirlDetailActivity::class.java).apply {
putExtra(GirlDetailActivity.GIRL_NAME,girl.name)
putExtra(GirlDetailActivity.GIRL_IMAGE,girl.imageId)
}
context.startActivity(intent)
}
return holder
}
fun setData(girlList:MutableList<BeautyGirl>?){
mGirlList.clear()
girlList?.let { mGirlList.addAll(it) }
notifyDataSetChanged()
}
override fun getItemCount(): Int {
return mGirlList.size
}
override fun onBindViewHolder(holder: GirlHolder, position: Int) {
val girl= mGirlList[position]
holder.girlName.text = girl.name
Glide.with(context).load(girl.imageId).into(holder.girlImage)
}
class GirlHolder(view : View) : RecyclerView.ViewHolder(view){
var girlImage:ImageView = view.findViewById(R.id.girlImage)
var girlName:TextView = view.findViewById(R.id.girlName)
}
}
Added RecyclerView Click events for , And pass the parameters to the details page , In this way, the title bar of the details page has the effect of folding , Very beautiful .
12. The background image does not match the vision of the system status bar
The background image of the details page always doesn't match the system status bar , Can be set by android:fitsSystemWindows=“true”, Set to true Indicates that the control appears in the system status bar .
Be careful CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout as well as ImageView All need to be set
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".materila.GirlDetailActivity">
<com.google.android.material.appbar.AppBarLayout android:id="@+id/appBar"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="250dp">
<com.google.android.material.appbar.CollapsingToolbarLayout android:id="@+id/collapsingToolBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentScrim="@color/colorPrimary"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/girlImage"
android:layout_width="match_parent"
android:scaleType="centerCrop"
android:layout_height="match_parent"
app:layout_collapseMode="parallax"
android:fitsSystemWindows="true"
/>
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolBar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:layout_collapseMode="pin"
/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
...
</androidx.coordinatorlayout.widget.CoordinatorLayout>
In addition, you need to set the system status bar to transparent , Assign the following attribute to this detail page , Qi bangs and other screens have effects , But need Android5.0 Or the above system can .
<style name="girlActivityTheme" parent="AppTheme">
<item name="android:statusBarColor">@android:color/transparent</item>
</style>
In this way, the system status bar is integrated with the background image , It solves the problem that the background image does not match the color of the system status bar .
边栏推荐
- 题解：《你的飞碟在这儿》、《哥德巴赫猜想》
- JS逆向之行行查data解密
- Fundamentals of machine learning (II) -- division of training set and test set
- 三谈exception——错误处理
- Word efficiency guide - word's own template
- Operation tutorial: how does easydss convert MP4 on demand files into RTSP video streams?
- Embedded software development
- [true topic of the Blue Bridge Cup trials 43] scratch space flight children's programming explanation of the true topic of the Blue Bridge Cup trials
- Principle analysis of security rememberme
- Node. JS accessing PostgreSQL database through ODBC
猜你喜欢
Unity SKFramework框架（十五）、Singleton 单例
Unity skframework framework (XVI), package manager development kit Manager
Unity skframework framework (XX), VFX lab special effects library
What are eNB, EPC and PGW?
Node. JS accessing PostgreSQL database through ODBC
Chinese name extraction (toy code - accurate head is too small, right to play)
![[error record] cannot open](/img/d3/0435ae698ad635be71729c7c047a22.jpg)
[error record] cannot open "XXX" because Apple cannot check whether it contains malware
中文姓名提取(玩具代码——准头太小，权当玩闹)
Unity SKFramework框架（十七）、FreeCameraController 上帝视角/自由视角相机控制脚本
![Jerry's watch time synchronization [chapter]](/img/64/a48772b4e503ae0a2d36fc292e4e0d.jpg)
Jerry's watch time synchronization [chapter]
随机推荐
Jerry's watch reads the alarm clock [chapter]
Jerry's watch gets the default ringtone selection list [article]
SAP MM 因物料有负库存导致MMPV开账期失败问题之对策
MySQL: Invalid GIS data provided to function st_ geometryfromtext
What are eNB, EPC and PGW?
Gee learning notes 2
Download files and preview pictures
运维必备——ELK日志分析系统
JS reverse row query data decryption
免费SSL证书知多少？免费SSL证书和收费SSL证书的区别
SSL证书的分类有哪些？如何选择合适的SSL证书？
mac(macos Monterey12.2 m1) 个人使用php开发
研究表明“气味相投”更易成为朋友
Domestic free data warehouse ETL dispatching automation operation and maintenance expert taskctl
Jerry's weather code table [chapter]
Fundamentals of face recognition (facenet)
Unity skframework framework (XII), score scoring module
JS逆向之巨量创意signature签名
Redis database persistence
Web基础