Git Product home page Git Product logo

materialshadows's Introduction

MaterialShadows

Platform API License: MIT

A library for seamlessly integrating Material shadows. The library takes existing material shadows to next level by adding the following features :

  • Convex shadows : The shadows are not only rectangular or circular, they can take any convex shape depending on the view and its content.
  • Support for shadow offsets : The library allows developers to set X and Y offset for the shadows.
  • Support for shadow intensity : The library also has support for setting shadow intensity via shadowAlpha attribute.
  • Shadows for semi-transparent views : The library allows shadows for semi-transparent views.

Usage

Just add the following dependency in your app's build.gradle

dependencies {
      compile 'com.sdsmdg.harjot:materialshadows:1.0.0'
}

How does this work ?

The MaterialShadowViewWrapper is an extension of Relative Layout. All the child views go through the same process of generating shadow as given below :

  1. First a bitmap is generated from the drawing cache of the view.
  2. The bitmap is traversed pixel by pixel to remove all transparent pixels and get a list of points corresponding to the actual outline of the content of the view.
  3. Since the points corresponding to outline may give a concave path, hence GrahamScan algorithm is used to generate a convex hull of the outline points.
  4. A path is created from the points of the resulting convex hull.
  5. This path is passed to a CustomViewOutlineProvider object that is later attached to the view itself.
  6. Hence we get a convex shadow for any type of view based on its content.

Example Usage 1 (Simple)

XML

<com.sdsmdg.harjot.materialshadows.MaterialShadowViewWrapper
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:layout_width="130dp"
            android:layout_height="130dp"
            android:elevation="5dp"
            android:src="@drawable/poly" />

</com.sdsmdg.harjot.materialshadows.MaterialShadowViewWrapper>

Result

Example Usage 2 (Offset)

XML

<com.sdsmdg.harjot.materialshadows.MaterialShadowViewWrapper
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:shadowOffsetX="-15"
        app:shadowOffsetY="30">

        <ImageView
            android:layout_width="130dp"
            android:layout_height="130dp"
            android:elevation="10dp"
            android:src="@drawable/poly" />

</com.sdsmdg.harjot.materialshadows.MaterialShadowViewWrapper>

Result

Example Usage 3 (Shadow intensity)

XML

<com.sdsmdg.harjot.materialshadows.MaterialShadowViewWrapper
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:shadowOffsetX="-15"
        app:shadowOffsetY="30"
        app:shadowAlpha="0.9">

        <ImageView
            android:layout_width="130dp"
            android:layout_height="130dp"
            android:elevation="10dp"
            android:src="@drawable/poly" />

</com.sdsmdg.harjot.materialshadows.MaterialShadowViewWrapper>

Result

Example Usage 4 (Semi-transparent views)

XML

<com.sdsmdg.harjot.materialshadows.MaterialShadowViewWrapper
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:shadowOffsetX="-30"
        app:shadowOffsetY="30">

        <ImageView
            android:layout_width="130dp"
            android:layout_height="130dp"
            android:elevation="10dp"
            android:background="#55000000" />

</com.sdsmdg.harjot.materialshadows.MaterialShadowViewWrapper>

Result

Documentation

XML attribute Java set methods Description Default Value
shadowOffsetX setOffsetX(...) Set the X-offset of the shadow 0.0f
shadowOffsetY setOffsetX(...) Set the Y-offset of the shadow 0.0f
shadowAlpha setShadowAlpha(...) Set the value of shadow intensity (alpha) 1.0f

Limitations

  1. Since the bitmap is traversed pixel by pixel, the performance for large views is bad. Hence the use of the library is limited to small views.
  2. Currently the shadow is generated only for direct children of the MaterialShadowViewWrapper. Hence if the desired views are placed inside a Linear Layout or some other view group, then each view must be wrapped by a seperate MaterialShadowViewWrapper. This doesn't affect the performance as the number of operations are still the same, but affects the quality of code.
  3. Each child of MaterialShadowViewWrapper is assigned same offset and shadow intensity. If fine control over every view's shadow is required then it must be wrapped inside its own MaterialShadowViewWrapper. Again this doesn't affect the performance, just the quality of code.

License

MaterialShadows is licensed under MIT license. View license.

materialshadows's People

Contributors

harjot-oberai avatar

Stargazers

NGUYEN THONG avatar Mayur Solanki avatar

Watchers

ligi avatar James Cloos avatar  avatar

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.