Android App Tutorial: Using Android Overlay Function To Create Transparent Demo Screen in App

In any industry, trends always emerge from the present context. While some stick for years, while some disappear within a month or two. But, with mobile app design, trends are usually accompanied by the release of every new OS. Similarly, with the Android Overlay function, Android app designers are constantly designing user-friendly and creative app designs.

Therefore, today, in this step by step Android overlay app tutorial, we will be covering the implementation process of the Android overlay function by creating a transparent demo screen to build an Android app more user-friendly. So, let’s get started with this Android overlay tutorial.

Steps to Create Transparent Demo Screen in App

👉 First, open Android Studio, and create a new project under the file menu.

create new android project

👉 Now, select your target device and click on next.

select target device

👉 In the next tab, select Empty Activity.

select Empty Activity

👉 Lastly, customize the activity.

customize the activity

Start Code Integration

👉 Activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:orientation="vertical"
tools:context="com.showhintdemo.MainActivity">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- Toolbar instead of ActionBar so the drawer_menu can slide on top -->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/black"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentInsetStart="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="?attr/actionBarSize">
<ImageView
android:id="@+id/imgSettings"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:padding="8dp"
android:src="@drawable/settings" />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:singleLine="true"
android:text="HOME"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="@android:color/white"
android:textStyle="bold" />
<ImageView
android:id="@+id/imgMenu"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right"
android:padding="8dp"
android:src="@drawable/menu" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
<TextView
android:id="@+id/textMessage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Welcome to overlay demo"
android:textColor="@android:color/black"
android:textSize="22sp"
android:visibility="gone" />
</LinearLayout>
<RelativeLayout
android:id="@+id/rlOverlay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/img_transparent_bg">
<LinearLayout
android:id="@+id/llSettings"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_horizontal_margin"
android:src="@drawable/img_settings_indicator" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="Go to Settings"
android:textColor="@android:color/white"
android:textSize="22sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/llMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:visibility="gone">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="Open menu from here"
android:textColor="@android:color/white"
android:textSize="22sp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_horizontal_margin"
android:src="@drawable/img_menu_indicator" />
</LinearLayout>
<TextView
android:id="@+id/textHelp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="16dp"
android:layout_marginRight="16dp"
android:text="Next"
android:textColor="@android:color/white"
android:textSize="22sp" />
</RelativeLayout>
</FrameLayout>
</LinearLayout>

Want To Create An Android Application?

Validate your app idea and get a free quote.

👉 MainActivity.java

package com.showhintdemo;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private TextView textMessage;
private TextView textHelp;
private ImageView imgSettings;
private ImageView imgMenu;
private RelativeLayout rlOverlay;
private LinearLayout llSettings;
private LinearLayout llMenu;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initControls();
}
private void initControls() {
textMessage = (TextView) findViewById(R.id.textMessage);
textHelp = (TextView) findViewById(R.id.textHelp);
textHelp.setOnClickListener(this);
imgSettings = (ImageView) findViewById(R.id.imgSettings);
imgSettings.setOnClickListener(this);
imgMenu = (ImageView) findViewById(R.id.imgMenu);
imgMenu.setOnClickListener(this);
rlOverlay = (RelativeLayout) findViewById(R.id.rlOverlay);
llSettings = (LinearLayout) findViewById(R.id.llSettings);
llMenu = (LinearLayout) findViewById(R.id.llMenu);
}
@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.imgSettings:
Toast.makeText(this, "Settings icon clicked", Toast.LENGTH_LONG).show();
break;
case R.id.imgMenu:
Toast.makeText(this, "Menu icon clicked", Toast.LENGTH_LONG).show();
break;
case R.id.textHelp:
if (textHelp.getText().toString().equals("Next")) {
llSettings.setVisibility(View.GONE);
llMenu.setVisibility(View.VISIBLE);
textHelp.setText("Got It");
} else {
rlOverlay.setVisibility(View.GONE);
textMessage.setVisibility(View.VISIBLE);
}
break;
default:
break;
}
}
}

And done!

Now when you’ll launch the app for the first time, you’ll see the output like this.

Android Overlay Example

FAQs

What is an Android overlay function?

Also known as Draw on top, Android screen overlay enables you to display content over other apps.

Which Android apps use a screen overlay feature?

The screen overlay function is been used by a few leading apps, including Facebook Messenger, Twilight, and Lastpass.

Is there any way I can turn off the screen overlay function for an app?

Yes, you can turn off the screen overlay function by switching off display over other apps option from settings.

Conclusion

Though it’s just a part of mobile app design, there is a lot more to learn. And, to create an Android app from scratch with attractive UI, it’s important that you have knowledge and experience to use app design widgets. Moreover, there are many interesting uses of Android overlay permission. But, if you are not a technical person, this job can be difficult for you.

Therefore, the best idea is to consult with experts or hire an Android app development company that has hands-on experience in designing and developing Android apps. In case, if you have any Android app idea in mind that you want to convert into a successful application, you can discuss it with mobile applications development company like us. Just fill the given contact us form and one of our representatives will get back to you as soon as possible.

Grab a free copy of Transparent screen Android Overlay example from Github.

Author Bio
Amit Patolia
Amit Patolia
Designation: Android Team Lead

Amit Patolia is an Android Team Lead at Space-O Technologies. He has over 9+ years of experience in Android app development. He has guided to develop over 100 Android apps with unique features and functionalities. He also has expertise in Kotlin-based apps.