knowledge base

User Tools

Site Tools

manual:advanced:customization:screens
You are here: main » manual » advanced » customization » screens

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
manual:advanced:customization:screens [2015/05/15 11:53] – mstupkamanual:advanced:customization:screens [2023/07/14 13:46] (current) – mstupka
Line 1: Line 1:
-====== Creating Custom screen ======+====== Custom Screen ======
  
 ---- ----
-<WRAP todo round center 60%>This page is obsolete and will be reworked soon</WRAP> +The method of creating custom screens requires at least essential knowledge of developing Android and XML files system. Otherwise, we recommend using already-created skins. To edit them, use just a simple NotePad or any text editing software with XML syntax highlight (for example [[http://notepad-plus-plus.org/|Notepad++]]) 
-===== Basic description =====+<WRAP round tip> 
 +For most people who want to create their own screens should be enough to use a much simpler **[[manual:user_guide:tools:dashboards|dashboard]]** system that offers similar functionality in a much less painful way.
  
-Basic explanation of Custom screen creation method. Whole system is mainly for people familiar with Android developing and XML files system. If you're not, better is to use already created skins and look at them (as sample). To edit, use just simple NotePad or any notepad program with XML syntax highlight (suggested for example [[http://notepad-plus-plus.org/|Notepad++]]) +However, **Dashboard** is available only with Premium and misses some advanced possibilities like rotating images, completely free layout etc.
-<WRAP tip> +
-For most people who want to create own screens should be enough using much simpler **[[manual:user_guide:tools:dashboards|dashboard]]** system that offers similar functionality in much less painful way. +
- +
-**Dashboard** is anyway available only for Pro version and miss some advanced possibilities, like rotating images, completely free layout, etc.+
 </WRAP> </WRAP>
 ==== Method using Eclipse ==== ==== Method using Eclipse ====
  
-  - Download and install whole eclipse and Android SDK tools from [[http://developer.android.com/sdk/index.html|here]]. +  - Download and install Eclipse and Android SDK tools from [[http://developer.android.com/sdk/index.html|here >>]]. 
-  - After all works, create new android project. This will create base data structure. You'll not need anything to program. +  - When all works, create a new Android project. This will create a basic data structure. You'll not need to program anything. 
-  - Project contains //res/layout/main.xml// file, that's our target. Learn with Eclipse GUI builder and edit this file.+  - The project contains //res/layout/main.xml// file - that's our target. Learn to work with Eclipse GUI builder and edit this file.
   - Put resources (best to use 9-patch images) into //res// folders (supported - //drawable, drawable-hdpi, drawable-mdpi, drawable-ldpi//)   - Put resources (best to use 9-patch images) into //res// folders (supported - //drawable, drawable-hdpi, drawable-mdpi, drawable-ldpi//)
-  - After compilation, take //mail.xml// file and image resources from compiled source (this is because of 9-patch images. If you want to use basic png files, you can add them directly into result. 9-patch have to be pre-compiled!).+  - After compilation, take //mail.xml// file and image resources from compiled source (this is because of 9-patch images. If you want to use basic .png files, you can add them directly into the result. 9-patch have to be pre-compiled!).
  
 ==== Using basic text editor ==== ==== Using basic text editor ====
  
-You do not have to do previous steps. You can edit xml file directly in any editor. Previous steps are just recommended way for easy "Drag and drop" creating and also only way to support 9-patch images!+You do not have to do the previous steps. You can edit XML files directly in any editor. The previous steps are just recommended ways for easy "Drag and drop" creating and also the only way to support 9-patch images!
  
-===== How to get actually all this works =====+===== How to make it work =====
  
 **root directory:** // ./Locus/data/customScreen/ // **root directory:** // ./Locus/data/customScreen/ //
  
-create ZIP file that contain this structure+Create .ZIP file that contains this structure:
  
 <code> <code>
Line 35: Line 32:
     /drawable-ldpi/     /drawable-ldpi/
     /drawable-mdpi/     /drawable-mdpi/
-    /layout/ - for layout specification (for landscape and portrait or ... below ... for separate by orientation)+    /layout/ - for layout specification (for landscape and portrait or... below... for separate by orientation)
     /layout-land/     /layout-land/
     /layout-port/     /layout-port/
Line 41: Line 38:
 </code> </code>
  
-Place your main layout file into layout directory (or two files, one to layout-land, second to layout-port) and rename it to //main.xml//. That is important, because //main.xml// file is gate to whole layout, it have to be included!+Place your main layout file into the layout directory (or two files, one to layout-land, second to layout-port) and rename it to //main.xml//. That is important because //main.xml// file is the gate to the whole layout, it has to be included!
  
-also in root of you ZIP file, you can place these files (optional)+You can place these files also in the root of your .ZIP file (optional)
   * **icon.png** - small (48x48px) logo of your skin   * **icon.png** - small (48x48px) logo of your skin
-  * **info.html** - HTML page that will contain description of you skin (some links, donate button or similar is possible)+  * **info.html** - HTML page that will contain a description of your skin (some links, donate button or similar is possible)
  
-Finally, place this zip file, into root directory described above!+Finally, place this .zip file into the root directory described above!
  
 ===== Supported Views ===== ===== Supported Views =====
Line 64: Line 61:
  
   * [[http://developer.android.com/reference/android/widget/TextView.html|TextView]] extends View   * [[http://developer.android.com/reference/android/widget/TextView.html|TextView]] extends View
-    * [[http://developer.android.com/reference/android/widget/TextView.html#attr_android:text|android:text]] - this contain ACTIONS below+    * [[http://developer.android.com/reference/android/widget/TextView.html#attr_android:text|android:text]] - this contains ACTIONS below
     * [[http://developer.android.com/reference/android/widget/TextView.html#attr_android:textColor|android:textSize]]     * [[http://developer.android.com/reference/android/widget/TextView.html#attr_android:textColor|android:textSize]]
     * [[http://developer.android.com/reference/android/widget/TextView.html#attr_android:textColor|android:textColor]]     * [[http://developer.android.com/reference/android/widget/TextView.html#attr_android:textColor|android:textColor]]
Line 86: Line 83:
  
   * MapScreenView (custom locus view) extends View   * MapScreenView (custom locus view) extends View
-    * no custom parametres+    * no custom parameters
  
   * RotateView (custom locus view) extends View   * RotateView (custom locus view) extends View
-    * locus:action - attach to which rotation action ... for example locus:action="{orient_course}" +    * locus:action - attach to which rotation action... for example locus:action="{orient_course}" 
-    * locus:rotateImage - reference to drawable, actually centered and rotated around center by angle defined by action+    * locus:rotateImage - a reference to drawable, actually centered and rotated around the center by an angle defined by action
     * locus:rotatePivotX - move rotation point by X value (+X to bottom)     * locus:rotatePivotX - move rotation point by X value (+X to bottom)
     * locus:rotatePivotY - move rotation point by Y value (+Y to bottom)     * locus:rotatePivotY - move rotation point by Y value (+Y to bottom)
-    * locus:rotateStartAngle - angle at which is rotation start with rotateStartValue value (- value for counter-clockwise orientation) +    * locus:rotateStartAngle - the angle at which rotation starts with rotateStartValue value (- value for counter-clockwise orientation) 
-    * locus:rotateStartValue - value for variable that starts at rotateStartAngle (in base units, so metres, second, ..) +    * locus:rotateStartValue - value for the variable that starts at rotateStartAngle (in base units, so meters, second, ..) 
-    * locus:rotateEndAngle - angle at which is rotation ending with rotateEndValue value+    * locus:rotateEndAngle - the angle at which rotation ends with rotateEndValue value
     * locus:rotateEndValue - value for variable that ends at rotateEndValue     * locus:rotateEndValue - value for variable that ends at rotateEndValue
  
  
-  * **SlideView** (custom locus view) extends View +  * **SlideView** (custom Locus view) extends View 
-    * locus:action - attach to which slide action ... for example locus:action="{orient_course}" +    * locus:action - attaches to which slide action ... for example locus:action="{orient_course}" 
-    * locus:slideImage - reference to drawable used for slide +    * locus:slideImage - a reference to a drawable item used for slide 
-    * locus:slideStartPosition - position of image pixel that match //slideStartValue// value. +    * locus:slideStartPosition - position of image pixel that matches //slideStartValue// value. 
-    * locus:slideStartValue - action value for //slideStartPosition// (in base units, so metres, second, ..) +    * locus:slideStartValue - action value for //slideStartPosition// (in base units - metres, seconds, ..) 
-    * locus:slideEndPosition - position value of last image pixel. Also (//slideEndPosition// - //slideStartPosition//) define width of image+    * locus:slideEndPosition - position value of the last image pixel. Also (//slideEndPosition// - //slideStartPosition//) define width of image
     * locus:slideEndValue - action value for //slideEndPosition//     * locus:slideEndValue - action value for //slideEndPosition//
-    * locus:slideInfinite - if slide image should be repeated to cover whole parent view (true/false) [false]+    * locus:slideInfinite - if slide image is repeated to cover whole parent view (true/false) [false]
  
-<WRAP info> +<WRAP round info> 
-**Sample** - let's imagine this image of compass. +**Sample** - let's imagine this image of the compass: 
  
-{{:manual:img_compass_slide.png|}}+{{ :manual:advanced:customization:img_compass_slide.png?nolink |}}
  
-To make it work in full screen width, you need to define these parameters+To make it work in full screen width you need to define these parameters:
 <code> <code>
     android:layout_width="match_parent"     android:layout_width="match_parent"
Line 128: Line 125:
 By this definition, you say that: By this definition, you say that:
  
-  * 1. if orientation angle will be 180°, first pixel (slideStartPosition) will be drawn really as a first pixel. Because is defined whole range (from 0° - 360°) and end value have position on the end (//locus:slideEndPosition="match_parent"//), image will be stretched over whole screen. Middle of image (**S**), will be in the middle, as we want! +  * 1. if the orientation angle is 180°, the first pixel (slideStartPosition) will be drawn really as the first pixel. Because the defined whole range is from 0° - 360° and the end value has a position on the end (//locus:slideEndPosition="match_parent"//), the image will be stretched over the whole screen. The middle of the image (**S**), will be in the middle, as we want! 
-  * 2. if orientation will be for example 90°, Locus firstly compute percent part of image that should be moved. It's computed by **(current value - slideStartValue) / (slideEndValue - slideStartValue)**, so in this case it's (90 - 180) / (-180 - 180) = **25%**!. This means that image will be moved by 25%+  * 2. if orientation is for example 90°, Locus Map first computes the percent part of the image that should be moved. It's computed by **(current value - slideStartValue) / (slideEndValue - slideStartValue)**, so in this case it's (90 - 180) / (-180 - 180) = **25%**!. This means that image will be moved by 25%
 </WRAP> </WRAP>
  
 ==== Global attributes ==== ==== Global attributes ====
  
-On all View can be applied these attributes+All Views can be applied with these attributes:
  
   * [[http://developer.android.com/reference/android/view/View.html#attr_android:id|android:id]]   * [[http://developer.android.com/reference/android/view/View.html#attr_android:id|android:id]]
   * [[http://developer.android.com/reference/android/view/ViewGroup.LayoutParams.html#attr_android:layout_width|android:layout_width]]   * [[http://developer.android.com/reference/android/view/ViewGroup.LayoutParams.html#attr_android:layout_width|android:layout_width]]
   * [[http://developer.android.com/reference/android/view/ViewGroup.LayoutParams.html#attr_android:layout_height|android:layout_height]]   * [[http://developer.android.com/reference/android/view/ViewGroup.LayoutParams.html#attr_android:layout_height|android:layout_height]]
-  * [[http://developer.android.com/reference/android/widget/LinearLayout.LayoutParams.html#attr_android:layout_weight|android:layout_weight]] - if parent view is LinearLayout +  * [[http://developer.android.com/reference/android/widget/LinearLayout.LayoutParams.html#attr_android:layout_weight|android:layout_weight]] - if the parent view is LinearLayout 
-  * [[http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html|RelativeLayout.LayoutParams]] - if parent view is RelativeLayout+  * [[http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html|RelativeLayout.LayoutParams]] - if the parent view is RelativeLayout
   * [[http://developer.android.com/reference/android/view/ViewGroup.MarginLayoutParams.html|android:layout_margin]]   * [[http://developer.android.com/reference/android/view/ViewGroup.MarginLayoutParams.html|android:layout_margin]]
   * android:layout_marginLeft   * android:layout_marginLeft
Line 183: Line 180:
   * //{speed}// - GPS speed (0 if GPS off)   * //{speed}// - GPS speed (0 if GPS off)
   
-  * //{rec_dist}// - track recording - recorded sitance+  * //{rec_dist}// - track recording - recorded distance
   * //{rec_dist_down}// - track recording - downhill distance   * //{rec_dist_down}// - track recording - downhill distance
   * //{rec_dist_up}// - track recording - uphill distance   * //{rec_dist_up}// - track recording - uphill distance
Line 221: Line 218:
  
   * parametres should be {i}, {d}, {i.d}, {u} "integer part, double part, both, only units"   * parametres should be {i}, {d}, {i.d}, {u} "integer part, double part, both, only units"
-  * for example - //"locus:textFormat="{i.d} - {u}"//. Can be applied to: speed, distance, altitude and accuracy now+  * for example - //"locus:textFormat="{i.d} - {u}"//. Can be applied to speed, distance, altitude, and accuracy now
manual/advanced/customization/screens.1431683588.txt.gz · Last modified: 2015/05/15 12:53 (external edit)
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki