Enable Skin support in your Symbian OS applications

Nokia has introduced skin support in S60 v2. For various reasons, including compatibility with S60 v1 and thus older devices, this support is not enabled by default: your application will display a not so original white background unless you code it differently.

A nice and user-friendly way to behave is to use the mobile theme skin as a background for your application. Unless very badly documented in the SDK so far, this is not that complex for most applications. Here is an example implementation.

Application UI

The impact in your application UI is quite limited. All you have to do is to enable skins when calling the AppUi base constructor:

 

Application View or Containers

As you may have guessed, the main changes will be in your view and containers. The changes here may vary from simple to rather complex depending on what your are trying to achieve. Unfortunately, the Skin API is not very well documented and everything here is not always compatible in S60 3rd Edition... [1]

First, you need to create a specific context to hold the skin bitmap for your control. Do this by adding the following data member to your view/container class:

CAknsBasicBackgroundControlContext* iBgContext;

And initialize properly in the corresponding ConstructL, initialise a reference to the background bitmap:

 

Don't forget to call the corresponding destructor:

 

This context shall be passed to the child controls so that they can redisplay themselves correctly. This is done throgh MOP relationship and you then need to override the MopSupplyObject() primitive as follow:

 

Each control Draw primitive shall now be updated to display the skin as background:

 

And finally:

 

If your control contains a listbox, you can enable skin behind the items by calling:

iListBox->ItemDrawer()->ColumnData()->SetSkinEnabledL(ETrue)

MMP File

And finally, you need to link against the Avkon Skin libraries. Add the following line in your MMP file:

LIBRARY aknskins.lib aknskinsrv.lib

void CSkinDemoAppView::SizeChanged()
{
 if(iBgContext)
 {
   iBgContext->SetRect(Rect());
                if ( &Window() )
                {
                        iBgContext->SetParentPos( PositionRelativeToScreen() );
                }
 }
}

// Draw this application's view to the screen
void CSkinDemoAppView::Draw(const TRect& aRect) const
{
 // Get the standard graphics context
 CWindowGc& gc = SystemGc();
   
 // Redraw the background using the default skin
 MAknsSkinInstance* skin = AknsUtils::SkinInstance();
 MAknsControlContext* cc = AknsDrawUtils::ControlContext( this );
 AknsDrawUtils::Background( skin, cc, this, gc, aRect );

 ...
}

TTypeUid::Ptr CSkinDemoAppView::MopSupplyObject(TTypeUid aId)
{
 if (iBgContext )
 {
   return MAknsControlContext::SupplyMopObject( aId, iBgContext );
 }
 return CCoeControl::MopSupplyObject(aId);
}

void CSkinDemoAppView::~CSkinDemoAppView()
{
 ...
 delete iBgContext;
 ...
}

#include <AknsDrawUtils.h>
#include <AknsBasicBackgroundControlContext.h>

...

void CSkinDemoAppView::ConstructL()
{
 ...
 iBgContext = CAknsBasicBackgroundControlContext::NewL( KAknsIIDQsnBgAreaMain,aRect,ETrue);
 ...
}

// ConstructL is called by the application framework
void CSkinDemoAppUi::ConstructL()
{
 BaseConstructL(EAknEnableSkin);
 ...
}