Android button custom view

Android Custom Button With Centered Progress Indicator

Recently, I’ve got a simple task in a project I am working on.
I had to create a designed button with a centered progress indicator inside of it.

The button should have 3 states:

In Enabled state, it should show text while in Loading state it should show a Circular Progress Indicator (which can be native or any custom view such as Lottie animation view) and in Disabled state it should show text but grayed out.

Here is the final look according to the design!

What sounds like a simple task turned out to be not so straight forward and easy to do!
As I’ve looked for a way of how I can implement such view, I thought that I will just create a custom view that extends some Android Button class, but if you will look on the Button classes you will (or not) be surprised that those actually extends nothing else but a TextView!!
So how I can extend a View class and then add and manipulate additional Views on it?
And also, the biggest part of this of course is the styling and theming!

After all, I want to make my custom buttons to be reusable, easy to use and with different styles like rounded corners, ripple effect and any color.

When I realised that extending Button is not an option, I thought that extending a ViewGroup like a RelativeLayout or ConstraintLayout will be much better. A ViewGroup has child views inside of it, they can be manipulated and it’s easy to change their visibility and state.
I thought, if a TextView can behave as a button then then so a ViewGroup can, it’s all matter of styling and theming.
Finally I’ve chosen RelativeLayout, I like it, it’s simple and easy to work with.

First Layout First

I’ve started with designing my custom button layout, which looks like this:

As you can see, its just a simple RelativeLayout with a centered TextView and for the progress indicator I’ve chosen to use LottieAnimationView.

One important thing here, you may look on line 13 in the XML, the TextView android: textAppearance attribute which set to be
“?android:attr/textAppearanceButton”, this attribute is the one that sets buttons default text appearance right from the app theme! If we will override it in our app theme, it will effect this TextView here. We will see this further down in the styling and theming part of this article.

Show Me The Code

Now that we have the layout ready, its time to see the code that it is associated with:

Let’s go over the code and see all about it, and that is so simple.

1. First, notice as I mentioned that the ProgressButton class extends RelativeLayout
2. On lines 10–14 the init block, first, inflating the layout and then on lines 12–13 initialising the childs views using findViewById
3. Next, on line 14, calling the loadAttr() method for getting styleables attributes for the button initial state! I’ve defined a few styleables so they can be set in the custom view xml. The attributes are:

• text — Setting the button text
• loading — For setting initial loading state from xml
• enabled — For setting initial enabled/disabled state
• lottieResId — For setting any lottie animation resource from xml

4. On lines 30–34, applying the initial values to the child views, and also setting the whole view enable state. Later, this enable state will change the appearance thanks to a style and selector background drawable.

Next, on lines 37–46, setLoading method for changing the button loading states! When it is loading, the TextView is GONE and the progressBar is VISIBLE, when its not loading, the TextView is VISIBLE and the progressBar is GONE.
Notice also that when it is in loading state I am setting it so it will be not clickable.

On lines 48, a method for setting the text in code, for any purposes.

Last but not the leaset, on lines 52–55 overriding the setEnabled method for setting the whole view (The parent RelativeLayout) enable state and also the enable state of the TextView, this is important as you may want to have different text colors when the button is disabled.
Thanks to the “?android:attr/textAppearanceButton” attribute I’ve mentioned earlier, we can have any text styling for different states. I will show all styling in the next sections.

Do It With Style

After complete with layout and code, all we have to do now is connect a set of styling and theming. This part is a little bit tricky, but here is how I’ve managed it.
BTW, I really encourage you to go over this article, which explains how text appearance, theming and styling works in Android

Define a Theme in style.xml

The above xml defines two attributes which will be applied as a theme to the button custom view.
As we mentioned earlier, the textAppearanceButton attribute will effect the text that is in the TextView that in the button layout.

Next, the colorControlHighlight attribute will effect the view ripple effect when clicked. This is also an attribute that comes from the app theme which we override just for this custom view.

The textAppearance styling:

In the above xml we set the text appearance, first we define a base TextAppearance.Body.White block with the font family, text style, size and the base color.
Next, a specific TextAppearance.ProgressButton.Black block for the black button, this block inherit from the base block but overrides the android:textColor attribute, as the text color should be different when it is disabled so I defined a selector for it.

Last but not the least, the selector for the black button text color, with different color for disabled state.

What Is Your Background?

Of course, any view should have a background right?
So is our nice little custom button, the way we do it is by defining some drawable with shape and selector just we do in any other view!

First, lets define the background drawable:

Notice that the ripple color attribute is colorControlHighligh, thats right! We’ve override it in our theme! Cool!
Now, we need to define the shape and the selector:

The above three xml’s completes the view background!!

Now that we have a theme and background ready we should combine them both together! This will be done in another style block:

Notice that in the above style xml, we defined an “android:theme” attribute and gave it the theme that has been defined earlier. This will apply that theme to the view.
Next, we’ve set the “android:background” attribute with the drawable which includes the shape and the selector!

For any new color or shape, we will have to create a bunch of styling xml as described above! But when using it we should take only the last style block which combine both the theme and the background. You may look in the example in the next section!

Thats it!! Everything is ready for use!

I’ve Built It! I Want To Use It!!

All right! This is it! It’s time to use our nice little button in a Fragment or Activity. First, let’s put it in a layout!

Using the new ProgressButton is simple as just putting it in a layout and just set the style for the preferred color!

Now in our Fragment, we can use binding to access it and use it!

Summary

As you may see, such a simple looking task requires some effort to implement in the traditionally Android and View native framework. I wonder if maybe Jetpack Compose will bring new possibilities for making Android UI manipulation much easy with the ideas of Widgets and composition!

Источник

Buttons

A button consists of text or an icon (or both text and an icon) that communicates what action occurs when the user touches it.

Depending on whether you want a button with text, an icon, or both, you can create the button in your layout in three ways:

• With text, using the Button class:
• With an icon, using the ImageButton class:
• With text and an icon, using the Button class with the android:drawableLeft attribute:

Key classes are the following:

Responding to Click Events

When the user clicks a button, the Button object receives an on-click event.

To define the click event handler for a button, add the android:onClick attribute to the element in your XML layout. The value for this attribute must be the name of the method you want to call in response to a click event. The Activity hosting the layout must then implement the corresponding method.

For example, here’s a layout with a button using android:onClick :

Within the Activity that hosts this layout, the following method handles the click event:

Kotlin

The method you declare in the android:onClick attribute must have a signature exactly as shown above. Specifically, the method must:

• Be public
• Return void
• Define a View as its only parameter (this will be the View that was clicked)

Using an OnClickListener

You can also declare the click event handler programmatically rather than in an XML layout. This might be necessary if you instantiate the Button at runtime or you need to declare the click behavior in a Fragment subclass.

To declare the event handler programmatically, create an View.OnClickListener object and assign it to the button by calling setOnClickListener(View.OnClickListener) . For example:

Kotlin

Styling Your Button

The appearance of your button (background image and font) may vary from one device to another, because devices by different manufacturers often have different default styles for input controls.

You can control exactly how your controls are styled using a theme that you apply to your entire application. For instance, to ensure that all devices running Android 4.0 and higher use the Holo theme in your app, declare android:theme=»@android:style/Theme.Holo» in your manifest’s element. Also read the blog post, Holo Everywhere for information about using the Holo theme while supporting older devices.

To customize individual buttons with a different background, specify the android:background attribute with a drawable or color resource. Alternatively, you can apply a style for the button, which works in a manner similar to HTML styles to define multiple style properties such as the background, font, size, and others. For more information about applying styles, see Styles and Themes.

Borderless button

One design that can be useful is a «borderless» button. Borderless buttons resemble basic buttons except that they have no borders or background but still change appearance during different states, such as when clicked.

To create a borderless button, apply the borderlessButtonStyle style to the button. For example:

Custom background

If you want to truly redefine the appearance of your button, you can specify a custom background. Instead of supplying a simple bitmap or color, however, your background should be a state list resource that changes appearance depending on the button’s current state.

You can define the state list in an XML file that defines three different images or colors to use for the different button states.

To create a state list drawable for your button background:

Create three bitmaps for the button background that represent the default, pressed, and focused button states.

To ensure that your images fit buttons of various sizes, create the bitmaps as Nine-patch bitmaps.

Источник

Custom button rehearsal

TL;DR
When creating a compound view, based on a ViewGroup (layout), don’t forget about:
View and ViewGroup doesn’t support enabled/disabled or checked/unchecked state by default;
Such a state should be propagated to every child;
Again, if that child doesn’t support that state — make it;
Custom attributes are your friends;
Examples are here: IndicatorButton .

Motivation

Sometimes we get a design, that looks easy to implement. But then you go into details and see, that standard widgets are not enough. In this article, I want to talk about one of the most popular cases: custom button. Just have a look at the next design:

Remember, when you have seen something like this for the first time? As for me, that day I found out about compound drawable. Still, it’s not enough. Of course, that round indicator could be a part of a background with the help of insets. But here I want to talk about something else.

I bet, you did it at least once: putting image and text into a layout and calling it a button. This way of creating a custom widget is called “compound view”. Let’s pass this path together and I’m going to show you some pitfalls on the way.

Regular button

If you need only basic press/release functionality and button’s elements are the same for both states, then you don’t need even a custom view. Just apply the proper background and add a couple of attributes to your container:

Tip 1. Pay attention to the selector’s attributes enterFadeDuration and exitFadeDuration . With their help transition to pressed state and back looks smoothly. Result:

This button is plain ConstraintLayout with two images and text. Unfortunately, that’s all you can have, using xml only. You can’t change the color of text and icon depending on the pressed state. You can’t even use android:enabled attribute — something, that beginners usually forget about when using a layout as a button.

How to disable it?

Even if you extend selector with an item for the disabled state:

you will see disabled background only if you disable the button programmatically:

Thing is, that View or ViewGroup has setEnabled method, but misses android:enabled attribute handling. Unlike Button , and you can easily find such handling in sources:

Thus, this is the point, where you finally have to create a custom compound view to achieve that behavior above.

Compound view creation

Step 1. Define custom attributes:

Step 2. Create a layout, that will be inflated in compound view instantiation:

Tip 2. Root element of the layout should be merge. Otherwise, after inflation, you’ll get two ConstraintsLayouts.
For now, icon and text are predefined along with their colors, we’ll get to it later.

Step 3. Create class, don’t forget to apply values from custom attributes:

Backgrounds, icon tint, and text color

Let’s back to the very first design here and implement that button. Background:

Here we keep everything in one place for the sake of simplicity of the article. Usually, I create a bunch of small xml drawables, so they can be reused.

Tip 3. Attributes enterFadeDuration and exitFadeDuration don’t work with color state lists. If you don’t need them, the background selector above could be simplified to a single shape and two color state lists:

Of course, icon, indicator, and text have a little bit different color state list:

Both those selectors could be applied in xml layouts or programmatically in IndicatorButton.kt . Depends on your needs. I’d do it in kotlin because this way I keep everything in one place (you cant apply attributes to merge).
But still, if you run your app, you’ll see, that android:enabled does not impact text and icons. And that’s normal because icons and text are children of your compound button, which is simply ConstraintLayout.

Tip 4. You have to propagate enabled/disabled state to the children of a compound view.

After rewriting setEnabled you get what you need:

And that’s how IndicatorButton looks now:

Make it checkable

And now the most intriguing part. We’ll create CheckableIndicatorButton, that has the behavior of CompoundButton:

A button with two states, checked and unchecked. When the button is pressed or clicked, the state changes automatically.

Let’s extends IndicatorButton.

Step 1. Background selector gets additional states. We need to keep in mind, that button could be disabled in two states: checked and unchecked. So, we have tow more items in the selector:

And don’t forget about icons and texts color state lists.

Those selectors above should be applied in CheckableIndicatorButton.

Step 2. We should implement Checkable interface:

Defines an extension for views that make them checkable.

It has three methods, and it’s pretty straightforward how to implements them. You only need additional property, that will track checked/unchecked state.

Step 3. Of course, changing of checked state should be triggered somehow. A convenient place to do it — onPerformClick method.

Step 4. By default, view knows nothing about the checked state. So background selector won’t work as expected. You should “teach” the button about it. Do do this, override onCreateDrawableState. An example could be found in CompoundButton, naturally.

Step 5. As a disabled state, the checked state should be propagated to all children of the button. Thus, every child has to be checkable. In our case, we need a checkable text view and image view. Fortunately, the framework already provides us with CheckedTextView, and CheckableImageView is created simply by repeating steps 2–4.

Here is (almost) final implementation:

And this how the result looks like:

Radio group

That design at the very beginning looks like a radio group. So, let’s implement it. To create a radio button we need only extend ChekableIndicatorBUtton and block click on it if it’s already checked:

Of course, you need your own radio group.

Tip 5. Reuse an existing solution.
Android Framework already contains RadioGroup, so I copied it and remove everything the won’t be used. And adapted it to RadioIndicatorButton. You can find implementation in the repo.
Result:

Conclusions

Creating a compound view is the most intuitive way of a view customizing. Thus, many beginners go this way. In the same time, this really fast and easy approach could be the first choice of experienced developers. And even it’s not so hard, there are some problems anyone should remember about. I hope, this article can help with it.

Источник