Customizing a Template

Set Background Resource for the Template

You can specify the background of the entire QCircle template including the title section and the back button.



// set background color
template.setBackgroundColor(Color.BLACK, true);

// set background image
Drawable mypic = getResources().getDrawable(R.drawable.beanbird);
template.setBackgroundDrawable(mypic, true);


The first parameter of setBackgroundDrawable() refers to the color or image source to be applied to the background, and the second parameter refers to a flag to make the back button background transparent.

The title bar area is set to be transparent by default.


The following image shows the content layout with a vertical sub-area to applied to the entire background image. To display the sidebar's position, it paints a translucent color on the sidebar.



Set Template Layouts

Sub-areas in QCircleTemplate are retrieved as RelativeLayouts  with sub-aera IDs.

The following code retrieves the RelativeLayout for the main content area.

RelativeLayout main = template.getLayoutById(TemplateTag.CONTENT_MAIN);


Below is a list of sub-area IDs.


ID constant



The entire circle content window (excluding the title bar and the back button).

Because this layout includes the content area and the sidebar, you must be careful not to twist the layouts of existing child views when adding other layouts to this layout.


The main content window. It is the same as the content window in the Empty content.


The first sidebar. It has no significance when there is no sidebar in the layout.


The second sidebar. It has no significance when there are less than two sidebars in the layout.


When a sub-area is retrieved, Android APIs are applicable. For example, the following code changes the background color of the sub-area.

RelativeLayout side = template.getLayoutById(TemplateTag.CONTENT_SIDE_1);

Adding Custom Layout

The information provided by the application should be output on the content area or the sidebar of the circle layout.

As mentioned previously, you can add Android UI components freely to this layout because the content area and the sidebar are the RelativeLayout. For example, you can add a text view to the content area or add an image view to the sidebar.

Similar to the previous step, add the desired UI component using Android API after retrieving the RelativeLayout for each area.


The following code is to add the layout generated with the layout XML to the content area and to add the image to the sidebar.

// main content
View myContent = (View)getLayoutInflater().inflate(R.layout.activity_main, null);
RelativeLayout main = template.getLayoutById(TemplateTag.CONTENT_MAIN);

// sidebar
RelativeLayout side1 =  template.getLayoutById(TemplateTag.CONTENT_SIDE_1);