MaterialDesign series article (xi) Google2018 annual conference new control summary collection
December 18, 2023
by Jennifer Curtis
No Comments
The Cavs lost again today and Lebron couldn’t save the cavaliers with 42 points! Really don’t want to say anything… Jayne is so tired, leading the team all by himself!! In memory of jayne and my basketball!!
Hello, I’m Ink Android, and I’m driving again!
I’ve been working on this post for a long time, for one thing, there’s no way to integrate Android P, and for another, there’s no library for it. Recently, while wandering around the gold mine, I discovered that someone on GitHub was using the new control, and I was delighted! Why is that? Because this means THAT I can use it. In fact, I am only interested in the streaming tag. I always see how to use it, but I have never used it in the code. So today TO share my use of the experience, ha ha!
This article knowledge:
How to integrate Android P and import new controls from the new version of MaterialDesign;
Use of Material Button;
The use of Chip and Chip Group;
Use of Material Card View;
Use of Bottom App Bar;
1. How to integrate Android P and import a new version of the MaterialDesign control;
This is where I have the most potholes! At that time, I referred to the introduction of integrating Android P in Google’s Chinese website, which explains some of the contents of integrating Android P if you follow the methods on the official website. But the nightmare starts here…
Change the pit of Android P
When you complete the configuration according to the official website, you will have such a problem!
This problem is caused by defaultConfig with targetSdkVersion ‘android -p ‘, as long as you delete it! This is what the modified configuration looks like. This is not the project build.gradle! Keep in mind that…
Do not add the targetSdkVersion ‘android -p ‘to the defaultConfig TAB, as Google says it will not work if you add it in the future!
Integrate the new version of the SDK
Because the new VERSION of the SDK should not have new content, there is no API about the new control, so HERE I found the corresponding API from gitHub, should be the same! And then you start to integrate, and there’s a page about how to configure it that says how to configure it; You can configure according to the configuration inside. When you Sync Now you will find no problem… Then you are ready to run with joy, and then the first pit appears!
Pit 1:
If you show up
Error:Execution failed for task ':app:transformDexArchiveWithExternalLibsDexMergerForDebug'. > java.lang.RuntimeException: com.android.builder.dexing.DexArchiveMergerException: Unable to merge dex // Ha ha the Error: the Programtype already present: android.support.v4.app.INotificationSideChannel$Stub$ProxyCopy the code
Because implementation ‘com. Google. Android. Material: material: 1.0.0-1’ contains all the content in the MD, so some will cause a write error, such as the content repeat As long as you put the default generated when creating the project implementation ‘com. Android. Support: appcompat – v7:27.1.1’ delete.
Pit 2:
After following the above integration, if you run it directly, you will see the screen full of red and then shout FACK!! WHAT!!!!!! In fact, you reversed the bag wrong, just refill the bag.
At this point, you can use Google’s new control, but advised you not to do it in the project or directly in the project to use, because after all, it is still in the test, otherwise killed! I’m not responsible!!
2. Use of Material Button
This control is not much different from the Button display, but many properties are different when used, I feel Google is more user-friendly, usually we write what stroke, we have to customize shape, but with oh MaterialButton, what is saved. Really more human! Here is the convention, let’s talk about the corresponding properties first!
Properties that can be used
App :icon sets the corresponding icon for a Button. This is also unique to the control
App :iconTint colorize the added icon (that is, set the color)
App :iconTintMode set the corresponding coloring mode of the corresponding properties are add, multiply, Screen, SRC_atop, srC_in, srC_over only blame my language is not good, set it by yourself, take a look at it! Hee hee
App :iconPadding Margins for ICONS and text
App: additionalPaddingLeftForIcon icon distance to the left of the distance
App: additionalPaddingRightForIcon icon and text distance to the right of the distance
App :rippleColor defines the color of the water ripple effect
App :backgroundTint sets the background color. If you want to give the control a background color, use this property instead of background
App :backgroundTintMode Shading mode of the background
App :strokeColor strokeColor
App :strokeWidth strokeWidth
App :cornerRadius Radius of a rounded corner
Here demonstrate an effect, interested in children’s shoes, you can try it yourself.
Because the parent control is ConstraintLayout, add some properties that can be omitted!! The other properties of this control are not much different from the previous ones, so I won’t explain them here!
3. Use of Chip and Chip Group
This control is my favorite control. If you are interested in using FlowLayout, you can send me a private message or baidu! A lot of. But no longer, with Chip and chipGroup you can do it in minutes!
The properties of chip
App :chipText Sets the text displayed by the chip
App: Checkable Whether the chip can be selected, the same as Button if disabled
App :chipIcon set the corresponding icon
App :closeIcon lets the chip display a close button
App :checkedIcon sets the selected image
App :closeIconEnabled Whether the close button can be clicked
App :chipIconEnabled Whether the added image can be clicked
App :textAppearance Sets the style of text
App :chipBackgroundColor Sets the chip’s background color
App :chipSpacing Sets spacing both horizontally and vertically
App :chipSpacingVertical Set the spacing in the vertical direction
App :singleLine displays in a singleLine. You can swipe left and right!
3.1 Use of chip
Let’s start with some Settings for the chip. If you look at the documentation, you can have a closed cross at the end, but you can set it by setting style.
And if you see that, you can set some properties, so it’s all there, right? Whatever you want to set up… Ha ha
Here’s what a few of my chips look like
It’s ugly. In fact, you can think of this control as a checkBox, nothing new! No son… By the way, this one is monitored!
SetOnCheckedChangeListener (CompoundButton OnCheckedChangeListener listener) listening state change
SetOnCloseIconClickListener (an OnClickListener listener) to monitor cancel button was clicked
3.1 Use of chipGroupp
I feel that this control is similar to FlowLayout, but the internal chip has a state, forget what I said before, I take back what I said before!! Experience the added code!
ChipGroup chipGroup = findViewById(R.id.cg);
for (int i = 0; i < 10; i++) {
Chip tabChip = new Chip(this);
if (i % 2 == 0) {
tabChip.setChipText("It's a long label." + (i + 1));
} else {
tabChip.setChipText(Label "0" + (i + 1));
}
chipGroup.addView(tabChip);
}
Copy the code
It looks something like this.
Later I took a closer look at the source code, and found that there are many properties can be set! See the picture directly here!
You can set the background color, minimum height, rounded corners, and so on. These attributes even I this English less than 2 people can understand, I believe you can understand! Not a write, in fact, sometimes source code is the best teacher, I am just a porter! Haha…
PS: If you set ChipGroup to one line, it is recommended to wrap it around a HorizontalScrollView otherwise it will not slide!!
4. Use of Material Card View
In fact, the new version of CardView only adds a stroke effect, and nothing else has changed!
App :strokeColor strokeColor
App :strokeWidth strokeWidth
The rest of the CardView and CardView use are the same, the specific code is like this!!
This control is an extension of the ToolBar, which means it can be used in many ways similar to the ToolBar! Here is the property of its unique Settings!
App :backgroundTint Background color
App :fabCradleDiameter Fab embedded in the BottomAppBar diameter
App: fabCradleRoundedCornerRadius fab embedded in BottomAppBar rounded corners (see figure behind you understand!!!)
App :fabAttached If this parameter is true and the bottomAppBar is associated with app: layout_Anchor then the fab is directly embedded in the bottomAppBar, as follows!!
App :fabAlignmentMode Fab embedded in the BottomAppBar style
The end effect looks like this
App: fabCradleVerticalOffset: statement to be used for additional overall vertical offset. The default is 0dp:
<? 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"
android:id="@+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.bottomappbar.BottomAppBar
android:id="@+id/bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="@color/colorPrimary"
app:fabAttached="true"
app:navigationContentDescription="This is a bottom column."
app:navigationIcon="@mipmap/ic_more_vert_white_24dp" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="@id/bar"
app:srcCompat="@mipmap/ic_local_dining_white_24dp" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Copy the code
I didn’t find the back button on the left, it’s actually navigationIcon, please don’t mind! Sorry for virgo! This is also possible to set a main title, subtitle and so on, but the menu is not the same as before, before the menu was set onCreateOptionsMenu(Menu Menu), but now directly
BottomAppBar bottomAppBar = findViewById(R.id.bar);
bottomAppBar.replaceMenu(R.menu.test_menu);
Copy the code
That’s it! But I really didn’t find the corresponding monitor, I set it to menu and it didn’t work, the monitor couldn’t come out, I don’t know why, I don’t know if I opened it incorrectly or I just have this problem, I can’t go back to the corresponding click event, in fact, there is a menu menu on the right, it’s really ugly, I wonder if that’s why we didn’t listen! Please forgive my ignorance… Feel the domestic use of this control of the event to wait for a period of time! Anyway, I didn’t find any of these controls in alpha1 of 28. It is estimated that when there will be some optimization! Is to let everyone taste a fresh! As for some details, we are discussing when they are available!!
Well, let’s call it a day! A little sleepy… Go to bed!!
Almost forgot the address of the code in this article
