How to add a ShowcaseView that pops up only for the first time to show how to use our app?

Question

I wanted to do some thing like this as shown in image below,Is there any widget to do this or we need to add a view & make it transparent.

Thanks . enter image description here

you must be create a custom view for it and make it transparent :) — Farhan Shah, Mar 07 '14 at 11:21
You can create a `View` or you can keep them as `Image` and show that in frameLayout. when user touches the screen, `onUserInteraction` method will be called. Save a boolean value in preference whether the user clicked the view. You can check the preference for showing the second time — Rethinavel, Mar 07 '14 at 11:27
ok tell me that..the view is automatically hide after some time or when you click on it then it is hide? — Farhan Shah, Mar 07 '14 at 11:39
@Uday check my edited answer..i make it for you..replace the dimmy images with the orignal images hope it's work :) — Farhan Shah, Mar 07 '14 at 11:57

Farhan Shah · Accepted Answer · 2014-03-07T11:54:45.287

you must be create a custom view for it and make it transparent..

Main Activity:

import android.os.Bundle;
import android.os.Handler;
import android.app.Activity;
import android.app.Dialog;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.ColorDrawable;
import android.view.Menu;
import android.view.View;
import android.view.Window;
import android.view.View.OnClickListener;
import android.widget.RelativeLayout;

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    initPopup();
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}

public void initPopup() {


    final Dialog view = new Dialog(this);

    view.requestWindowFeature(Window.FEATURE_NO_TITLE);
    view.getWindow().setBackgroundDrawable(
            new ColorDrawable(android.graphics.Color.TRANSPARENT));
    view.setContentView(R.layout.transparent_layout);
    view.setCanceledOnTouchOutside(true);

    view.show();

    RelativeLayout rl_chooseone_menu_main = (RelativeLayout) view
            .findViewById(R.id.rl_chooseone_menu_main);



    rl_chooseone_menu_main.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
            // TODO Auto-generated method stub
            view.dismiss();
        }
    });

    /*Handler handler = null;
    handler = new Handler();
    handler.postDelayed(new Runnable() {
        public void run() {
            view.cancel();
            view.dismiss();
        }
    }, 3000);*/
}

}

activity_main.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/hello_world" />

</RelativeLayout>

This is the Transparent View name is transparent_layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/transparent" >

<RelativeLayout
    android:id="@+id/rl_chooseone_menu_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="15dp"
    android:layout_marginLeft="15dp"
    android:layout_marginRight="15dp"
    android:layout_marginTop="10dp" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/imageView1"
        android:layout_marginRight="30dp"
        android:text="Tap to view all" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="20dp"
        android:src="@drawable/ic_launcher" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="26dp"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/imageView2"
        android:layout_alignRight="@+id/imageView2"
        android:text="Tap to place your order" />

  </RelativeLayout>

</RelativeLayout>

Enjoy Brother,i have used dimmy images,replace it with your own images..

u have the images of the hands? – Farhan Shah Mar 07 '14 at 11:30 — Farhan Shah, Mar 07 '14 at 11:30

score 0 · Answer 2 · answered Mar 07 '14 at 11:30

You could make a tutorial Activity with a semi-transparent background, containing ImageViews and/or TextViews as shown in your example.

Tutorial activity's layout

<LinearLayout ...
    android:background="@color/semitransparent"
    ... >

    ...

colors.xml

...
<color name="semitransparent">#80000000</color>
...

Then just start it on top of your usual Activity if you notice this is the first launch of your app by the user.

How to add a ShowcaseView that pops up only for the first time to show how to use our app?

2 Answers2

Linked