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.0.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">

	<!-- Embed whatever widget you would like, in this case an icon -->
	<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 setImage 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.setImage(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

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

Methods

// Common methods
fun setImage(drawable: Drawable?)

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

Contributing

Check out the CONTRIBUTING.md file to know more

Contributors


Niels G

💻 📖 🚧

Thomas Bakker

👀

Showcase

Changelog

  • 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
This project is focused on the sample using the API's new preview version of Android-L, use of transitions, shadows etc...

Android L preview example Description This project is focused on the sample using the API's new preview version of Android-L, use of transitions, shad

Saul Molinero 165 Nov 10, 2022
This project is focused on the sample using the API's new preview version of Android-L, use of transitions, shadows etc...

Android L preview example Description This project is focused on the sample using the API's new preview version of Android-L, use of transitions, shad

Saul Molinero 165 Nov 10, 2022
This repository provides a simple clicker app using `KSharedDataStorage` to save progress

kds-android-example This repository provides a simple clicker app using KSharedDataStorage to save progress For progress saving used KSharedDataStorag

null 2 Oct 23, 2021
This repo is to document my learning about Custom views in android

Custom-Views This repo is to document my learning about Custom views in android Note: If you are trying to understand Custom views, go in order: Custo

Kshitij Kumar 7 Feb 24, 2022
an easy to use android library to let devs know how much internet-data their app is consuming

EasyAnalytics! an easy to use android library to let developers know how much internet-data their app is consuming. We can identify this as we want ba

Sachin Rajput 13 Feb 21, 2022
Viacheslav Veselov 0 Jul 8, 2022
[] Port of Jake Wharton's U2020 sample app with use of MVP and Dagger 2

U+2020-mvp [DEPRECATED] We recomend to try Moxy framework instead of our solution. Port of Jake Wharton's U2020 sample app with use of MVP pattern and

Live Typing 315 Nov 14, 2022
A sample Android app that demonstrates how to use Firebase Authentication, Crashlytics, Cloud Firestore and Hilt with Jetpack Compose UI

showcase.mp4 Make it So This is a sample Android app that demonstrates how to use Firebase Authentication, Crashlytics, Cloud Firestore and Hilt with

null 107 Dec 31, 2022
A sample Android app which showcases advanced usage of Dagger among other open source libraries.

U+2020 A sample Android app which showcases advanced usage of Dagger among other open source libraries. Watch the corresponding talk or view the slide

Jake Wharton 5.7k Dec 22, 2022
A project which demonstrate how to develop a custom client on android for dribbble.com

##What is this? This is a project with custom client app on android for https://dribbble.com, which you can browse the popular icon and animation, lik

ZhangLei 599 Nov 14, 2022
A Basic Drawing App which is having Functionality of importing images from your gallery and sharing your drawing via Whatsapp , Email

Drawing-App A Basic Drawing App made in Kotlin Features of the App :) 1.you can set the size of paint Brush 2.import images from gallery 3.share it vi

MaNiSh 1 Jan 18, 2022
A Demo App which demonstrate the capabilities for BeVigil OSINT demo API

BeVigil-OSINT-Demo A Demo App which demonstrate the capabilities for BeVigil OSINT demo API Functionalities Firebase Authentication

Daniel Dominic 0 May 17, 2022
Android common lib demo, include ImageCache, HttpCache, DropDownListView, DownloadManager, install apk silent and so on, you can find description

android-demo 关于我,欢迎关注 微博:Trinea 主页:trinea.cn 邮箱:trinea.cn#gmail.com 微信:codek2 依赖:trinea-android-common android-auto-scroll-view-pager viewpager-indica

Trinea 1.1k Nov 10, 2022
RxJava architecture library for Android

Reference Architecture for Android using RxJava This is an ambitious reference project of what can be done with RxJava to create an app based on strea

Reark 2.1k Dec 17, 2022
Sample Project for Android Support Library 23.2

SnapShot: Contains features Vector Drawable Animated Vector Drawable AppCompat DayNight theme Bottom Sheets Using BottomSheetDialog in day-night mode.

Huqiu Liao 779 Nov 24, 2022
Examples for my Android GraphView library

Chart and Graph Library for Android GraphView - open source graph plotting library for Android GraphView is a library for Android to programmatically

Jonas Gehring 297 Dec 16, 2022
RoboDemo is a ShowCase library for Android to demonstrate to users how a given Activity works.

RoboDemo RoboDemo is a ShowCase library for Android to demonstrate to users how a given Activity works. A sample is available in the download area of

Stéphane Nicolas 220 Nov 25, 2022
Create curve bottom navigation using this library

Curve Bottom Bar Download Add it to your build.gradle with: allprojects { repositories { maven { url "https://jitpack.io" } } } and: d

null 49 Sep 17, 2022