Databases
StackOverflow2013
Postsdbo
POAndroid actionbar: Custom fade animation on tab icon and title
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAndroid actionbar: Custom fade animation on tab icon and title
    primarykey
    data
    text
    <p>I'm trying to make a custom animation that works pretty much the same way the tumblr android app works using the standard actionbar. (Not fading of the content of the tabs) I'm pretty close to getting it working but I have troubles fixing the last part. Maybe someone here can help me in the right direction to get this working. </p> <p>EDIT: Image to show what I mean: <a href="http://postimg.org/image/nrzg3bbv9/b56b7766/" rel="nofollow">IMAGE</a></p> <p>What I have.</p> <p>In onCreate I add some custom views for the tabs:</p> <pre><code> actionBar = getActionBar(); actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); actionBar.setDisplayShowTitleEnabled(false); actionBar.setDisplayUseLogoEnabled(false); actionBar.setDisplayShowHomeEnabled(false); actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM); mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager()); final CustomPageTransformer cpt = new CustomPageTransformer(); mViewPager = (ViewPager) findViewById(R.id.pager); mViewPager.setAdapter(mSectionsPagerAdapter); mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() { @Override public void onPageSelected(int position) { actionBar.setSelectedNavigationItem(position); cpt.currentItem = position; } }); mViewPager.setPageTransformer(true, cpt); CustomTabView tabNews = new CustomTabView(this, mSectionsPagerAdapter.getPageTitle(0).toString(), mSectionsPagerAdapter.getIcon(0)); CustomTabView tabEvents = new CustomTabView(this, mSectionsPagerAdapter.getPageTitle(1).toString(), mSectionsPagerAdapter.getIcon(1)); CustomTabView tabContacts = new CustomTabView(this, mSectionsPagerAdapter.getPageTitle(2).toString(), mSectionsPagerAdapter.getIcon(2)); CustomTabView tabClub = new CustomTabView(this, mSectionsPagerAdapter.getPageTitle(3).toString(), mSectionsPagerAdapter.getIcon(3)); actionBar.addTab(actionBar.newTab().setCustomView(tabNews).setTabListener(this).setTag(0)); actionBar.addTab(actionBar.newTab().setCustomView(tabEvents).setTabListener(this).setTag(1)); actionBar.addTab(actionBar.newTab().setCustomView(tabContacts).setTabListener(this).setTag(2)); actionBar.addTab(actionBar.newTab().setCustomView(tabClub).setTabListener(this).setTag(3)); </code></pre> <p>The CustomTabView looks like this, where I've added two custom view so I can easily set the alpha of the views:</p> <pre><code>public class CustomTabView extends RelativeLayout { AlphaTextView text1; AlphaImageView icon1; int alpha; public CustomTabView(Context context, String text, Drawable icon) { super(context); init(context, text, icon); } public CustomTabView(Context context, AttributeSet attrs) { super(context, attrs); init(context, null, null); } public CustomTabView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); init(context, null, null); } private void init(Context context, String text, Drawable icon) { LayoutInflater inflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE); inflater.inflate(R.layout.tab_view, this, true); text1 = (AlphaTextView) findViewById(R.id.title); text1.setTypeface(Font.rMedium(context)); text1.setText(text); icon1 = (AlphaImageView) findViewById(R.id.icon); icon1.setImageDrawable(icon); setTheAlpha(128); } public void setTheAlpha(int aleph) { this.alpha = aleph; if (alpha &lt; 128) alpha = 128; if (alpha &gt; 255) alpha = 255; text1.onSetAlpha(alpha); icon1.onSetAlpha(alpha); } public int getTheAlpha() { return alpha; } } </code></pre> <p>Then there is the problem, the CustomPageTransformer:</p> <pre><code>public class CustomPageTransformer implements ViewPager.PageTransformer { public int currentItem = 0; View currentView = null; public CustomTabView tabNews = null; public CustomTabView tabEvents = null; public CustomTabView tabContacts = null; public CustomTabView tabClub = null; @Override public void transformPage(View view, float position) { if (position != 0.0 &amp;&amp; position != 1.0 &amp;&amp; position != 2.0 &amp;&amp; position != -1.0) { if (currentView == null) { currentView = view; Log.e("First number", String.valueOf(position)); } } else if (position == 0.0 || position == 1.0 || position == 2.0 || position == -1.0 || position == -2.0) currentView = null; if (view == currentView) { int alphaCurrent = (int) (255 - (128*Math.abs(position))); if (alphaCurrent &gt; 255) alphaCurrent = 255; else if (alphaCurrent &lt; 128) alphaCurrent = 128; int alphaNext = (int) (128 + (128*Math.abs(position))); if (alphaNext &gt; 255) alphaNext = 255; else if (alphaNext &lt; 128) alphaNext = 128; if (tabNews != null &amp;&amp; tabEvents != null &amp;&amp; tabContacts != null &amp;&amp; tabClub != null) { switch(currentItem) { case 0: if (position &lt;= -1) { tabNews.setTheAlpha(128); tabEvents.setTheAlpha(255); } else if (position &lt;= 0) { tabNews.setTheAlpha(alphaCurrent); tabEvents.setTheAlpha(alphaNext); } break; case 1: if (position &lt;= -1) { tabEvents.setTheAlpha(128); tabContacts.setTheAlpha(255); } else if (position &lt;= 0) { tabEvents.setTheAlpha(alphaCurrent); tabContacts.setTheAlpha(alphaNext); } else if (position &lt;= 1) { tabEvents.setTheAlpha(alphaCurrent); tabNews.setTheAlpha(alphaNext); } else if (position &gt; 1) { tabEvents.setTheAlpha(128); tabNews.setTheAlpha(255); } break; case 2: if (position &lt;= -1) { tabContacts.setTheAlpha(128); tabClub.setTheAlpha(255); } else if (position &lt;= 0) { tabContacts.setTheAlpha(alphaCurrent); tabClub.setTheAlpha(alphaNext); } else if (position &lt;= 1) { tabContacts.setTheAlpha(alphaCurrent); tabEvents.setTheAlpha(alphaNext); } else if (position &gt; 1) { tabEvents.setTheAlpha(255); tabContacts.setTheAlpha(128); } break; case 3: if (position &lt;= 1) { tabClub.setTheAlpha(alphaCurrent); tabContacts.setTheAlpha(alphaNext); } else if (position &gt; 1) { tabClub.setTheAlpha(128); tabContacts.setTheAlpha(255); } break; } } } } } </code></pre> <p>The <a href="http://developer.android.com/reference/android/support/v4/view/ViewPager.PageTransformer.html" rel="nofollow">transformPage</a> method gets (View &amp; Position). The view is always the fragment you are going to and from in the viewpager, so every second time I have a positive value in position and then the next a negative value depending on which direction you are sliding. </p> <p>First I thought I could use the view to determine which the current tab is and what direction I'm going in by taking whatever view comes first, but that seems to be random. </p> <p>And since the position value jumps from negative to positive it generates a bit of a random fading result in the tabs. </p> <p>Any ideas of how I can get this to work smoothly?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USjust_user
    1. USjust_user
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POAndroid actionbar: Custom fade animation on tab icon and title
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POAndroid actionbar: Custom fade animation on tab icon and title
      1. USDehan Wjiesekara
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload