This view extends the ConstraintLayout, which you can use to add all sorts of view to your squircle, like an icon or a complex layout with texts and icons.
You can load an image in every view using the setBackgroundImage method, but you can also use your favorite image loading library to load it in for you. We have out of the box support for Glide, Picasso, Fresco, Coil, etc.
The following attributes can be used in your styles.xml / themes.xml or as attribute of the view in your layout xml files.
Attribute
Type
Default
Description
squircle_background_image
reference
Background image of view
squircle_background_color
color
#000000
Background color of view
squircle_gradient_drawable
reference
Gradient drawable displayed in view
squircle_gradient_start_color
color
Gradient start color
squircle_gradient_end_color
color
Gradient end color
squircle_gradient_direction
enum
TOP_LEFT_BOTTOM_RIGHT
Direction of the gradient (only for the color gradient)
squircle_shadow_elevation
dimension
Default of the super view
Shadow elevation
squircle_shadow_elevation_color
color
#42000000
Shadow elevation color
squircle_border_color
color
Border color
squircle_border_width
dimension
0
Border width
squircle_ripple_enabled
boolean
true (false for SquircleImageView)
Ripple enabled or disabled (when a click listener is set)
squircle_ripple_drawable
reference
?attr/selectableItemBackground
Drawable used for drawing the ripple
squircle_corner_smoothing_percentage
integer
100%
Change the corner smoothing, a Squircle is 100% by default
Methods
Properties of the views can be modified by setting using following variables / methods. They can be accessed via the style property of the view. Note: Only supply color resources to the variables with the suffix Res, otherwise your colors won't work.
val button = findViewById(R.id.button)
button.style.backgroundColor = Color.RED
button.style.backgroundColorRes = R.color.teal_200
Notes:
You might notice that there's no ripple, even though it has been enabled or a drawable has been set. This is because the ripple will only be shown once you've set a click listener.
Android Shapes
As you might have encountered before, Android does support custom Shapes to be applied to buttons, images, ConstraintLayout, etc. I've decided to create a custom view to allow some flexibility when it comes to using gradients and other functionalities which don't work really well with shapes. If you would still like to use a ShapeDrawable / ShapeAppearance, I've decided to add this functionality to the library. Please note that this is only supported programmatically, not via XML.
// The background color is not preserved, so it needs to be re-applied
binding.constraintLayoutWithShapeDrawable.background =SquircleShape.getShapeDrawable(binding.constraintLayoutWithShapeDrawable).apply {
this.paint.apply {
this.color =ContextCompat.getColor(this, R.color.my_color)
}
}
Methods and classes
Methods
// Methods derived from SquircleShapefungetSquirclePath(rect:RectF, width:Int, height:Int): ShapePathfungetShapeAppearance(): ShapeAppearanceModel.BuilderfungetShapeDrawable(view:View): ShapeDrawable
Classes
If you would like to apply the Squircle to only a certain corner or such, you can retrieve the custom CutCornerTreatment implementation, which is called SquircleCornerTreatment.
Todo
Inner shadow support
Layouts other than ConstraintLayout
Expose all attributes via methods
Ensure it works on API 21 - 30
Check Java support
Performance testing with lots of bitmaps
Add tests
Code documentation
Option to determine text color by background / image
Use precise angle of gradient instead of matching it to a segment
Improve outer shadow boundaries
Jetpack compose support
Reduce invalidate() calls when changing multiple style properties
Fixed issue where the text appearance of the button would override any custom styling set for the following attributes: android:fontFamily, android:textStyle, android:textAllCaps, android:textSize, android:letterSpacing
V0.4.1 (1 august 2021)
Fixed issues with backgrounds because of the recent ripple improvements
Changed version numbering to follow the major.minor.patch version naming
V0.0.4 (31 july 2021)
Added support for customizing the corner smoothing (e.g. make the Squircle less rounded)
Added support for custom ripple drawables
Ripples will now only show up if any click listener is set
V0.0.3 (19 june 2021)
Added support for programmatically setting the view's properties
V0.0.2 (12 june 2021):
Added support for Android shapes
Fixed Maven using the wrong source url
V0.0.1 (10 june 2021):
Initial release
Attribution
Images used in the sample app originate from Unsplash:
MIT License
Copyright (c) 2021] Juky
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
Thanks for the amazing library!
I have this issue that textAllCaps false doesn't actually work (is also visible in layout preview), the only way i've found to make it work is by setting a button.transformationMethod = null on the fragment, but would be better to have a way to have a global style with that attribute.
Squircle views have a ripple even though no click listener is set. Because of this the user of the app thinks he can click on something even though there is no click listener on it.
It would be nice if the ripple is only enabled when a click listener is set.
Due to the introduction of a border gradient, the generic gradient attributes and variables need to be prefixed with background_. This is a breaking change, but unfortunately, this is the way.
Describe the bug
Even though setting the android:src is not recommended, the library is not supposed to crash when doing so. It currently crashes when using a default source, due to a race condition in the SquircleImageView
To Reproduce
Steps to reproduce the behavior:
Use a SquircleImageView with the android:src attribute
Expected behavior
Using it as background image, or, at least prevent crashing
A custom view is great, though some people might prefer to use the default Android ShapeDrawable / ShapeAppearance. It would therefore be great if this functionality (specifically helper methods) could be provided by the library
i have faced a bug . background color of some of my views does not changed at nightmode. all i know that is : background color of each view with less than 72dp width (for example is 48dp) that has AppCompatImageView in itself, does not change in dark mode .
Is your feature request related to a problem? Please describe.
Support for displaying GIF's in a SquircleImageView, loading GIF's with for example Glide will result in nothing being displayed
Describe the solution you'd like
GIF Support
Describe alternatives you've considered
It is possible to load GIF's by doing the following:
this is a feature request:
it would be great to have support for selectors for attributes like squircle_background_color so we can have an enabled/disabled color or tint for buttons
enhancement
opened by eriksquare 0
Releases(V0.6.1)
V0.6.1(Nov 28, 2022)
Fixed issue #20 where ComposeShape was incorrectly calculating the top left corner, thanks @imnithish for finding this issue
Breaking change: Border gradients have been added, so existing gradient methods are now prefixed with background_
Methods renamed: gradientDrawable to backgroundGradientDrawable, gradientStartColor to backgroundGradientStartColor, gradientStartColorRes to backgroundGradientStartColorRes, gradientEndColor to backgroundGradientEndColor, gradientEndColorRes to backgroundGradientEndColorRes, gradientDirection to backgroundGradientDirection
Attributes renamed: squircle_gradient_drawable to squircle_background_gradient_drawable, squircle_gradient_start_color to squircle_background_gradient_start_color, squircle_gradient_end_color to squircle_background_gradient_end_color, squircle_gradient_direction to squircle_background_gradient_direction
Fixed issue where the text appearance of the button would override any custom styling set for the following attributes: android:fontFamily, android:textStyle, android:textAllCaps, android:textSize, android:letterSpacing