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.