delphi component order and layer options - delphi

Question

I'm very new to delphi programming:(
I'm trying to make a customized component with a transparent background layer and a top layer with circle shape. However, the below code works fine when added on to a form.
Exception the fact that is there is another component overlaps with or on top of the the customized component, it lies below and doesn't show.
I've tried below on a form
BadgeTest1.BringToFront;
BadgeTest1.ComponentIndex:=2;
IndexVal:= BadgeTest1.ComponentIndex;
However, still doens't work. Is there anyway for the customized component to show on top of the other components? only the circle shape part?
Also, I've been trying to place a caption in the center(horizontally and vertically) of the customized component, I've tried with TextOut() procedure. if there is a better option, could you please let me know?
below is my code for the customized component called BadgeTest.
Please, help,
Thank you so much!
type
TBadgeTest=class(TGraphicControl)
private
FCaption:TCaption;
FColor:TColor;
FLayers:TLayerCollection;
FHeight:Integer;
FWidth:Integer;
protected
procedure Paint; override;
procedure SetBkgLayer;
procedure SetSecondLayer;
public
constructor Create(AOwner: TComponent); override;
destructor Destroy; override;
published
property Caption:TCaption read FCaption write FCaption;
end;
procedure Register;
implementation
procedure Register;
begin
RegisterComponents('Sample', [TBadgeTest]);
end;
constructor TBadgeTest.Create(AOwner: TComponent);
var
ACanvas:TcxCanvas;
begin
inherited;
FHeight:=20;
Self.Height:=FHeight;
Constraints.MaxHeight:=20;
Constraints.MinHeight:=20;
FHeight:=20;
Self.Width:=FWidth;
Constraints.MaxWidth:=20;
Constraints.MinWidth:=20;
end;
destructor TBadgeTest.Destroy;
begin
inherited;
end;
procedure TBadgeTest.SetBkgLayer;
var
Bitmap:TBitmap32;
Layer: TCustomLayer;
begin
FLayers := TLayerCollection.Create(Self);
Layer := FLayers.Add(TBitmapLayer);
Layer.Index:=0;
Bitmap:= TBitmap32.Create;
Bitmap.DrawMode:=dmOpaque;
Bitmap.SetSize(Width, Height);
Bitmap.clear($00000000);
Bitmap.Canvas.Pen.Width:=0;
Bitmap.Canvas.Brush.Color:=$00107EFF;
Bitmap.Canvas.Brush.Style:=bsClear;
Bitmap.Canvas.Ellipse(Rect(0,0,20,20));
end;
procedure TBadgeTest.SetSecondLayer;
var
Bitmap:TBitmap32;
Layer: TCustomLayer;
begin
Layer := FLayers.Add(TBitmapLayer);
Layer.Index:=1;
Layer.LayerOptions:= LOB_VISIBLE;
Bitmap:=TBitmap32.Create;
Bitmap.DrawMode:=dmCustom;
Bitmap.SetSize(Width, Height);
Bitmap.clear($00000000);
Bitmap.Canvas.Pen.Width:=0;
Bitmap.Canvas.Brush.Color:=$00107EFF; //FF7E10
Bitmap.Canvas.Brush.Style:=bsSolid;
Bitmap.Canvas.Ellipse(Rect(0,0,Self.Width,Self.Height));
Layer.BringToFront;
Layer.BringToFront;
//Layer.Scaled:=true;
// Layer.Bitmap:=Bitmap;
end;
procedure TBadgeTest.Paint;
var
R:TRect;
borderColor : Integer;
fillCircle : Integer;
fontColor : Integer;
fontSize : Integer;
Bitmap:TBitmapImage;
const
_FF7E10_COLOR:Integer = $00107EFF; //#FF7E10
begin
inherited;
borderColor:=_FF7E10_COLOR;
fillCircle:=_FF7E10_COLOR;
Canvas.Pen.Create;
Canvas.Pen.Style:=psClear;
Canvas.Pen.Color:=borderColor;
Canvas.Pen.Width:=0;
SetBkgLayer;
SetSecondLayer;
Canvas.Brush.Create;
Canvas.Brush.Style:= bsClear;
Canvas.Brush.Color:=fillCircle;
Canvas.Ellipse(0,0,Self.Width,Self.Height);
Canvas.Font.Color:=clWhite;
Canvas.Font.Name:='Arial';
Canvas.Font.Size:=8;
Canvas.Font.Quality := fqNonAntialiased;
Canvas.Font.Style := [fsBold];
R.Create(0, 0, Self.Width, Self.Height);
//DrawText(Canvas.Handle, PChar(FCaption), -1, R, vaCenter);
// Canvas.DrawText(FCaption, R, taCenter, vaCenter, False, False);
Canvas.TextOut(5, 5, FCaption);
//SetTextAlign(Canvas.Handle, ta_center);
//DrawText(Canvas.Handle, PChar(FCaption),
//R.Create(1, 10, 2, 26);
// Self.Width := Canvas.TextWidth(FCaption) + 30;
end;

Answer 1

A TGraphicControl has no window handle, and is simply painted on its Parent DC.
You can't bring a TGraphicContol in front of a TWinContol descendant (such as TPanel, TButton, TEdit etc).
Either use a TWinControl descendant as shown in your previous question which could be brought in front of other child TWinControl, or redesign your UI in such a way that eliminates a situation where another TWinControl overlaps with or on top of your customized graphic control.
P.S: visual controls are referred to as "Controls", not "Components" (which are non-visual)