-
Notifications
You must be signed in to change notification settings - Fork 7
Extra Tips
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.)
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 RelativeLayout
s.
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>
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.
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.
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