Overview of Android Design Support Library v28

Hello again. 3r3638.  3r3650. 3r3638.  3r3650. Approaching the launch date, our new course “Android Developer” , there is nothing left and there are some interesting materials that we share with everyone, including potential listeners. 3r3638.  3r3650. 3r3638.  3r3650. Go. 3r3638.  3r3650. 3r3638.  3r3650. The 28th Android Support Library was recently announced. In the current alpha version, we have access to a set of new interesting components. In this article I want to look at the additions that have been made to the Support Library in the form of Material View components. 3r3638.  3r3650. 3r3638.  3r3650. Overview of Android Design Support Library v28
3r3638.  3r3650. 3r3638.  3r3650. Material Button 3r3627. 3r3638.  3r3650. 3r3638.  3r3650. MaterialButton is a widget that can be used to display a button in the material style in the user interface of applications. This class is inherited from the AppCompatButton class, which you probably already use in your projects, but what are the differences? By default, this button will already be framed with a material appearance without the need to customize it yourself, using the style flag. We can use the MaterialButton class as it is, because it will already have the material appearance that we need - consider it as a more convenient class. 3r3638.  3r3650. 3r3638.  3r3650.  3r3650. 3r3638.  3r3650. 3r33545. 3r33546. 3r350. android: layout_width = "wrap_content"
android: layout_height = "wrap_content"
android: text = "MATERIAL BUTTON"
android: textSize = "18sp"
app: icon = "@ drawable /ic_android_white_24dp" />
3r31717. 3r33548. 3r3638.  3r3650. By default, this class will use the accent color of your theme to fill the background of the buttons and the white color for the text on them. If the button is not filled, then the accent color will be used for the text color on the button along with the transparent background. 3r3638.  3r3650. 3r3638.  3r3650. If we want to add some additional styles to the button, we can do this using the style attribute set. MaterialButton . 3r3638.  3r3650. 3r3638.  3r3650. 3r3610.  3r3650. 3r3612. app: icon - Used to define the displayed image at the beginning of the button 3r361919.  3r3650.
3r3638.  3r3650. 3r380. 3r3638.  3r3650. 3r3610.  3r3650. 3r3612. app: iconTint - Used to change the color of the icon defined in the app attribute: icon
 3r3650. 3r3612. app: iconTintMode - Defines the mode that will be used to change the color of the
icon.  3r3650.
3r3638.  3r3650. app: iconPadding
- The indent to be applied to the icon defined in the app attribute: icon
 3r3650.
3r3638.  3r3650. 3r3111. 3r3638.  3r3650. 3r3610.  3r3650. 3r3612. app: additionalPaddingLeftForIcon - Defines the indent to be applied to the left of the icon defined in the app attribute: icon
 3r3650.
3r3638.  3r3650. 3r3124. 3r3638.  3r3650. 3r3610.  3r3650. 3r3612. app: additionalPaddingRightForIcon - Defines the indent to be applied to the right of the icon defined in the app attribute: icon
 3r3650.
3r3638.  3r3650. app: rippleColor [/b] - Color ripple effect buttons
 3r3650. 3r3612. app: backgroundTint - Used to apply a tint to the background of the button. If you want to change the background color of the button, use this attribute instead of background, so as not to violate the style of the
buttons.  3r3650. 3r3612. app: backgroundTintMode - Used to determine which mode will be used to change the hue of the background
 3r3650.
3r3638.  3r3650. 3r3-33160. 3r3638.  3r3650. 3r3610.  3r3650. 3r3612. app: strokeColor - Button
stroke color.  3r3650. 3r3612. app: strokeWidth - Width of the stroke button
 3r3650.
3r3638.  3r3650. 3r3178. 3r3638.  3r3650. 3r3610.  3r3650. 3r3612. app: cornerRadius - Used to determine the smoothing radius of the corners of the
button.  3r3650.
3r3638.  3r3650. 3r3191. 3r3638.  3r3650. 3r3638.  3r3650. Chip 3r3627. 3r3638.  3r3650. 3r3638.  3r3650. The Chip component allows you to display chips in our layout. In essence, a chip is some text on a rounded background. Its purpose is to display to the user some form of a text set, which may or may not be selected. For example, chips can be used to display a list of selectable offers for a user based on the current context in your application. 3r3638.  3r3650. 3r3638.  3r3650. attribute. 3r31616. app: chipText To set the text to be displayed on the chip:
 3r3650. 3r3638.  3r3650. 3r33545. 3r33546. 3r33548. 3r3638.  3r3650. 3r3638.  3r3650. There is also a set of other attributes that can be used to further stylize the chip: 3r3638.  3r3650. 3r3638.  3r3650. 3r3610.  3r3650. 3r3612. app: checkable - Used to declare whether a chip can be marked as selected /not selected. If disabled, chip selection behaves the same as with the
button.  3r3650. 3r3612. app: chipIcon - Used to display an icon in a
chip.  3r3650.
3r3638.  3r3650. app: closeIcon [/b] - Used to display the delete icon on a 3r33619 chip.  3r3650.
3r3638.  3r3650. 3r31616. setOnCheckedChangeListener [/b] :
 3r3650. 3r3638.  3r3650. 3r33545. 3r33546. some_chip.setOnCheckedChangeListener {button, checked ->} 3r33548. 3r3638.  3r3650. 3r3638.  3r3650. The same applies if we want to listen to interactions with the delete icon. For this we can use the function 3r31616. setOnCloseIconclickListener for logging delete events:
 3r3650. 3r3638.  3r3650. 3r33545. 3r33546. some_chip.setOnCloseIconclickListener {} 3r33548. 3r3638.  3r3650. 3r3638.  3r3650. Chip Group 3r3638.  3r3650. 3r3638.  3r3650. If we show a chipset to our users, we want to make sure that they are correctly grouped together in our view. For this we can use the presentation component 3r3r6262. ChipGroup [/b] :
 3r3650. 3r3638.  3r3650. 3r33312. 3r3638.  3r3650. 3r3638.  3r3650. If we want to use ChipGroup , we just need to wrap our ChipView 3r3627. into parent component 3r3626. ChipGroup :
 3r3650. 3r3638.  3r3650. 3r33545. 3r33546. 3r3408. android: layout_width = "wrap_content"
android: layout_height = "wrap_content">
3r3650.
3r3650.
3r3650. //more chips
3r3650. 3r33434. 3r31717. 3r33548. 3r3638.  3r3650. 3r3638.  3r3650. The default is your ChipView 3r3627. may seem a bit pressed together. If so, you can add spacing to child views using the following ChipGroup attributes:
 3r3650. 3r3638.  3r3650. 3r3610.  3r3650. 3r3612. app: chipSpacing - Adds distance both horizontally and vertically
 3r3650. 3r3612. app: chipSpacingHorizontal - adds horizontal distance
 3r3650. 3r3612. app: chipSpacingVertical - adds
vertical distance.  3r3650.
3r3638.  3r3650. attribute. 3r31616. app: singleLine
:
 3r3650. 3r3638.  3r3650. 3r33333. 3r3638.  3r3650. 3r3638.  3r3650. In doing so, you need to wrap the ChipGroup into a scrolling view, for example, 3r31616. HorizontalScrollView so your users can scroll the displayed chips:
 3r3650. 3r3638.  3r3650. 3r33545. 3r33546. 3r3404. android: layout_width = "wrap_content"
android: layout_height = "wrap_content">
3r3650. 3r3408. android: layout_width = "wrap_content"
android: layout_height = "wrap_content"
app: singleLine = "true">
3r3650.
3r3650. //more chips
3r33434. 3r3650. 3r3650. 3r33434. 3r31717. 3r33548. 3r3638.  3r3650. 3r3638.  3r3650. Material Card View 3r3638.  3r3650. 3r3638.  3r3650. Probably, in our applications we have already used the component 3r3626. 3r31616. CardView 3r31717. [/b] at some point. The Support Library now has a component called 3r3626. 3r31616. MaterialCardView [/b] , which provides us with a stylized material design implementation of the box. 3r3638.  3r3650. 3r3638.  3r3650.  3r3650. 3r3638.  3r3650. 3r33545. 3r33546.
child views
3r33434. 3r31717. 3r33548. 3r3638.  3r3650. 3r3638.  3r3650. You can further stylize CardView using its two attributes:
 3r3650. 3r3638.  3r3650. 3r3610.  3r3650. 3r3612. app: strokeColor - The color to be used for the stroke (must be set to display the stroke)
 3r3650. 3r3612. app: strokeWidth - Width of the stroke
 3r3650.
3r3638.  3r3650. [/b] etc.
 3r3650. 3r3638.  3r3650. Bottom App Bar 3r3638.  3r3650. 3r3638.  3r3650. 3r31616. BottomAppBar This is a new component that allows us to display a component similar to the toolbar at the bottom of our layout. This allows us to display components for the user in such a way that it is easier to interact with them than, perhaps, with the standard toolbar. 3r3638.  3r3650. 3r3638.  3r3650. 3r33585. 3r3638.  3r3650. 3r3638.  3r3650. You can add 3r31616. BottomAppBar in your layout file like this:
 3r3650. 3r3638.  3r3650. 3r33545. 3r33546. 3r33535. android: layout_width = "match_parent"
android: layout_height = "wrap_content"
android: layout_gravity = "bottom"
app: backgroundTint = "@ color /colorPrimary"
app: popupTheme = "@ style /ThemeOverlay.AppCompat.Light"
app: theme = "@ style /ThemeOverlay.AppCompat.Dark.ActionBar"> 3r33548. 3r3638.  3r3650. 3r3638.  3r3650. It looks like BottomAppBar should have a menu assigned to it so that it is displayed on the screen. This can be done programmatically as follows: 3r3638.  3r3650. 3r3638.  3r3650. 3r33545. 3r33546. bottom_app_bar.replaceMenu (R.menu.main) 3r33548. 3r3638.  3r3650. 3r3638.  3r3650. When it comes to styling BottomAppBar, there are several attributes you can use. 3r3638.  3r3650. 3r3638.  3r3650. 3r3610.  3r3650. 3r3612. app: fabAttached - indicates whether the FAB has been attached to BottomAppBar. You can connect the FAB using the app: layout_anchor in the FAB component that you want to connect using the BottomAppBar identifier. If a FAB is attached, it will be inserted into the BottomAppBar, otherwise the FAB will remain above the BottomAppBar. 3r3619.  3r3650.
3r3638.  3r3650. 3r3-3567. 3r3638.  3r3650. 3r3610.  3r3650. 3r3612. app: fabAlignmentMode - Announces the position of the FAB that was attached to the BottomAppBar. This can be either the end:
 3r3650.
3r3638.  3r3650. app: fabCradleVerticalOffset [/b] - Announces the vertical offset that will be used for the attached FAB. The default is 0dp
 3r3650.
3r3638.  3r3650. 3r3-3598. 3r3638.  3r3650. Setting the dp value will allow the FAB to move up vertically: 3r3638.  3r3650. 3r3638.  3r3650. app: backgroundTint [/b] - Used to change the hue of the presentation background. If you want to set the background color in the view, then you need to use the attribute. 3r31616. android: background . This will ensure the stability of the presentation. 3r3619.  3r3650.
3r3638.  3r3650. 3r3638.  3r3650. Conclusion 3r3638.  3r3650. 3r3638.  3r3650. In my opinion, these are elegant additions to the Support Library. I look forward to using material-style components right out of the box, and I'm also glad to find a case where BottomAppBar can be used. I'm sure it takes some time for the Support Library version to become stable. As usual, I would like to hear your thoughts or comments about these new components! 3r3638.  3r3650. 3r3638.  3r3650. THE END
 3r3650. 3r3638.  3r3650. We are waiting for your comments and questions that you can leave here or you can go to 3r33640. Varvara
on 3r3642. Open Day
. 3r3651. 3r3650. 3r3650. 3r3650.
3r3650. 3r3651.
+ 0 -

Add comment