How do you create a transparent demo screen for an Android app?

Question

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:

Galaxy Nexus

Nexus One

Instead of a 'tap-to-dismiss' feature, I want the user to be able to swipe through a couple of such transparent demo pages.

For my first attempt, I modified a sample from the ViewPagerIndicator 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'.

Problem: The 'main activity' could not be seen in the background - instead it was just black. I tried the solutions here, but that didn't fix the problem.

Is there a better approach to creating something like this, or am I on the right track?

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?

Thanks!

Here's my code for the first attempt:

DemoActivity.java

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;
    }

}

DemoFragmentAdapter.java

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 > 0 && count <= 10) {
            mCount = count;
            notifyDataSetChanged();
        }
    } }

DemoFragment.java

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) && 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);
    }
}

Answer 1

Put your demo info in a different activity and give it the following theme.

<style name="Transparent" parent="@android:style/Theme.NoTitleBar">
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowNoTitle">true</item>      
    <item name="android:backgroundDimEnabled">false</item>
</style>

If you're using ActionBarSherlock change parent to @style/Theme.Sherlock.

This will give you a transparent activity, so you will be able to see the activity below it.

Now I'm guessing you want a translucent background too.

In the xml layout (of your transparent activity) add:

android:background="#aa000000" 

The last 6 digits define the color: 000000 is black.

The first 2 define the opacity: 00 is 100% transparent, ff is 100% opaque. So choose something in between.

Answer 2

Have you looked at ShowcaseView? https://github.com/Espiandev/ShowcaseView.

Using this:

View showcasedView = findViewById(R.id.view_to_showcase);
ViewTarget target = new ViewTarget(showcasedView);
ShowcaseView.insertShowcaseView(target, this, R.string.showcase_title, R.string.showcase_details);

Answer 3

Pulse is using a RelativeLayout with four ImageView's and four TextView's. The text in the screen shot is all TextView's with their own custom font.

In your Manifest add the following to your Activity:

android:theme="@style/Theme.Transparent">

In to your outer RelativeLayout add:

android:background="#aa000000"

To your styles.xml file:

<style name="Theme.Transparent" parent="android:Theme">
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowIsFloating">false</item>
    <item name="android:backgroundDimEnabled">false</item>
</style>    

An example how to program the custom font you can find at:

https://github.com/commonsguy/cw-android/tree/master/Fonts/FontSampler/

The layout from the Hierarchy Viewer looks like this (the red box is the RelativeLayout container):

Answer 4

setContentView(R.layout.sample_main);
showOverLay();

private void showOverLay(){

    final Dialog dialog = new Dialog(context, android.R.style.Theme_Translucent_NoTitleBar);

    dialog.setContentView(R.layout.transparent);

    RelativeLayout layout = (RelativeLayout) dialog.findViewById(R.id.transparent);

    layout.setOnClickListener(new View.OnClickListener() {

        @Override

        public void onClick(View arg0) {

            dialog.dismiss();

        }

    });

    dialog.show();

}