Coder Social home page Coder Social logo

litekite / android-widgets Goto Github PK

View Code? Open in Web Editor NEW
2.0 3.0 3.0 4.14 MB

An Android Custom Widgets Library, offers custom ui components.

License: Apache License 2.0

Kotlin 100.00%
android kotlin-android kotlin android-library android-ui android-studio ui-components seekbar circleimagebutton android-widgets customview custom-view circleimageview seekbar-android slider verticalseekbar verticalsliders vertical-seekbar vertical-slider seekbar-vertical

android-widgets's Introduction

Android-Widgets

Maven Central

An Android Custom Widgets Library, offers custom ui components.

SmoothSeekBar

SmoothSeekBar extends the implementation of AppCompatSeekBar, which updates the progress based on the ACTION_MOVE Touch Event rather than the ACTION_DOWN Touch Event, which makes smooth transition from the previous progress to the current one.

  1. A Horizontal SmoothSeekBar.

Smooth Seek Bar

<com.litekite.widget.SmoothSeekBar
  style="@style/Widget.AppCompat.SeekBar"
  android:layout_width="300dp"
  android:layout_height="50dp"
  android:max="100"
  android:progress="0"
  android:progressTint="@android:color/holo_red_light"
  android:thumbTint="@android:color/holo_red_light" />
  1. A SmoothSeekBar turned as vertical with ViewRotator.

Vertical Smooth Seek Bar

<com.litekite.widget.ViewRotator
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">

  <com.litekite.widget.SmoothSeekBar
    style="@style/Widget.AppCompat.SeekBar"
    android:layout_width="300dp"
    android:layout_height="50dp"
    android:max="100"
    android:progress="0"
    android:progressTint="@android:color/holo_red_light"
    android:thumbTint="@android:color/holo_red_light" />

</com.litekite.widget.ViewRotator>

ViewRotator

ViewRotator is a View Group which hosts a single view rotated by 90 degrees counterclockwise.

  1. A Horizontal Material Slider View turned vertical by rotation.

Vertical Rotator with Slider

<com.litekite.widget.ViewRotator
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">

  <com.google.android.material.slider.Slider
    style="@style/Widget.MaterialComponents.Slider"
    android:layout_width="300dp"
    android:layout_height="50dp"
    android:theme="@style/Theme.MaterialComponents"
    app:haloColor="@android:color/holo_red_light"
    app:labelBehavior="gone"
    app:thumbColor="@android:color/holo_red_light"
    app:trackColorActive="@android:color/holo_red_light"
    app:trackColorInactive="@android:color/darker_gray" />

</com.litekite.widget.ViewRotator>

CircleImageButton

CircleImageButton is a clickable image button that makes image source [app:srcCompat] and background source [android:background] a circle.

  1. Color resource as a circle (An alternative way is to use shape drawable)

Circle Image Button Source As Color Resource

<com.litekite.widget.CircleImageButton
  ...
  style="@style/Widget.AppCompat.ImageButton"
  app:srcCompat="@android:color/black"
  ... />
  1. Background and image source with color resource as a circle with inner padding (An alternative way is to use shape drawable with oval type, stroke and shape color)

Circle Image Button Background And Source As Color Resource

<com.litekite.widget.CircleImageButton
  ...
  style="@style/Widget.AppCompat.ImageButton"
  android:background="@android:color/holo_red_light"
  app:innerPadding="10dp"
  app:srcCompat="@android:color/black"
  ... />
  1. Background and image source with color resource as a circle with inner padding plus ripple effect

Circle Image Button Background And Source As Color Resource Plus Ripple Effect

<com.litekite.widget.CircleImageButton
  ...
  style="@style/Widget.AppCompat.ImageButton"
  android:background="@android:color/holo_red_light"
  app:innerPadding="10dp"
  app:rippleDrawable="@drawable/drawable_ripple"
  app:srcCompat="@android:color/black"
  ... />

  <!--Ripple drawable-->
  <ripple xmlns:android="http://schemas.android.com/apk/res/android"
      android:color="#50000000" android:radius="54dp" />
  1. Profile drawable image plus background plus ripple effect

Profile Drawable Image Plus Background Plus Ripple Effect

<com.litekite.widget.CircleImageButton
  ...
  style="@style/Widget.AppCompat.ImageButton"
  android:background="@android:color/black"
  app:innerPadding="5dp"
  app:rippleDrawable="@drawable/drawable_ripple"
  app:srcCompat="@drawable/ic_preview_user_avatar"
  ... />
  1. Profile drawable image plus transparent background plus ripple effect

Profile Drawable Image Plus Background Plus Ripple Effect

<com.litekite.widget.CircleImageButton
  ...
  style="@style/Widget.AppCompat.ImageButton"
  android:background="@android:color/transparent"
  app:rippleDrawable="@drawable/drawable_ripple"
  app:srcCompat="@drawable/ic_preview_user_avatar"
  ... />

Download

  1. Add the maven central repo in your root build.gradle at the end of repositories:
buildscript {
    ...
    repositories {
        ...
        mavenCentral()
        ...
    }
    ...
}
...
allprojects {
  repositories {
    ...
    mavenCentral()
    ...
  }
}
  1. Add the dependency in your app build.gradle:
dependencies {
  implementation 'com.github.litekite:android-widgets:0.0.7'
}

License


Copyright 2021 LiteKite Startup.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

android-widgets's People

Contributors

svignesh93 avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar

android-widgets's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.