Skip to content

LiteKite/Android-Widgets

Repository files navigation

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.