Screen visibility can sometimes be changed by adjusting the device's screen brightness. Most of the time, the quick menu is used to change the screen's Brightness. Using a Native plugin, we can programmatically change the Brightness of the screen in the Ionic app.
Here, we'll make a new Ionic app using the latest version of the Ionic CLI. The app will have Ionic's Native Brightness plugin and a control range slider that lets you change the Brightness of the Ionic App screen from within the app.
The screen brightness ranges from 0 to 1, so here we'll have a slider to change the number value, with 0 as the lowest and 1 as the highest.
Let's start by creating a new Ionic app...
Update Ionic CLI
First, ensure your system has the most recent version of Ionic CLI. Use the following CLI command to bring Ionic CLI up to date.
$ npm install -g @ionic/cliCreating An Ionic Framework Application
We will make a new Ionic app to show how Ionic Screen Brightness works. If you already have an app running, use that instead. Run the following CLI command to make a blank template for a new Ionic app.
# Create blank new ionic app:
$ ionic start ionic-screen-brightness-app blank --type=angular
# To Change directory
$ cd ionic-screen-brightness-app
Set up the Cordova and Native Brightness plugins
After making the app folder in CLI and moving to it, we'll install the Cordova and Ionic native plugins so that Brightness will work in the app.
To set up the native plugin, run the following CLI commands.
$ ionic cordova plugin add cordova-plugin-brightness
$ npm install @ionic-native/brightnessBrightness Plugin Import in App Module
We need to import Brightness and add the provider array to use the plugin. Open the app.module.ts file and then make the changes below.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { Brightness } from '@ionic-native/brightness/ngx';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
StatusBar,
SplashScreen,
Brightness,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}Add Brightness Control in Home Component
Change the Home Template:
In home.page.html, we'll add an Ionic UI range slider called ion range. This range slider will have options like min, max, step, debounce, and an ionChange event listener.
<ion-header>
<ion-toolbar>
<ion-title>
Brightness Control
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h5> Adjusting Screen brightness using Slider </h5>
Current brightness level is {{ brightnessModel }} / 1
<ion-list>
<ion-item>
<ion-range
min="0"
max="1"
step="0.01"
[(ngModel)]="brightnessModel"
(ionChange)="adjustBrightness()"
debounce="500"
>
<ion-icon size="small" slot="start" name="sunny"></ion-icon>
<ion-icon slot="end" name="sunny"></ion-icon>
</ion-range>
</ion-item>
</ion-list>
</ion-content>Change Home Class:
In the home.page.ts file, we'll get the slider range value and then call the adjustBrightness() method, which in turn calls the setBrightness() method to take a number value.
import { Component } from '@angular/core';
import { Brightness } from '@ionic-native/brightness/ngx';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
// predefined value
brightnessModel = 0.40;
constructor(private brightness: Brightness) {
// Set brightness on app load
this.brightness.setBrightness(this.brightnessModel);
}
adjustBrightness(){
// Called method from range's ionChange event
this.brightness.setBrightness(this.brightnessModel);
}
}Options & Methods:
The Brightness service also has other ways to do things.
getBrightness(success,error) reads how bright the screen is.
setKeepScreenOn(true) The screen stays on. It keeps the screen from going to sleep when the device goes to sleep.
Run an Ionic app:
You can now run it on an actual device to see how it works. After connecting the device to a PC with a USB cable, run the following command. It will start the app on the mobile device right away.
$ ionic cordova run android --deviceConclusion
That's the end of this tutorial, in which we learned how to change the screen's Brightness using Cordova and native plugins in Ionic 4|5 apps. Tell me in the comments below, and I'll help you. Don't forget to click "like" if you like the post.