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

0
Shares
Android App Tutorial: Using Android Overlay Function To Create Transparent Demo Screen in App
3 (60%) 4 votes

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, 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.

screenshot-1

Select your target device and click on next.

screenshot-2

In the next tab, select Empty Activity.

screenshot-3

Lastly, customize the activity.

screenshot-4

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.

output_screen1

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 function. 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 demo from Github.

 
0
Shares
 

Want to Develop Android App From Scratch? Contact Us Now