Developing a Screen Mirroring Android App

Have you ever tried screen mirroring (or casting) your phone on a Smart Tv? You must have. There are tons of available applications for this task. If you haven’t heard of Screen mirroring, let me explain:

Screen mirroring (sometimes called screen casting) allows you to mirror your mobile device’s content to your TV screen.

It can be used for numerous things including playing games or watching videos on a big screen. It generally has this icon:

Now we will develop our own Android application for this task.

We will use Android Studio for this. If you’re new to Android application development, these can help you get started:

Installing Android Studio

Android Basics by Udacity

So let’s dive into some code!

First, we’ll create a toolbar for our application as generally, this icon lies on the top of the screen. For making a toolbar, let’s start with adding the dependencies to build.gradle (module : app)

</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>compile fileTree(dir: 'libs', include: ['*.jar'])<br>
compile 'com.google.android.gms:play-services-appindexing:8.4.0'</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>

Now in res/layout/activity_main.xml file,  we’ll add the toolbar widget from android.support.v7.widget library :

<android.support.v7.widget.Toolbar
    android:id="@+id/my_toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:elevation="4dp"
    />

Now we have to add a menu for the toolbar. In res/menu we’ll add main_menu.xml.

<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"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content">

    <item        android:id="@+id/action_fav"
        android:orderInCategory="300"
        android:title="cast"
        android:icon="@drawable/icon"
        app:showAsAction="always">

    </item>
</menu>

In main_menu.xml, we defined an item to show in the toolbar. The icon used is of screen mirroring same as one above.

After defining the xml elements, now we will head over to the java code to make changes to our MainActivity. Inside java/MainActivity.java, initialize the toolbar widget in the onCreate function. For importing any library like android.support.v7.widget.Toolbar in this case, just press Alt + Enter after defining it in the function.

</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>@Override<br>
protected void onCreate(Bundle savedInstanceState) {<br>
super.onCreate(savedInstanceState);<br>
setContentView(R.layout.activity_main);</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Toolbar mToolbar = (Toolbar) findViewById(R.id.my_toolbar);<br>
setSupportActionBar(mToolbar);<br>
}</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>

After adding the toolbar, we need to inflate the menu bar and handle the click on our screen mirroring icon.

</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>@Override public boolean onCreateOptionsMenu(Menu menu){<br>
getMenuInflater().inflate(R.menu.main_menu, menu);<br>
return true;<br>
}</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>@Override<br>
public boolean onOptionsItemSelected(MenuItem item) {<br>
int id = item.getItemId();</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>if (id == R.id.action_fav) {</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>startActivity(new Intent("android.settings.CAST_SETTINGS"));<br>
return true;<br>
}<br>
return super.onOptionsItemSelected(item);<br>
}</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>

action_fav represents our screen mirroring icon. Inside the onOptionsItemSelected function, we sent an intent to start an activity to “android.settings.CAST_SETTINGS”.

This sends a signal to internal settings to launch the inbuilt screencast services. This service will automatically search a device, make a connection through Wifi-Direct and render your Android device screen on the secondary device. We don’t need to take the pain of going through this whole process ourselves, this little intent will take care of everything!

The application should be working now. Build the project and run.

The results should be like:

• 

• 

You can find the entire application code at:

ScreenMirroring Application

In this post, we developed a simple screen mirroring android application. In the coming post, we’ll develop some more simple daily use Android applications just for fun!

If you have any doubts or queries, post in the comment section.

Thank you!