Change button shape android

How to create customized Buttons in Android with different shapes and colors

A Button is a user interface that are used to perform some action when clicked or tapped.

Default Shape of Button

In this article, we will try to change the shape and color of Button to various designs, like:

• Oval Button
• Rectangular Button
• Cylindrical Button

Approach:

Below are the various steps to created customized Buttons:
Step 1: Start a new Android Studio project
Please refer to this article to see in detail about how to create a new Android Studio project.

Step 2: Add the Button
Since we only need to customize Buttons, we will just add Buttons in our layout. We don’t need any other widget. This can be done either by writing the code in XML or using the Design Tab. Here, we will do so by adding its XML code.

Now since we need to customize the Button as per 3 shapes (as shown above), we will add 3 buttons and add the customization of each separately, lets say the buttons be – oval, rectangle and cylindrical.

activity_main.xml

Initially, all three buttons have default values and will look as per the default look shown above.

Step 3: Customizing the button
In order to customize the button, as shown above, we will be needing few attributes of Button in particular:

1. shape: This defines the shape of the widget that is being used. For example: oval, rectangle, etc.
2. color This attribute takes the Hexadecimal color code as parameter and sets the color as per the code
3. corner::radius: This attribute defines how much curved corners of the button has to be. For example, no curve will lead to rectangle and increasing the curve can result in circle as well.
4. stroke: This attribute refers to the thickness of the outline of the button. The more the stroke, the thicker the outline will be.

These attributes can be set for a widget with the help of a Drawable resource file.

Creating a new drawable resource file:

We will be creating a new drawable file which will contain the customizations such as shape, color, and gradient which we want to set on our button. To create a drawable file, click on: app -> res -> drawable(right click) -> New -> Drawable resource file and name it anything you want.

Adding code to the resource file:

Now that we have this drawable resource file, we can customize our button by adding tags like shape, color, stroke, or any other attribute which we want.

Источник

Android Button Design, Custom Button, Round Button, Color

Android Tutorial

In this tutorial, we’ll be customizing the Buttons in our Android Application. If you aren’t aware of Android Buttons, check out this tutorial before proceeding. We’ll be setting selectors and shapes on our buttons in xml.

Android Button Design

A selector is used to define a different behaviour for different states of the Button.

What are drawable states?

Each of the following events of a view (Button or any other kind of view) are a type of state:

• state_pressed
• state_selected
• state_focused
• state_enabled

state_focused is when you hover over the widget. Typically works only on emulators.

state_selected is meant to select the view. Doesn’t work with Buttons. Works with RadioButtons.

Typically for a button, there are just three important states: normal, pressed and enabled.

For each of the states of the selector, we can set a different drawable/color/shape on our button. Let’s get started with the implementation of each of these in a new Android Studio Project.

Android Custom Button Project Structure

We’ll be looking at each of the drawable files one at a time.

The colors are defined in the colors.xml file :

A selector can be an xml file created inside the drawable folder.

Selector for different background colors.
The following selector file btn_bg_selector.xml contains the code for setting different background colors on a button for different states.

In the above code, each of the states is represented using item tag. The selector tag behaves like an if – else if statement to an extent. It checks every condition from top to bottom. Whenever the condition matches, it sets the relevant things on the button and stops processing the next item tags.

The third item tag is the default one. It’s important that we keep it at the last. Keeping it at the top would not allow the other two item tags to get executed ever.

We set the above drawable selector file on our button in the activity_main.xml as:

The selector is set on the background attribute of the button.

Selector for Disabled Button

The following selector btn_bg_selector_disabled.xml is used on a button which is not enabled.

For the above selector to work, we need to specify android:enabled as false.

Selector with Different Drawables

We can set a different drawable image to be displayed based upon the state of the button.
The selector code that does so is present in the file btn_drawable_selector.xml

Note: The focused state doesn’t work on smart phones.

Now the drawable images when set as the button background can get stretched if it’s width/height is larger than the button’s.
So we need to set the Button width/height in accordance with the drawable image. We can do so either by hardcoding in xml or getting the drawable dimensions programmatically and setting it over the button. For the sake of convenience we’ve done the former here:

ImageButton is the ideal View to be used when you need to display a drawable as the button background only since it fits the drawable appropriately.
ImageButton comes with the android:scale attribute to resize the drawable image.

Android Button Color

We can change the text color on the button based on the state in the selector.
The following code from btn_txt_selector.xml does so. We need to use android:color here in place of android:drawable .

The button in the layout:

Android Button Shapes

We can set custom shapes on our button using the xml tag .
These xml files are created in the drawable folder too.
shape can be used inside selectors .

The shape can be set to rectangle (default), oval , ring , line .

The most used tags inside the shape tag are:

• – Setting start and end colors of the gradient along with the type(radius, linear, sweep)
• – Setting border color and width
• – Setting the solid color on the button
• – Setting radius

Android Round Corner Button

The xml code for the btn_shape_round.xml file is given below:

Just like selectors, we can set this on the android:background tag on the Button in our xml layout.

Android Button Shape With Gradient

In the following btn_shape_gradient.xml file, we’ve set the gradient as a radial one. We must set the gradient_radius attribute too.

Android Button Shape and Selector Together

The btn_selector_shape.xml holds the selector. Each of the items has a shape specified.

Set this on the Button and the shape would change from rectangle to oval when the button is clicked.
A linear gradient should have the angle specified in the multiples of 45, else it’ll crash.

Setting the Button shape as capsule
btn_shape_capsule.xml is where we set the shape inside the selectors as a capsule.

The code for the MainActivity.java class which hosts all of the above button examples is given below.

Android Custom Button Design App Output

The output of the above application in action is given below.

This brings an end to this tutorial on Button selectors and shapes. You can download the final android studio project from the below link.

Источник

Hands-on with Material Components for Android: Buttons

Part 4 of a series covering practical usage of Material Components for Android

This post will be covering the features and API of Button components. To find out how to handle initial setup of Material Components for Android (including the Gradle dependency and creating an app theme), please see my original post:

Setting up a Material Components theme for Android

Attribute by attribute

Buttons are arguably the most widely-used components in any app. This is largely due to their versatility, allowing users to perform actions and make choices that ultimately guide the flow of an experience. A single line of contained text and/or an icon indicate the action a button can perform.

Material Buttons are slightly different to traditional Android buttons in that they do not include additional insets (4dp on the left/right) and have more letter-spacing, different default colors and other attributes that improve legibility and affordance amongst other components.

From a design perspective, there are three main types of buttons which are intended to offer hierarchical levels of emphasis:

• Text button (low emphasis): No container. Best used for less important actions, especially when other main content needs to be emphasised.

In addition to this, buttons can be grouped together into a fourth type: Toggle button. This allows related button actions to be horizontally arranged in a common container. The buttons themselves can be selected/deselected to indicate an active/inactive choice.

Basic usage 🏁

A MaterialButton can be included in your layout like so:

Choosing a style 🤔

As discussed in the intro section above, a variety of button types exist. These types map to styles that you can apply to a MaterialButton . There also exists a variety of sub-styles for specific use cases, such as to adjust padding for an icon. The full list of styles and their attributes can be found on GitHub. These style variants inherit from Widget.MaterialComponents.Button , each with an optional style suffix:

• Text button: *.TextButton (main), *.TextButton.Icon , *.TextButton.Snackbar , *.TextButton.Dialog , *.TextButton.Dialog.Icon , *.TextButton.Dialog.Flush
• Outlined button: *.OutlinedButton (main), *.OutlinedButton.Icon
• Contained button (unelevated): *.UnelevatedButton (main), *.UnelevatedButton.Icon
• Contained button (raised): No suffix (default, main), *.Icon

Adding an icon 🔷

An icon can be added to a button. It is displayed at the start, before the text label. In order to get the correct icon padding, it is recommended that you use a *.Icon style variant (shown above in the “Choosing a style” section).

The icon can be added in XML:

Alternatively, it can be done programmatically:

A few additional attributes exist for adjusting the icon size and position:

• iconSize : The width/height of the icon. The default value is the supplied Drawable ’s intrinsic width.

• iconGravity : The gravity of the icon. This can be set to start ( ICON_GRAVITY_START , default, at start of button), end ( ICON_GRAVITY_END , at end of button), textStart ( ICON_GRAVITY_TEXT_START , at start of centered text label) or textEnd ( ICON_GRAVITY_TEXT_END , at end of centered text label).

• iconPadding : The spacing between the icon and the text label. Typically you would not want to change this. The default value is 4dp for text buttons and 8dp for all other types.

Attributes related to icon tinting are discussed in the “Theming” section below.

Grouping Buttons to create a Toggle Button 👨‍👩‍👧‍👦

In order to create a toggle button, we need to add MaterialButton s as child View s to a MaterialButtonToggleGroup (a custom ViewGroup ).

Note: MaterialButtonToggleGroup was added in the 1.1.0-alpha05 release of Material Components for Android.

Grouping

This can be done in XML:

Alternatively, it can be done programmatically:

The MaterialButtonToggleGroup handles layout and adjusting of only the relevant shape corners in the row of MaterialButton s. The appearance of the MaterialButton s is determined by whichever style they each use. It is advised to use a consistent style for all children and also recommended to use the outlined button type.

Adjusting selected behavior

When added to a MaterialButtonToggleGroup , child MaterialButton s automatically become “selectable” (i.e. The android:checkable attribute is set to true).

Thus, there exists a couple of attributes for adjusting how MaterialButtonToggleGroup manages this:

• singleSelection : Determines whether or not only a single button in the group can be checked at a time. The default value is false, meaning multiple buttons can be checked/unchecked independently.

Listening for selection state

We are able to query for and adjust the current checked button(s) in a variety of ways:

We are also able to listen for checked changes by adding an OnButtonCheckedListener to a MaterialButtonToggleGroup :

Listeners can also be removed with the MaterialButtonToggleGroup#removeListener and MaterialButtonToggleGroup#clearListeners functions.

Orientation

The default arrangement of buttons within a toggle group is horizontal. However, seeing as MaterialButtonToggleGroup extends LinearLayout , it also supports vertical arrangement. This can be set programmatically or in XML:

The interesting thing to note here is the extra attributes on the child MaterialButton (s). It is recommended to set the width to match_parent and to remove the top/bottom insets from the child buttons so as to have them sit flush against each other vertically. This also, however, requires adjusting the minHeight to make up for the lack of insets.

Theming 🎨

Buttons can be themed in terms of the three Material Theming subsystems: color, typography and shape. We have already shown which styles to use in the “Choosing a style” section above. When implementing a global custom MaterialButton and MaterialButtonToggleGroup styles, reference them in your app theme with the materialButtonStyle / materialButtonOutlinedStyle and materialButtonToggleGroupStyle attributes respectively.

Color

The color of the MaterialButton background can be customized with the backgroundTint attribute. This requires a ColorStateList , meaning a for checked/enabled/disabled states is required. It defaults to colorPrimary (enabled)/ colorOnSurface (disabled) for contained buttons and transparent(unchecked)/ colorPrimary (checked) for all other types, with different opacities per state. There is also a backgroundTintMode attribute to change the tint PorterDuff.Mode , although typically you would want to keep this the same.

The color of the text label can be customized with the android:textColor attribute. This too requires a ColorStateList . It defaults to colorOnPrimary (enabled)/ colorOnSurface (disabled) for contained buttons and colorPrimary (enabled or checked)/ colorOnSurface (disabled or unchecked) for all other types, with different opacities per state.

The color of the optional icon can be customized with the iconTint attribute. This too requires a ColorStateList and the defaults are the same as those of android:textColor . As before, there is also an iconTintMode attribute.

Lastly, the color of the button touch ripple can be customized with the rippleColor attribute. It too accepts a ColorStateList and defaults to colorOnPrimary for contained buttons and colorPrimary for all other types, with different opacities per state.

Typography

The button text label will adopt the fontFamily attribute defined in your app theme.

While you would typically want to keep most aspects of the button text appearance as is, the Material Guidelines suggest we can use sentence case over the standard all caps for the text label, if desired. To achieve this, we would create a new style:

We could apply this directly to a button or in an individual button style by referencing it with the android:textAppearance attribute. Alternatively, it can be applied globally by referencing it in your app theme with the textAppearanceButton attribute.

Shape

The shape of a button background can be customized with the shapeAppearance attribute. This defaults to shapeAppearanceSmallComponent .

While not strictly shape theming, it is worth mentioning that the width of an outlined button stroke can be adjusted with the strokeWidth attribute. This defaults to 1dp.

More resources 📚

• The source code for the Playground app used in this article can be found on GitHub.
• Buttons Design Documentation
• Buttons API Documentation
• Toggle Buttons API Documentation

I hope this post has provided some insight into Material Buttons and how they can be used in your Android app(s). If you have any questions, thoughts or suggestions then I’d love to hear from you!

Источник