eriffanani / ContentLoader

Android library for creating loading view like shimmer animation.

Content Loader

This library was created to make it easier for android developers to create placeholders before data or content is displayed. This library can also be combined with ('com.facebook.shimmer:shimmer:0.5.0') as a placeholder view component.

Installation

repositories

maven { url 'https://jitpack.io' }

dependencies

implementation 'com.github.eriffanani:ContentLoader:1.2.0'

Example results

How To Use

<com.erif.contentloader.LoaderContainer
    android:id="@+id/content_loader"
    style="@style/ContentLoader.AutoStart">
  
    <com.erif.contentloader.LoaderView
        style="@style/Loader.Square.Small"/>
  
</com.erif.contentloader.LoaderContainer>

<YourContentView
    android:id="@+id/content_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Java

YourContentView contentView = findViewById(R.id.content_view);
ContentLoaderFrameLayout loader = findViewById(R.id.content_loader);
// Do your process
loader.startAndHideContent(contentView);
// When process finished
loader.stopAndShowContent(contentView);

Kotlin

val contentView: YourContentView = findViewById(R.id.content_view);
val loader: ContentLoaderFrameLayout = findViewById(R.id.content_loader);
// Do your process
loader.startAndHideContent(contentView);
// When process finished
loader.stopAndShowContent(contentView);

ContentLoaderFrameLayout

<com.erif.contentloader.LoaderView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:autoStart="true"
    android:duration="1000"/>

ContentLoaderView

• General

<com.erif.contentloader.LoaderView
    android:layout_width="100dp"
    android:layout_height="30dp"
    android:layout_margin="10dp"
    app:viewShape="rounded"
    app:cornerRadius="15dp"
    android:color="@color/purple_500"/>

Results

• With Library Styles (Square, Rounded, Circle, Text)

<com.erif.contentloader.LoaderView
    styles="@style/Loader.Circle"/>

Result

• Banner

<com.erif.contentloader.LoaderViewBanner
    android:layout_width="match_parent"
    android:layout_height="150dp"
    app:bannerPeep="leftAndRight"
    android:padding="12dp"
    app:peepPaddingVertical="18dp"
    app:cornerRadius="15dp"/>

Result

Best practice to use this library for list or recyclerview

• create new layout (ex: content_loader_item.xml)
• create your own content loader view

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="10dp"
    android:gravity="center_vertical">
    <com.erif.contentloader.LoaderView
        style="@style/Loader.Square.Small"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center_vertical"
        android:layout_marginStart="10dp">
        <com.erif.contentloader.LoaderView
            style="@style/Loader.Text"/>
        <com.erif.contentloader.LoaderView
            style="@style/Loader.Text.Subtitle.Medium"
            android:layout_marginTop="5dp"/>
    </LinearLayout>
</LinearLayout>

• create new layout (ex: content_loader.xml)
• include content_loader_item.xml into content_loader.xml

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <include layout="@layout/content_loader_item"/>
    <include layout="@layout/content_loader_item"/>
    <include layout="@layout/content_loader_item"/>
</LinearLayout>

• include content_loader.xml into your activity_main.xml

<com.erif.contentloader.LoaderContainer
    android:id="@+id/content_loader"
    style="@style/ContentLoader.Match.AutoStart">
    <include layout="@layout/content_loader"/>
</LinearLayout>

Result

• if you still don't understand the use of this library, please download this project for you to learn more.

Information

This library is still being developed further, please provide feedback if you find a bug. Thank you

Licence

Copyright 2022 Mukhammad Erif Fanani

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.