Android Animation | Day and Night Mode | Dark and Night Switch

In this tutorial, we’re going to create a day and night switch animation in android. It is similar to dark and night mode in android.

Steps

1. For day and night switch mode we need to add one prerequisite and dependency

Prerequisite

allprojects {
repositories {

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

Dependency

dependencies {

implementation 'com.github.Mahfa:DayNightSwitch:1.2.1'

}

2. Create Day and Night background

For that, we need to create two separate drawable files (res > drawable > New Drawable Resource File).

Below are the two separate drawable files for day and night background.

day_bg.xml

<?xml version=”1.0" encoding=”utf-8"?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android">

<gradient
android:angle=”90"
android:startColor=”#06FFFF”
android:endColor=”#00ADFF”/>

</shape>

night_bg.xml

<?xml version=”1.0" encoding=”utf-8"?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android">

<gradient
android:angle=”90"
android:startColor=”#9AB4E7"
android:endColor=”#4E426A”/>

</shape>

  • *You can also, change its colors.

3. Create the main layout file

First, import the required images for day and night. You can also download the images used here from below.

Then we need to create views, one for the night and another for the day. Then add the images and day and night switch.

activity_main.xml

<androidx.constraintlayout.widget.ConstraintLayout 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">

<View

android:layout_width="match_parent"

android:layout_height="match_parent"

android:id="@+id/night_bg"

android:background="@drawable/night_bg"/>

<View

android:layout_width="match_parent"

android:layout_height="match_parent"

android:id="@+id/day_bg"

android:background="@drawable/day_bg"/>

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/sun"

android:src="@drawable/sun"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias=".9"

app:layout_constraintHorizontal_bias=".9"/>

<ImageView

android:id="@+id/night_landscape"

android:layout_width="match_parent"

android:layout_height="250dp"

android:scaleType="fitXY"

android:src="@drawable/night_review"

app:layout_constraintVertical_bias="1"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"/>

<ImageView

android:id="@+id/day_landscape"

android:layout_width="match_parent"

android:layout_height="250dp"

android:scaleType="fitXY"

android:src="@drawable/day_review"

app:layout_constraintVertical_bias="1"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"/>

<com.mahfa.dnswitch.DayNightSwitch

android:id="@+id/day_night_switch"

android:layout_width="76dp"

android:layout_height="40dp"

android:layout_gravity="center"

android:layout_marginTop="10dp"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="@id/night_bg"/>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="120dp"

android:fontFamily="@font/poppins_semibold"

android:gravity="center"

android:text="Visit www.gbandroidblogs.com \n Follow my page"

android:textColor="@android:color/white"

android:textSize="17sp"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toBottomOf="@id/day_night_switch" />

</androidx.constraintlayout.widget.ConstraintLayout>

4. Create a Main Java file

Now we need to set the views with the switch. When switched to night mode the view should also be switched to night and vice-versa.

MainActivity.java

public class MainActivity extends AppCompatActivity {

ImageView sun, dayland, nightland;
View daySky, nightSky;
DayNightSwitch dayNightSwitch;

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

sun = findViewById(R.id.
sun);
dayland = findViewById(R.id.
day_landscape);
nightland = findViewById(R.id.
night_landscape);
daySky = findViewById(R.id.
day_bg);
nightSky = findViewById(R.id.
night_bg);
dayNightSwitch = findViewById(R.id.
day_night_switch);

sun.setTranslationY(-110);

dayNightSwitch.setListener(new DayNightSwitchListener() {
@Override
public void onSwitch(boolean is_night) {
if (is_night){
sun.animate().translationY(110).setDuration(1000);
dayland.animate().alpha(0).setDuration(1300);
daySky.animate().alpha(0).setDuration(1300);
} else {
sun.animate().translationY(-110).setDuration(1000);
dayland.animate().alpha(1).setDuration(1300);
daySky.animate().alpha(1).setDuration(1300);
}
}
});

}
}

Output

Download the full code with images. Click Here

If you find it helpful then show some love by click on the clap icon and visit www.gbandroidblogs.com

Happy Coding!!

--

--

--

Hi everyone, myself Golap an Android app developer with UI/UX designer.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Java vs. Kotlin: Which is the Better Option for Android App Development?

Load error handling in ExoPlayer

Game guardian how to root

How to create Rotating Text in android | Android Studio | Java

Room Database with Kotlin Coroutines in Android

Multiple ways of defining Clean Architecture layers

How to create a basic Emoji Keyboard in Android

Setup Android Automation Test

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Golap Gunjan Barman

Golap Gunjan Barman

Hi everyone, myself Golap an Android app developer with UI/UX designer.

More from Medium

How To Create Listview — android

Android Swiperefreshlayout with MotionLayout

Create horizontal RecylerView in android

Add flavors to your android builds