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
