How To Add A Showcaseview That Pops Up Only For The First Time To Show How To Use Our App?

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 .

Solution 1:

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;

publicclassMainActivityextendsActivity {

@OverrideprotectedvoidonCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    initPopup();
}

@OverridepublicbooleanonCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    returntrue;
}

publicvoidinitPopup() {


    finalDialogview=newDialog(this);

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

    view.show();

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



    rl_chooseone_menu_main.setOnClickListener(newOnClickListener() {

        @OverridepublicvoidonClick(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"?><RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@android:color/transparent" ><RelativeLayoutandroid: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" ><TextViewandroid: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" /><ImageViewandroid: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" /><ImageViewandroid: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" /><TextViewandroid: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..

Solution 2:

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.