Let's follow the trend!
Employing Android Overlay Function for Creation of Transparent Demo Screen in App
Introduction
The continuous modernization trend is something that has become a part of life. Speaking randomly about any industry the trends are almost emerging every two to three days. Some of the trends make an everlasting impact while some last for a month and some not even for a week. The interesting thing about these trends is that once they start spreading their roots everyone around gets in the race to adapt to the trends. I think this is what makes it a "TREND".
Moving towards mobile apps, trends, and designs are always escorted by the launch of the new OS. The same is the scenario with the Android Overlay Functions, the designers of android apps are continuously coming up with imaginative and productive app designs. And the best part about these designs is that they are user friendly.
In the content ahead, there is a step by step tutorial regarding the execution of this process to create a transparent demo screen in an App.
What is Android Overlay?
There is a term, " Draw on Top " which is often referred to as a screen overlay in Android. To make things more clear, you can say that it is observing permission to an app to display over the other app. Have you seen the chat heads of Facebook Messenger, floating on your screen when you receive a message? Yes, correct, that is what Overlay Function is about.
Now we would jump into the step by step tutorial for creating a transparent demo screen in the app using Android Overlay Functions.
Here we go!
Creation of Transparent Demo Screen in App
- The very first step is to get into the Android Studio and then you need to create a new project in the file menu. Create the application name, company domain, and package name. Once all the info is filled, press next and move ahead.
- The target device is to be selected at this very step and then again press next.
Just keep moving.
- The next tab will consist of different types of activities. But the activity that you need to select is the Empty activity.
- Here comes the final step which is devoted to customization. The moment you are done hit
Code integration
Now, I have already created the project, and the name can be of your choice which you have already mentioned in the very first step while creating the demo screen.
Moving ahead to the most crucial section which is as follows,
- STEP 1
The very first step here is what you can see below, which is the XML type of layout of the MainActivity. In the very first RelativeLayout, there is information regarding the actual app.
The image references used are just used in the form of examples, they are not part of the tutorial. So need not worry!
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/main_layout" >
<!--Below activity widgets when the transparent layout is gone -->
<RelativeLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/gradient">
<include
android:id="@+id/include1"
layout="@layout/actionbar" />
<ImageView
android:id="@+id/ivPants"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="80dp"
android:paddingLeft="@dimen/padding10dp"
android:src="@drawable/pants" />
<ImageView
android:id="@+id/ivDressshirt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/tvLength"
android:layout_marginTop="55dp"
android:paddingLeft="@dimen/padding10dp"
android:src="@drawable/shirt" />
<ImageView
android:id="@+id/ivSweater"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/ivDressshirt"
android:layout_below="@+id/ivDressshirt"
android:layout_marginTop="57dp"
android:paddingLeft="@dimen/padding10dp"
android:src="@drawable/sweater" />
<ImageView
android:id="@+id/ivShoe"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/ivSweater"
android:layout_below="@+id/ivSweater"
android:layout_marginTop="57dp"
android:paddingLeft="@dimen/padding10dp"
android:src="@drawable/shoe" />
<TextView
android:id="@+id/tvWaist"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/ivPants"
android:layout_toRightOf="@+id/ivSweater"
android:paddingLeft="@dimen/padding10dp"
android:text="Waist"
android:textSize="26sp" />
<TextView
android:id="@+id/tvLength"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/ivPants"
android:layout_toRightOf="@+id/ivSweater"
android:paddingLeft="@dimen/padding10dp"
android:text="Length"
android:textSize="26sp" />
<TextView
android:id="@+id/tvDressshirt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/ivDressshirt"
android:layout_toRightOf="@+id/ivSweater"
android:paddingLeft="@dimen/padding10dp"
android:text="Dressshirt"
android:textSize="26sp" />
<TextView
android:id="@+id/tvSweater"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/tvDressshirt"
android:layout_alignTop="@+id/ivSweater"
android:paddingLeft="@dimen/padding10dp"
android:text="Sweater"
android:textSize="26sp" />
<TextView
android:id="@+id/tvShoe"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/tvSweater"
android:layout_alignTop="@+id/ivShoe"
android:paddingLeft="@dimen/padding10dp"
android:text="Shoe"
android:textSize="26sp" />
</RelativeLayout>
<!--Below is the transparent layout positioned at startup -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#88666666"
android:id="@+id/top_layout">
<ImageView
android:id="@+id/ivInstruction"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingTop="25dp"
android:layout_marginRight="15dp"
android:clickable="false"
android:paddingLeft="20dip"
android:scaleType="center"
android:src="@drawable/help" />
</RelativeLayout>
</FrameLayout>
In the summary, there is a need to interpret two RelativeLayout in one FrameLayout. One out of the two is the representative of overlay while the other for the app.
- STEP 2
The other step after this code is entered, in the Method, the SharedPreferences is created where for the first time overlays is introduced and the code is as follows,
private boolean isFirstTime()
{
SharedPreferences preferences = getPreferences(MODE_PRIVATE);
boolean ranBefore = preferences.getBoolean("RanBefore", false);
if (!ranBefore) {
SharedPreferences.Editor editor = preferences.edit();
editor.putBoolean("RanBefore", true);
editor.commit();
topLevelLayout.setVisibility(View.VISIBLE);
topLevelLayout.setOnTouchListener(new View.OnTouchListener(){
@Override
public boolean onTouch(View v, MotionEvent event) {
topLevelLayout.setVisibility(View.INVISIBLE);
return false;
}
});
}
return ranBefore;
}
We will also be discussing some of the properties which have been mentioned in the code integration which are,
-
android:windowIsTranslucent
This is a Boolean value. It can either be true or false, as is majorly defining whether the activity is in a translucent state or is not in the translucent state.
-
android:windowBackground
This activity is concerned about the background as it is used to set the background transparent.
-
android:windowContentOverlay
In a very simple word, this is to place Shadow under the title. This is to overlay the foreground below the area of the window content.
-
android:windowNoTitle
This is to identify where there is going to be a title or not.
-
android:windowIsFloating
This is for the floating window to identify if the window is floating or not.
-
android:backgroundDimEnabled
This also has an identification approach to know whether the dimming window is working or not.
All these have a very significant role in the complete process. So you need to be careful at these steps.
- STEP 3
The first-time() Method is used to interpret the behavior.
After this in the OnCreate method, the overlay references are made and the function is called.
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
topLevelLayout = findViewById(R.id.top_layout);
if (isFirstTime()) {
topLevelLayout.setVisibility(View.INVISIBLE);
}
Now you need to run your application and the transparent activity will be seen.
And you are done!
So, folks, this was the detailed tutorial with an example. I need to bring this to your notice that the coding that I have used is just a demo version; it may vary, depending upon the requirements.
Conclusion
All the data that has been shared was merely part of mobile app designing. Apart from this very act, numerous other things that are to be learned if you are looking ahead to create your app. If you are a person who is looking forward to creating an Android app with an attractive UI you should have great knowledge of using app widgets. And of course the more experienced you are the more in-depth knowledge your brain is going to hold.
Not just the creation of a transparent demo screen of an app, the Overlay function of Android has more advanced properties that can be used while creating an app to add some extra effects.
All these features are well understood if you are a tech-head. But if you're not the person who has a technically optimized brain, then I would suggest, why not hire an Android App developer or Android App development company? This is going to add experienced brains into the creation of the Android App. Moreover, they already have several ideas that will make your app the king.
If you already have ideas you can straightway go to the consultants of an Android App development company they will guide you in the perfect direction or I would say why not give us a try. We at OMNINOS have already done 500+ successful projects. So why not give us a try. The only thing that you need to do is visit the website of your desired Android App development company, and fill in the contact us section. The representative of the company will contact you soon.
