How to turn off Ripple Animation on Tabs [Android]?

Question

How do I turn Off Ripple Animation only for the Tabs ? I have tried to change this in the Config File

 activator : "highlight"

But that sets no highlight to all buttons.

I want to turn off Ripple Animation just for Tabs ?

EDIT 1:

I wanted to remove the effect for the ion-tabs

<ion-tabs>
 <ion-tab [root]="tab1Root" tabIcon="people"></ion-tab>
 <ion-tab [root]="tab2Root" tabIcon="paper"></ion-tab>
 <ion-tab [root]="tab3Root" tabIcon="settings"></ion-tab>
</ion-tabs>

Answer 1

You can do it as shown below inside the app.module.ts file.

Globally

app.module.ts

 IonicModule.forRoot(MyApp, {
    platforms: { 
      android: { 
        activator: 'none' 
     } 
  } 
}

Only for ion-tab:

You have to deal with CSS hack here on page component.No framework-level support for this.

.html

<ion-tabs>
 <ion-tab [root]="tab1Root" tabIcon="people" class="disable-ripple"></ion-tab>
 <ion-tab [root]="tab2Root" tabIcon="paper" class="disable-ripple"></ion-tab>
 <ion-tab [root]="tab3Root" tabIcon="settings" class="disable-ripple"></ion-tab>
</ion-tabs>

.scss

.ios,
.md,
.wp {
    .disable-ripple ion-tab-effect {
       display: none;
    }
}

Answer 2

In Ionic 4, buttons have a CSS custom properties so you can do:

.disable-ripple {
    --ripple-color: transparent;

  &:hover {
      background: unset !important;
  }
}