{"id":43478,"date":"2015-09-13T21:38:22","date_gmt":"2015-09-13T18:38:22","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/?p=43478"},"modified":"2023-12-06T11:15:51","modified_gmt":"2023-12-06T09:15:51","slug":"android-ui-adding-multimedia-to-an-app","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-adding-multimedia-to-an-app.html","title":{"rendered":"Android UI: Adding Multimedia to an App"},"content":{"rendered":"<p><em>This article is part of our Academy Course titled <a href=\"http:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-design-basics.html\">Android UI Design \u2013 Basics<\/a>.<\/p>\n<p>In this course, you will get a look at the fundamentals of Android UI design. You will understand user input, views and layouts, as well as adapters and fragments. Check it out <a href=\"http:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-design-basics.html\">here<\/a>!<\/em><\/p>\n<div class=\"toc\">\n<h4>Table Of Contents<\/h4>\n<dl>\n<dt><a href=\"#overview\">1. Overview<\/a><\/dt>\n<dt><a href=\"#multimedia\">2. Multimedia API<\/a><\/dt>\n<dd>\n<dl>\n<dt><a href=\"#camera\">2.1. Using Android Camera<\/a><\/dt>\n<\/dl>\n<\/dd>\n<dt><a href=\"#graphics\">3. Graphics<\/a><\/dt>\n<dt><a href=\"#drawable\">4. Drawable<\/a><\/dt>\n<dd>\n<dl>\n<dt><a href=\"#shape\">4.1. Shape drawable<\/a><\/dt>\n<dt><a href=\"#state\">4.2. State list<\/a><\/dt>\n<dt><a href=\"#patch\">4.3. Nine-patch<\/a><\/dt>\n<\/dl>\n<\/dd>\n<dt><a href=\"#download\">5. Download the source code<\/a><\/dt>\n<\/dl>\n<\/div>\n<h2><a name=\"overview\"><\/a>1. Overview<\/h2>\n<p>In this article, we will cover some multimedia and graphic aspects in Android. The Android SDK provides a set of APIs to handle multimedia files, such as audio, video and images. Moreover, the SDK provides other API sets that help developers to implement interesting graphics effects, like animations and so on.<\/p>\n<p>The modern smart phones and tablets have an increasing storage capacity so that we can store music files, video files, images etc. Not only the storage capacity is important, but also the high definition camera makes it possible to take impressive photos. In this context, the Multimedia API plays an important role.<\/p>\n<h2><a name=\"multimedia\"><\/a>2. Multimedia API<\/h2>\n<p>Android supports a wide list of audio, video and image formats. You can give a look here to have an idea; just to name a few formats supported:<\/p>\n<p><strong>Audio<\/strong><\/p>\n<ul>\n<li>MP3<\/li>\n<li>MIDI<\/li>\n<li>Vorbis (es: mkv)<\/li>\n<\/ul>\n<p><strong>Video<\/strong><\/p>\n<ul>\n<li>H.263<\/li>\n<li>MPEG-4 SP<\/li>\n<\/ul>\n<p><strong>Images<\/strong><\/p>\n<ul>\n<li>JPEG<\/li>\n<li>GIF<\/li>\n<li>PNG<\/li>\n<\/ul>\n<p>Android, moreover, can handle local files, meaning files that are stored inside the smart phone or tablet or remote file using data streaming. We can leverage these capabilities in order to build very interesting apps.<\/p>\n<p>All the classes provided by the Android SDK that we can use to add multimedia capabilities to our apps are under the <code>android.media<\/code> package. In this package, the heart class is called <a href=\"http:\/\/developer.android.com\/reference\/android\/media\/MediaPlayer.html\"><code>MediaPlayer<\/code><\/a>. This class has several methods that we can use to play audio and video file stored in our device or streamed from a remote server.<\/p>\n<p>This class implements a state machine with well-defined states and we have to know them before playing a file. Simplifying the state diagram, as shown in the official documentation, we can define these macro-states:<\/p>\n<ul>\n<li><em><strong>Idle state:<\/strong><\/em> When we create a new instance of the MediaPlayer class.<\/li>\n<li><em><strong>Initialization state:<\/strong><\/em> This state is triggered when we use <code>setDataSource<\/code> to set the information source that <code>MediaPlayer<\/code> has to use.<\/li>\n<li><em><strong>Prepared state:<\/strong><\/em> In this state, the preparation work is completed. We can enter in this state calling <code>prepare<\/code> method or <code>prepareAsync<\/code>. In the first case after the method returns the state moves to <code>Prepared<\/code>. In the async way, we have to implement a listener to be notified when the system is ready and the state moves to <code>Prepared<\/code>. We have to keep in mind that when calling the <code>prepare<\/code> method, the entire app could hang before the method returns because the method can take a long time before it completes its work, especially when data is streamed from a remote server. We should avoid calling this method in the main thread because it might cause a ANR (Application Not Responding) problem. Once the <code>MediaPlayer<\/code> is in prepared state we can play our file, pause it or stop it.<\/li>\n<li><em><strong>Completed state:<\/strong><\/em> Te end of the stream is reached.<\/li>\n<\/ul>\n<p>We can play a file in several ways:<\/p>\n<pre class=\"brush:java\">\n\/\/ Raw audio file as resource\nMediaPlayer mp = MediaPlayer.create(this, R.raw.audio_file);\n\/\/ Local file\nMediaPlayer mp1 = MediaPlayer.create(this, Uri.parse(\"file:\/\/\/....\"));\n\/\/ Remote file\nMediaPlayer mp2 = MediaPlayer.create(this, Uri.parse(\"http:\/\/website.com\"));\n<\/pre>\n<p>or we can use <code>setDataSource<\/code> in this way:<\/p>\n<pre class=\"brush:java\">\nMediaPlayer mp3 = new MediaPlayer();\nmp3.setDataSource(\"http:\/\/www.website.com\");\n<\/pre>\n<p>Once we have created our <code>MediaPlayer<\/code> we can \u201cprepare\u201d it:<\/p>\n<pre class=\"brush:java\">\nmp3.prepare();\n<\/pre>\n<p>and finally we can play it:<\/p>\n<pre class=\"brush:java\">\nmp3.start();\n<\/pre>\n<p>Please keep in mind the observations above regarding preparing the state. According to them, we can use an async operation  so that we will not stop the main thread. In this case, we have:<\/p>\n<pre class=\"brush:java\">\n\/\/ Remote file\nMediaPlayer mp2 = MediaPlayer.create(this, Uri.parse(\"http:\/\/website.com\"));\nmp2.setAudioStreamType(AudioManager.STREAM_MUSIC);\nmp2.setOnCompletionListener(new MediaPlayer.OnCompletionListener() {\n\t@Override\n\tpublic void onCompletion(MediaPlayer mp) {\n\t\tmp.start();\n\t}\n});\nmp2.prepareAsync();\n<\/pre>\n<p>We used a listener to be notified when the <code>MediaPlayer<\/code> is in the prepared state so we can start playing. At the end, when we don&#8217;t need the instance of <code>MediaPlayer<\/code> anymore, we should release it:<\/p>\n<pre class=\"brush:java\">\nmp2.release();\n<\/pre>\n<h3><a name=\"camera\"><\/a>2.1. Using Android Camera<\/h3>\n<p>If we want to add to our apps the capability to take photos using the integrated smart phone camera, then the best way is to use an <code>Intent<\/code>. For example, let us suppose we want to start the camera as soon as we press a button and show the result in our app.<\/p>\n<p>In the <code>onCreate<\/code> method of our <code>Activity<\/code>, we have to setup a listener of the <code>Button<\/code> and when clicked to fire the intent:<\/p>\n<pre class=\"brush:java\">\nButton b = (Button) findViewById(R.id.btn1);\nb.setOnClickListener(new View.OnClickListener() {\n\t@Override\n\tpublic void onClick(View v) {\n\t\t \/\/ Here we fire the intent to start the camera\n\t\tIntent i = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);\n\t\tstartActivityForResult(i, 100);\n\t  }\n});\n<\/pre>\n<p>In the <code>onActivityResult<\/code> method, we retrieve the picture taken and show the result:<\/p>\n<pre class=\"brush:java\">\n@Override\nprotected void onActivityResult(int requestCode, int resultCode, Intent data) {\n\t\/\/ This is called when we finish taking the photo\n\t   Bitmap bmp = (Bitmap) data.getExtras().get(\"data\");\n\t   iv.setImageBitmap(bmp);\n}\n<\/pre>\n<p>Running the app we have:<\/p>\n<p><figure id=\"attachment_2592\" aria-describedby=\"caption-attachment-2592\" style=\"width: 480px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/android_camera_water.png\"><img decoding=\"async\" src=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/android_camera_water.png\" alt=\"Figure 1\" width=\"480\" height=\"800\" class=\"size-full wp-image-2592\" \/><\/a><figcaption id=\"caption-attachment-2592\" class=\"wp-caption-text\">Figure 1<\/figcaption><\/figure><br \/>\n<figure id=\"attachment_2593\" aria-describedby=\"caption-attachment-2593\" style=\"width: 480px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/android_camera1_1.png\"><img decoding=\"async\" src=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/android_camera1_1.png\" alt=\"Figure 2\" width=\"480\" height=\"800\" class=\"size-full wp-image-2593\" \/><\/a><figcaption id=\"caption-attachment-2593\" class=\"wp-caption-text\">Figure 2<\/figcaption><\/figure><\/p>\n<p>In the example above, we used an emulated camera.<\/p>\n<h2><a name=\"graphics\"><\/a>3. Graphics<\/h2>\n<p>By now, we talked about standard components that we can be used in our UI. This is good but it is not enough when we want to develop a game or an app that requires graphic contents. Android SDK provides a set of API for drawing custom 2D and 3D graphics. When we write an app that requires graphics, we should consider how intensive the graphic usage is. In other words, there could be an app that uses quite static graphics without complex effects and there could be other app that uses intensive graphical effects like games.<div style=\"display:inline-block; margin: 15px 0;\"> <div id=\"adngin-JavaCodeGeeks_incontent_video-0\" style=\"display:inline-block;\"><\/div> <\/div><\/p>\n<p>According to this usage, there are different techniques we can adopt:<\/p>\n<ul>\n<li><strong>Canvas and Drawable:<\/strong> In this case, we can extend the existing UI widgets so that we can customize their behavior or we can create custom 2D graphics using the standard method provided by the <a href=\"http:\/\/developer.android.com\/reference\/android\/graphics\/Canvas.html\"><code>Canvas<\/code><\/a> class.<\/li>\n<li><strong>Hardware acceleration:<\/strong> We can use hardware acceleration when drawing with the <code>Canvas<\/code> API. This is possible from Android 3.0.<\/li>\n<li><strong>OpenGL:<\/strong> Android supports OpenGL natively using NDK. This technique is very useful when we have an app that uses intensively graphic contents (i.e games).<\/li>\n<\/ul>\n<p>The easiest way to use 2D graphics is extending the <a href=\"http:\/\/developer.android.com\/reference\/android\/view\/View.html\"><code>View<\/code><\/a> class and overriding the <code>onDraw<\/code> method. We can use this technique when we do not need a graphics intensive app.<\/p>\n<p>In this case, we can use the <code>Canvas<\/code> class to create 2D graphics. This class provides a set of method starting with <code>draw*<\/code> that can be used to draw different shapes like:<\/p>\n<ul>\n<li><em>lines<\/em><\/li>\n<li><em>circle<\/em><\/li>\n<li><em>rectangle<\/em><\/li>\n<li><em>oval<\/em><\/li>\n<li><em>picture<\/em><\/li>\n<li><em>arc<\/em><\/li>\n<\/ul>\n<p>For example let us suppose we want do draw a rectangle. We create a custom view and then we override <code>onDraw<\/code> method. Here we draw the rectangle:<\/p>\n<pre class=\"brush:java\">\npublic class TestView extends View {\n\tpublic TestView(Context context) {\n\t\tsuper(context);\n\t}\n\tpublic TestView(Context context, AttributeSet attrs, int defStyle) {\n\t\tsuper(context, attrs, defStyle);\n\n\t}\n\tpublic TestView(Context context, AttributeSet attrs) {\n\t\tsuper(context, attrs);\n\t}\n\n\t@Override\n\tprotected void onDraw(Canvas canvas) {\n\t\tsuper.onDraw(canvas);\n\t\tPaint p = new Paint();\n\t\tp.setColor(Color.GREEN);\n\t\tp.setStrokeWidth(1);\n\t\tp.setStyle(Paint.Style.STROKE);\n\t\tcanvas.drawRect(5, 5, 120, 120, p);\n\t\tinvalidate();\n\t}\n}\n<\/pre>\n<p>As it is clear from the code above, in the <code>onDraw<\/code> method, we used the <code>drawRect<\/code> <code>Canvas<\/code> method. Notice that we used another class called <code>Paint<\/code>. This class specifies how the shape will be drawn; it specifies its color, if it has to be filled, the border width and so on.<\/p>\n<p>In this case the layout looks like:<\/p>\n<pre class=\"brush:xml\">\n&lt;RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    android:paddingBottom=\"@dimen\/activity_vertical_margin\"\n    android:paddingLeft=\"@dimen\/activity_horizontal_margin\"\n    android:paddingRight=\"@dimen\/activity_horizontal_margin\"\n    android:paddingTop=\"@dimen\/activity_vertical_margin\"\n    tools:context=\".MainActivity\" &gt;\n\n    &lt;com.swa.customview.TestView\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\" \/&gt;\n\n&lt;\/RelativeLayout&gt;\n<\/pre>\n<p>Running the app, we have:<\/p>\n<p><figure id=\"attachment_2594\" aria-describedby=\"caption-attachment-2594\" style=\"width: 480px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/android_canvas1.png\"><img decoding=\"async\" src=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/android_canvas1.png\" alt=\"Figure 3\" width=\"480\" height=\"800\" class=\"size-full wp-image-2594\" \/><\/a><figcaption id=\"caption-attachment-2594\" class=\"wp-caption-text\">Figure 3<\/figcaption><\/figure><\/p>\n<p>Suppose we want to fill the rectangle with a gradient color, so the <code>onDraw<\/code> method becomes:<\/p>\n<pre class=\"brush:java\">\nprotected void onDraw(Canvas canvas) {\n\tsuper.onDraw(canvas);\n\tPaint p = new Paint();\n\tp.setColor(Color.GREEN);\n\tp.setStrokeWidth(1);\n\tp.setStyle(Paint.Style.FILL_AND_STROKE);\n\tLinearGradient lg = new LinearGradient(0F, 0F, 115F,115F, Color.GREEN,  Color.YELLOW, TileMode.CLAMP);\n\tp.setShader(lg);\n\tcanvas.drawRect(5, 5, 120, 120, p);\n\tinvalidate();\n}\n<\/pre>\n<p>Running the app we have:<\/p>\n<p><figure id=\"attachment_2595\" aria-describedby=\"caption-attachment-2595\" style=\"width: 480px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/android_canvas_grad1.png\"><img decoding=\"async\" src=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/android_canvas_grad1.png\" alt=\"Figure 4\" width=\"480\" height=\"800\" class=\"size-full wp-image-2595\" \/><\/a><figcaption id=\"caption-attachment-2595\" class=\"wp-caption-text\">Figure 4<\/figcaption><\/figure><\/p>\n<p>As we told before, beginning from Android 3.0 (API 11), we can use hardware acceleration. In this case, if we want to use it, we have to modify the <code>Manifest.xml<\/code> and add the following line:<\/p>\n<pre class=\"brush:xml\">\n  &lt;application android:hardwareAccelerated=\"true\" &gt;\n<\/pre>\n<p>or we can use it at <code>Activity<\/code> level.<\/p>\n<h2><a name=\"drawable\"><\/a>4. Drawable<\/h2>\n<p>In Android, a <code>Drawable<\/code> is a graphical object that can be shown on the screen. From API point of view all the <code>Drawable<\/code> objects derive from <a href=\"http:\/\/developer.android.com\/reference\/android\/graphics\/drawable\/Drawable.html\"><code>Drawable<\/code><\/a> class. They have an important role in Android programming and we can use XML to create them. They differ from standard widgets because they are not interactive, meaning that they do not react to user touch.<\/p>\n<p>Images, colors, shapes, objects that change their aspect according to their state, object that can be animated are all drawable objects. In Android under <code>res<\/code> directory, there is a sub-dir reserved for <code>Drawable<\/code>, it is called <code>res\/drawable<\/code>.<\/p>\n<p><figure id=\"attachment_2596\" aria-describedby=\"caption-attachment-2596\" style=\"width: 235px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/android_drawable_dir1.png\"><img decoding=\"async\" src=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/android_drawable_dir1.png\" alt=\"Figure 5\" width=\"235\" height=\"262\" class=\"size-full wp-image-2596\" \/><\/a><figcaption id=\"caption-attachment-2596\" class=\"wp-caption-text\">Figure 5<\/figcaption><\/figure><\/p>\n<p>Under the <code>drawable<\/code> dir we can add binary files like images or XML files.<\/p>\n<p>As we saw in the <a href=\"http:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-layouts-view-group-fragment\/\">previous articles<\/a>, we can create several directories according to the screen density we want to support. These directories have a name like <code>drawable-&lt;&gt;<\/code>.<\/p>\n<p>This is very useful when we use images; in this case, we have to create several image versions: for example, we can create an image for the high dpi screen or another one for medium dpi screen. Once we have our file under <code>drawable<\/code> directory, we can reference it, in our class, using <code>R.drawable.file_name<\/code>. While it is very easy add a binary file to one of these directory, it is a matter of copy and paste, if we want to use a XML file we have to create it.<\/p>\n<p>There are several types of drawable:<\/p>\n<ul>\n<li><em>Bitmap<\/em><\/li>\n<li><em>Nine-patch<\/em><\/li>\n<li><em>Layer list<\/em><\/li>\n<li><em>State list<\/em><\/li>\n<li><em>Level list<\/em><\/li>\n<li><em>Transition drawable<\/em><\/li>\n<li><em>Inset drawable<\/em><\/li>\n<li><em>Clip drawable<\/em><\/li>\n<li><em>Scale drawable<\/em><\/li>\n<li><em>Shape drawable<\/em><\/li>\n<\/ul>\n<p>An interesting aspect is that we can create such elements using XML or directly from code. There is a correspondence between the elements shown above and the API class. We can add the <code>Drawable<\/code> suffix and we create the corresponding class name: for example if the corresponding class of <code>Bitmap<\/code> drawable is <code>BitmapDrawable<\/code> and so on.<\/p>\n<p>You can have a look <a href=\"http:\/\/developer.android.com\/guide\/topics\/resources\/drawable-resource.html\">here<\/a> if you want to have more information. We will not cover all these objects in this article but only the most popular.<br \/>\n[ulp id=&#8217;luHisu6VPL9Mt6IB&#8217;]<br \/>\n&nbsp;<\/p>\n<h3><a name=\"shape\"><\/a>4.1. Shape drawable<\/h3>\n<p>This is a generic shape. Using XML we have to create a file with shape element as root. This element as an attribute called <code>android:shape<\/code> where we define the type of shape like rectangle, oval, line and ring. We can customize the shape using child elements like:<\/p>\n<div class=\"wp-caption aligncenter\">\n<table border=\"2\">\n<tbody>\n<tr>\n<td><strong>Element name<\/strong><\/td>\n<td><strong>Description<\/strong><\/td>\n<\/tr>\n<tr>\n<td><code>gradient<\/code><\/td>\n<td>Specify the gradient color for the shape.<\/td>\n<\/tr>\n<tr>\n<td><code>solid<\/code><\/td>\n<td>Specify the background shape color.<\/td>\n<\/tr>\n<tr>\n<td><code>stroke<\/code><\/td>\n<td>Specify the border of the shape.<\/td>\n<\/tr>\n<tr>\n<td><code>corners<\/code><\/td>\n<td>Specify the corner radius of the shape.<\/td>\n<\/tr>\n<tr>\n<td><code>padding<\/code><\/td>\n<td>Specify the padding for the shape.<\/td>\n<\/tr>\n<tr>\n<td><code>size<\/code><\/td>\n<td>Specify the width and the height of the shape.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"wp-caption-text\">Table 1<\/p>\n<\/div>\n<p>For example, let us suppose we want to create an oval with solid background color. We create a XML file called for example <code>oval.xml<\/code>:<\/p>\n<pre class=\"brush:xml\">\n&lt;shape xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    android:shape=\"oval\" &gt;\n\n    &lt;solid android:color=\"#FF0000\" \/&gt;\n\n    &lt;size\n        android:height=\"100dp\"\n        android:width=\"120dp\" \/&gt;\n\n&lt;\/shape&gt;\n<\/pre>\n<p>In this way, we create an oval shape having red as background color and with size 120dpx100dp. Then we can reference it in our layout file:<\/p>\n<pre class=\"brush:xml\">\n   &lt;ImageView\n    android:layout_width=\"wrap_content\"\n    android:layout_height=\"wrap_content\"\n    android:layout_centerInParent=\"true\"\n    android:src=\"@drawable\/oval\" \/&gt;\n<\/pre>\n<p>Running the app, we obtain:<\/p>\n<p><figure id=\"attachment_2597\" aria-describedby=\"caption-attachment-2597\" style=\"width: 768px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/android_oval_drawable1.png\"><img decoding=\"async\" src=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/android_oval_drawable1.png\" alt=\"Figure 6\" width=\"768\" height=\"1280\" class=\"size-full wp-image-2597\" \/><\/a><figcaption id=\"caption-attachment-2597\" class=\"wp-caption-text\">Figure 6<\/figcaption><\/figure><\/p>\n<p>For example, we can suppose we want to change the <code>Button<\/code> widget look. We want to create a rectangle with rounded corners and as background a gradient color. We define a shape in XML file called <code>round_corner.xml<\/code> and we add it to <code>drawable<\/code> dir:<\/p>\n<pre class=\"brush:xml\">\n&lt;shape xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    android:shape=\"rectangle\" &gt;\n\n    &lt;stroke\n        android:width=\"2dp\"\n        android:color=\"#00FF00\" \/&gt;\n\n    &lt;gradient\n        android:angle=\"-90\"\n        android:endColor=\"#FFFFFF\"\n        android:startColor=\"#00FF00\"\n        android:type=\"linear\" \/&gt;\n\n    &lt;corners android:radius=\"3dp\" \/&gt;\n\n    &lt;padding\n        android:bottom=\"4dp\"\n        android:left=\"4dp\"\n        android:right=\"4dp\"\n        android:top=\"4dp\" \/&gt;\n\n&lt;\/shape&gt;\n<\/pre>\n<p>and in the layout file we have:<\/p>\n<pre class=\"brush:xml\">\n&lt;Button\n    android:layout_width=\"wrap_content\"\n    android:layout_height=\"wrap_content\"\n    android:layout_centerInParent=\"true\"\n    android:background=\"@drawable\/round_corner\"\n    android:text=\"Click me\" \/&gt;\n<\/pre>\n<p>Running the app, we have:<\/p>\n<p><figure id=\"attachment_2598\" aria-describedby=\"caption-attachment-2598\" style=\"width: 768px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/android_drawable_button1.png\"><img decoding=\"async\" src=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/android_drawable_button1.png\" alt=\"Figure 7\" width=\"768\" height=\"1280\" class=\"size-full wp-image-2598\" \/><\/a><figcaption id=\"caption-attachment-2598\" class=\"wp-caption-text\">Figure 7<\/figcaption><\/figure><\/p>\n<p>As we can see, just using XML we can modify the widget background or create shapes.<\/p>\n<h3><a name=\"state\"><\/a>4.2. State list<\/h3>\n<p>This drawable object can display several drawables depending on the object state. It is very useful when we want to customize some object that has an internal states. For example, the <code>Button<\/code> widget is one of these objects, it has several states: pressed, focused and so on.<\/p>\n<p>In XML this drawable is represented by selector tag. This tag has item child elements:<\/p>\n<pre class=\"brush:xml\">\n&lt;selector xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"&gt;\n\n    &lt;item android:drawable=\"\"drawable1\" android:state_pressed=\"true\"\/&gt;\n    &lt;item android:drawable=\"\"drawable2\" android:state_focused=\"true\"\/&gt;\n\n&lt;\/selector&gt;\n<\/pre>\n<p>Let&#8217;s suppose we want to customize a <code>Button<\/code> widget in our layout when it is pressed. Additionally, we want to change its background to a red gradient color. So the first thing we do is to define two shapes:<\/p>\n<pre class=\"brush:xml\">\n&lt;shape xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\" &gt;\n\n    &lt;solid android:color=\"#00FF00\" \/&gt;\n\n&lt;\/shape&gt;\n<\/pre>\n<p><strong><code>green.xml<\/code><\/strong><\/p>\n<pre class=\"brush:xml\">\n&lt;shape xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\" &gt;\n\n    &lt;gradient\n        android:angle=\"-90\"\n        android:endColor=\"#FFFFFF\"\n        android:startColor=\"#AA0000\"\n        android:type=\"linear\" \/&gt;\n\n&lt;\/shape&gt;\n<\/pre>\n<p>Once we have our shapes we can assign them to different object states:<\/p>\n<pre class=\"brush:xml\">\n&lt;selector xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"&gt;\n\n    &lt;item android:drawable=\"@drawable\/red_gradient\" android:state_pressed=\"true\"\/&gt;\n    &lt;item android:drawable=\"@drawable\/green\"\/&gt;\n\n&lt;\/selector&gt;\n<\/pre>\n<p>In this way, we assign the red_gradient drawable when the button is pressed and the green drawable in the default state. Running the app we have:<\/p>\n<p><figure id=\"attachment_2599\" aria-describedby=\"caption-attachment-2599\" style=\"width: 768px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/android_selector_drawable1_1.png\"><img decoding=\"async\" src=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/android_selector_drawable1_1.png\" alt=\"Figure 8\" width=\"768\" height=\"1280\" class=\"size-full wp-image-2599\" \/><\/a><figcaption id=\"caption-attachment-2599\" class=\"wp-caption-text\">Figure 8<\/figcaption><\/figure><br \/>\n<figure id=\"attachment_2600\" aria-describedby=\"caption-attachment-2600\" style=\"width: 509px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/android_selector_drawable2_1.png\"><img decoding=\"async\" src=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/android_selector_drawable2_1.png\" alt=\"Figure 9\" width=\"509\" height=\"833\" class=\"size-full wp-image-2600\" \/><\/a><figcaption id=\"caption-attachment-2600\" class=\"wp-caption-text\">Figure 9<\/figcaption><\/figure><\/p>\n<h3><a name=\"patch\"><\/a>4.3. Nine-patch<\/h3>\n<p><strong>Nine-patch<\/strong> image is a special background image that can be resized, so that it can hold the <code>View<\/code> content. You can look <a href=\"http:\/\/developer.android.com\/guide\/topics\/graphics\/2d-graphics.html#nine-patch\">here<\/a> if you want to have more information. It can be used when we want to create an image but we do not know the exact size of the <code>View<\/code> content.<\/p>\n<p>Briefly, while creating this image we define the borders that can be stretched and the static area. Android provides a <a href=\"http:\/\/developer.android.com\/tools\/help\/draw9patch.html\">tool<\/a> to help us creating this kind of images located under the tools directory. Suppose we want to create a <code>Button<\/code> widget background, we can create an image like the one shown below:<\/p>\n<p>Now we can run <code>draw9patch.bat<\/code> under the tools directory. Now we can drag&amp;drop this image on the window just opened:<\/p>\n<p><figure id=\"attachment_2601\" aria-describedby=\"caption-attachment-2601\" style=\"width: 1597px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/9patch_tool_water.png\"><img decoding=\"async\" src=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/9patch_tool_water.png\" alt=\"Figure 10\" width=\"1597\" height=\"859\" class=\"size-full wp-image-2601\" \/><\/a><figcaption id=\"caption-attachment-2601\" class=\"wp-caption-text\">Figure 10<\/figcaption><\/figure><\/p>\n<p>The window is divided in two areas: the left one is the \u201cworking window\u201d while on the right side we have the final result. Now we have to choose the area of the image that can scale, we can do it drawing lines on the left and top side, as you can see in the picture:<\/p>\n<p><figure id=\"attachment_2602\" aria-describedby=\"caption-attachment-2602\" style=\"width: 1593px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/9patch_tool1_1.png\"><img decoding=\"async\" src=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/9patch_tool1_1.png\" alt=\"Figure 11\" width=\"1593\" height=\"859\" class=\"size-full wp-image-2602\" \/><\/a><figcaption id=\"caption-attachment-2602\" class=\"wp-caption-text\">Figure 11<\/figcaption><\/figure><\/p>\n<p>Now we set the content area, selecting the right and bottom side of the image.<\/p>\n<p><figure id=\"attachment_2603\" aria-describedby=\"caption-attachment-2603\" style=\"width: 1597px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/9patch_tool2_1.png\"><img decoding=\"async\" src=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/9patch_tool2_1.png\" alt=\"Figure 12\" width=\"1597\" height=\"861\" class=\"size-full wp-image-2603\" \/><\/a><figcaption id=\"caption-attachment-2603\" class=\"wp-caption-text\">Figure 12<\/figcaption><\/figure><\/p>\n<p>We can see on the right side the final result. Now we can save our work. When we have finished, we can copy this image under <code>res\/drawable<\/code> of our Android project.<\/p>\n<p>To see the final effect we can create a layout like the one shown below:<\/p>\n<pre class=\"brush:xml\">\n&lt;Button\n    android:id=\"@+id\/btn1\"\n    android:layout_width=\"wrap_content\"\n    android:layout_height=\"wrap_content\"\n    android:background=\"@drawable\/stdbox\"\n    android:text=\"This is a standard background with red border\" \/&gt;\n&lt;Button\n    android:layout_width=\"wrap_content\"\n    android:layout_height=\"wrap_content\"\n    android:layout_below=\"@id\/btn1\"\n    android:layout_marginTop=\"10dp\"\n    android:background=\"@drawable\/box\"\n    android:text=\"This is a 9 patch background with red border\" \/&gt;\n\n<\/pre>\n<p>In the first button we used a standard image the simple red box as shown above, while in the second button we use a <code>9-patch<\/code> image.<\/p>\n<p>Running the example we have:<\/p>\n<p><figure id=\"attachment_2604\" aria-describedby=\"caption-attachment-2604\" style=\"width: 768px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/android_9_patch1.png\"><img decoding=\"async\" src=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/android_9_patch1.png\" alt=\"Figure 13\" width=\"768\" height=\"1280\" class=\"size-full wp-image-2604\" \/><\/a><figcaption id=\"caption-attachment-2604\" class=\"wp-caption-text\">Figure 13<\/figcaption><\/figure><\/p>\n<p>You can notice the <code>9-patch<\/code> images scales better than the standard image.<\/p>\n<h2><a name=\"download\"><\/a>5. Download the Source Code<\/h2>\n<p>This was a lesson on how to use Multimedia with Android. You may download the source code here:<\/p>\n<ul>\n<li><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/4.-CustomView.zip\">CustomView.zip<\/a><\/li>\n<li><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/4.-DrawableTutorial.zip\">DrawableTutorial.zip<\/a><\/li>\n<li><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/4.-MediaTutorial.zip\">MediaTutorial.zip<\/a><\/li>\n<li><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/4.-PatchTutorial.zip\">PatchTutorial.zip<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>This article is part of our Academy Course titled Android UI Design \u2013 Basics. In this course, you will get a look at the fundamentals of Android UI design. You will understand user input, views and layouts, as well as adapters and fragments. Check it out here! Table Of Contents 1. Overview 2. Multimedia API &hellip;<\/p>\n","protected":false},"author":449,"featured_media":46,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-43478","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-android-core"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Android UI: Adding Multimedia to an App - Java Code Geeks<\/title>\n<meta name=\"description\" content=\"This article is part of our Academy Course titled Android UI Design \u2013 Basics. In this course, you will get a look at the fundamentals of Android UI\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-adding-multimedia-to-an-app.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Android UI: Adding Multimedia to an App - Java Code Geeks\" \/>\n<meta property=\"og:description\" content=\"This article is part of our Academy Course titled Android UI Design \u2013 Basics. In this course, you will get a look at the fundamentals of Android UI\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-adding-multimedia-to-an-app.html\" \/>\n<meta property=\"og:site_name\" content=\"Java Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/javacodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2015-09-13T18:38:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-06T09:15:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2012\/10\/android-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Francesco Azzola\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@javacodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@javacodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Francesco Azzola\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2015\\\/09\\\/android-ui-adding-multimedia-to-an-app.html#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2015\\\/09\\\/android-ui-adding-multimedia-to-an-app.html\"},\"author\":{\"name\":\"Francesco Azzola\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/1b8d9e567a8adf5007f58dc3674856da\"},\"headline\":\"Android UI: Adding Multimedia to an App\",\"datePublished\":\"2015-09-13T18:38:22+00:00\",\"dateModified\":\"2023-12-06T09:15:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2015\\\/09\\\/android-ui-adding-multimedia-to-an-app.html\"},\"wordCount\":2220,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2015\\\/09\\\/android-ui-adding-multimedia-to-an-app.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2012\\\/10\\\/android-logo.jpg\",\"articleSection\":[\"Android Core\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/2015\\\/09\\\/android-ui-adding-multimedia-to-an-app.html#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2015\\\/09\\\/android-ui-adding-multimedia-to-an-app.html\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2015\\\/09\\\/android-ui-adding-multimedia-to-an-app.html\",\"name\":\"Android UI: Adding Multimedia to an App - Java Code Geeks\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2015\\\/09\\\/android-ui-adding-multimedia-to-an-app.html#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2015\\\/09\\\/android-ui-adding-multimedia-to-an-app.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2012\\\/10\\\/android-logo.jpg\",\"datePublished\":\"2015-09-13T18:38:22+00:00\",\"dateModified\":\"2023-12-06T09:15:51+00:00\",\"description\":\"This article is part of our Academy Course titled Android UI Design \u2013 Basics. In this course, you will get a look at the fundamentals of Android UI\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2015\\\/09\\\/android-ui-adding-multimedia-to-an-app.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/2015\\\/09\\\/android-ui-adding-multimedia-to-an-app.html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2015\\\/09\\\/android-ui-adding-multimedia-to-an-app.html#primaryimage\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2012\\\/10\\\/android-logo.jpg\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2012\\\/10\\\/android-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2015\\\/09\\\/android-ui-adding-multimedia-to-an-app.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Android\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/android\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Android Core\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/android\\\/android-core\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Android UI: Adding Multimedia to an App\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\",\"name\":\"Java Code Geeks\",\"description\":\"Java Developers Resource Center\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"alternateName\":\"JCG\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.javacodegeeks.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/exelixis-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/javacodegeeks\",\"https:\\\/\\\/x.com\\\/javacodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/1b8d9e567a8adf5007f58dc3674856da\",\"name\":\"Francesco Azzola\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b8fcfaaab43642cae206ca07965b6b7adce348e00a1b9880392e5801b58cc326?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b8fcfaaab43642cae206ca07965b6b7adce348e00a1b9880392e5801b58cc326?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b8fcfaaab43642cae206ca07965b6b7adce348e00a1b9880392e5801b58cc326?s=96&d=mm&r=g\",\"caption\":\"Francesco Azzola\"},\"description\":\"He's a senior software engineer with more than 15 yrs old experience in JEE architecture. He's SCEA certified (Sun Certified Enterprise Architect), SCWCD, SCJP. He is an android enthusiast and he has worked for long time in the mobile development field.\",\"sameAs\":[\"http:\\\/\\\/www.survivingwithandroid.com\\\/\",\"http:\\\/\\\/it.linkedin.com\\\/in\\\/francescoazzola\"],\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/author\\\/francesco-azzola\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Android UI: Adding Multimedia to an App - Java Code Geeks","description":"This article is part of our Academy Course titled Android UI Design \u2013 Basics. In this course, you will get a look at the fundamentals of Android UI","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-adding-multimedia-to-an-app.html","og_locale":"en_US","og_type":"article","og_title":"Android UI: Adding Multimedia to an App - Java Code Geeks","og_description":"This article is part of our Academy Course titled Android UI Design \u2013 Basics. In this course, you will get a look at the fundamentals of Android UI","og_url":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-adding-multimedia-to-an-app.html","og_site_name":"Java Code Geeks","article_publisher":"https:\/\/www.facebook.com\/javacodegeeks","article_published_time":"2015-09-13T18:38:22+00:00","article_modified_time":"2023-12-06T09:15:51+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2012\/10\/android-logo.jpg","type":"image\/jpeg"}],"author":"Francesco Azzola","twitter_card":"summary_large_image","twitter_creator":"@javacodegeeks","twitter_site":"@javacodegeeks","twitter_misc":{"Written by":"Francesco Azzola","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-adding-multimedia-to-an-app.html#article","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-adding-multimedia-to-an-app.html"},"author":{"name":"Francesco Azzola","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/1b8d9e567a8adf5007f58dc3674856da"},"headline":"Android UI: Adding Multimedia to an App","datePublished":"2015-09-13T18:38:22+00:00","dateModified":"2023-12-06T09:15:51+00:00","mainEntityOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-adding-multimedia-to-an-app.html"},"wordCount":2220,"commentCount":0,"publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-adding-multimedia-to-an-app.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2012\/10\/android-logo.jpg","articleSection":["Android Core"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-adding-multimedia-to-an-app.html#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-adding-multimedia-to-an-app.html","url":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-adding-multimedia-to-an-app.html","name":"Android UI: Adding Multimedia to an App - Java Code Geeks","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-adding-multimedia-to-an-app.html#primaryimage"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-adding-multimedia-to-an-app.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2012\/10\/android-logo.jpg","datePublished":"2015-09-13T18:38:22+00:00","dateModified":"2023-12-06T09:15:51+00:00","description":"This article is part of our Academy Course titled Android UI Design \u2013 Basics. In this course, you will get a look at the fundamentals of Android UI","breadcrumb":{"@id":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-adding-multimedia-to-an-app.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-adding-multimedia-to-an-app.html"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-adding-multimedia-to-an-app.html#primaryimage","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2012\/10\/android-logo.jpg","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2012\/10\/android-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-adding-multimedia-to-an-app.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.javacodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"Android","item":"https:\/\/www.javacodegeeks.com\/category\/android"},{"@type":"ListItem","position":3,"name":"Android Core","item":"https:\/\/www.javacodegeeks.com\/category\/android\/android-core"},{"@type":"ListItem","position":4,"name":"Android UI: Adding Multimedia to an App"}]},{"@type":"WebSite","@id":"https:\/\/www.javacodegeeks.com\/#website","url":"https:\/\/www.javacodegeeks.com\/","name":"Java Code Geeks","description":"Java Developers Resource Center","publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"alternateName":"JCG","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.javacodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.javacodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.javacodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/javacodegeeks","https:\/\/x.com\/javacodegeeks"]},{"@type":"Person","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/1b8d9e567a8adf5007f58dc3674856da","name":"Francesco Azzola","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/b8fcfaaab43642cae206ca07965b6b7adce348e00a1b9880392e5801b58cc326?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b8fcfaaab43642cae206ca07965b6b7adce348e00a1b9880392e5801b58cc326?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b8fcfaaab43642cae206ca07965b6b7adce348e00a1b9880392e5801b58cc326?s=96&d=mm&r=g","caption":"Francesco Azzola"},"description":"He's a senior software engineer with more than 15 yrs old experience in JEE architecture. He's SCEA certified (Sun Certified Enterprise Architect), SCWCD, SCJP. He is an android enthusiast and he has worked for long time in the mobile development field.","sameAs":["http:\/\/www.survivingwithandroid.com\/","http:\/\/it.linkedin.com\/in\/francescoazzola"],"url":"https:\/\/www.javacodegeeks.com\/author\/francesco-azzola"}]}},"_links":{"self":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/43478","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/users\/449"}],"replies":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/comments?post=43478"}],"version-history":[{"count":0,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/43478\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/media\/46"}],"wp:attachment":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/media?parent=43478"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/categories?post=43478"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/tags?post=43478"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}