How to get smooth graphics (no jaggies)? - Design, Prototyping, UI, Graphics

How to get smooth graphics (no jaggies)? - Design, Prototyping, UI, Graphics

Hi
I built a simple clock app yesterday. It was surprisingly easy. One question I have though is how to make my images smooth (without jaggies). I drew my clock face and hands in photoshop. At first I did them at 300x300 pixels and the jaggies were so obnoxious I threw those images away. Then I did everything at 1000 x 1000 pixels and resized down to 300 when I was finished. This was much better, but still not as smooth as the clock in Jelly Bean. I notice that most of the graphics and fonts I see in Android are all very smooth. I've been testing the app on a Galaxy Nexus.
What is the secret to creating/displaying nice smooth images?
Thanks, Derek

vector graphic is the keyword with fix sized effects (photoshop, ie. inner shadow is always 1px, above 256px use 2px)... yeah, the simple bitmap resizing won't give pro result for you

Heh Yeah, I've had this problem and it was a ***** to solve. Mainly because the answer is distributed over a dozen different posts on half a dozen different forums.
Anyway, the answer depends mainly on if you're using imageviews/buttons or something or if you're drawing directly to a/your own canvas. But the way to solve it can be applied to both. It basically involves using BitmapFactory.Options and configuring it correctly:
Code:
private BitmapFactory.Options ops;
ops = new BitmapFactory.Options();
ops.inPurgeable = true; //means the system can recycle and reclaim the memory used by the bmp when the system has low memory
ops.inDensity = 0; //load the bitmap without scaling it to the screen density
ops.inDither = false; //don't dither (you only want dithering when you're working/converting between bitmaps/canvasses with different color depths (16bit to 8 bit etc)
ops.inScaled = false; //no scaling, related to some other settings in ops
ops.inPreferredConfig = Bitmap.Config.ARGB_8888; //load the bmp into a 32bit argb bitmap
ops.inJustDecodeBounds = false; //if true, you're just looking at the underlying bmp data, eg to see the height/width without loading the bmp into memory
//then load your bitmap like so:
Bitmap yourbitmap = BitmapFactory.decodeResource(getResources(), R.drawable.yourprettybmp, ops);
Now you can use the bitmap to draw onto all kinds of surfaces or load it into widgets.
Be warned, this is a non-mutable bitmap. If you want to change it's data (like you want to draw on it by making it the backing bmp of a canvas) you'll have to get a copy of the BMPFactory.decodeResouce bit by adding
Code:
.copy(Config.ARGB_8888, true);
to it.
For resizing the bmp, you can also do the following (which returns a mutable bmp, so you won't need the copy bit above):
Code:
yourresizedbmp = Bitmap.createScaledBitmap(yourbmp, width, height, true);
Of course, you can combine all this in one step (where "res" is a reference to getResources()):
Code:
yourresizedbmp = Bitmap.createScaledBitmap(BitmapFactory.decodeResource(res, bgIDInt, ops), width, height, true);
One more thing to ensure quick drawing, lower memory usage etc is to define the window type of your activity to match the colour depth of your bitmaps. You can do that by adding the following to the onCreate of your activity:
Code:
getWindow().setFormat(PixelFormat.RGBA_8888);
And if you're also drawing to a surface canvas in a thread, you also set that:
Code:
mSurfaceHolder.setFormat(PixelFormat.RGBA_8888);
Anyway, the most important thing is the "ops" section. Hope you get it sorted!
PS: clean, minimal graphics can often be more easily gotten by just drawing things yourself on a canvas (extend the View object and override it's onDraw()). Just use a correctly setup and antialiased Paint to draw circles, lines and text on it and use the result.

Bitmaps are not generally used for graphics. Try to use PNG images, Google does so too.

I might be wrong, but from the OP it seems like you're using the same image size for all resolutions, use the Android Dpi Calculator to easily get the right dimensions for each screen resolution (and put the resized images respectively in /res/drawable-xhdi, hdpi, mdpi, ldpi...)
If you didn't do so, then it's definitely the problem as mdpi is the default behaviour of /res/drawable, so it will be awfully resized on your xhdpi Galaxy Nexus.

dealy663 said:
Hi
I built a simple clock app yesterday. It was surprisingly easy. One question I have though is how to make my images smooth (without jaggies). I drew my clock face and hands in photoshop. At first I did them at 300x300 pixels and the jaggies were so obnoxious I threw those images away. Then I did everything at 1000 x 1000 pixels and resized down to 300 when I was finished. This was much better, but still not as smooth as the clock in Jelly Bean. I notice that most of the graphics and fonts I see in Android are all very smooth. I've been testing the app on a Galaxy Nexus.
What is the secret to creating/displaying nice smooth images?
Thanks, Derek
Click to expand...
Click to collapse
Not sure if you've fixed this already but it's really easy. No code is required to remove jaggies, regardless of resolution. Assuming you're using Photoshop, choose save for web and devices, then select PNG-24 (not jpg or PNG-8) with transparency enabled. Initial resolutions of 200x200, 300x300 etc. are all fine; there's no need to create it at 1000x1000 and scale down if you need something smaller. Your graphics will look great.
One more tip - clock widgets fill a certain number of "squares" on the home screen grid, so just make sure that you determine the right number of dp pixels to cover the size you want (e.g., 2x2 or 2x4, or 3x3) and then specify it in xml. See the Android site for widget sizing.

Related

Size of Form

Hello,
i have an application, programmed in C#. I wanna that the size of the gui will automatically adapt to the size of the phone on which the application get used.
How can I do this?

In the Paint() event of the form examine its ClientSize property. This is the size of the client (White) area of the screen. It is itself a Size object with Height and Width integer properties, this.ClientSize.Width and this.ClientSize.Height
Use these values to position/resize your objects on the screen, by changing their Size and Location (Left and Top) properties, so that they fit in this area.
This event occurs before the Paint() event of the child objects, so they will be repositioned/resized before they themselves are drawn.
To be clever, reposition and resize screen objects, scaled to the screen size at run time, not values hardcoded at development time.
This technique can also detect a change of orientation, the values of Height and Width change over! If you want to be smart, handle this as well, and your app should be starting look pretty damned professional. A bit of work and it should look good on all screen sizes. Test them out against the SDK's emulator images for a range of device screen sizes.
The following code example positions the label in the correct place. Hey Diddle Diddle, slap bang in the middle!
Code:
private void Form1_Paint(object sender, PaintEventArgs e)
{
label1.Left = (this.ClientSize.Width - label1.Size.Width) / 2;
label1.Top = (this.ClientSize.Height - label1.Size.Height) / 2;
label1.Text = this.ClientSize.Width.ToString() + " x " + this.ClientSize.Height.ToString();
}

do you have to do this with every object you put on it? Seems like a lot of code. (also im doing this in VB so far..)

I'm afraid so. But it's worth the effort. Also it will run on all screen sizes, see image, and also the oddball ones they haven't thought of yet!
Change 'this.' to 'me.' and omit the C# end of line character ';' and it's now in VB.

Does your form property AutoScaleMode is set to AutoScaleMode.Dpi?
For controls set the anchor property (default is top|left) also to right (and/or bottom if needed). That will automatically 'stretch' the controls.
Advanced:
Now, if you really want to support different resolutions it will take much more work:
As already mentioned you have to rearrange the controls on orientation changes. Take a look at Developing Orientation and dpi Aware Applications for the .NET Compact Framework!
And finally you have to provide images in different resolutions.
Adapt to New Screen Orientations and Resolutions
Of course you have to decide if this is really needed for your app as this will take much more time.

{Team Rejectz} THEME/DESIGN CHEAT SHEET{moved to theme sec sorry} {Still Working On}

This first post is about using Adobe Illustrator
I figured I would share a little knowlege of my designing and how when i came to android it helped out in making theming my rom so much quicker
ATTACHED AT THE BOTTOM IS A STARTER LAYOUT TO HELP MAKE LIFE EASIER FOR YOU!!!!!! :fingers-crossed:
THEME/DESIGN CHEAT SHEET
INDEX1. Tools..........................................................................
2. Begin.........................................................
3. The Setup...........................................
4. The Artboards.........................................................
5. Adding And Modifying Multiple Artboards.....................
6. Saving your Icons.................................
7. Layers, Colors, And Strokes................................................
8. SELECTING MULTIPLE LAYERS AND ICONS TO CHANGE COLOR AT ONCE.
9. TRACING TOOL...................................................
10. Keyboard shortcuts coming soon
1.TOOLS
First remove Adobe Photoshop and Fireworks from your playlist. To me these tools are crap or for short cuts. lol but short cuts coming soon
"Adobe Illustrator" and some quick learning or know how.
I'm not going to go over every single tool because if anyone knows illustrator lol its just way to many. Im just going to get to the main ones in this case in point.
2. BEGIN
Adobe Illustrator is one of the best graphic design tool I've ever used Ever. Your images would no longer start of as just a pic anymore. Now its time to learn vector.
Vector graphics is the use of geometrical primitives such as points, lines, curves, and shapes or polygon(s), which are all based on mathematical expressions, to represent images in computer graphics. "Vector", in this context, implies more than a straight line.
Vector graphics is based on images made up of vectors (also called paths, or strokes) which lead through locations called control points. Each of these points has a definite position on the x and y axes of the work plan. Each point, as well, is a variety of database, including the location of the point in the work space and the direction of the vector (which is what defines the direction of the track). Each track can be assigned a color, a shape, a thickness and also a fill. This does not affect the size of the files in a substantial way because all information resides in the structure; it describes how to draw the vector.
WIKI^^^^^ thanks
In short this means that all the res you would lose resizing images in Photoshop or Fireworks wouldn't be lost in Adobe illustrator because it use the vector format
When designing in vector you have so many capabilities that any format doesn't, like proper shading, 3D effects and the easiest way to change the color of multiple vec's at once on the same artboard.
The art board is the space and area in which your design would be held on. It's the only part that would be use to create the png, jpeg, etc. Anything on the edge or off of the artboard wouldn't come up at all in the image. This is convenient to me because I like to have almost the entire framework or system res themed perfectly. Meaning all color and tints and shade all match to the T. You also can line up anything to the artboard or to an object perfectly, so no more miss shaped png's lol.
There's also some tools there that you also seen in Photoshop and Fireworks.
My favorite part of adobe illustrator is the Effects section. This is how to avoid messing up when trying to make your own shading, shadows, 3D effects, glows and more. Trust me, when you get a taste of the effects your going to be trying anything!!!!!!
3. THE SETUP
Now it's time to prepare.
First you need to start a new project. Go to file and select new. Give your project a name. i prefer the name of the rom.
New documents profile - Don't change this because it going to change to custom by itself.
Number Of Art Boards - Keep this at 1 (im going to tell you how to add more)
Size - don't touch anything after size, just make sure Units Say Pixels
Advanced(drop down the menu) - There are 2 color mode RGB - and CMYK. Rgb modes give your stage for the artboards a white background as if it was on paper. Cmyk leave it empty or transparent like in a PNG. It's your choice on which you want.
Raster Effects - Make sure it's at High 300 PPI
4. THE ARTBOARDS
THERE IS A STARTER KIT FOR ARTBOARDS ATTACHED
The Artboard is pretty much a stage. This is where all the magic happens.
Now when your designing any icon you should make sure you know the sizes. Knowing all the sizes can be a hassle right, but this is where it gets really easy. Say you have 30 icons that are 72x72 if you have a project set up with multiple art boards you would be fine. because once you have made all the icons the save size is just a drag and click away.
5. ADDING AND MODIFYING MULTIPLE ART BOARDS
If you noticed which I'm sure everyone has, that some images match the size of other. This is where it gets very easy to make save and do it in a quick fashion.
Go to "File", scroll down to Document Setup and click on it. A window will appear don' worry about anything it the window unless you want to change things yourself. Just go to Edit artboard. You will notice that the screen has turned grey and now you artboard is the only thing thats white. If you hover over the grey you will see that your drag symbol has turned into a square. Us this to add more artboards. Click and hold on to the grey area and drag your mouse. You will see that you just added another artboard. To resize the artboard the Width which is labeled W and the Height which is labeled H will be in the upper right hand corner. Click on the artboard you want and start to reshape it according to the size you need. You can also drag the artboards to which ever place you want it to sit. Once done just click on the mouse pointer icon on the right and everything will be back to normal.
6. SAVING YOUR ICONS
When saving your icons make sure that where ever your project is you have it as the target location when saving. On your first save you should locate the folder and where the original file is and replace and save it. No need to type in the name. If you know where it is alphabetically, then just scroll to it, click on it and the name should appear in the File name box. If it tell you the file already exist, Do you want to replace? click Yes, but make sure you have a backup copy of the folder just in case. Also make sure you are on the right art board when saving. All it takes is a click on the artboard and you would be just fine.
7. ANCHORS, LAYERS, COLORS, AND STROKES
You ever find it a very long task to make all your icons the same or correct color. Or in short make them match. Well in vector format you can change all of the icons color at once. It has to be selected though. I know you wondered what the white arrow was for, well wonder no more. The white arrow it to select a layer, stroke, or any anchor on the vector image.
ANCHOR - this is single or multiple dots on a vector image that controls the path, line and/or stroke.
Layer is a section of the image thats either below, side by side, or on top of another image. You can change positions by right clicking on the image and use arrange to move its position.
Colors well you know what these are, But Illustrator has three different kind Grey Scale, RGB and CMYK (will be explained later)
Strokes are pretty much a line. It can be around the image, by itself or combined to create an image.( Will Be explained on how to manipulate a stroke in a image.)
To make it short grab the white pointer and have at it lol.
8. SELECTING MULTIPLE LAYERS AND ICONS TO CHANGE COLOR AT ONCE.
We all know images have layers but say you have several vector images that are 2 colored icons or more colors just stick with 2 for a sec. If you go to the image with the white pointer, You can click on the one color on the image and change it without making a mistake and turning the whole icon one color. Now to select more than one of the icons, say all of them where blue and green. Click on the green part of the icon. Now go to the top and click on "Select" scroll down to same. When the menu pop out, you will see that there are many ways to select multiple types of images. For right now click the one that says "Fill Color". All of the icons will be selected that has that same shade or ton of green. (note you must have them already colored in to match in order to select same). Now when you change the color they all will adjust together to make them Perfect.
9. TRACING TOOL.
This tool i would recommend that you stay away from and just design your stuff from scratch. Now I'm about to contradict myself lol but this tool is so f'ing handy if used right.
When tracing and image your pretty much turning it into a vector image with paths, strokes, and anchors. Its pretty much a conversion tool but difficult to use. If you have a colorful image that's when it gets hard. But if you have like a solid color shape its kinda easy.
Say like you have a picture of a solid black triangle in .png and .jpeg because you didn't feel like drawing one. Drag it to the artboard. You will see a button up top that wasn't there b4 called "Live Trace". Click on it and you will see your triangle go from a rough .png/.jpeg image to a smooth vector format triangle.
Now it gets hard.
If you have a multiple color image there are ways to trace it to a vector but not all get it the way you want. Just play around with it a little and you will see what i mean. The traces I'm talking about are in the drop down menu right next to the "Live Trace" button. You will see a slim button with a down pointing arrow.
10. Keyboard short Cuts(coming Soon)
To Be Continued - meaning im Sleepy lol

Photoshop Short Cuts
Photoshop Short Cuts

Adobe Fireworks Shortcuts
Adobe Fireworks Shortcuts

Using Adobe Flash To Make Bootanimations, Banners, and Sigs
Using Adobe Flash To Make Bootanimations, Banners, and Sigs

lorjay589 said:
Using Adobe Flash To Make Bootanimations, Banners, and Sigs
Click to expand...
Click to collapse
This is damn near the best post for theming I've ever seen! Simply awesome!. Please put this in the theming section for other young devs and themers alike. This should be a sticky!

{Team Rejectz} THEME/DESIGN CHEAT SHEET {Still Working On}

Photoshop Short Cuts
Photoshop Shortcuts
Index
1. .9 shortcuts Without Decompressed png
2. Batch File Opperation

Adobe Fireworks Shortcuts
Adobe Fireworks Shortcuts

even more

My biggest problem would be the dreaded 9patch
Sent from my SPH-D710 using xda premium

gtuansdiamm said:
My biggest problem would be the dreaded 9patch
Sent from my SPH-D710 using xda premium
Click to expand...
Click to collapse
dreaded 9patch? what is so hard about .9's

rujelus22 said:
dreaded 9patch? what is so hard about .9's
Click to expand...
Click to collapse
Lol yea thats the same thing i was thinking but, Im going to put a short cut for .9 patches for people who don't know how to do it. For Photoshop and Fireworks. But im not going to go into full details because there are post on here with that. Im just going to explain a quick way without decompressing a .9 png

Dude, this rocks. I will be using this like crazy for sure.

hi, I'm interested in learning how to theme, but I must admit, teaching me may be a pretty big project since the extent of my experience is making themes in UOT Kitchen.
would this tool be a good place to start?

mjs2011 said:
hi, I'm interested in learning how to theme, but I must admit, teaching me may be a pretty big project since the extent of my experience is making themes in UOT Kitchen.
would this tool be a good place to start?
Click to expand...
Click to collapse
yes sir this is the perfect place, while not done, im going to apply all of my knowledge of design to help out

Thanks! I may reach out to you privately as well, because I'd really be starting from scratch.

What would be killer is if we had a reference guide for the names for certain harder to find pngs. Background files and such.

Adapt app to all screen size

Hi, I'm developing a material design calculator but I have a problem: How could I do to adapt buttons to alla screen size? For example on mi Xperia S buttons are too small! If you want screenshot or the xml code tell me it. I'm sorry for my bad english I'm only 14 XD

Hi,
You need to use the size in DP instead of PX and use max/min size attribute on your XML file

Start using dp (density independent pixels), they are designed to scale a graphic to "real-life size" for example 48dp is a little bigger than the size of our fingers and is the recommended size for buttons in order to be easily touchable.
If you need more info about density independent pixels read from Android Developer's page "Supporting Different Densities" (I'm new here and I can't post URLs, just google it).

At first you need to read "Support multiple screens" article on android developer website.
For my opinion the best way is to use wrap_content match_parent instead of pixels.

Hi,
Since you mentioned you're making a calculator app, while using "dp" for button dimensions, I also suggest you look into using "weights".
These can evenly space out your buttons in a layout.
To use weights in Android, your content must be wrapped in a LinearLayout.

Append variable width bitmaps dynamically so that resultant bitmap row is centered

I'm pretty sure what I'm trying to do is impossible with Zooper — I've experimented and searched massively — but maybe some wiz actually will know a workaround to what I'm trying to do:
I want to have a widget — which will place let's say two bitmaps side by side: they will be selected dynamically and their widths vary massively. I want the resultant “image”, consisting of the two images, centered: thus I can't put one left—aligned image next to one right—aligned, because the whole thing will not be centered.
I hoped the image field would let me specify two consecutive “” fields and I could nicely center this compound object — but it doesn't work, only displays the first image.
Is there a way to accomplish what I'm after, or is it truly impossible?
--
白い熊

Develop Bugs

welcome