Google Material Design

[lainz]

The Material Design guidelines is now beign applied in the latest android release.

It consist of several indications in how-to-style an application.

I've tried this:
https://www.polymer-project.org/docs/elements/material.html#shadow-effect

And then: I can do it with BGRABitmap!

Code: [Select]

procedure TForm1.BGRAVirtualScreen1Redraw(Sender: TObject; Bitmap: TBGRABitmap);
var
  tmp : TBGRABitmap;
begin
  tmp := TBGRABitmap.Create(Width, Height, BGRAWhite);
  tmp.Rectangle(50, 50, 100, 100, BGRA(183,183,183,255), BGRA(183,183,183,255),dmSet);
  BGRAReplace(tmp, tmp.FilterBlurRadial(Rect(0,0,Width,Height),5,rbFast));
  Bitmap.PutImage(0,0,tmp,dmSet);
  Bitmap.Rectangle(50, 50, 100, 100, BGRA(183,183,183,255), BGRAWhite,dmSet);
  tmp.Free;
end; 
Of course is not optimized in any way just a try. Maybe can be optimized drawing a basic shadow in a pre-rendered BGRASliceScaling (like in BCImageButton) bitmap and then applied to the panel or other components..

[lainz]

Please don't use this code!

It's not efficient in any way. The best approach to shadow a component IMO is to use BGRASliceScaling as used in Custom Drawn Windows 7 Theme that comes with BGRA-Controls.

[aradeonas]

Truth is I cant find that where you shadow controls in that unit. Can you tell me what line?
And you say it's not efficient because of speed of blur?

[lainz]

Code: [Select]

// this is the shadow rectangle
  tmp.Rectangle(50, 50, 100, 100, BGRA(183,183,183,255), BGRA(183,183,183,255),dmSet);

Code: [Select]

// this apply blur to the shadow
  BGRAReplace(tmp, tmp.FilterBlurRadial(Rect(0,0,Width,Height),5,rbFast));
  Bitmap.PutImage(0,0,tmp,dmSet);

Code: [Select]

// this draw the white rectangle
  Bitmap.Rectangle(50, 50, 100, 100, BGRA(183,183,183,255), BGRAWhite,dmSet);
Exactly. Blur is slow. I prefer to use bitmaps.
See attached, all bitmaps I done with a professional image editing tool.

Toolbar with shadow.
Button with shadow.
Panel 1 big shadow. Panel 2 small shadow.
Rounded button with shadow.

Then I can use all of them in BGRABitmap using 'BGRASliceScaling'.

Edit: I've added 'Shadow' test project in BGRA-Controls SVN and seems that is a better option that using bitmaps. Check it out.

[aradeonas]

Thank you 007,
I test shadow project and its very good but for me its like your first Material Design code and my previous works.
By the way can you share attach project that you make screen shot with?I like the way it look likes specially circle button!

[lainz]

As I say you is full of bitmaps. BGRA Slice Scaling is well described in BC Image Button and Custom Drawn Windows 7. There's nothing new in this test. But now that I added 'Shadow' in BGRA-Controls I think I will do something better more customizable.

I now see the advantages of code:
- The shadow can be changed at runtime: position, color, blur size..
- Anything can be done with it!

Try it, now with 'Shadow' function you can recreate this screenshot in no time. Add some BGRAVirtualScreen one inside other and try.

BTW I come with time I'll add a material design Drawer or new component don't know..

[aradeonas]

I tested shadow before and its very good but when I read your post about not using it I wanted to see your 'BGRASliceScaling' demo that you attached screenshot otherwise shadow is very good.
Take a look at attachment,I done it before when I saw your material design code.

[lainz]

Code: [Select]

    button: TBGRASliceScaling;

...

procedure TForm1.BGRAGraphicControl1Redraw(Sender: TObject; Bitmap: TBGRABitmap
  );
begin
  button.Draw(bitmap, 0,0,bitmap.width,bitmap.height,false);
end;

procedure TForm1.FormCreate(Sender: TObject);
begin
  button := TBGRASliceScaling.Create('button.png');
  button.SetMargins(10,12,14,12);
  button.AutodetectRepeat;
end;

procedure TForm1.FormDestroy(Sender: TObject);
begin
  button.Free;
end; 

Say you have the attached bitmap and want to draw to a BGRAGraphicControl. This is the code you must use.

Set Align to alClient and resize the window to see the effect of this resizing method.

Is faster because it only needs to draw the bitmaps when you resize. If you use shadows you need to use blur in each resize call.

I say you check the other projects 'BCImageButton' and 'Slice Scaling Custom Drawn Windows 7', also 'Slice Scaling TAChart' that deeply uses this method of scaling.

[aradeonas]

OK I got it.Thank you