CODEWITHSUNDEEP
android
SkyWalker
SkyWalker

Reputation: 855

Android: Gardient animation in tab layout

This is the start screen when my app starts:

enter image description here

I want a increasing glow when tab is activated, and decreasing glow when tab left.

This is my selector file:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states -->
<item android:state_focused="false"
      android:state_selected="false"
      android:state_pressed="false"
      android:drawable="@drawable/reverse_animation" />
<item android:state_focused="false"
      android:state_selected="true"
      android:state_pressed="false"
      android:drawable="@drawable/animation" />

<!-- Focused states -->
<item android:state_focused="true"
      android:state_selected="false"
      android:state_pressed="false"
      android:drawable="@drawable/animation" />
<item android:state_focused="true"
      android:state_selected="true"
      android:state_pressed="false"
      android:drawable="@drawable/animation" />

<!-- Pressed -->
<item android:state_pressed="true"
      android:drawable="@drawable/pressed" />

This is my animation file:

<?xml version="1.0" encoding="utf-8"?>

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true" android:visible="true" >
<item
    android:drawable="@drawable/phase1"
    android:duration="20" />
 <item 
    android:drawable="@drawable/phase2" 
    android:duration="20" />    
<item 
    android:drawable="@drawable/phase3" 
    android:duration="20" />    
 <item 
    android:drawable="@drawable/phase4" 
    android:duration="20" />     
  <item 
    android:drawable="@drawable/phase5" 
    android:duration="20" />      
   <item 
    android:drawable="@drawable/phase6" 
    android:duration="20" />       
   <item 
    android:drawable="@drawable/phase7" 
    android:duration="20" />       
   <item 
    android:drawable="@drawable/phase8" 
    android:duration="20" />      
   <item 
    android:drawable="@drawable/phase9" 
    android:duration="20" />       
   <item 
    android:drawable="@drawable/phase10" 
    android:duration="20" />       
   <item 
    android:drawable="@drawable/phase11" 
    android:duration="20" />
   <item 
    android:drawable="@drawable/phase12" 
    android:duration="20" />

Problem is when app starts activated tab does not have glow, but the two other tabs have the glow.

I have use gradient in each phase file and increased radius in each of them. In reverse_animation file I starts with phase12 to phase1

This is phase1:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"     
android:shape="rectangle" >

<gradient 
    android:type="radial"
    android:gradientRadius="1"
    android:startColor="#DD02e4ff"
    android:centerY="-0.16" />

</shape>

Please I need help on default setting of the tab. The Audio tab should be glow, not the other tabs. I have tried so many possible combination in selector file, but not able to achieve this. Thanks!

Upvotes: 1

Views: 1692

Answers (1)

Tom Siwik
Tom Siwik

Reputation: 1012

  1. there is no android:visible="true" in animation-list see: here
  2. android:gradientRadius="1" is pretty small. it's a single dot you are moving above your shape ( android:centerY="-0.16" ). Try <solid android:color="#FF00FF00" /> to test if it's the gradients fault or give the radius a bigger value.
  3. Workaround: create a tween-animation with an AlphaAnimation and fadeIn your gradient-drawable.

Upvotes: 1

Related Questions