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 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 referenceSeekBar seekBar =(SeekBar)findViewById(R.id.seekBarShadow); // getting longShadow referenceLongShadow longShadow =(LongShadow)findViewById(R.id.longShadow); // seekBar change listener for changing the shadow angleseekBar.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:
