SquircleView is a library which provides you with Squircle views to use for buttons, views, etc.

Overview

SquircleView


Icon

SquircleView is a library which provides you with Squircle views to use for buttons, views, etc.


License API Release version Contributors Stars Issues

Screenshots

Different kinds of buttons, layouts and images you can create

Icon


Table of Contents

  1. How to use
  2. Usage
    1. SquircleImageView
    2. SquircleButton
    3. SquircleConstraintLayout
    4. Load image
    5. Attributes
    6. Methods
  3. Android Shapes
    1. ShapeAppearance
    2. ShapeDrawable
    3. Methods and classes
  4. Todo
  5. Contributing
  6. Contributors
  7. Showcase
  8. Changelog
  9. Attribution
  10. License

How to use

Maven Central

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

allprojects {
    repositories {
        mavenCentral()
    }
}

Also add the SquircleView dependency to your app build.gradle

dependencies {
    implementation "app.juky:squircleview:0.4.2"
}

Usage

For all use cases, check out the sample app which contains a bunch of different configurations.

SquircleImageView

This view extends the AppCompatImageView, which you can use to have a squircle image.

">
<squircleview.views.SquircleImageView
	android:id="@+id/imageButton"
	android:layout_width="100dp"
	android:layout_height="100dp"
	app:squircle_background_color="#FF00FF"
	app:squircle_background_image="@drawable/first_image"
	app:squircle_border_color="#000000"
	app:squircle_border_width="4dp"/>

SquircleButton

This view extends the AppCompatTextView, which you can use to have a squircle button

">
<squircleview.views.SquircleButton
	android:id="@+id/normalButton"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:padding="16dp"
	android:text="Normal button"
	android:textColor="#FFFFFF"
	app:squircle_gradient_end_color="#415FFF"
	app:squircle_gradient_start_color="#5BA7FF"
	app:squircle_shadow_elevation="2dp"/>

SquircleConstraintLayout

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.

">
<squircleview.views.SquircleConstraintLayout
	android:layout_width="72dp"
	android:layout_height="72dp"
	android:padding="16dp"
	app:squircle_gradient_end_color="#415FFF"
	app:squircle_gradient_start_color="#5BA7FF"
	app:squircle_shadow_elevation="2dp">

	
	<androidx.appcompat.widget.AppCompatImageView
		android:layout_width="32dp"
		android:layout_height="32dp"
		android:src="@drawable/ic_emoji"
		android:tint="@color/white"
		app:layout_constraintBottom_toBottomOf="parent"
		app:layout_constraintEnd_toEndOf="parent"
		app:layout_constraintStart_toStartOf="parent"
		app:layout_constraintTop_toTopOf="parent"/>

squircleview.views.SquircleConstraintLayout>

Load image

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.

Load image normally
my_squircle_image_view.setBackgroundImage(ContextCompat.getDrawable(context, R.drawable.my_image))
Load image using an image loading library like Glide:
Glide.with(this).load(R.drawable.my_image)
    .diskCacheStrategy(DiskCacheStrategy.ALL)
    .into(my_squircle_image_view)

Attributes

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.

// Property getters / setters
var backgroundImage: Bitmap?
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 setCornerSmoothing(cornerSmoothing: Int)
fun setBackgroundImage(drawable: Drawable?)
fun setBackgroundImage(resId: Int)
fun setGradientDrawable(resId: Int)
fun setGradientDirection(angle: Int)


fun getCornerSmoothing(): Int

Example:

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.

ShapeAppearance

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

ShapeDrawable

// 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 SquircleShape
fun getSquirclePath(rect: RectF, width: Int, height: Int): ShapePath
fun getShapeAppearance(): ShapeAppearanceModel.Builder
fun getShapeDrawable(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

Contributing

Check out the CONTRIBUTING.md file to know more

Contributors


Niels G

💻 📖 🚧

Thomas Bakker

👀

Showcase

Changelog

  • V0.4.2 (4 august 2021)
    • 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:

This library is inspired by the cupertino_rounded_corners Flutter library

License

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.
Comments
  • SquircleButton: set textAllCaps=false doesn't work

    SquircleButton: set textAllCaps=false doesn't work

    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.

    bug 
    opened by eriksquare 4
  • Squircle views have a ripple even though no click listener is set.

    Squircle views have a ripple even though no click listener is set.

    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.

    enhancement 
    opened by ThomasBakker 2
  • Top left corner not getting proper curve when using SquircleComposeShape.

    Top left corner not getting proper curve when using SquircleComposeShape.

    While using SquircleComposeShape, the curve at the top left corner is way too much if the height of Composable is bit high.

    To Reproduce modifier = Modifier .fillMaxWidth() .height(700.dp) .graphicsLayer( shadowElevation = 8f, shape = SquircleComposeShape.SquircleComposeShape(cornerSmoothing = 80), clip = true )

    Screenshot https://imgur.com/a/ZIIAec5

    bug 
    opened by imnithish 1
  • set padding for ImageView not works

    set padding for ImageView not works

    squircleimageview padding not works and size of image view content does not change

              <app.juky.squircleview.views.SquircleImageView
                android:id="@+id/imgback"
                android:layout_width="48dp"
                android:layout_height="48dp"
                app:squircle_background_color="@color/btn_back_gradient_end"
                app:squircle_background_image="@drawable/ic_arrow_left"
                app:squircle_border_width="0dp"
                android:layout_margin="16dp"
                android:padding="8dp"
                android:src="@drawable/ic_arrow_left" // tested this
                app:srcCompat="@drawable/ic_arrow_left" // tested this
                android:scaleType="centerInside" // tested this
                />
    
    opened by mhkarami 1
  • Added border gradient support

    Added border gradient support

    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.

    documentation enhancement 
    opened by Nielssg 0
  • [BUG] SquircleImageView crash on src attribute

    [BUG] SquircleImageView crash on src attribute

    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

    bug 
    opened by Nielssg 0
  • Helper method for Android shapes

    Helper method for Android shapes

    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

    enhancement 
    opened by Nielssg 0
  • darkmode not work on views with 48dp layout width

    darkmode not work on views with 48dp layout width

    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 .

        <LinearLayout
          android:id="@+id/lyt_header"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          app:layout_constraintTop_toTopOf="parent">
    
    
          <app.juky.squircleview.views.SquircleConstraintLayout
            android:id="@+id/lyt_back"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_margin="16dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:squircle_background_gradient_end_color="@color/btn_back_gradient_end"
            app:squircle_background_gradient_start_color="@color/btn_back_gradient_start"
            app:squircle_shadow_elevation="2dp">
    
    
            <androidx.appcompat.widget.AppCompatImageView
              android:id="@+id/imgback"
              android:layout_width="match_parent" // tested with static dimon 24dp
              android:layout_height="match_parent"
              app:srcCompat="@drawable/ic_noun_play_488468_1_"
              android:background="@color/transparent"
              app:layout_constraintBottom_toBottomOf="parent"
              app:layout_constraintEnd_toEndOf="parent"
              app:layout_constraintStart_toStartOf="parent"
              app:layout_constraintTop_toTopOf="parent"
              android:padding="12dp"
              android:elevation="0dp"
              android:tint="@color/icon_color"/>
    
          </app.juky.squircleview.views.SquircleConstraintLayout>
        </LinearLayout>
    
    opened by mhkarami 1
  • [FEATURE] Gif support

    [FEATURE] Gif support

    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:

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:src="@drawable/some_beautiful_image" />
    
    image.shapeAppearanceModel = SquircleShape.getShapeAppearance().build()
    
    enhancement 
    opened by Nielssg 1
  • Use colorStateLists for custom attributes

    Use colorStateLists for custom attributes

    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)
Owner
Juky
Juky
Icons, Borders, Radius ... for Android buttons

⚠️ This library was made years ago when it wasn't that easy to customize Android buttons like today. I highly recommend you to use Material Design but

Mehdi Sakout 1.8k Dec 30, 2022
comtomize view submit button which you use for submit operation or download operation and so on.

This is library project with a custom view that implements concept of Submit Button (https://dribbble.com/shots/1426764-Submit-Button?list=likes&offse

ZhangLei 129 Feb 5, 2021
Sometimes, we need to show a label above an ImageView or any other views. Well, LabelView will be able to help you. It's easy to implement as well!

LabelView Sometimes, we need to show a label above an ImageView or any other views. Well, LabelXXView will be able to help you. It's easy to implement

Jingwei 1.9k Dec 6, 2022
Button which is visible while user holds it. Main use case is controlling audio recording state (like in Telegram, Viber, VK).

HoldingButton Button which is visible while user holds it. Main use case is controlling audio recording state (like in Telegram, Viber, VK). Getting s

Artem Hluhovskyi 594 Jan 1, 2023
Materially inspired widgets and views that expose RxJava bindings.

Rx.Widgets Materially inspired widgets and views. Use ExpandableButtonGroup Add the widget to your view: <io.andref.rx.widgets.ExpandableButtonGro

Andrefio 12 Mar 12, 2018
Android button which moves in eight direction.

Moving Button Android button which moves in eight direction. Preview Sample Demo You can download demo movie file here : demo.mov It's also on Youtube

Leonardo Taehwan Kim 130 Nov 22, 2022
A cute widget of Switch Button for you to create beautiful and friendly UI.

SwitchButton To get a quick preview, you can get Demo apk in Google Play or Directly download. This project provides you a convenient way to use and c

kyleduo 4.6k Dec 31, 2022
A widget you can slide it to open or close something

SlideSwitch About SlideSwitch A button that you can slide on or off How to import into your project Android Studio use gradle. Gradle dependency: Add

Quinn 539 Jul 12, 2022
FButton - a flat button library for Android

FButton FButton is a custom Button of Android with "Flat UI" concept. FButton's design get inspiration from designmono. This library is very small and

Le Van Hoang 1.4k Dec 12, 2022
[] An Android library for an expandable button menu

ExpandableButtonMenu ExpandableButtonMenu is an Android library which implements an expandable button that can be used as a substitute of a fixed size

Lemon Labs 325 Nov 14, 2022
SegmentedController is an Android UI library for using customizable RadioGroup with RadioButtons.

SegmentedController is an Android UI library for using customizable RadioGroup with RadioButtons.

null 2 Jan 1, 2022
Android library providing an implementation of the Material Design Floating Action Button Speed Dial.

Android library providing an implementation of the Material Design Floating Action Button Speed Dial.

Sanyam Mehta 6 Dec 24, 2022
Primitive OpenGL (ES) based graphics library and engine for Android development.

Parrot Primitive OpenGL (ES) based graphics library and engine for Android development. Parrot makes Android core graphics simpler, giving you the fea

null 1 Dec 30, 2021
➕ An efficient and beaufitul Multi Float action button library based on Twitter implemented in Jetpack Compose 🚀

Multi Float Action Button ➕ An efficient and beaufitul Multi Float action button library based on Twitter implemented in Jetpack Compose ?? Including

Geovani Amaral 8 Oct 15, 2022
SquircleView is a library which provides you with Squircle views to use for buttons, views, etc.

SquircleView is a library which provides you with Squircle views to use for buttons, views, etc.

Juky 96 Dec 15, 2022
Android.compose.squircle - Android LightWeight Squircle Library for JetPack Compose

Android LightWeight Squircle Library for JetPack Compose Usage Based on Compose

Quang Nguyen 9 Jul 5, 2022
Custom font library for android | Library to change/add font of Entire Android Application at once without wasting your time - TextViews, EditText, Buttons, Views etc.,

AppFontChanger In a Single shot change font of Entire Android Application - TextViews, EditText, Buttons, Views etc., Kindly use the following links t

Prabhakar Thota 48 Aug 10, 2022
Compose-buttons - A set of Loading animations used in Buttons to convey a "loading" state after the button is clicked.

Loading Buttons A set of Loading animations used in Buttons to convey a "loading" state after the button is clicked. A simple demo application that sh

Brad Ball 16 Jul 5, 2022
Kirill Rakhman 4 Sep 15, 2022
A library which will save you a lot of time from writing the same intent creation code. it consist of many intent creation codes like Share, Contacts, Email and etc, which you can easily use.

Android-Intent-Library A library which will save you a lot of time from writing the same intent creation code. it consist of many intent creation code

Next 67 Aug 24, 2022