How to implement reflection

Put problem concerning Views, Layouts and other XML-Resources (like AndroidManifest) here.

How to implement reflection

Postby pjq » Wed May 27, 2009 9:00 am

How to implement reflection like this :


Image
Attachments
未命名.jpg
reflection
未命名.jpg (6.19 KiB) Viewed 397 times
pjq
Freshman
Freshman
 
Posts: 7
Joined: Fri May 15, 2009 1:36 am

Top

Postby keylimepai » Thu May 28, 2009 1:48 pm

Off the top of my head, it seems like the way to do it would be something like:

* Take the representation of the "image" that you want to mirror (either directly or from the canvas)
* Decide how much of the image you want to reflect under it, and create a new, say, Bitmap to hold it
* Copy the starting image onto the top of the this new image, and then use a transform/clip to copy the reflected part to the bottom
* Create a gradient from full alpha to fully transparent from the line of the reflection to the new bottom of the image

There are probably better ways to do it, but I think this will work, at least for a static reflection.
keylimepai
Junior Developer
Junior Developer
 
Posts: 14
Joined: Wed May 27, 2009 7:14 pm

Postby pjq » Thu May 28, 2009 2:11 pm

keylimepai wrote:Off the top of my head, it seems like the way to do it would be something like:

* Take the representation of the "image" that you want to mirror (either directly or from the canvas)
* Decide how much of the image you want to reflect under it, and create a new, say, Bitmap to hold it
* Copy the starting image onto the top of the this new image, and then use a transform/clip to copy the reflected part to the bottom
* Create a gradient from full alpha to fully transparent from the line of the reflection to the new bottom of the image

There are probably better ways to do it, but I think this will work, at least for a static reflection.
pjq
Freshman
Freshman
 
Posts: 7
Joined: Fri May 15, 2009 1:36 am

Postby pjq » Thu May 28, 2009 2:12 pm

keylimepai wrote:Off the top of my head, it seems like the way to do it would be something like:

* Take the representation of the "image" that you want to mirror (either directly or from the canvas)
* Decide how much of the image you want to reflect under it, and create a new, say, Bitmap to hold it
* Copy the starting image onto the top of the this new image, and then use a transform/clip to copy the reflected part to the bottom
* Create a gradient from full alpha to fully transparent from the line of the reflection to the new bottom of the image

There are probably better ways to do it, but I think this will work, at least for a static reflection.


Thanks for your suggestion.

Additionaly,it is not a static image.The numble in the image will be changed.
Actually,I want to know which relation functions I can used to do the work.

Anyone have idea about this?
Any suggestions will be appreciated.
pjq
Freshman
Freshman
 
Posts: 7
Joined: Fri May 15, 2009 1:36 am

Postby keylimepai » Thu May 28, 2009 6:27 pm

pjq wrote:Thanks for your suggestion.

Additionaly,it is not a static image.The numble in the image will be changed.
Actually,I want to know which relation functions I can used to do the work.

Anyone have idea about this?
Any suggestions will be appreciated.


It doesn't have to be a static image.

The method (I'd use) is something like this:

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. // height is height of the image you want to draw + space for reflection...
  2.  
  3. Bitmap canvasBitmap = Bitmap.createBitmap(width,height,Bitmap.Config.ARGB_8888);
  4.  
  5. Canvas myCanvas = new Canvas(canvasBitmap);
  6.  
  7.  
  8.  
  9. // Draw whatever needs to be reflected to the canvas
  10.  
  11. myCanvas.drawText("My text", x, y, myPaint);
  12.  
  13.  
  14.  
  15. // then create a function:
  16.  
  17. public void refectBitmap(Bitmap bitmap, float reflectionLine)
  18.  
  19. {
  20.  
  21.    // How tall is the reflection?
  22.  
  23.    int reflectionHeight= (int)(bitmap.getHeight() - reflectionLine);
  24.  
  25.  
  26.  
  27.    // Create an array to hold the data that's being reflected
  28.  
  29.    int[] reflectData = new int[(int)(bitmap.getWidth()) + 1];
  30.  
  31.  
  32.  
  33.    // How much should the alpha change between rows?
  34.  
  35.    float deltaAlpha = 255 / reflectionSize;
  36.  
  37.  
  38.  
  39.    // Current alpha
  40.  
  41.    int currentAlpha = 255;
  42.  
  43.  
  44.  
  45.    // There's probably a much better way to do this, but my brain isn't working
  46.  
  47.    for (int y = 0; y < reflectionHeight; ++y)
  48.  
  49.    {
  50.  
  51.       // Get a single line of data
  52.  
  53.       bitmap.getPixels(reflectData, 0, 1, 0, reflectionLine - y, bitmap.getWidth(), 1);
  54.  
  55.  
  56.  
  57.       // Reset the alpha values
  58.  
  59.       for (int x = bitmap.getWidth(); x>0; --x)
  60.  
  61.       {
  62.  
  63.          reflectData[x] = (reflectData[x] & 0x00ffffff) | (currentAlpha << 24);
  64.  
  65.       }
  66.  
  67.  
  68.  
  69.       // Reflect it...
  70.  
  71.       bitmap.setPixels(reflectData, 0, 1, 0, reflectionLine + y, bitmap.getWidth(), 1);
  72.  
  73.    }
  74.  
  75. }
  76.  
  77.  
Parsed in 0.034 seconds, using GeSHi 1.0.8.4

Then you can just use Canvas.drawBitmap(bitmap, x, y, null) to put it wherever you'd like on the actual canvas.

There may be horrible, horrible bugs/typos in this... I'm at work and don't have access to a java compiler right here, let alone the Android SDK ^^v

Hopefully that makes more sense though?
keylimepai
Junior Developer
Junior Developer
 
Posts: 14
Joined: Wed May 27, 2009 7:14 pm

Postby pjq » Thu May 28, 2009 7:32 pm

Thanks for your kindly reply.
I will try it though I don't know how to use Canvas right now.

Now is 2:28AM,I will go to sleep.

Have a nice day!!
pjq
Freshman
Freshman
 
Posts: 7
Joined: Fri May 15, 2009 1:36 am

Top

Postby phannguyen » Tue Jun 02, 2009 10:23 am

hi keylimepai,
please , explain for me more detail about variable
reflectionLine
reflectionSize

and i got an exception at

bitmap.getPixels(reflectData, 0, 1, 0, reflectionLine - y, bitmap.getWidth(), 1);

do you know why?
please show me
thanks a lot
PhanNguyen
phannguyen
Experienced Developer
Experienced Developer
 
Posts: 56
Joined: Thu Jul 17, 2008 7:37 am

Postby keylimepai » Wed Jun 03, 2009 12:49 am

I'm going to try an implement it now, so I'll hopefully have an answer (perhaps better) shortly.
keylimepai
Junior Developer
Junior Developer
 
Posts: 14
Joined: Wed May 27, 2009 7:14 pm

Postby phannguyen » Wed Jun 03, 2009 3:02 am

hi keylimepai,
Hope you implement it successfully and share for everyone.
have a nice day.
thanks for sharing. :D
PhanNguyen
phannguyen
Experienced Developer
Experienced Developer
 
Posts: 56
Joined: Thu Jul 17, 2008 7:37 am

Postby keylimepai » Wed Jun 03, 2009 5:27 am

Here's the class I implemented and the activity/main XML file...

The way it works is, the reflection will take up the space below a TextView, between the bottom of the last line of text and the bottom of the TextView itself. In order to use it effectively, therefore, one must set the "minHeight" attribute on the ReflectionTextView.

After that, simply write text inside it, and it will be reflected based on the InitialAlphaFactor and FinalAlphaFactor.

It's rather crude, but I hope it will provide a demonstration for how it can be done at least.
Attachments
main.xml.txt
XML Layout file... (rename .xml)
(597 Bytes) Downloaded 60 times
ReflectActivity.java
Demo activity
(359 Bytes) Downloaded 57 times
ReflectionTextView.java
Extension of TextView to support reflected text
(4.88 KiB) Downloaded 64 times
keylimepai
Junior Developer
Junior Developer
 
Posts: 14
Joined: Wed May 27, 2009 7:14 pm

Top

Return to View, Layout & Resource Problems

Who is online

Users browsing this forum: Exabot [Bot] and 5 guests