androidandroid-layoutmain-activity

how to create a helper screen in android


I want to get an helper screen over main activity for user to guide how to use the app.

This is my main activity.

This is my main activity

Output: This is how I want to show helper screen to user.

This is want I want show to user's while using my app

This is my main_activity.xml file consists this code.

<?xml version="1.0" encoding="utf-8"?>
<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">


    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        android:id="@+id/button"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
</RelativeLayout>

This is my mainactivity java class file consist of this code.

public class MainActivity extends AppCompatActivity {

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

    @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);//Menu Resource, Menu
        return true;
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.clipboard:
                Toast.makeText(getApplicationContext(),"Text Copied",Toast.LENGTH_LONG).show();
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }
}

This is the main_menu.xml file looks like this.

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity">

    <item
        android:id="@+id/clipboard"
        android:icon="@drawable/ic_content_copy_white_48dp"
        android:orderInCategory="100"
        android:title="Clip Board"
        app:showAsAction="always" />

</menu>

Solution

  • I have done some modifications in your code.

    Here is the activity_main.xml look's like

    <?xml version="1.0" encoding="utf-8"?>
    <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"
        tools:context="eflair.helperscreentutorial.MainActivity">
    
    
        <Button
            android:id="@+id/newButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:text="New Button" />
    
        <FrameLayout
            android:id="@+id/fullScreenLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </RelativeLayout>
    

    Here is the MainActivity.java look's like

    public class MainActivity extends AppCompatActivity {
    
        private FrameLayout fullScreenLayout;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            fullScreenLayout = (FrameLayout) findViewById(R.id.fullScreenLayout);
    
            final RelativeLayout layout = new RelativeLayout(this);         // Dynamically creating layout
            layout.setLayoutParams(new RelativeLayout.LayoutParams(ViewGroup.LayoutParams
                    .MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
            layout.setBackgroundColor(Color.DKGRAY);                        // Setting bgcolor to the layout
            layout.setAlpha(0.5f);                                          // Setting opacity to the layout
            layout.setBackgroundResource(R.drawable.helperscreen);          // Adding image to layout
            layout.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    fullScreenLayout.removeView(layout);                    // On clicking the image layout will be removed
                }
            });
            fullScreenLayout.addView(layout);                               // Adding view to the layout
    
        }
    
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            getMenuInflater().inflate(R.menu.main, menu);
            return true;
        }
    
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
            switch (item.getItemId()) {
                case R.id.cb:
                    Toast.makeText(getApplicationContext(), "Text Copied", Toast.LENGTH_LONG).show();
                    return true;
                default:
                    return super.onOptionsItemSelected(item);
            }
        }
    }
    

    You need to create image like this, that i'm using in this example. enter image description here

    And here is the output.

    enter image description here