A library which provides you with Squircle views to use for buttons

Squircle is a library that creates circular views, which you can use for buttons. This is particularly useful if you are developing an application with multiple buttons in one screen, or if you want to design a menu with circular views.

Squircle-Views is a new library that lets you create content-aware, content-switching buttons—or Squircle Views—like those you see on the Facebook, Google, and Twitter apps. The library comes with a bunch of ready-to-use views that give you a lot of control to create your own content-aware, content-switching buttons—or Squircle Views—in no time!

SquircleView allows you to create a circular button that rotates around its center, and which can have different levels of transparency to match your design style. By using the SquircleView library, you will be able to easily build a button for iOS or Android that will look just the same across all platforms.

Circle display

SquircleView is a library that provides you with circle views to use in buttons, views, etc.

Screenshots

Different kinds of buttons, layouts and images you can create

Target

Add the Maven repository to the root file build.gradle :

allprojects {
repositories {
mavenCentral()
}
}

Also add the SquircleView dependency to your application’s build.gradle

Dependencies {
deployment app.juky:squircleview:0.0.3
}

Use

For all use cases, see the application example, which includes many different configurations.

SquircleImageView

This view extends the AppCompatImageView that you can use for a Squirl image.

Square key

This view extends AppCompatTextView, which you can use to create a button with a square

RectangleConstraintLayout

This view extends ConstraintLayout, which allows you to add all kinds of views to your squirt, such as. B. Symbols or
complex layout with text and symbols.

Load image

You can use the setBackgroundImage method to load an image into each view, or you can use your favorite
library to load the images for you. We support Glide, Picasso, Fresco, Coil, etc.

Normal image loading

my_squircle_image_view.setBackgroundImage(ContextCompat.getDrawable(context, R.drawable.my_image))

Load an image with an image-loading library such as Glide:

Glide.with(this).load(R.drawable.my_image)
.diskCacheStrategy(DiskCacheStrategy.ALL)
.into(my_squirkle_image_view)

Attributes

Show background image

Gradient pattern displayed in the view

Starting colour of the gradient

Graduated end color

Color of the border

Methods

The properties of the views can be changed by configuring them with the following variables/methods. This can be accessed through the view’s style property. Message: Only put color sources in variables with the suffix Res, otherwise your colors won’t work.

// Getter / Setter
property var backgroundImage : Raster image ?
var backgroundColor : Int
var backgroundColorRes : Int
var shadowElevation : Float
var shadowElevationColor : Int
var shadowElevationColorRes : Int
var gradientDrawable : GradientDrawable ?
var gradientStartColor : Int
var gradientStartColorRes : Int
var gradientEndColor : Int
var gradientEndColorRes : Int
var gradientDirection : GradientDirection
var borderColor : Int
var borderColorRes : Int
var borderWidth : Float
var rippleEnabled : Boolean

// Methods
fun setBackgroundImage(drawable : Drawable ?)
fun setBackgroundImage(resId : Int)
fun setGradientDrawable(resId : Int)
fun setGradientDirection(angle : Int)

Example:

trap button = findViewById(R.id.button)
button.style.backgroundColor = Color.RED
button.style.backgroundColorRes = R.color.teal_200

Android Forms

As you may have noticed, Android supports custom
shapes that can be applied to buttons, images,
formatting constraints, etc. I decided to create a custom view to provide some flexibility in using
gradients and other features that don’t work well with shapes. If you want to continue using ShapeDrawable /
ShapeAppearance, I decided to add this feature to the library. Note that this is only supported programmatically by
, not XML.

ShapeExterior

binding.buttonWithShapeDrawable.shapeAppearanceModel = SquircleShape.getShapeAppearance().build()

ShapeDrawable

// The background color was not saved, so it must be applied again
binding.constraintLayoutWithShapeDrawable.background =
SquircleShape.getShapeDrawable(binding.constraintLayoutWithShapeDrawable).apply {
this.paint.apply {
this.color = ContextCompat.getColor(this, R.color.my_color)
}
}

Methods and classes

Methods

// SquircleShape derived methods
fun getSquirclePath(rect : RectF, width : Int, height : Int) : ShapePath
fun getShapeAppearance() : ShapeAppearanceModel.Builder
fun getShapeDrawable(view : View) : ShapeDrawable

Classes

If you want to apply Squircle only to a specific corner, you can use a custom implementation of CutCornerTreatment
called SquircleCornerTreatment.

Todo

• Internal shadow support
• Provisions other than ConstraintLayout
• X] Openbaarmaking van alle kenmerken per methode
• [ ] Make sure it works on PLC 21 – 30
• Check Java support
• Performance test with a large number of bitmaps
• Add tests
• Documentation code
• Option to detect the text color of the background/image
• Use the exact angle of the slope instead of linking it to a line segment.
• [ ] Strengthen the outer edges of the shadow
• Jetpack Compose support
• Reduced invalidate() calls when changing multiple style properties

GitHub

https://github.com/Juky-App/SquircleViewSquircle is an amazing library with tons of useful features, but one of the most useful is its special views that allow you to use Squircle like buttons that can be used in such diverse ways. You can use them to make buttons that look like Twitter buttons, or Facebook buttons, or even buttons that look like a message or phone call button.. Read more about superellipse svg and let us know what you think.

Related Tags:

squircle androidsquircle csssquircle svgcss superellipsesuperellipse svgbutton maker machine,People also search for,Privacy settings,How Search works,squircle android,squircle css,squircle svg,css superellipse,superellipse svg,button maker machine