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

Android Overlay Function Example

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 with the release of every new OS. Similarly, with Android Overlay function, Android app designers are constantly designing user-friendly and creative app designs.

Therefore, today, in this step by step Android app development tutorial, we’ll be covering the implementation process of Android overlay function by creating a transparent demo screen to build an Android app more user-friendly.

Let’s Get Started

Open Android Studio and create a new project under the file menu.

create a new project

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>

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

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 eye-appealing UI, it’s important that you’ve knowledge and experience to use app design widgets. Moreover, there are many interesting uses of Android overlay permission. But, if you’re not a technical person, this job isn’t for you. Consult with expert people or hire Android app development company in case you have the app idea in mind to launch your startup.

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

You may also like,

This page was last edited on May 25th, 2020, at 5:46.

Author Bio

Amit Patolia

Amit Patolia

Designation: Android Team Lead

Amit Patolia is an Android Team Lead at Space-O Technologies. He has over 7 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.

 
 

Want to Develop Android App From Scratch? Contact Us Now

Get your free consultation now

3 thoughts on “Android App Tutorial: Using Android Overlay Function To Create Transparent Demo Screen in App

Leave a Reply

Your email address will not be published. Required fields are marked *