How to Add Florent LongShadow to Android App?

LongShadow is an Android library that allows us to easily a long shadow to different views in Android Studio. We can use long shadows to make the app more attractive and engaging. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language. 

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Before going to the coding section first do some pre-task

Go to app > res > values > colors.xml file and set the colors for the project.

XML

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <color name="colorPrimary">#0F9D58</color>
    <color name="colorPrimaryDark">#0F9D58</color>
    <color name="colorAccent">#05af9b</color>

</resources>

Go to Gradle Scripts > build.gradle (Module: app) section and import the following dependencies and click the “sync Now” on the above pop-up.

implementation ‘com.github.florent37:longshadow:1.0.1’

Step 3: Designing the UI

In the activity_main.xml remove the default Text View and change the layout to Relative layout and add the LongShadow and inside it, we add a TextView and ImageView ( we can add as many layouts inside it, from 1 to n layouts )  and inside the relative layout, we also add a SeekBar ( which we use to change the angle of the shadow ) as shown below. Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. 

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!-- Long Shadow Container View  -->
    <com.github.florent37.longshadow.LongShadow
        android:id="@+id/longShadow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:background="@color/colorPrimary"
        app:shadow_angle="45"
        app:shadow_color="@color/colorAccent">

        <!-- simple android text view -->
        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="120dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="hello world :)"
            android:textColor="#FFF"
            android:textSize="30sp" />

        <!-- simple android image view -->
        <ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_gravity="right|center"
            android:layout_marginEnd="20dp"
            android:src="@mipmap/ic_launcher" />

    </com.github.florent37.longshadow.LongShadow>

    <!-- simple seek bar to change the shadow angle
         of the LongShadow -->
    <SeekBar
        android:id="@+id/seekBarShadow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginBottom="80dp"
        android:max="360" />

</RelativeLayout>

Properties of LongShadow

•  app:shadow_angle -> Used to set the angle of the shadow [ setShadowAngle(float value) method for java  ]
•  app:shadow_color -> Used to set the shadow color [ setShadowColor(int color) method for java ]

Step 4: Coding Part

Open the MainActivity.java file and inside onCreate() create and initialize the LongShadow and SeekBar  and add OnSeekBarChangeListener to SeekBar and inside its onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) set the value of long shadow angle as shown below 

Java

// getting Shadow seekBar reference
SeekBar seekBar =(SeekBar)findViewById(R.id.seekBarShadow);

// getting longShadow reference
LongShadow longShadow =(LongShadow)findViewById(R.id.longShadow);

// seekBar change listener for changing the shadow  angle
seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
           @Override
           public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                // change the shadow angle
                longShadow.setShadowAngle(progress);
           }

           @Override
           public void onStartTrackingTouch(SeekBar seekBar) {

           }

           @Override
           public void onStopTrackingTouch(SeekBar seekBar) {

       }
});

Below is the complete code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Java

import android.os.Bundle;
import android.widget.SeekBar;

import androidx.appcompat.app.AppCompatActivity;

import com.github.florent37.longshadow.LongShadow;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // getting Shadow seekBar reference
        SeekBar seekBar = (SeekBar) findViewById(R.id.seekBarShadow);

        // getting longShadow reference
        LongShadow longShadow = (LongShadow) findViewById(R.id.longShadow);

        // seekBar change listener for changing the shadow  angle
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                // change the shadow angle
                longShadow.setShadowAngle(progress);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });
    }
}

Output: