Skip to content

Cornerstone: Layout Customization

Jump to bottom
onshm edited this page Feb 20, 2012 · 1 revision

After open sourcing Cornerstone, we have seen that Cornerstone is being integrated in many custom ROMs. Many developers running Cornerstone on different screen sizes are facing a common problem of how to best layout the Cornerstone on different screen sizes. So to answer all those issues, we have decided to write the wiki about how to customize Cornerstone on different screen sizes.

Cornerstone splits the whole screen in to two main parts and we call them as

  • Main Panel : The left most (landscape mode) or top most (portrait mode) screen area
  • Cornerstone Panel : The right most (landscape mode) or bottom most (portrait mode) screen area

The Cornerstone Panel further divided in to two parts, mainly known as:

  • Cornerstone Panel 0 : where first default Cornerstone Panel app runs.
  • Cornerstone Panel 1 : where second default Cornerstone Panel app runs.

cornerstone.xml

Cornerstone decides to split the screen in to main panel or cornerstone panel by the values provided in to 'cornerstone.xml' file residing in to <android_source_root_dir>/frameworks/base/core/res/res/xml dir.

In the current released cornerstone.xml file, we have provided the layout for the below screen sizes.

  • 1024x600
  • 1366x768
  • 1280x768
  • 1280x800

To support any other screen sizes, the first thing to do is to add the layout values for that particular screen. Let's understand the cornerstone.xml and its attributes.

For example, developer wants to support the screen of size 1280x800. Then developer has to add the new element in cornerstone.xml file as shown below.

<layout width="1280" height="800">
	<landscape>
		<width>450</width>
		<height>346</height>
		<handler>
			<width>38</width>
		</handler>
		<appheader>
			<height>30</height>
		</appheader>
	</landscape>
	<portrait>
		<width>398</width>
		<height>330</height>
		<handler>
			<width>38</width>
		</handler>
		<appheader>
			<height>30</height>
		</appheader>
		<gutter>4</gutter>
	</portrait>
</layout>

where as,

  • layout element has two attributes called width and height. These attributes hold the screen size values developer want to support.
  • layout element provides the cornerstone panel settings for landscape and portrait orientation.
  • landscape element provides the settings for how Cornerstone should be rendered in landscape mode. Same goes for portrait mode.
  • The width element suggests what should be the width of the Cornerstone panel and based on this value WindowManagerService.java class decides what should be the width of the main panel (the formula is simple. <whole screen width - cornerstone panel width> = main panel width).
  • The height element decides what should be the height of the Cornerstone panel. Based on the value declared in element, each panel sets its height and renders within its layout area.
  • The handler element defines the width of the sliding bar or the control where Onskreen logo, Cornerstone exit and Cornerstone setting controls reside.
  • The appheader element defines the width of the Cornerstone panel control where app title and Cornerstone Launcher controls reside.
  • The gutter element decides how much space should be left between two Cornerstone panels.

We are not done yet! After modifying the cornerstone.xml, we have to ensure that the Cornerstone controls (Cornerstone panel app title, Cornerstone Launcher, Cornerstone Slider, Cornerstone Exit and Cornerstone setting) lay out correctly on Cornerstone panels. To do that navigate to <android_source_root_dir>/packages/apps/CSPanel dir and you can see the Cornerstone Panel app.

landscape_main.xml

The landscape_main.xml file available in <android_source_root_dir>/packages/apps/CSPanel/res/layout-land dir defines the layout settings for Cornerstone running in landscape orientation. The controls to be modified based on the screen size are explained below.

  • Cornerstone Settings

      <ImageView android:id="@+id/cs_settings"
   android:src="@drawable/cornerstone_panel_control_settings"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:scaleType="fitXY"
   android:layout_alignParentBottom="true"
   android:layout_marginBottom="80dp"
   android:layout_marginLeft="4dip"
  />

Developer has to update the values for 'android:layout_marginBottom' and 'android:layout_marginLeft' attributes as per the layout settings in Cornerstone.xml file.

  • Cornerstone Close

      <ImageView android:id="@+id/cs_close"
   android:src="@drawable/cornerstone_panel_control_close"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:scaleType="fitXY"
   android:layout_alignParentBottom="true"
   android:layout_marginBottom="30dp"
   android:layout_marginLeft="4dip"
  />

Developer has to update the values for 'android:layout_marginBottom' and 'android:layout_marginLeft' attributes as per the layout settings in Cornerstone.xml file.

  • Cornerstone Panel 0 App Title

      <TextView android:id="@+id/cs_app1_title"
   android:layout_width="200dp"
   android:layout_height="wrap_content"
   android:text="@string/empty_str"
   android:layout_marginTop="2dip"
   android:layout_marginLeft="55dip"
   android:textStyle="bold"
   android:gravity="center_vertical"
   android:textSize="16sp"
   android:singleLine="true"
   android:textColor="#ffffff"
   android:ellipsize="end"
  />

Developer has to update the values for 'android:layout_width', 'android:layout_marginTop' and 'android:layout_marginLeft' attributes as per the layout settings in Cornerstone.xml file.

  • Cornerstone Panel 1 App Header

      <ImageButton android:id="@+id/cs_app_header2"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:background="@drawable/cs_app_header_unfocused"
   android:layout_alignParentTop="true"
   android:layout_marginTop="376dip"
   android:layout_marginLeft="38dip"
  />

Developer has to update the values for 'android:layout_marginTop' and 'android:layout_marginLeft' attributes.

  • Cornerstone Panel 1 App Title

      <TextView android:id="@+id/cs_app2_title"
   android:layout_width="200dp"
   android:layout_height="wrap_content"
   android:text="@string/empty_str"
   android:layout_marginTop="377dip"
   android:layout_marginLeft="55dip"
   android:textStyle="bold"
   android:gravity="center_vertical"
   android:textSize="16sp"
   android:singleLine="true"
   android:textColor="#cccccc"
   android:ellipsize="end"
  />

Developer has to update the values for 'android:layout_width', 'android:layout_marginTop' and 'android:layout_marginLeft' attributes.

  • Cornerstone Panel 1 Launcher

      <ImageButton android:id="@+id/launch_1_button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:background="@drawable/control_applaunch_unfocused"
   android:layout_alignParentRight="true"
   android:layout_marginRight="10dp"
   android:layout_marginTop="376dip"
  />

Developer has to update the value for 'android:layout_marginTop' attribute.

portrait_main.xml

The portrait_main.xml file available in <android_source_root_dir>/packages/apps/CSPanel/res/layout dir defines the layout settings for Cornerstone running in portrait orientation. The controls to be modified based on the screen size are explained below.

  • Cornerstone Settings

      <ImageView android:id="@+id/cs_settings"
   android:src="@drawable/cornerstone_panel_control_settings"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:scaleType="fitXY"
   android:onClick="handleSettings"
   android:layout_alignParentRight="true"
   android:layout_marginRight="60dp"
   android:layout_marginTop="4dip"
  />

Developer has to update the values for 'android:layout_marginRight' and 'android:layout_marginTop' attributes as per the layout settings in Cornerstone.xml file.

  • Cornerstone Close

      <ImageView android:id="@+id/cs_close"
   android:src="@drawable/cornerstone_panel_control_close"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:scaleType="fitXY"
   android:onClick="handleClose"
   android:layout_alignParentRight="true"
   android:layout_marginRight="10dp"
   android:layout_marginTop="4dip"
  />

Developer has to update the values for 'android:layout_marginRight' and 'android:layout_marginTop' attributes as per the layout settings in Cornerstone.xml file.

  • Cornerstone Panel 0 App Header

      <ImageButton android:id="@+id/cs_app_header1"
   android:layout_width="398dp"
   android:layout_height="wrap_content"
   android:background="@drawable/cs_app_header_focused"
   android:layout_marginTop="38dip"
   android:onClick="handleFocus"
  />

Developer has to update the values for 'android:layout_width' and 'android:layout_marginTop' attributes.

  • Cornerstone Panel 0 App Title

      <TextView android:id="@+id/cs_app1_title"
   android:layout_width="200dp"
   android:layout_height="wrap_content"
   android:text="@string/empty_str"
   android:layout_marginTop="40dip"
   android:layout_marginLeft="17dip"
   android:textStyle="bold"
   android:gravity="center_vertical"
   android:textSize="16sp"
   android:singleLine="true"
   android:textColor="#ffffff"
   android:ellipsize="end"
  />

Developer has to update the values for 'android:layout_width', 'android:layout_marginTop' and 'android:layout_marginLeft' attributes as per the layout settings in Cornerstone.xml file.

  • Cornerstone Panel 0 Launcher

      <ImageButton android:id="@+id/launch_0_button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:background="@drawable/control_applaunch_focused"
   android:layout_alignParentRight="true"
   android:layout_marginRight="412dp"
   android:layout_marginTop="38dp"
   android:onClick="launchApp"
  />

Developer has to update the value for 'android:layout_marginRight' and 'marginTop' attribute.

  • Cornerstone Panel 1 App Header

      <ImageButton android:id="@+id/cs_app_header2"
   android:layout_width="398dp"
   android:layout_height="wrap_content"
   android:background="@drawable/cs_app_header_unfocused"
   android:layout_alignParentRight="true"
   android:layout_marginTop="38dip"
   android:onClick="handleFocus"
  />

Developer has to update the values for 'android:layout_marginTop' and 'android:layout_width' attributes.

  • Cornerstone Panel 1 App Title

      <TextView android:id="@+id/cs_app2_title"
   android:layout_width="200dp"
   android:layout_height="wrap_content"
   android:text="@string/empty_str"
   android:layout_marginTop="40dip"
   android:layout_marginLeft="420dip"
   android:textStyle="bold"
   android:gravity="center_vertical"
   android:textSize="16sp"
   android:singleLine="true"
   android:textColor="#cccccc"
   android:ellipsize="end"
  />

Developer has to update the values for 'android:layout_width', 'android:layout_marginTop' and 'android:layout_marginLeft' attributes.

  • Cornerstone Panel 1 Launcher

      <ImageButton android:id="@+id/launch_1_button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:background="@drawable/control_applaunch_unfocused"
   android:layout_alignParentRight="true"
   android:layout_marginRight="10dp"
   android:layout_marginTop="38dp"
   android:onClick="launchApp"
  />

Developer has to update the value for 'android:layout_marginTop' attribute.

When we have made the changes as explained above, build the Android source and flash the ROM on the device.

Clone this wiki locally