How do I create the semi-transparent grey tutorial

Question

You know when you run an Android device for the first time (something you see a lot if you use the emulator) that there's a helpful little tutorial about how to use the launcher and add widgets, etc. I'm trying to find an example of this on Google, but I can't. I'm hoping you know what I mean. It's the one with the blue "okay" buttons at each step.

Anyway, I want to create one for my app, but I'm not sure which is the best way to go about doing it.

Do I create a Fragment that I can make semi-transparent on top of my regular activity and have it show up on only the first run?

Do I make a semi-transparent .png for each section of the tutorial and overlay it over the regular launcher activity on the first run?

If I do the latter, how can I adjust for all the various screen sizes? I could just render the image in Photoshop to various dimensions, but that won't cover all of them. If I go the fragment route, I can just say "match_parent" and not worry about it. But then I have to figure out how Fragments work, and they confuse the hell out of me.

Answer 1

You can try something like this

<LinearLayout ... >
<!-- your Normal layout goes here -->
<RelativeLayout android:id="@+id/tutorialView" android:background="#D0000000"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

        <ImageView android:src="@drawable/hint_menu" android:layout_alignParentLeft="true"
                   android:layout_centerVertical="true" android:layout_width="wrap_content"
                   android:layout_height="wrap_content"/>

    </RelativeLayout>
</LinearLayout>

And in your onCreate method

View tutorialView = findViewById(R.id.tutorialView);
        boolean tutorialShown = PreferenceManager.getDefaultSharedPreferences(MainActivity.this).getBoolean(Constants.PREF_KEY_TUT_MAIN, false);
        if (!tutorialShown) {
            tutorialView.setVisibility(View.VISIBLE);
        } else {
            tutorialView.setVisibility(View.GONE);
        }

        tutorialView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                v.setVisibility(View.GONE);
                PreferenceManager.getDefaultSharedPreferences(MainActivity.this).edit().putBoolean(Constants.PREF_KEY_TUT_MAIN, true).commit();
            }
        });

Answer 2

I think this open-source library is exactly what you're looking for:

Showcase View

You can grab the source code and setup instructions from GitHub.

Answer 3

There is an award-winning library for this called "FancyShowcaseView":

https://github.com/faruktoptas/FancyShowCaseView

Add to your project like this:

In the top-level build.gradle (not the module level):

allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}

In the module-level (app) build.gradle

dependencies {
    compile 'com.github.faruktoptas:FancyShowCaseView:1.0.0'
}

Then you can call:

new FancyShowCaseView.Builder(this)
        .focusOn(view)
        .title("Focus on View")
        .build()
        .show();

Answer 4

Use a hexadecimal color code, which consists of two digits for alpha and six for the color itself, like this:

android:background="#22FFFFFF"

It'll make it semi-transparent.

android:background="#c0000000" for more darkness

Edited

Generally hexadecimak color code structure is like '#FFFF'

For attaining transparency add two digits after '#' to any color code.

Eg : #110000, #220000, #330000.

The greater those two digits, the lesser transparency.

Answer 5

You don't need to use Photoshop. You can Use for example a LinearLayout with android:background="#50134BE8". This will make it transparent blue. You can place the layout on top of everything and hide it when the user is done. You can use any background color, but to make it transparent, place a number from 01 to FE, after the "#" symbol to change its transparency. Set the width and the height to fill_parent to occupy the whole area. Place this view directly in the main layout. Hope this helps.