title: How do you create a transparent demo screen for an Android app?
body: <p>I'm trying to create a semi-transparent demo screen that is launched only when a user first installs my application.  Here's an example from the Pulse News app:</p>
  
  <p><strong>Galaxy Nexus</strong></p>
  
  <p><img src="https://i.stack.imgur.com/P3kzh.png" alt="Example screenshot from Pulse News on Galaxy Nexus"></p>
  
  <p><strong>Nexus One</strong></p>
  
  <p><img src="https://i.stack.imgur.com/Jji5T.png" alt="enter image description here"></p>
  
  <p>Instead of a 'tap-to-dismiss' feature, I want the user to be able to swipe through a couple of such transparent demo pages.  </p>
  
  <p>For my first attempt, I modified a sample from the <a href="http://viewpagerindicator.com/" rel="noreferrer">ViewPagerIndicator</a> library.  I used semi-transparent PNGs in ImageViews inside each of the view pager's fragments.  I then launched this as a 'demo activity' in the onCreate method of my 'main activity'.  </p>
  
  <p>Problem: The 'main activity'  could not be seen in the background - instead it was just black.  I tried the solutions <a href="https://stackoverflow.com/questions/2176922/how-to-create-transparent-activity-in-android">here</a>, but that didn't fix the problem.</p>
  
  <p>Is there a better approach to creating something like this, or am I on the right track?  </p>
  
  <p>I also had another related question which depends on how this is implemented.  I'm trying to overlay text and arrows such that they point at particular UI components in the background.  By using a PNG that has the text and arrows, it's likely that it will not scale properly on different devices.  I.e., the arrows may not necessarily point to the correct UI component in the background.  Is there a way to tackle this problem as well?</p>
  
  <p>Thanks!</p>
  
  <p>Here's my code for the first attempt:</p>
  
  <p><strong>DemoActivity.java</strong></p>
  
  <pre><code>public class DemoActivity extends FragmentActivity {
      DemoFragmentAdapter mAdapter;
      ViewPager mPager;
      PageIndicator mIndicator;
  
      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.demo_activity);
  
          mAdapter = new DemoFragmentAdapter(getSupportFragmentManager());
  
          mPager = (ViewPager)findViewById(R.id.pager);
          mPager.setAdapter(mAdapter);
          //mPager.setAlpha(0);
  
          UnderlinePageIndicator indicator = (UnderlinePageIndicator)findViewById(R.id.indicator);
          indicator.setViewPager(mPager);
          indicator.setFades(false);
          mIndicator = indicator;
      }
  
  }
  </code></pre>
  
  <p><strong>DemoFragmentAdapter.java</strong></p>
  
  <pre><code>class DemoFragmentAdapter extends FragmentPagerAdapter {
      protected static final int[] CONTENT = new int[] { R.drawable.demo1, R.drawable.demo2, R.drawable.demo3, R.drawable.demo4};
  
      private int mCount = CONTENT.length;
  
      public DemoFragmentAdapter(FragmentManager fm) {
          super(fm);
      }
  
      @Override
      public Fragment getItem(int position) {
          return DemoFragment.newInstance(CONTENT[position % CONTENT.length]);
      }
  
      @Override
      public int getCount() {
          return mCount;
      }
  
      public void setCount(int count) {
          if (count &gt; 0 &amp;&amp; count &lt;= 10) {
              mCount = count;
              notifyDataSetChanged();
          }
      } }
  </code></pre>
  
  <p><strong>DemoFragment.java</strong></p>
  
  <pre><code>public final class DemoFragment extends Fragment {
      private static final String KEY_CONTENT = "TestFragment:Content";
  
      public static DemoFragment newInstance(int content) {
          DemoFragment fragment = new DemoFragment();
          fragment.mContent = content;
          return fragment;
      }
  
      private int mContent;
  
      @Override
      public void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
  
          if ((savedInstanceState != null) &amp;&amp; savedInstanceState.containsKey(KEY_CONTENT)) {
              mContent = savedInstanceState.getInt(KEY_CONTENT);
          }
      }
  
      @Override
      public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  
          ImageView image = new ImageView(getActivity());
          image.setBackgroundResource(mContent);
  
          LinearLayout layout = new LinearLayout(getActivity());
          layout.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
          layout.setGravity(Gravity.CENTER);
          layout.addView(image);
  
          return layout;
      }
  
      @Override
      public void onSaveInstanceState(Bundle outState) {
          super.onSaveInstanceState(outState);
          outState.putInt(KEY_CONTENT, mContent);
      }
  }
  </code></pre>