当前位置：网站首页>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 .
边栏推荐
- 验证失败,请检查您的回电网址。您可以按照指导进行操作
- SAP MM 因物料有负库存导致MMPV开账期失败问题之对策
- 屠榜多目标跟踪！BoT-SORT：稳健的关联多行人跟踪
- OpenFOAM:lduMatrix＆lduAddressing
- [error record] cannot open "XXX" because Apple cannot check whether it contains malware
- JS reverse massive creative signature
- D how to check null
- West digital decided to raise the price of flash memory products immediately after the factory was polluted by materials
- Tupang multi-target tracking! BOT sort: robust correlated multi pedestrian tracking
- Ali on three sides, it's really difficult to successfully get the offer rated P7
猜你喜欢
Unity SKFramework框架（十六）、Package Manager 开发工具包管理器
OpenApi-Generator：简化RESTful API开发流程
无向图的桥
Unity skframework framework (XII), score scoring module
![Lucky numbers in the [leetcode daily question] matrix](/img/c8/47a22644bf8cc1f49c5668d72161b6.jpg)
Lucky numbers in the [leetcode daily question] matrix
Answer: can the audio be set to on by default during easydss video on demand?
Unity SKFramework框架（十七）、FreeCameraController 上帝视角/自由视角相机控制脚本
Three methods of finding LCA of the nearest common ancestor
Error function ERF
题解：《你的飞碟在这儿》、《哥德巴赫猜想》
随机推荐
Word efficiency guide - word's own template
题解：《压缩技术》（原版、续集版）
每日一题:1175.质数排列
屠榜多目标跟踪！BoT-SORT：稳健的关联多行人跟踪
Performance optimization of memory function
Security RememberMe原理分析
Fully autonomous and controllable 3D cloud CAD: crowncad's convenient command search can quickly locate the specific location of the required command.
2022 Heilongjiang provincial examination on the writing skills of Application Essays
Clean up system cache and free memory under Linux
Web Foundation
Explanation of 34 common terms on the Internet
验证失败,请检查您的回电网址。您可以按照指导进行操作
Jerry's watch gets the default ringtone selection list [article]
Partner cloud form strong upgrade! Pro version, more extraordinary!
Post order traversal sequence of 24 binary search tree of sword finger offer
运维必备——ELK日志分析系统
Answer: can the audio be set to on by default during easydss video on demand?
net share
Unity skframework framework (XII), score scoring module
Web基础