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

Prerequisite

allprojects {
repositories {

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

Dependency

dependencies {

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

}

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.

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>

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

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

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