Pro android graphics

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Định dạng
Số trang	605
Dung lượng	33,27 MB

Nội dung

www.it-ebooks.info For your convenience Apress has placed some of the front matter material after the index Please use the Bookmarks and Contents at a Glance links to access them www.it-ebooks.info Contents at a Glance About the Author�� xvii About the Technical Reviewer�� xix Acknowledgments�� xxi ■■Chapter 1: Android Digital Imaging: Formats, Concepts, and Optimization�� ■■Chapter 2: Android Digital Video: Formats, Concepts, and Optimization��25 ■■Chapter 3: Android Frame Animation: XML, Concepts, and Optimization��69 ■■Chapter 4: Android Procedural Animation: XML, Concepts, and Optimization��95 ■■Chapter Android DIP: Device-Independent Pixel Graphics Design��121 ■■Chapter 6: Android UI Layouts: Graphics Design Using the ViewGroup Class��147 ■■Chapter 7: Android UI Widgets: Graphics Design Using the View Class��183 ■■Chapter 8: Advanced ImageView: More Graphics Design Using ImageView��229 ■■Chapter 9: Advanced ImageButton: Creating a Custom Multi-State ImageButton��255 ■■Chapter 10: Using 9-Patch Imaging Techniques to Create Scalable Imaging Elements��283 ■■Chapter 11: Advanced Image Blending: Using Android PorterDuff Classes��307 ■■Chapter 12: Advanced Image Compositing: Using the LayerDrawable Class��333 ■■Chapter 13: Digital Image Transitions: Using the TransitionDrawable Class��361 v www.it-ebooks.info vi Contents at a Glance ■■Chapter 14: Frame-Based Animation: Using the AnimationDrawable Class��385 ■■Chapter 15: Procedural Animation: Using the Animation Classes��411 ■■Chapter 16: Advanced Graphics: Mastering the Drawable Class��439 ■■Chapter 17: Interactive Drawing: Using Paint and Canvas Classes Interactively��479 ■■Chapter 18: Playing Captive Video Using the VideoView and MediaPlayer Classes��515 ■■Chapter 19: Streaming Digital Video from an External Media Server��545 Index��579 www.it-ebooks.info Chapter Android Digital Imaging: Formats, Concepts, and Optimization In this first chapter, you will see how digital imaging is implemented inside of the Android operating system We will take a look at the digital image formats that are supported in Android, the classes that allow imagery to be formatted on the screen, and the basic digital imaging concepts that you will need to understand to follow what we will be doing in Android graphics design We will also take a look at how to optimize your digital image assets for Android application development We’ll explore digital image optimization both from an individual image asset data footprint standpoint and from an Android device type market coverage standpoint As you know, Android devices are no longer just smartphones, but run the gamut from watches to phones to tablets to game consoles to 4K iTV sets The significance of this to the graphic design aspect of Android application development is that you must now create your digital image assets in a far wider range of pixels, from as low a resolution as 240 pixels to as high a resolution as 4096 pixels, and you must this for each of your digital imaging assets We will look at the facilities that Android has in place for doing this as a part of your application development workflow and your asset referencing XML (eXtensible Markup Language) markup Markup is different from Java code in that it uses “tags” much as HTML (HyperText Markup Language) does XML is very similar to HTML in that it uses these tag structures, but different in that it is customizable, which is why Google has selected it for use in Android OS Since this is a Pro level book I assume that you have a decent level of experience with developing for the Android platform, and have already been through the learning process in an Android educational title such as my Learn Android App Development (Apress, 2013) Let’s get started by taking a look at what image formats Android supports www.it-ebooks.info CHAPTER 1: Android Digital Imaging: Formats, Concepts, and Optimization Android’s Digital Image Formats: Lossless Versus Lossy Android supports several popular digital imagery formats, some which have been around for decades, such as the Compuserve GIF (Graphic Information Format) and the Joint Photographic Experts Group (JPEG) format, and some are more recent, such as the PNG (Portable Network Graphics) and WebP (developed by ON2 and acquired and made open source by Google) I will talk about these in their order of origin, from the oldest (and thus least desirable) GIF through the newest (and thus most advanced) WebP format Compuserve GIF is fully supported by the Android OS, but is not recommended GIF is a lossless digital image file format, as it does not throw away image data to achieve better compression results This is because the GIF compression algorithm is not as refined (read: powerful) as PNG, and it only supports indexed color, which you will be learning about in detail in this chapter That said, if all your image assets are already created and in GIF format, you will be able to use them with no problem (other than the mediocre resulting quality) in your Android applications The next oldest digital image file format that Android supports is JPEG, which uses a truecolor color depth instead of an indexed color depth We will be covering color theory and color depth soon JPEG is said to be a lossy digital image file format, as it throws away (loses) image data in order to achieve smaller file sizes It is important to note that this original image data is unrecoverable after compression has taken place, so make sure to save an original uncompressed image file If you zoom into a JPEG image after compression, you will see a discolored area effect that clearly was not present in the original imagery These degraded areas in the image data are termed compression artifacts in the digital imaging industry and will only occur in lossy image compression The most recommended image format in Android is called the PNG (Portable Network Graphic) file format PNG has both an indexed color version, called PNG8, and a truecolor version, called PNG24 The PNG8 and PNG24 extensions represent the bit depth of color support, which we will be getting into in a little bit PNG is pronounced “ping” in the digital image industry PNG is the recommended format to use for Android because it has decent compression, and because it is lossless, and thus has both high image quality and a reasonable level of compression efficiency The most recent image format was added to Android when Google acquired ON2 and is called the WebP image format The format is supported under Android 2.3.7 for image read, or playback, support and in Android 4.0 or later for image write, or file saving, support WebP is a static (image) version of the WebM video file format, also known in the industry as the VP8 codec You will be learning all about codecs and compression in a later section Android View and ViewGroup Classes: Image Containers Everything in this section is just a review of Android Java class concepts and constructs, which you, as an intermediate level Android programmer, probably understand already Android OS has a class that is dedicated to displaying digital imagery and digital video called the View class The View class is subclassed directly from the java.lang.Object class; it is designed to hold www.it-ebooks.info CHAPTER 1: Android Digital Imaging: Formats, Concepts, and Optimization imagery and video, and to format it for display within your user interface screen designs If you wish to review what the View class can do, visit the following URL: http://developer.android.com/reference/android/view/View.html All user interface elements are based on (subclassed from) the View class, and are called widgets and have their own package called android.widget, as most developers know If you are not that familiar with Views and Widgets, you might consider going through the Learn Android App Development book before embarking on this one If you wish to review what Android Widgets can do, visit the following URL: http://developer.android.com/reference/android/widget/package-summary.html The ViewGroup class is also subclassed from the View class It is used to provide developers with the user interface element container that they can use to design their screen layout and organize their user interface widget View objects If you wish to review the various types of Android ViewGroup Screen Layout Container classes, visit the following URL: http://developer.android.com/reference/android/view/ViewGroup.html Views, ViewGroups and widgets in Android are usually defined using XML This is set up this way so that designers can work right alongside the coders in the application development, as XML is far easier to code in than Java is In fact, XML isn’t really programming code at all; it’s markup, and, just like HTML5, it uses tags, nested tags, and tag parameters to build constructs that are later used in your Android application Not only is XML utilized in Android to create user interface screen design but also menu structures, string constants, and to define your application version, components, and permissions inside the AndroidManifest.xml file The process of turning your XML data structures into Java-code–compatible objects that can be used with your Android application Java components is called inflating XML markup, and Android has a number of inflater classes that perform this function, usually in component startup methods, such as the onCreate() method You will see this in some detail throughout the Java coding examples in this book, as it bridges our XML markup and Java code The Foundation of Digital Images: Pixels and Aspect Ratio Digital images are made up of two-dimensional arrays of pixels, which is short for picture (pix) elements (els) The number of pixels in an image is expressed by its resolution, which is the number of pixels in both the Height (H) and Width (W) dimensions To find the number of pixels in an image, simply multiply the Width pixels by the Height pixels For instance, an HDTV 1920 x 1080 image will contain 2,073,600 pixels, or slightly more than million pixels Two million pixels could also be referred to as two megapixels The more pixels that are in an image, the higher its resolution; just like with digital cameras, the more megapixels are in the data bank, the higher the quality level that can be achieved Android supports everything from low resolution 320 x 240 pixel display screens (Android Watches and www.it-ebooks.info CHAPTER 1: Android Digital Imaging: Formats, Concepts, and Optimization smaller flip-phones) to medium resolution 854 x 480 pixel display screens (mini-tablets and smartphones), up to high resolution 1280 x 720 pixel display screens (HD smartphones and mid-level tablets), and extra high resolution 1920 x 1080 pixel display screens (large tablets and iTV sets) Android 4.3 adds support for 4K resolution iTVs, which feature 4096 by 2160 resolution A slightly more complicated aspect (no pun intended) of image resolution is the image aspect ratio, a concept that also applies to display screens This is the ratio of width to height, or W:H, and will define how square or rectangular (popularly termed widescreen) an image or a display screen is A 1:1 aspect ratio display (or image) is perfectly square, as is a 2:2 or a 3:3 aspect ratio image You see, it is the ratio between the two numbers that defines the shape of the image or screen, not the numbers themselves An example of an Android device that has a 1:1 square aspect ratio would be an Android SmartWatch Most Android screens are HDTV aspect ratio, which is 16:9, but some are a little less wide, as in 16:10 (or 8:5 if you prefer) Wider screens will also surely appear, so look for 16:8 (or 2:1, if you prefer) ultra-wide screens that have a 2160 by 1080 resolution LCD or LED display The aspect ratio is usually expressed as the smallest pair of numbers that can be achieved (reached) on either side of the aspect ratio colon If you paid attention in high school when you were learning about lowest common denominators, then this aspect ratio should be fairly easy to calculate I usually this by continuing to divide each side by two So, taking the fairly odd-ball 1280 x 1024 SXGA resolution as an example, half of 1280 x 1024 is 640 x 512, and half of that is 320 x 256, half of that is 160 x 128, half of that is 80 x 64, half of that is 40 x 32, half of that is 20 x 16, half of that is 10 x 8, and half of that is x 4, so an SXGA screen is a 5:4 aspect ratio Original PC screens primarily offered a 4:3 aspect ratio; early CRT tube TVs were nearly square, featuring a 3:2 aspect ratio The current market trend is certainly towards wider screens and higher resolution displays; however, the new Android Watches may change that back towards square aspect ratios The Color of Digital Images: Color Theory and Color Depth Now you know about digital image pixels and how they are arranged into 2D rectangular arrays at a specific aspect ratio defining the rectangular shape So the next logical aspect (again, no pun intended) to look into is how each of those pixels gain their color values Color values for image pixels are defined by the amount of three different colors, red, green and blue (RGB), which are present in varying amounts in each pixel Android display screens utilize additive color, which is where the wavelengths of light for each RGB color plane are summed together in order to create millions of different color values Additive color, which is utilized in LCD or LED displays, is the opposite of subtractive color, which is utilized in print To show the difference, under a subtractive color model, mixing red with green (inks) will yield a purplish color, whereas in an additive color model, mixing red with green (light) creates a bright yellow color result There are 256 levels of each RGB color for each pixel, or 8-bits of color intensity variation, for each of these red, green, and blue values, from a minimum of zero (off, no color contributed) to a maximum of 255 (fully on, maximum color contributed) The number of bits used to represent color in a digital image is referred to as the color depth of that image www.it-ebooks.info CHAPTER 1: Android Digital Imaging: Formats, Concepts, and Optimization There are several common color depths used in the digital imaging industry, and I will outline the most common ones here along with their formats The lowest color depth exists in an 8-bit indexed color image, which has 256 color values, and uses the GIF and PNG8 image formats to contain this indexed color type of digital image data A medium color depth image features a 16-bit color depth and thus contains 65,536 colors (calculated as 256 x 256); it is supported in the TARGA (TGA) and Tagged Image File Format (TIFF) digital image formats Note that Android does not support any of the 16-bit color depth digital image file formats (TGA or TIFF), which I think is an omission, as 16-bit color depth support would greatly enhance a developer image data footprint optimization, a subject which we will be covering later on in the chapter A high color depth image features a 24-bit color depth and thus contains over 16 million colors This is calculated as 256 x 256 x 256 and equals 16,777,216 colors File formats supporting 24-bit color include JPEG (or JPG), PNG, TGA, TIFF and WebP Using 24-bit color depth will give you the highest quality level, which is why Android prefers the use of a PNG24 or a JPEG image file format Since PNG24 is lossless, it has the highest quality compression (lowest original data loss) along with the highest quality color depth, and so PNG24 is the preferred digital image format to use, as it produces the highest quality Representing Colors in Android: Hexadecimal Notation So now that you know what color depth is, and that color is represented as a combination of three different red, green, and blue color channels within any given image, we need to look at how we are to represent these three RGB color channel values It is also important to note that in Android, color is not only used in 2D digital imagery, also called bitmap imagery, but also in 2D illustrations, commonly known as vector imagery, as well as in color settings, such as the background color for a user interface screen or text color In Android, different levels of RGB color intensity values are represented using hexadecimal notation, the Base 16 computer notation invented decades ago to represent 16 bits of data value Unlike Base 10, which counts from zero through 9, Base 16 counts from zero through F, where F represents a Base 10 value of 15 (or if you are a programmer you could count from 0–15, which also gives 16 decimal data values, either way you prefer to look at it) See Table 1-1 for some examples Table 1-1. Hexadecimal Values and Corresponding Decimal Values Hexadecimal Values: A B C D E F Decimal Values: 10 11 12 13 14 15 www.it-ebooks.info CHAPTER 1: Android Digital Imaging: Formats, Concepts, and Optimization A hexadecimal value in Android always starts with a pound sign, like this: #FFFFFF This hexadecimal data color value represents a color of white As each slot in this 24-bit hexadecimal representation represents one Base 16 value, to get the 256 values you need for each RGB color will take slots, as 16 x 16 equals 256 Thus for a 24-bit image you need six slots after the pound sign to hold each of the six hexadecimal data values The hexadecimal data slots represent the RGB values in a following format: #RRGGBB So, for the color white, all red, green, and blue channels in this hexadecimal color data value representation are at the maximum luminosity If you additively sum all of these colors together you’ll get white light As mentioned, the color yellow is represented by the red and green channels being on and the blue channel being off, so the hexadecimal representation is #FFFF00, where both red and green channel slots are on (FF or 255), and blue channel slots are fully off (00 or a zero value) It is important to note here that there is also a 32-bit image color depth whose data values are represented using an ARGB color channel model, where the A stands for alpha, which is short for alpha channel I will be going over the concept of alpha and alpha channels, as well as pixel blending, in great detail in the next section of this chapter The hexadecimal data slots for an ARGB value hold data in the following format: #AARRGGBB So for the color white, all alpha, red, green, and blue channels in this hexadecimal color data value representation are at a maximum luminosity (or opacity), and the alpha channel is fully opaque, as represented by an FF value, so its hexadecimal value is #FFFFFFFF A 100% transparent alpha channel is represented by setting the alpha slots to zero; thus, a fully transparent image pixel is #00FFFFFF, or #00000000 If an alpha channel is transparent, color value doesn’t matter! Image Compositing: Alpha Channels and Blending Modes In this section we will take a look at compositing digital images This is the process of blending together more than one layer of a digital image in order to obtain a resulting image on the display that appears as though it is one final image, but which in fact is actually a collection of more than one seamlessly composited image layers To accomplish this, we need to have an alpha channel (transparency) value that we can utilize to precisely control the blending of that pixel with the pixel (in that same location) on the other layers above and below it Like the other RGB channels, the alpha channel also has 256 levels of transparency as represented by two slots in the hexadecimal representation for the ARGB data value, which has eight slots (32-bits) of data rather than the six slots used in a 24-bit image, which can be thought of as a 32-bit image with no alpha channel data Indeed, if there’s no alpha channel data, why waste another bits of data storage, even if it’s filled with F’s (or fully opaque pixel values, which essentially equate to unused alpha transparency values) So a 24-bit image has no alpha channel and is not going to be used for compositing, for instance the bottom plate in a compositing layer stack, whereas a 32-bit image is going to be used as a compositing layer on top of something else that will need the ability to show through (via transparency values) in some of the pixel locations in the image composite www.it-ebooks.info Pro Android Graphics Copyright © 2013 by Wallace Jackson This work is subject to copyright All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed Exempted from this legal reservation are brief excerpts in connection with reviews or scholarly analysis or material supplied specifically for the purpose of being entered and executed on a computer system, for exclusive use by the purchaser of the work Duplication of this publication or parts thereof is permitted only under the provisions of the Copyright Law of the Publisher’s location, in its current version, and permission for use must always be obtained from Springer Permissions for use may be obtained through RightsLink at the Copyright Clearance Center Violations are liable to prosecution under the respective Copyright Law ISBN-13 (pbk): 978-1-4302-5785-1 ISBN-13 (electronic): 978-1-4302-5786-8 Trademarked names, logos, and images may appear in this book Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made The publisher makes no warranty, express or implied, with respect to the material contained herein President and Publisher: Paul Manning Lead Editor: Tom Welsh Technical Reviewer: Michael Thomas Editorial Board: Steve Anglin, Mark Beckner, Ewan Buckingham, Gary Cornell, Louise Corrigan, Morgan Ertel, Jonathan Gennick, Jonathan Hassell, Robert Hutchinson, Michelle Lowman, James Markham, Matthew Moodie, Jeff Olson, Jeffrey Pepper, Douglas Pundick, Ben Renow-Clarke, Dominic Shakeshaft, Gwenan Spearing, Matt Wade, Tom Welsh Coordinating Editor: Katie Sullivan Copy Editor: Mary Behr Compositor: SPi Global Indexer: SPi Global Artist: SPi Global Cover Designer: Anna Ishchenko Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street, 6th Floor, New York, NY 10013 Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail orders-ny@springer-sbm.com, or visit www.springeronline.com Apress Media, LLC is a California LLC and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc) SSBM Finance Inc is a Delaware corporation For information on translations, please e-mail rights@apress.com, or visit www.apress.com Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use eBook versions and licenses are also available for most titles For more information, reference our Special Bulk Sales–eBook Licensing web page at www.apress.com/bulk-sales Any source code or other supplementary materials referenced by the author in this text is available to readers at www.apress.com For detailed information about how to locate your book’s source code, go to www.apress.com/source-code/ www.it-ebooks.info This book is dedicated to everyone in the open source community who works so diligently at making professional new media software and application development tools available for anybody to use to achieve their dreams and goals Last, but certainly not least, to my family, friends, clients, and neighbors for their help, assistance, and those great late night fiestas www.it-ebooks.info Contents About the Author�� xvii About the Technical Reviewer�� xix Acknowledgments�� xxi ■■Chapter 1: Android Digital Imaging: Formats, Concepts, and Optimization�� Android’s Digital Image Formats: Lossless Versus Lossy��2 Android View and ViewGroup Classes: Image Containers��2 The Foundation of Digital Images: Pixels and Aspect Ratio��3 The Color of Digital Images: Color Theory and Color Depth��4 Representing Colors in Android: Hexadecimal Notation��5 Image Compositing: Alpha Channels and Blending Modes��6 Digital Image Masking: A Popular Use for Alpha Channels��7 Smoothing Edges in a Mask: The Concept of Anti-Aliasing��8 Optimizing Digital Images: Compression and Dithering��9 Download the Android Environment: Java and ADT Bundle��11 Installing and Updating the Android Developer ADT Bundle��15 Summary��22 vii www.it-ebooks.info viii Contents ■■Chapter 2: Android Digital Video: Formats, Concepts, and Optimization��25 Android Digital Video Formats: MPEG4 H.264 and WebM VP8��26 Android VideoView and MediaPlayer Class: Video Players��27 The Foundation of Digital Video: Motion, Frames and FPS��28 Digital Video Conventions: Bit Rates, Streams, SD, and HD��29 Digital Video Files for Android: Resolution Density Targets��31 Optimizing Digital Video: Codecs and Compression��32 Creating Your Pro Android Graphics App in Eclipse ADT��34 Creating Your Video Start-Up Screen User Interface Design��42 Taking a Look at Your MainActivity.java Activity subclass��43 Creating Your Video Assets: Using Terragen 3D Software��44 Creating Uncompressed Video: Using VirtualDub Software��46 Compressing Your Video Assets: Using Sorenson Squeeze��53 Installing a Video Asset in Android: Using the Raw Folder��59 Referencing the Video Asset in Your Android Application��62 Summary��67 ■■Chapter 3: Android Frame Animation: XML, Concepts, and Optimization��69 Frame Animation Concepts: Cels, Framerate, and Resolution��70 Optimizing Frame Animation: Color Depth and Frame Rate��71 Creating Frame Animation in Android Using XML Markup��72 Android Tag: The Parent Frame Container��73 Android’s Tag: Specifying Your Animation Frames��73 Creating a Frame Animation for our GraphicsDesign App��74 Copying Resolution Density Target Frames��74 Creating Frame Animation Definitions Using XML��76 Reference the Frame Animation Definition in an ImageView��80 Instantiating the Frame Animation Definition Using Java��89 Summary��92 www.it-ebooks.info Contents ix ■■Chapter 4: Android Procedural Animation: XML, Concepts, and Optimization��95 Procedural Animation Concepts: Tweens and Interpolators��95 Procedural Animation Data Values: Ranges and Pivot Point��98 Procedural Animation Transforms: Rotate, Scale, Translate��98 Procedural Animation Compositing: Alpha Blending��99 Procedural Animation Timing: Using Duration and Offsets��100 Procedural Animation Loops: RepeatCount and RepeatMode��100 The Tag: Using XML to Group Procedural Animation��101 Procedural Animation vs Frame Animation: The Trade-Off��102 Creating Procedural Animation in your GraphicsDesign App��103 Creating a Procedural Animation Definition Using XML��104 Instantiating the Animation Object in MainActivity.java��109 Using Set to Create a More Complex Procedural Animation��111 Rotation Transformation: Going a Bit Too Far with FX��115 Tweaking Transform Values: The Ease of Adjusting XML��119 Summary��120 ■■Chapter 5: Android DIP: Device-Independent Pixel Graphics Design��121 How Android Supports Device Displays: UI Design and UX��121 Device Display Concepts: Size, Density, Orientation, DIP��122 Density Independence: Creating Similar User Experiencesl��124 Android Multi-Screen Support Via Tag��126 Providing Device-Optimized User Interface Layout Designs��128 Using Android’s SmallestWidth Screen Configuration Modifier�� 129 Using the Available Screen Width Screen Configuration Modifier�� 130 Using the Available Screen Height Screen Configuration Modifier�� 130 Providing Device-Optimized Image Drawable Assets��131 The DisplayMetrics Class: Size, Density, and Font Scaling��132 Optimizing Android Application Icons for LDPI to XXXHDPI��133 Installing the New App Icon in the Correct Density Folders��139 www.it-ebooks.info x Contents Configuring the AndroidManifest.xml for Custom App Icon��141 Testing the New Application Icon and Label on Nexus One��144 Summary��145 ■■Chapter 6: Android UI Layouts: Graphics Design Using the ViewGroup Class��147 Android ViewGroup Superclass: A Foundation for Layouts��148 The ViewGroup LayoutParams Class: Layout Parameters��149 Deprecated Layouts: AbsoluteLayout and SlidingDrawer��150 Android’s Experimental Layout: SlidingPaneLayout��150 Android RelativeLayout Class: Designing Relative Layouts��152 Android LinearLayout Class: Designing Linear Layouts��153 Android FrameLayout Class: Designing Frame Layouts��154 Android GridLayout Class: Designing UI Layout Grids��155 The DrawerLayout Class: Designing UI Drawer Layouts��158 Adding Menu Items to Access the UI Layout Container��160 Creating a Table of Contents Activity for Your UI Design��163 Creating an XML Table of Contents LinearLayout UI Design��166 Adding Text UI Widgets to the TOC UI Layout Container��170 Using onOptionsItemSelected( ) to Add Menu Functionality��177 Testing the Table of Contents Activity on the Nexus One��179 Summary��180 ■■Chapter 7: Android UI Widgets: Graphics Design Using the View Class��183 The Android View Class: The Foundation for UI Widgets��184 View Basic Properties: ID, Layout Positioning, and Size��185 View Positioning Characteristics: Margins and Padding��186 View Graphic Properties: Background, Alpha, and Visibility��188 A View’s Functional Characteristics: Listeners and Focus��189 Bookmark Utility UI: Using a RelativeLayout and TextView��190 Using an ImageView Widget: The Cornerstone of Graphics ��199 Testing Your UI Design in the Nexus One Landscape Mode��206 www.it-ebooks.info Contents xi Adding a Drop Shadow Effect to an ImageView Image Asset��207 Changing Your ImageView XML to Incorporate a New Asset��220 Compositing a Background Image in Your RelativeLayout��223 Summary��226 ■■Chapter 8: Advanced ImageView: More Graphics Design Using ImageView��229 Graphics in Android: The Origins of the ImageView Class��230 The ImageView.ScaleType Nested Class: Scaling Control��231 Using AdjustViewBounds and How it Relates to ScaleType��233 MaxWidth and MaxHeight: Controlling AdjustViewBounds��234 Setting a Baseline in ImageView and Controlling Alignment��235 Using the CropToPadding Method to Crop Your ImageView��235 Tinting an ImageView and Color Blending Using PorterDuff��236 Apply Tint to SkyCloud Image to Improve Shadow Contrast��237 Cropping Your SkyCloud Image Asset Using CropByPadding��241 Changing the Baseline Alignment Index for Your ImageView��245 Performing Image Scaling: Margins and Padding Attributes ��248 Summary��253 ■■Chapter 9: Advanced ImageButton: Creating a Custom Multi-State ImageButton��255 Button Graphics in Android: ImageButton Class Overview��256 ImageButton States: Normal, Pressed, Focused, and Hovered��256 ImageButton Drawable Assets: Compositing Button States��257 An ImageButton Drawable: Setting Up the Multi-State XML��266 Create All ImageButton State Assets: Density Resolutions��270 Scaling the ImageButton Down to a UI Element-Like Scale��276 Summary��280 ■■Chapter 10: Using 9-Patch Imaging Techniques to Create Scalable Imaging Elements��283 Android NinePatchDrawable: A Foundation for NinePatch��284 NinePatch Graphics Assets: A 9-Patch Concepts Overview��285 www.it-ebooks.info xii Contents The Android NinePatch Class: Creating a NinePatch Asset��286 The Draw 9-Patch Tool: Create NinePatchDrawable Assets��287 Implementing Your NinePatch Asset Using XML Markup��299 Summary��305 ■■Chapter 11: Advanced Image Blending: Using Android PorterDuff Classes��307 Pixel Blending: Take Image Compositing to the Next Level��308 Android’s PorterDuff Class: The Foundation for Blending��308 The PorterDuff.Mode Class: Android Blending Constants��309 The PorterDuffColorFilter Class: Blending Your ColorFilter��312 Applying ColorFilter Effects to Image Assets Using PorterDuff��313 The PorterDuffXfermode Class: Apply Blending Constants��317 The Paint Class: Apply a Blending Constant Onto an Image��318 Using Bitmap Classes to Apply PorterDuff Between Images��319 Using setXfermode( ) Method to Apply PorterDuffXfermode��320 The Canvas Class: Creating a Canvas for Our Compositing��321 Creating an ImageView in XML and Java to Display Canvas��323 Writing the Canvas to an ImageView Via setBitmapImage( )��325 Summary��330 ■■Chapter 12: Advanced Image Compositing: Using the LayerDrawable Class��333 Layer Drawables: Take Image Compositing to a New Level��334 Android’s LayerDrawable Class: A Foundation for Layers��334 The Parent Tag: Setting Up Layers Using XML��335 Instantiating a LayerDrawable for PorterDuff Compositing��346 Create a Drawable Object to Hold the LayerDrawable Asset��347 Cast a Drawable to a BitmapDrawable and Extract a Bitmap��348 Modifying the PorterDuff Pipeline to Use a LayerDrawable��351 Switch LayerDrawable Image Asset: Source to Destination��353 Changing the LayerDrawable Layer Used in Our Pipeline��354 www.it-ebooks.info Contents xiii Exercise for the Reader: Using Two LayerDrawable Assets��358 Some Final Digital Image Compositing Caveats in Android��358 Summary��359 ■■Chapter 13: Digital Image Transitions: Using the TransitionDrawable Class��361 Transitions: Image Blending to Create an Illusion of Motion��362 Android’s TransitionDrawable Class: A Transition Engine��362 The Parent Tag: Setting Up Transitions in XML��363 Instantiating ImageButton and TransitionDrawable Objects��370 Using the reverseTransition( ) Method for Pong Transitions��379 Advanced TransitionDrawable Compositing via ImageView��381 Summary��383 ■■Chapter 14: Frame-Based Animation: Using the AnimationDrawable Class��385 The AnimationDrawable Class: A Frame Animation Engine��386 The DrawableContainer Class: A Multi-Drawable Drawable��386 Creating Your AnimationDrawable Splashscreen Using Java��387 Using the Android Runnable Class to Run Your Animation��389 Creating a setUpAnimation( ) Method for Your Animation��390 Creating a New AnimationDrawable Object and Referencing Its Frames��391 Using the AnimationDrawable Class’s addFrame( ) Method��392 Configuring an AnimationDrawable by Using setOneShot( )��394 Scheduling an AnimationDrawable Using the Handler Class��395 Designing an AnimationDrawable to Loop Back to Frame 1��398 Adding Event Handling to Allow Frame Animation by Click��399 Summary��408 ■■Chapter 15: Procedural Animation: Using the Animation Classes��411 The Animation Class: Your Procedural Animation Engine��412 TranslateAnimation Class: Animation Subclass for Moving��413 The ScaleAnimation Class: Animation Subclass for Scaling��413 www.it-ebooks.info xiv Contents Scaling Up Your Logo: Using the ScaleAnimation Class��414 AlphaAnimation Class: Animation Subclass for Blending��419 Fading In Your PAG Logo: Using the AlphaAnimation Class��420 The AnimationSet Class: Creating Complex Animation Sets��423 Creating an AnimationSet for Your PAG Logo Animation��425 RotateAnimation Class: Animation Subclass for Rotation��431 Rotating Your PAG Logo: Using the RotateAnimation Class��432 Using an Android Runnable Class to Run the AnimationSet��436 Creating a TranslateAnimation Object for Your AnimationSet��436 Summary��436 ■■Chapter 16: Advanced Graphics: Mastering the Drawable Class��439 Android Drawable Resources: Types of Drawable Objects��439 Creating a ShapeDrawable Object: XML Parent Tag��441 The Android Drawable Class: The Blueprint for Graphics��454 Creating Your Custom Drawable: ImageRoundingDrawable��456 Creating a Paint Object to Use to Paint the Drawable Canvas��459 The Android Shader Superclass: Texture Maps for Painting��460 The Shader.TileMode Nested Class: Shader Tiling Modes��461 The BitmapShader Class: Texture Mapping Using Bitmaps��462 Creating and Configuring a BitmapShader for the Drawable��462 Android Rect and RectF Classes: Defining the Draw Area��467 Defining Your RectF Object and Calling drawRoundRect( )��468 The Java InputStream Class: Reading Raw Data Streams�� 473 Summary��477 ■■Chapter 17: Interactive Drawing: Using Paint and Canvas Classes Interactively��479 The Android onDraw( ) Method: Drawing onto Your Screen��480 The Android Canvas Class: The Digital Artisan’s Canvas��480 The Android Paint Class: The Digital Artisan’s Paintbrush��481 Setting Up Your GraphicsDesign Project for Your SketchPad��484 www.it-ebooks.info Contents xv Creating a Custom View Class: Your SketchPadView Class��489 The Android Context Class: Telling Your Activity Where It Is��492 Configuring Your SketchPadView( ) Constructor Method��493 Creating a Coordinate Class to Track Touch X and Y Points��496 The Java List Utility Class: Get Your Collections in Order��497 Java’s ArrayList Utility Class: An Array of Collection List��497 Creating an ArrayList Object to Hold Your Touch Point Data��498 Implementing Your onDraw( ) Method: Painting Your Canvas��500 Creating Your OnTouchListener( ) Method: Event Handling��501 Android’s MotionEvent Class: Movement Data in Android��502 Processing Your Movement Data: Using getX( ) and getY( )��503 Coding Your SketchPad Activity: Using the SketchPadView��506 Testing the SketchPad Activity Class: Handwriting a PAG Logo��508 Paint Using a Bitmap Source: Implementing Your InkShader��509 Summary��513 ■■Chapter 18: Playing Captive Video Using the VideoView and MediaPlayer Classes��515 A Life of a Video: The Stages of a Video Playback Lifecycle��516 Where Video Lives: The Data URI and Android’s Uri Class��516 Android’s MediaPlayer Class: Controlling Video Playback��517 The Android VideoView Class: The Video Asset Container��518 Using the MediaPlayer Class: Looping a Video Seamlessly��519 Setting Up Scaling Video Assets to Fit any Screen Aspect Ratio��523 Optimizing Your Range of Video Asset Resolution Targets��529 Using 16:9 Low Resolution 640x360 Digital Video Assets��532 Using NetBook Resolution 1024x600 Digital Video Asset��533 Using Low HD Resolution 1280x720 Digital Video Assets��534 Using a True HD 1920x1080 Digital Video Asset for iTVs��535 Analyzing Target Resolution Compression Ratio Results��536 www.it-ebooks.info xvi Contents Using the WebM VP8 Codec to Compress Pseudo HD Video��538 Using the WebM VP8 Codec to Compress True HD Video��540 Summary��544 ■■Chapter 19: Streaming Digital Video from an External Media Server��545 Can I Stream Video? Setting a Manifest Internet Permission��546 When Video Lives Far Away: The HTTP URL and Your URI��546 The ProgressDialog Class: Show Your Download Progress��548 Implementing a ProgressDialog in the GraphicsDesign App��549 Testing the Progress Dialog: Dealing with Compiler Errors��556 Streaming Digital Video Using the WebM VP8 Video Codec��561 Making Your Video Playback App Aware of Its Orientation��563 Android’s Display Class: Physical Display Characteristics��564 The Android DisplayManager Class: Managing the Display��565 Android’s WindowManager Interface: Managing a Window��565 Setting Up a Display Object to Ascertain the Device Rotation��566 Android’s Surface Class: Grab Your Display’s Raw Buffer��570 Using a getRotation( ) Method Call to Drive a Switch Loop��571 Testing Streaming Video in Portrait and Landscape Orientations��573 Some Caveats About Using Digital Video in Android��576 Android’s DisplayMetrics Class: A Display’s Specifications��576 Summary��577 Index��579 www.it-ebooks.info About the Author Wallace Jackson has been writing for vanguard multimedia publications about his work in new media content development since the advent of Multimedia Producer Magazine more than two decades ago, when he wrote about computer processor architectures for the magazine centerfold (a removable “mini-issue” insert) distributed at SIGGRAPH Since then, Wallace has written for numerous publications regarding his content production work in interactive 3D and new media advertising campaign design He has written for industry trades such as 3D Artist, Desktop Publishers Journal, CrossMedia Magazine, Kiosk Magazine, Digital Signage Magazine, and AVvideo Magazine Wallace Jackson was a COBOL and RPGII programmer in his early teens, and later he coded applications using Java, JavaScript, and HTML5 Wallace has written several popular application programming books on Java and Android development for Apress (Springer) over the past few years Wallace Jackson is currently the CEO of Mind Taffy Design, a multimedia content production and digital campaign design and development agency in Northern Santa Barbara County, located halfway between their clientele in Silicon Valley and Hollywood, Irvine, and San Diego Over the past two decades, Mind Taffy Design has created i3D digital new media content deliverables using leading open source technologies such as PDF, HTML5, WebGL, Java, JavaFX, and Android for many of the top branded manufacturers in the world, including Sony, Samsung, IBM, Epson, Nokia, Tyco, Sun, KDS, Micron, CTX, EIZO, TEAC, SGI, and Mitsubishi Wallace Jackson received his undergraduate degree in Business Economics from the University of California at Los Angeles (UCLA), and his graduate degree in MIS Design and Implementation from the University of Southern California (USC) His post-graduate degree in Marketing Strategy is also from USC, where he completed the USC Graduate Entrepreneurship Program xvii www.it-ebooks.info About the Technical Reviewer Michael Thomas has worked in software development for over 20 years as an individual contributor, team lead, program manager, and Vice President of Engineering Michael has over 10 years experience working with mobile devices His current focus is in the medical sector using mobile devices to accelerate information transfer between patients and health care providers xix www.it-ebooks.info Acknowledgments I would like to acknowledge all of the fantastic editors and their support staff at Apress who worked so very long and hard on this book, making it the ultimate all-around Pro Android Graphics book Tom Welsh, for his work as the Lead Editor on the book, and for his vast experience and invaluable guidance during the process of making the book leading-edge Katie Sullivan, for her work as the Coordinating Editor on the book, and for her unwavering diligence in making sure I either hit my writing deadlines, or even surpassed them Mary Behr, for her work as the Copy Editor on this graphics book, and for her attention to detail and to conforming the text to the current Apress writing standards Michael Thomas, for his work as the Technical Reviewer on this book, and for making sure I don’t make any mistakes because code with mistakes does not run properly, if at all, unless they are very lucky mistakes, which is quite rare in computer programming, but when it happens, it’s beautiful And finally Steve Anglin, Acquisitions Editor, for acquiring me as an author for Apress and Springer xxi www.it-ebooks.info ... your Android application, which you will be super-charging, from a graphics design perspective at least, during the duration of this Pro Android Graphics Design book www.it-ebooks.info Chapter Android. .. standpoint (app size) as well as from Android device types (a market coverage standpoint) You’ll create a pro. android. graphics Java package and a GraphicsDesign Android application in this chapter... Pixel Graphics Design��121 ■■Chapter 6: Android UI Layouts: Graphics Design Using the ViewGroup Class��147 ■■Chapter 7: Android UI Widgets: Graphics

Ngày đăng: 28/03/2019, 13:27