Inset is a pretty useful effect especially on text. Since your letters seems incrustated in the screen, the text is less prominent than a normal one making it perfect for secondary UI elements.
I personally use it on a text indicating how to use a row of sensitive elements just above:
The code of the view is given below:
using System ;
using System.Collections.Generic ;
using System.Linq ;
using System.Text ;
using Android.App ;
using Android.Content ;
using Android.OS ;
using Android.Runtime ;
using Android.Util ;
using Android.Views ;
using Android.Widget ;
using Android.Graphics ;
namespace Foo
{
public class InsetTextView : View
{
const int DefaultFontSize = 35 ;
const float Offset = 1 ;
string text ;
Paint textPaint ;
Paint lightPaint ;
Paint darkPaint ;
public InsetTextView ( Context context ) : base ( context )
{
Initialize ();
}
public InsetTextView ( Context context , IAttributeSet attrs ) :
base ( context , attrs )
{
text = attrs . GetAttributeValue ( null , "text" );
Initialize ();
}
public InsetTextView ( Context context , IAttributeSet attrs , int defStyle ) :
base ( context , attrs , defStyle )
{
text = attrs . GetAttributeValue ( null , "text" );
Initialize ();
}
private void Initialize ()
{
textPaint = new Paint () {
Color = Color . Rgb ( 0xe9 , 0xe9 , 0xe9 ),
AntiAlias = true ,
TextAlign = Paint . Align . Center ,
TextSize = DefaultFontSize
};
textPaint . SetTypeface ( Typeface . DefaultBold );
lightPaint = new Paint () {
Color = Color . Argb ( 0xfa , 0xff , 0xff , 0xff ),
AntiAlias = true ,
TextAlign = Paint . Align . Center ,
TextSize = DefaultFontSize
};
lightPaint . SetTypeface ( Typeface . DefaultBold );
darkPaint = new Paint () {
Color = Color . Argb ( 0x30 , 0 , 0 , 0 ),
AntiAlias = true ,
TextAlign = Paint . Align . Center ,
TextSize = DefaultFontSize
};
darkPaint . SetTypeface ( Typeface . DefaultBold );
}
public string Text {
get {
return text ;
}
set {
text = value ?? string . Empty ;
Invalidate ();
}
}
public Color TextColor {
get {
return textPaint . Color ;
}
set {
textPaint . Color = value ;
Invalidate ();
}
}
protected override void OnMeasure ( int widthMeasureSpec , int heightMeasureSpec )
{
var width = ( int ) Math . Ceiling ( textPaint . MeasureText ( text )) + 2 ;
var metrics = textPaint . GetFontMetricsInt ();
var height = - metrics . Top + metrics . Bottom + 2 ;
SetMeasuredDimension ( width , height );
}
protected override void OnDraw ( Canvas canvas )
{
var hCenter = canvas . Width / 2 ;
var vCenter = canvas . Height - ( textPaint . GetFontMetricsInt (). Bottom + 1 );
canvas . DrawText ( text , hCenter - Offset , vCenter - Offset , darkPaint );
canvas . DrawText ( text , hCenter + Offset , vCenter + Offset , lightPaint );
canvas . DrawText ( text , hCenter , vCenter , textPaint );
}
}
}
A “real” inset effect implies inner glow and proper shading, here we are simplifying things by using solid colors in a shading palette and layering 3 times the text using it.
You can use InsetTextView
in XML or in code, an example snippet in XML would be:
<Foo.InsetTextView
android:layout_width= "wrap_content"
android:layout_height= "wrap_content"
android:layout_gravity= "center"
android:layout_marginTop= "16dp"
text= "Hey Oh" />