Android: Help screen wizard to guide user

Question

First of all, I have done my search on SO and google but haven't got any desired solution which fits to my problem. And I am not asking to provide me the code. I want suggestions how I solve my problem.

So my problem is, I have to create help wizard for 2-3 activities to guide user through the activity screen. I have created the help screen but its not fitting to screen if I check it on different resolution phones, means the text and images which I am showing to guide user to how to operate the app.

So need some suggestions like how I create my screen.

Here are 2 solution which I am thinking of:

1. Create another activity with same layout.
2. Take high resolution screenshot of activity then modify it with adding text & images and show that image on screen.

Or if you have any other suggestion I would appreciate it.

One of my code for help wizard screen layout is:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_weight="0"
    android:background="@color/black_actionBar"
    android:gravity="center_vertical|left"
    android:visibility="invisible" >

    <LinearLayout
        android:layout_width="40dp"
        android:layout_height="match_parent"
        android:gravity="center" >

        <com.AppName.utils.ButtonRegularFont
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_weight="0"
            android:background="@drawable/back" />
    </LinearLayout>

    <com.AppName.utils.TextViewRegularFont
        style="@style/textviews_whiteFont_header"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_weight="1"
        android:ellipsize="end"
        android:gravity="center"
        android:lines="1"
        android:text="Images" />

    <com.AppName.utils.ImageViewSettings
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:src="@drawable/menu" />
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_weight="0"
    android:orientation="horizontal"
    android:visibility="invisible" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical" >

        <com.AppName.utils.ButtonRegularFont
            style="@style/tabView_button_style"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Hotel" />

        <View
            android:id="@+id/view_images_hotel"
            style="@style/viewLineDisabled"
            android:layout_width="match_parent" />
    </LinearLayout>

    <View
        style="@style/tabview_divider"
        android:layout_width="2dp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical" >

        <com.AppName.utils.ButtonRegularFont
            style="@style/tabView_button_style"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Rooms" />

        <View
            android:id="@+id/view_images_rooms"
            style="@style/viewLineDisabled"
            android:layout_width="match_parent" />
    </LinearLayout>
</LinearLayout>

<Spinner
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:layout_margin="5dp"
    android:layout_weight="0"
    android:background="@drawable/spinner_selector"
    android:prompt="@string/select_room"
    android:visibility="gone" />

<com.AppName.utils.ButtonRegularFont
    style="@style/buttonStyle"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:layout_margin="5dp"
    android:layout_weight="0"
    android:text="Add Image"
    android:visibility="invisible" />

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <org.askerov.dynamicgrid.DynamicGridView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="5dp"
        android:layout_weight="1"
        android:horizontalSpacing="1dp"
        android:numColumns="3"
        android:stretchMode="columnWidth"
        android:verticalSpacing="1dp" />

    <ImageView 
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:src="@drawable/arrow"/>

    <com.AppName.utils.TextViewCircular 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textColor="@color/white"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="120dp"
        android:textStyle="bold"
        android:textSize="18sp"
        android:text="To start dragging an image just long press on any image and then it can be editable to drag to any position."/>
</FrameLayout>

<com.AppName.utils.ButtonRegularFont
    style="@style/buttonStyle_CheckedList"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:layout_weight="0"
    android:text="Submit" />

Here is the image:

In above image the arrow is showing correctly with text but in some phone it won't show as it showing in the image.

Answer 1

There are many libraries that you can use to do this.

First-

Second-

Answer 2

Taking high resolution images will increase you APK size so its better not to go with it. To make a screen Wizard you can use ShowTipsView Library . so you will not have to use full screen images to show the wizard.