Developing a user interface for mobile applications requires special attention to detail, and creation round button is one of the most common tasks for Android developers. Standard controls in the Android SDK are often rectangular in shape with rounded corners, but modern design trends such as Material Design 3 dictate the use of more geometrically pure shapes. You may need a round button for FAB (Floating Action Button) actions, profile avatars or quick settings icons.
The implementation process can vary from simple XML settings to complex customization through code on Kotlin or Java. It is important to understand that simply changing the view size is not enough - you need to correctly configure the background, padding and click behavior. In this article we will analyze all the current methods, from classic drawable resources to modern library components Material Components.
Incorrect implementation can lead to the button looking like an oval when changing the screen orientation or containing unnecessary rendering artifacts. Therefore, we will pay special attention to the correct use of the attributes android:layout_width and android:layout_height, as well as setting up padding and margin. Let's move on to specific implementation methods that guarantee perfect results on any device.
Using Shape Drawable for the background
The most fundamental way to create a round button in Android is to use a resource like shape. This method gives you full control over the color, gradient, and stroke of an element without requiring heavy third-party libraries. You create a separate XML file in the drawablefolder where you define the shape's geometry.
The key here is to set the attribute android:shape to a value oval. If you specify only the color, the system will automatically draw an ellipse, which will become a circle if the width and height of your View are equal. However, for a full-fledged button, you often need to add a click effect or stroke.
Consider the example code for the file circle_background.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval">
<solid android:color="#6200EE" />
<size android:width="56dp" android:height="56dp" />
</shape>
After creating this file, you can apply it as a background for a regular Button or ImageButton. You need to hardcode the dimensions or use special layout attributes.
To create a ripple effect on older versions of Android, wrap your shape in a tag and specify a mask color.
Usage oval shape ideal for static buttons, but has limitations when working with text inside. If you place long text inside such a button, it may be cut off or go beyond the borders, since an oval does not scale to the content as flexibly as a rectangle.
Using Material Components and FAB
Library Material Components for Android provides ready-made widgets that already have the correct shape and animations. A classic example of a round button is FloatingActionButton (FAB). This component automatically assumes a circular shape and has built-in support for states (click, focus, hover).
To use FAB, make sure that your dependency is included in your file build.gradle dependency connected com.google.android.material:material. In XML markup, you simply add a widget and it renders as a circle. This is the most preferred method for main action buttons, as it complies with Google guidelines.
- 🔵 Automatic support for themes and colors from
colorPrimary - ⚡ Built-in click animation (Elevation change)
- 📐 Correct indentation for default icons
- 🔄 Easy replacement with Mini FAB or Extended FAB
However, if you want a round button that behaves like a regular text button rather than a floating action, the standard FAB may not be suitable. In such cases, developers often use MaterialButton customization. Although this component has rounded corners (pill shape) by default, it can be turned into a circle by manipulating the radius.
⚠️ Attention: When used,
MaterialButtonpropertyapp:cornerRadiusmust be equal to half the height of the button. If you change the height dynamically, you will have to programmatically update the radius, otherwise the button will become oval.
To create a round button on the base MaterialButton you need to set the attribute app:cornerRadius to a value equal to 50% of the height. For example, if the height of the button is 48dp, the radius should be 24dp. This will provide an ideal circle, but requires precise calculations in the layout.
Customizing vector graphics and icons
Often a round button is used solely to display an icon, for example, a magnifying glass for searching or an arrow for navigation. In this case, it is critical to correctly configure the vector image (VectorDrawable) inside the button. Incorrect icon sizes can disrupt the visual symmetry of the circle.
It is recommended to use the android:src attribute ImageButton or the app:icon property MaterialButton. The size of the icon should be smaller than the diameter of the button in order to leave enough “air” around the edges. The standard icon size for a 48dp button is usually 24dp.
The table below shows the recommended size ratios for different pixel densities:
| Button size (dp) | Recommended icon size (dp) | Padding (padding) | Type of use |
|---|---|---|---|
| 24 | 12-14 | 5dp | Mini buttons, tags |
| 40 | 20-24 | 8dp | Standard actions |
| 48 | 24 | 12dp | Basic actions (FAB) |
| 56 | 24-28 | 14dp | Accent buttons |
If you are using bitmap images (PNGs) instead of vectors, make sure that the background of the image is transparent and the image itself fits into a square canvas. Otherwise oval background the corners of the original image may not be hidden, and the button will look sloppy.
How to center the icon?
If the icon is offset, check the android:scaleType attribute. For ImageButton, centerInside or centerCrop is best suited, depending on the task.
It is also worth considering the dark theme of the application. Vector drawables can automatically change color through the tintattribute tied to the theme color. This allows your round button to remain readable on both light and dark backgrounds without creating separate resources.
Working with ConstraintLayout for Positioning
Positioning a round button can often be challenging, especially if it needs to be flush against the edge of the screen or on top of other elements. ConstraintLayout is the best tool for solving these problems, allowing you to create complex interfaces without nesting.
To make a button round ConstraintLayout and maintain proportions, you can use the app:layout_constraintDimensionRatioattribute. By setting it to 1:1, you ensure that the width and height of the button will always be equal, regardless of restrictions at the edges of the screen. This makes the button a true circle even on tablets or when rotating the device.
<ImageButtonandroid:id="@+id/circularButton"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@drawable/circle_background"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent="0.15"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_margin="16dp" />
In this example, the width of the button is set as a percentage of the width of the parent (layout_constraintWidth_percent), and the height is adjusted automatically due to the aspect ratio. This is a powerful technique for responsive design.
⚠️ Attention: When using
0dp(match constraints) for width and height, be sure to set at least one constraint for each axis, otherwise the View will collapse to zero and become invisible.
If you need to place a round button on top of the list or images, use ConstraintLayout as a container and don’t be afraid to layer elements on top of each other. The drawing order is determined by the order of the declaration in XML: elements declared later are drawn on top of the previous ones.
☑️ Checking the layout of a round button
app creation and animation
Sometimes static layout is not enough and is required dynamic creation of round buttons or complex animation of their state. In such cases, the logic is transferred to the code on Kotlin or Java. You can create GradientDrawable directly in code, which allows you to change the color or size at runtime.
For animation of changing the size or color, it is convenient to use ValueAnimator or a library Lottie. For example, a button could pulsate to attract the user's attention. When changing the shape programmatically, it is important to call invalidate() to redraw the view.
An example of creating a round background in code:
val drawable = GradientDrawable()drawable.shape = GradientDrawable.OVAL
drawable.setColor(ContextCompat.getColor(context, R.color.purple_500))
button.background = drawable
// Important: set square dimensions
button.layoutParams = LinearLayout.LayoutParams(100, 100)
Click animation (Ripple effect) for custom views is configured via RippleDrawable. You should create an oval-shaped mask so that the wave effect does not extend beyond the circle. Without a mask, the animation will be rectangular, which will spoil the impression of the interface.
Programmatic creation of buttons is justified only when their properties are dynamically changed. In 90% of cases, XML layout is more productive and easier to maintain.
Don't forget about Accessibility. Software-generated buttons must have content contentDescriptionso that screen readers can communicate their purpose to visually impaired users. A round button without text especially needs this description.
Frequent errors and optimization
When creating round buttons, developers often encounter a number of typical problems. One of the most common is “square corners” in the background on older versions of Android. This occurs if the system does not support drawing an oval over a complex background or if the wrong drawable type is used.
Another problem is related to the touch target. Visually, a button can be round and small (for example, 30dp), but Material Design requirements state that the minimum touch area must be at least 48x48dp. Ignoring this rule will make the button inconvenient for the user.
- ❌ Using
clipToOutline="true"without an oval background (will not work) - ❌ Setting fixed dimensions in pixels instead of dp
- ❌ No state
state_selectedorstate_pressed - ❌ Ignoring the dark theme when selecting colors
To solve the problem with the click area, use the android:minWidth and android:minHeightattribute, or add invisible padding around the small icon. The visual size may remain small, but the physical clickable area will be sufficient.
⚠️ Attention: Library interfaces and APIs may be updated. Always check the official Android Developers documentation for the latest ways to style components, as older methods may be marked as deprecated.
Performance optimization is also important. Avoid creating new objects Drawable in the method onDraw. All resources must be loaded in advance or in the constructor. Redrawing complex gradients every frame can lead to a drop in FPS and slowdown of the interface.
Why does the button look like an ellipse?
Most likely, the width and height of your View are different. Check the layout parameters of the parent container or use ConstraintRatio 1:1.
Questions and answers (FAQ)
How to make a transparent round button with a white outline?
To do this, create a shape drawable, where the tag solid will have color #00000000 (completely transparent), and tag stroke will set the width and white color #FFFFFF. Make sure android:shape="oval".
Is it possible to make a round button with text inside?
Technically yes, but this is bad UX practice. Text inside the circle is often cut off or appears compressed. It is better to use a round button only for icons, and for text use rectangular buttons with rounded corners (pill shape).
Why does the Ripple effect extend beyond the boundaries of the circle?
This happens if the background of the button is not oval or if you have not configured a mask for RippleDrawable. Make sure that in the ripple resource, the attribute android:radius or mask is an oval shape.
How to define a round button in Jetpack Compose?
In Jetpack Compose, use a modifier clip(CircleShape) for any component or use a ready-made component FloatingActionButton, which already has a round shape by default.
Do you need to use different images for buttons of different sizes?
No, if you use VectorDrawable. Vector graphics are scaled without loss of quality at any size. Use the same vector resource, changing only the View dimensions in the layout.