“This is the 18th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021”

Chapter 22 of the Definitive Guide to Android Programming. Come on, learn about drawble in this chapter. It’s a useful point, it has to do with THE UI, and it’s used a lot in projects.

One, unified button style

Start by modifying the res/layout/ list_ITEM_sound. XML file to separate the buttons.

<FrameLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="8dp"> <Button android:layout_width="100dp" android:layout_height="100dp" android:layout_gravity="center" android:background="? attr/colorAccent" android:onClick="@{()->viewModel.onButtonClicked()}" android:text="@{viewModel.title}" android:textColor="@color/white" tools:text="Sound name" /> </FrameLayout>Copy the code

Since the Recycler view is three columns and any extra controls stretch the recycler to fit the screen, FrameLayout can be used to wrap the recycler view so that only the recycler view can be stretched.

Second, the shape drawable

ShapeDrawable makes the button round. XML drawable is placed directly in the drawable folder regardless of screen pixel density.

Create button_beat_box_normal.xml in res/drawable:

<? The XML version = "1.0" encoding = "utf-8"? > <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="@color/dark_blue" /> </shape>Copy the code

Here we define a circle with a dark blue background. Android: Shape can also be rectangle, line, ring.

Then set the above as the background for the button.

android:background="@drawable/button_beat_box_normal"
Copy the code

State list drawable

To add a click effect to the button, create a button_beat_box_pressed.

<? The XML version = "1.0" encoding = "utf-8"? > <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="@color/red" /> </shape>Copy the code

Define button_beat_box. XML:

<? The XML version = "1.0" encoding = "utf-8"? > <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/button_beat_box_pressed" android:state_pressed="true" /> <item android:drawable="@drawable/button_beat_box_normal" /> </selector>Copy the code

Use button_beat_box as the button background instead:

android:background="@drawable/button_beat_box"
Copy the code

The state list drawable also supports disabled, focused, and active states.

The problem I have here is that setting background for the button does not work. It is always overwritten by the colorPrimary of the theme. Finally found a solution is to put my original parent = “Theme. MaterialComponents. DayNight. DarkActionBar” instead parent=”Theme.MaterialComponents.DayNight.DarkActionBar.Bridge”

Layer List drawable

The Layer List drawable allows you to combine two XML drawables into one. “This can do this in one file! ✌🏻”

Change button_beat_box_pressed. XML to:

<? The XML version = "1.0" encoding = "utf-8"? > <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape android:shape="oval"> <solid android:color="@color/red" /> </shape> </item> <item> <shape android:shape="oval"> <stroke android:width="10dp" android:color="@color/dark_red" /> </shape> </item> </layer-list>Copy the code

Then run, click the button, you will see the button has a border effect, try it yourself.

Why XML Drawable

Buttons will have states. Designing the switching state of buttons is conducive to improving user experience, so state list drawable is indispensable. Use shape drawable and Layer List drawable to create complex backgrounds.

XML drawable is independent of screen pixel density and can be defined directly in the drawable directory without the screen density resource modifier. It works directly with Android phones of all sizes.

Vi. In-depth study: Use miPMap images

The Mipmap directory is used to place the app’s startup icon, a better fit. The other images are still in drawable, of course.

Vii. In-depth study: use 9-Patch image

A 9-Patch image is a specially processed file that controls how the image is stretched. It ends in.9.png. The edge of the image has a 1 pixel width border that specifies the middle position of the 9-Patch image. The border pixels are drawn as black lines to indicate the middle position, and the edges are shown in transparent colors.

Any graphics editor can be used to create 9-Patch images, such as the Draw9Patch tool that comes with the Android SDK, or directly using Android Studio.

How to create 9-Patch

Developer.android.com/studio/writ…

Usually some content to change the background with.9 figure is better, convenient and simple adaptation.

Challenge exercise: button theme

Different attention styles are not the same, specific to the official website to understand it.

Developer.android.com/guide/topic…

other

There are other suitable vector map, general project small ICONS with vector map is also a very good choice.

Here’s a vector gallery to help you find your icon:

www.iconfont.cn/

BeatBox Project Demo address:

Github.com/visiongem/A…

🌈 follow me ac~ ❤️

Public account: Ni K Ni K