Extra Tips

Adding a Custom Layout

LG QCircle design template provides 5 circle layouts by default. Besides these, users can add custom layouts to the template. In order to add custom layouts, the following are required:

• Layout XML file
• The resource files used on the layout (such as image, text, animations, etc.)

Creating a custom layout

To make a layout XML file for LG QCircle design template, you must include the required UI component. A circle layout of LG QCircle design template consists of the following required items:

Required Layout	Type	ID
Entire Layout	FrameLayout	root
Circle Layout	RelativeLayout	circlelayout
Circle Content	RelativeLayout	content
Circle Hole Image	any	circle

root, circlelayout, and content are the ID of each layout. root is a FrameLayout, and others are RelativeLayouts. content has the same height as the circlelayout when there is no title bar or back button. In the content, there can be a content area or a sidebar. If you use the getLayoutById(TemplateTag.CONTENT) from QCircleTemplate, you can obtain the total circle content area, in other words, content.

The custom layout must have the above layout structure. Each type and ID of layouts should also be the same as above. Also, if you overlap the image with a hole in the center to the squared circlelayout to make a circle, the image must be under root and have its ID assigned as 'circle'. Otherwise, the layout can be twisted because the overlapped image cannot be processed when the circle layout is moved according to the QuickCircle's position information of each model.

There is no specific rule for the layout or the UI component in content. However, when you need to get the content area or a sidebar in content using the getLayoutById(), you should make each layout as RelativeLayout. In addition, when you need to use the ID defined in the TemplateTag, the ID for the content area should be specified as ‘main’ and the ID for the sidebar should be specified as ‘side1’ or ‘side2’.

The following is the custom XML file with four parts:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/background_dark" >

    <RelativeLayout
        android:id="@+id/circlelayout"
        android:layout_width="@dimen/square_size"
        android:layout_height="@dimen/square_size"
        android:layout_gravity="center_horizontal"
        android:background="@android:color/background_light"
        android:gravity="center_horizontal" >

        <!-- child #1: Title -->
        <!-- child #2: content -->
        <RelativeLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerHorizontal="true"
            android:gravity="center_vertical"
            android:padding="@dimen/margin" >
        
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="horizontal"
                >
                <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:layout_weight="1"
                >
	            <RelativeLayout
	                android:id="@+id/main"
	                android:layout_width="match_parent"
	                android:layout_height="match_parent"
	                android:gravity="center_vertical"
	                android:layout_weight="1" 	     
                   >
	            </RelativeLayout>
	            <RelativeLayout
	                android:id="@+id/side1"
	                android:layout_width="match_parent"
	                android:layout_height="match_parent"
	                android:gravity="center_vertical"
	                android:layout_weight="1" 
                    >
	            </RelativeLayout>
	        </LinearLayoutscreen>
	        <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:layout_weight="1"
                >
	            <RelativeLayout
	                android:id="@+id/side2"
	                android:layout_width="match_parent"
	                android:layout_height="match_parent"
	                android:gravity="center_vertical"
	                android:layout_weight="1"
                   >
	            </RelativeLayout>
	            <RelativeLayout
	                android:id="@+id/side3"
	                android:layout_width="match_parent"
	                android:layout_height="match_parent"
	                android:gravity="center_vertical"
	                android:layout_weight="1"
                   >
	            </RelativeLayout>
	        </LinearLayout>
	        </LinearLayout>
        </RelativeLayout>
        
        <!--  child #3: Button -->
    </RelativeLayout>

    <View
        android:id="@+id/circle"
        android:layout_width="@dimen/square_size"
        android:layout_height="@dimen/square_size"
        android:layout_gravity="center_horizontal"
        android:background="@drawable/circlebackground" />

</FrameLayout>

Using a custom layout in applications

In order to apply a custom layout to the application, you must include the created XML layout file and other resource files in the res directory in the application.

Use the following code to apply the created layout to the QCircleTemplate.

QCircleTemplate template = new QCircleTemplate(
                                           this, 
                                           R.layout.circle_custom
                                 );

There are four areas in this layout, each area's IDs are main, side1, side2, and side3.
main, side1, and side2 are the defined value in the TemplateTag, so you can use the method explained in the previous chapscreenter. However, because the side3 is the newly added ID, it cannot be used in the TemplateTag and you should get the layout by its ID.

The following code adds text lines in four areas:

RelativeLayout main = template.getLayoutById(TemplateTag.CONTENT_MAIN);
TextView text1 = new TextView(this); 
text1.setText("main");
main.addView(text1);
		
RelativeLayout side1 = 
                template.getLayoutById(TemplateTag.CONTENT_SIDE_1);
TextView text2 = new TextView(this); 
text2.setText("side1");
side1.addView(text2);
		
RelativeLayout side2 = 
                template.getLayoutById(TemplateTag.CONTENT_SIDE_2);
TextView text3 = new TextView(this); 
text3.setText("side2");
side2.addView(text3);

RelativeLayout side3 = template.getLayoutById(R.id.side3);
TextView text4 = new TextView(this); 
text4.setText("side3");
side3.addView(text4);

As shown above, the ID, side3 that is not supported in the TemplateTag is input in the getLayoutById() directly.

The image when the custom layout is actually applied is as follows: To distinguish four areas, different colors are used on each area, and the size and position of the text are adjusted.

Full circle layout under a back button

Sometimes you want the layout to be below the back button. For example, if the background changes and the back button should be transparent. In this case, in order to receive onClick events, you have to add your layout above the TemplateTag.CONTENT layout.

Contributing to QCircle Design Template

Source code of QCircle design template is opened to public. We are waiting for helpful features for people who are going to develop Quick Circle applications. See Contributor License Agreement