Create Android App with Day Night Theme Mode example tutorial

How to use dark night mode theme inside android to relief user eyes with coding programmatically.

In this tutorial we are going to create an android application with Night and Day theme. This is a very interesting feature and most of android app users loved it because with this type of feature android uses can easily use app at night time without hurting their eyes. By default android apps has clear white background which can hurt eyes at night time and most of users were not able to use app at night time. So here is the complete step by step tutorial for Create Android App with Day Night Theme Mode example tutorial.

android-project-download-code-button

Create Android App with Day Night Theme Mode example tutorial.

Code for Styles.xml file.

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

    </style>

</resources>

Code for colors.xml file.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="nightBackground">#555555</color>
    <color name="dayBackground">#fffefe</color>
</resources>

Code for MainActivity.java file.

package com.android_examples.daynightmodetheme_android_examplescom;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.os.Handler;

public class MainActivity extends AppCompatActivity {

    Button daybutton,nightbutton ;
    ImageView imageView ;
    RelativeLayout relativeLayout ;
    Handler handler;
    Runnable runnable;

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

        daybutton = (Button)findViewById(R.id.button);

        nightbutton = (Button)findViewById(R.id.button2);

        imageView = (ImageView)findViewById(R.id.imageview1);

        relativeLayout = (RelativeLayout)findViewById(R.id.relativelayout1);

        daybutton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                DayThemeMode();

            }
        });



        nightbutton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                NightThemeMode();

            }
        });
    }

    public void DayThemeMode(){

        handler = new Handler();

        imageView.setImageResource(R.drawable.sun);

        imageView.setVisibility(View.VISIBLE);

        relativeLayout.setBackgroundColor(getResources().getColor(R.color.dayBackground));

        runnable = new Runnable() {

            @Override
            public void run() {

                //Hiding image after 4 seconds

                imageView.setVisibility(View.INVISIBLE);

            }
        };
        handler.postDelayed(runnable, 4000);

    }

    public void NightThemeMode(){

        handler = new Handler();

        imageView.setImageResource(R.drawable.moon);

        imageView.setVisibility(View.VISIBLE);

        relativeLayout.setBackgroundColor(getResources().getColor(R.color.nightBackground));

        runnable = new Runnable() {

            @Override
            public void run() {

                //Hiding image after 4 seconds

                imageView.setVisibility(View.INVISIBLE);

            }
        };
        handler.postDelayed(runnable, 4000);

    }
}

Code for activity_main.xml layout file.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.android_examples.daynightmodetheme_android_examplescom.MainActivity"
    android:id="@+id/relativelayout1">

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="ENABLE DAY MODE"
        android:id="@+id/button"
        android:layout_alignParentTop="true"
        android:layout_alignLeft="@+id/button2"
        android:layout_alignStart="@+id/button2" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="ENABLE NIGHT MODE"
        android:id="@+id/button2"
        android:layout_below="@+id/button"
        android:layout_centerHorizontal="true" />

    <ImageView
        android:layout_width="350dp"
        android:layout_height="350dp"
        android:id="@+id/imageview1"
        android:layout_below="@+id/button2"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

Screenshots:

Screenshot_20160805-195535

Create Android App with Day Night Theme Mode example tutorial

Click here to download Create Android App with Day Night Theme Mode example tutorial project with source code.

Leave a Reply

Your email address will not be published. Required fields are marked *