How to customize UI templates in Android development "illustrated tutorial"

Every well-designed app is a custom title bar, most people in a custom title bar are probably customizing a header XML file, and then referencing it directly by include in place of need, which is much more evolved than writing the title bar in each layout file. But still not the simplest and most effective method, why can't we customize a header control? Today we'll take you to a title bar control. The effect diagram is as follows:

<?xml version= "1.0"  encoding= "Utf-8"?> <resources>     < Declare-styleable name= "ToolBar" >         <attr name= " Title " format=" string " />         <attr name=" Titletextsize " format=" Dimension " />         <attr  name= "Titletextcolor"  format= "Color"  />         < Attr name= "Leftbackground"  format= "Reference|color"  />          <attr name= "Lefttext"  format= "string"  />          <attr name= "Lefttextcolor"  format= "Reference|color"  />    
     <attr name= "Rightbackground"  format= "Reference|color"  />      &nBsp;  <attr name= "Righttext"  format= "string"  />          <attr name= "Righttextcolor"  format= "Reference|color"  />      </declare-styleable> </resources>

Name before

is the name of the property that we want to use, followed by the format of the value that the property accepts, string indicating that the value of the property is a string, and color indicates that the value of the property is a color value, and dimension that the value of the property is a dimension. Reference indicates that the value of this property can refer to a resource ID, and other common format values are Boolean (Boolean), float (floating-point value), Integer (integer value), fraction (percent), enum (enumerated value), Flag (bit or operation).

Step two: Customizing a Heading class
customizes a class in a Java file to inherit Relativelayout and implement its method of constructing, our title bar consists of three parts, each side is a button, The middle is a textview, so what we're going to do in this layout file is to handle the three controls. The

declares the three spaces and related parameters of the title bar first. These parameters are set according to Atts.xml, because we reference the custom control from XML, the property is set in the XML file, we get the value of the attribute from the XML file, and then we assign the control to the value.

    /**      *  title bar three controls      */ 
   private Button leftBtn, rightBtn;
    private TextView title;     /**      *  Left-button Properties      */ 
   private int leftTextColor;
    private Drawable leftBackground;
    private String leftText;     /**      *  Right Button properties      */ 
   private int rightTextColor;
    private Drawable rightBackground;
    private String rightText;
    /**      *  Intermediate TextView Properties      */     private int titleTextColor;
    private String titleText;
    private float titleTextSize;
Layout parameters for     /**      *  three controls      */     private LayoutParams leftParams, rightParams, titleParams;

The following is a construction method that passes in two parameters, one is the context parameter and the other is Attributeset,attributeset is a collection of attributes that can be used to handle a set of XML tags. Using the Ta.getxxx method, we can get the value of the property from the XML file, and then set the values to the control. Finally, by Layoutparams to set the width of the control, set the width of the height, call the AddView method, add the control.

    public mytoolbar (context context, attributeset attrs)  { 
       super (Context, attrs);         typedarray ta = context.obtainstyledattributes ( Attrs,                 
R.styleable.toolbar);         lefttextcolor = ta.getcolor (R.styleable.ToolBar_
LEFTTEXTCOLOR, 0);         leftbackground = ta.getdrawable (R.styleable.ToolBar_
Leftbackground);         lefttext = ta.getstring (R.styleable.ToolBar_leftText
);         righttextcolor = ta.getcolor (R.styleable.ToolBar_
RIGHTTEXTCOLOR, 0);         rightbackground = ta.geTdrawable (R.styleable.toolbar_rightbackground);         righttext = ta.getstring (R.styleable.ToolBar_
Righttext);
        titletext = ta.getstring (R.styleable.ToolBar_title);         titletextcolor = ta.getcolor (R.styleable.ToolBar_
TITLETEXTCOLOR, 0);         titletextsize = ta.getdimension (R.styleable.ToolBar_
TITLETEXTSIZE, 0);         //the TA for recycling         
Ta.recycle ();
        leftbtn = new button (context);
        rightbtn = new button (context);
        title = new textview (context);         /**          *  Settings Properties         
 */        leftbtn.settext (lefttext);
        leftbtn.settextcolor (Lefttextcolor);
        leftbtn.setbackground (Leftbackground);
        rightbtn.settext (Righttext);
        rightbtn.settextcolor (Righttextcolor);
        rightbtn.setbackground (Rightbackground);
        title.settext (TitleText);
        title.settextcolor (Titletextcolor);
        title.settextsize (titletextsize);
        title.setgravity (Gravity.center);         //set overall background color &Nbsp;       setbackgroundcolor (0x7cfc0055);         leftparams = new layoutparams (                  Android.view.ViewGroup.LayoutParams.WRAP_CONTENT,           
      android.view.viewgroup.layoutparams.wrap_content);         leftparams.addrule (relativelayout.align_parent_left, true
);         //Add Control         addview (
Leftbtn, leftparams);         rightparams = new layoutparams (                  Android.view.ViewGroup.LayoutParams.WRAP_CONTENT,                 android.view.viewgroup.layoutparams.wrap_content);         rightparams.addrule (relativelayout.align_parent_right, 
TRUE);
        addview (Rightbtn, rightparams);         titleparams = new layoutparams (                  Android.view.ViewGroup.LayoutParams.WRAP_CONTENT,           
      android.view.viewgroup.layoutparams.match_parent);         titleparams.addrule (relativelayout.center_in_parent, true
);
        addview (Title, titleparams);     }

Step three: After referencing our defined controls
Custom-defined controls, we can use custom controls to reference our custom controls in the main layout's XML file. The first three properties of a custom control are all started with Android: This means that these properties are all system, and the following attributes begin with Custombar, indicating that these attributes are all custom, in order to be able to use the custom Custombar, We need to add a sentence to the relativelayout:

xmlns:custombar= "Http://schemas.android.com/apk/res/com.example.mytoolbar"

Note that the following com.example.mytoolbar is the name of the package you applied. If you're not using Eclipse but Android studio, then this line doesn't have to be so cumbersome, just write:

xmlns:custombar= "http://schemas.android.com/apk/ Res-auto

Our custom attributes are the properties that we declare in the Atts.xml.

<relativelayout xmlns:android= "Http://schemas.android.com/apk/res/android"      Xmlns:custombar= "Http://schemas.android.com/apk/res/com.example.mytoolbar"     xmlns:tools= "Http://schemas.android.com/tools"     android:layout_width= "Match_parent"      android:layout_height= "Match_parent"  >     <
Com.example.mytoolbar.MyToolBar         android:id= "@+id/mytoolbar"         android:layout_width= "Match_parent"          android:layout_height= "48DP"         custombar: Leftbackground= "@android: Color/holo_blue_light"         custombar:
lefttext= "return"         custombar:lefttextcolor= "@android: Color/black"        &nbsP;custombar:rightbackground= "@android: Color/holo_blue_light"          custombar:righttext= "More"         custombar:righttextcolor= "@android: Color/black "        custombar:title=" title bar          custombar:titletextcolor= "@android: Color/black"          custombar:titletextsize= "18SP"  >     </ Com.example.mytoolbar.mytoolbar> </RelativeLayout>

After you have done this work, run your project and see the picture we gave at the beginning of the article.

Fourth step: Add an event for a custom control

There seems to be something less, yes, none of our controls have clicked events yet. To set the Click event for an event, you first declare an event interface in the custom control and declare an instance of an interface:

Private Ontoolbarclicklistener listener;
Public interface Ontoolbarclicklistener {
/**
* Left button click event/public
void        Leftclick ();
/**
* Right button click event * * Public
void RightClick ();
}

And then exposing a method to call other classes, the parameter of this method is this interface:

public void Setontoolbarclicklistener (Ontoolbarclicklistener listener) {
This.listener = listener;
}

Finally in the left and right two button click event to invoke the method in the interface, smart reader guess what is this mode?

      leftbtn.setonclicklistener (New onclicklistener ()  {              @Override              public void onclick (view v)  {    
            listener.leftclick ();             }       
  });
        rightbtn.setonclicklistener (New OnClickListener ()  {              @Override              public void onclick (View v)  {  
              listener.rightclick ();             }         }); 

The

method is written, and we call it in Mainactivity:

public class mainactivity extends activity {    private 
mytoolbar toolbar;      @Override     protected void oncreate (bundle 
savedinstancestate)  {        super.oncreate (savedInstanceState);
        setcontentview (R.layout.activity_main);
        getactionbar (). Hide ();         this.toolBar =  (Mytoolbar)  this.findviewbyid (
R.id.mytoolbar);         toolbar.setontoolbarclicklistener (new  Ontoolbarclicklistener ()  {                           @Override              public void&nbsP;rightclick ()  {              
  toast.maketext (Mainactivity.this, "right click",  toast.length_long). Show ();             }                           @ Override             public void  Leftclick ()  {               
 toast.maketext (Mainactivity.this, "left click",  toast.length_long). Show ();             }       
  });    &NBSP}}

Dashboard Android user custom UI design template

Dashboard, an application designed specifically for the portal interface, Dashboard (for dashboards) was originally an application in Apple's Mac OS X v10.4 Tiger operating system, which serves as the basis for small applications for widgets.

In this article, we will briefly introduce Android's user-defined UI design template dashboard, which uses a clear and large size icon to mark the main features and optional areas to provide users with the most up-to-date information available.

We review the Goole I/O 2010 conference, which promotes the Android user Interface design template (Android UI designs patterns) to provide relevant functionality to simplify the user's operating interface. This embodies the characteristics of dashboard.

tab mode

Problem

In the practical use of mobile products, it is very important to realize the main function with the help of clear and fast navigation. They should be quick and efficient, helping users to quickly implement certain basic operations (such as posting news on social networking sites, sending messages or taking photos, etc.).

Solution

The application's portal interface should have a refreshing visual experience and easy access features (especially for commonly used applications).

More examples

Conclusion

Easy and quick implementation of major functions

Clear and Friendly entry interface

Easy for users to understand and master

To show the brand image to the users

The options you provide should indicate the basic information or scope of the current application