Android - Custom Components

<blockquote > <p >Implementing own components in pre built-in components with extending subclass with own defined class</p> </blockquote> <p >Android offers a great list of pre-built widgets like Button, TextView, EditText, ListView, CheckBox, RadioButton, Gallery, Spinner, AutoCompleteTextView etc. which you can use directly in your Android application development, but there may be a situation when you are not satisfied with existing functionality of any of the available widgets. Android provides you with means of creating your own custom components which you can customized to suit your needs.</p> <p >If you only need to make small adjustments to an existing widget or layout, you can simply subclass the widget or layout and override its methods which will give you precise control over the appearance and function of a screen element.</p> <p >This tutorial explains you how to create custom Views and use them in your application using simple and easy steps.</p> <p><img alt="Custom" src="http://www.tutorialspoint.com/android/images/custom.jpg" /></p> <h4 align="center" >EXAMPLE OF CUSTOM COMPONENTS IN CUSTOM VIEW HIERARCHY</h4> <h2 >Creating a Simple Custom Component</h2> <table class="table table-bordered" > <tbody > <tr > <th class="fivepct" >Step</th> <th >Description</th> </tr> <tr > <td >1</td> <td >You will use Android studio IDE to create an Android application and name it as<i >compoundview</i>under a package<i >com.vogella.android.customview.compoundview</i>as explained in the<i >Hello World Example</i>chapter.</td> </tr> <tr > <td >2</td> <td >Create an XML<i >res/values/attrs.xml</i>file to define new attributes along with their data type.</td> </tr> <tr > <td >3</td> <td >Create<i >src/ColorOptionsView.java</i>file and add the code to define your custom component. It will extend LinearLayout and will have additional functionality to show colour compound . You will provide attributes parsing logic in of the constructors having AttributeSet as a parameter.</td> </tr> <tr > <td >4</td> <td >Modify<i >res/layout/activity_main.xml</i>file and add the code to create Colour compound view instance along with few default attributes and new attributes.</td> </tr> <tr > <td >5</td> <td >Run the application to launch Android emulator and verify the result of the changes done in the application.</td> </tr> </tbody> </table> <p >Create the following attributes file called attrs.xml in your res/values folder.</p> <pre class="prettyprint notranslate prettyprinted" > <span class="pun" >&lt;?</span><span class="pln" >xml version</span><span class="pun" >=</span><span class="str" >&quot;1.0&quot;</span><span class="pln" > encoding</span><span class="pun" >=</span><span class="str" >&quot;utf-8&quot;</span><span class="pun" >?&gt;</span><span class="pln" > </span><span class="tag" >&lt;resources&gt;</span><span class="pln" > </span><span class="tag" >&lt;declare-styleable</span><span class="pln" > </span><span class="atn" >name</span><span class="pun" >=</span><span class="atv" >&quot;Options&quot;</span><span class="tag" >&gt;</span><span class="pln" > </span><span class="tag" >&lt;attr</span><span class="pln" > </span><span class="atn" >name</span><span class="pun" >=</span><span class="atv" >&quot;titleText&quot;</span><span class="pln" > </span><span class="atn" >format</span><span class="pun" >=</span><span class="atv" >&quot;string&quot;</span><span class="pln" > </span><span class="atn" >localization</span><span class="pun" >=</span><span class="atv" >&quot;suggested&quot;</span><span class="pln" > </span><span class="tag" >/&gt;</span><span class="pln" > </span><span class="tag" >&lt;attr</span><span class="pln" > </span><span class="atn" >name</span><span class="pun" >=</span><span class="atv" >&quot;valueColor&quot;</span><span class="pln" > </span><span class="atn" >format</span><span class="pun" >=</span><span class="atv" >&quot;color&quot;</span><span class="pln" > </span><span class="tag" >/&gt;</span><span class="pln" > </span><span class="tag" >&lt;/declare-styleable&gt;</span><span class="pln" > </span><span class="tag" >&lt;/resources&gt;</span></pre> <p >Change the layout file used by the activity to the following.</p> <pre class="prettyprint notranslate prettyprinted" > <span class="tag" >&lt;LinearLayout</span><span class="pln" > </span><span class="atn" >xmlns:android</span><span class="pun" >=</span><span class="atv" >&quot;http://schemas.android.com/apk/res/android&quot;</span><span class="pln" > </span><span class="atn" >xmlns:tools</span><span class="pun" >=</span><span class="atv" >&quot;http://schemas.android.com/tools&quot;</span><span class="pln" > </span><span class="atn" >xmlns:custom</span><span class="pun" >=</span><span class="atv" >&quot;http://schemas.android.com/apk/res/com.vogella.android.view.compoundview&quot;</span><span class="pln" > </span><span class="atn" >android:layout_width</span><span class="pun" >=</span><span class="atv" >&quot;match_parent&quot;</span><span class="pln" > </span><span class="atn" >android:layout_height</span><span class="pun" >=</span><span class="atv" >&quot;match_parent&quot;</span><span class="pln" > </span><span class="atn" >android:orientation</span><span class="pun" >=</span><span class="atv" >&quot;vertical&quot;</span><span class="pln" > </span><span class="atn" >android:showDividers</span><span class="pun" >=</span><span class="atv" >&quot;middle&quot;</span><span class="pln" > </span><span class="atn" >android:divider</span><span class="pun" >=</span><span class="atv" >&quot;?android:attr/listDivider&quot;</span><span class="pln" > </span><span class="atn" >tools:context</span><span class="pun" >=</span><span class="atv" >&quot;.MainActivity&quot;</span><span class="pln" > </span><span class="tag" >&gt;</span><span class="pln" > </span><span class="tag" >&lt;com.vogella.android.view.compoundview.ColorOptionsView</span><span class="pln" > </span><span class="atn" >android:id</span><span class="pun" >=</span><span class="atv" >&quot;@+id/view1&quot;</span><span class="pln" > </span><span class="atn" >android:layout_width</span><span class="pun" >=</span><span class="atv" >&quot;match_parent&quot;</span><span class="pln" > </span><span class="atn" >android:layout_height</span><span class="pun" >=</span><span class="atv" >&quot;?android:attr/listPreferredItemHeight&quot;</span><span class="pln" > </span><span class="atn" >android:background</span><span class="pun" >=</span><span class="atv" >&quot;?android:selectableItemBackground&quot;</span><span class="pln" > </span><span class="atn" >android:onClick</span><span class="pun" >=</span><span class="atv" >&quot;onClicked&quot;</span><span class="pln" > </span><span class="atn" >custom:titleText</span><span class="pun" >=</span><span class="atv" >&quot;Background color&quot;</span><span class="pln" > </span><span class="atn" >custom:valueColor</span><span class="pun" >=</span><span class="atv" >&quot;@android:color/holo_green_light&quot;</span><span class="tag" >/&gt;</span><span class="pln" > </span><span class="tag" >&lt;com.vogella.android.view.compoundview.ColorOptionsView</span><span class="pln" > </span><span class="atn" >android:id</span><span class="pun" >=</span><span class="atv" >&quot;@+id/view2&quot;</span><span class="pln" > </span><span class="atn" >android:layout_width</span><span class="pun" >=</span><span class="atv" >&quot;match_parent&quot;</span><span class="pln" > </span><span class="atn" >android:layout_height</span><span class="pun" >=</span><span class="atv" >&quot;?android:attr/listPreferredItemHeight&quot;</span><span class="pln" > </span><span class="atn" >android:background</span><span class="pun" >=</span><span class="atv" >&quot;?android:selectableItemBackground&quot;</span><span class="pln" > </span><span class="atn" >android:onClick</span><span class="pun" >=</span><span class="atv" >&quot;onClicked&quot;</span><span class="pln" > </span><span class="atn" >custom:titleText</span><span class="pun" >=</span><span class="atv" >&quot;Foreground color&quot;</span><span class="pln" > </span><span class="atn" >custom:valueColor</span><span class="pun" >=</span><span class="atv" >&quot;@android:color/holo_orange_dark&quot;</span><span class="tag" >/&gt;</span><span class="pln" > </span><span class="tag" >&lt;/LinearLayout&gt;</span></pre> <p >Create the following java file called ColorOptionsView for your compound view.</p> <pre class="prettyprint notranslate prettyprinted" > <span class="kwd" >package</span><span class="pln" > com</span><span class="pun" >.</span><span class="pln" >vogella</span><span class="pun" >.</span><span class="pln" >android</span><span class="pun" >.</span><span class="pln" >customview</span><span class="pun" >.</span><span class="pln" >compoundview</span><span class="pun" >;</span><span class="pln" > </span><span class="kwd" >import</span><span class="pln" > com</span><span class="pun" >.</span><span class="pln" >vogella</span><span class="pun" >.</span><span class="pln" >android</span><span class="pun" >.</span><span class="pln" >view</span><span class="pun" >.</span><span class="pln" >compoundview</span><span class="pun" >.</span><span class="pln" >R</span><span class="pun" >;</span><span class="pln" > </span><span class="kwd" >import</span><span class="pln" > android</span><span class="pun" >.</span><span class="pln" >content</span><span class="pun" >.</span><span class="typ" >Context</span><span class="pun" >;</span><span class="pln" > </span><span class="kwd" >import</span><span class="pln" > android</span><span class="pun" >.</span><span class="pln" >content</span><span class="pun" >.</span><span class="pln" >res</span><span class="pun" >.</span><span class="typ" >TypedArray</span><span class="pun" >;</span><span class="pln" > </span><span class="kwd" >import</span><span class="pln" > android</span><span class="pun" >.</span><span class="pln" >util</span><span class="pun" >.</span><span class="typ" >AttributeSet</span><span class="pun" >;</span><span class="pln" > </span><span class="kwd" >import</span><span class="pln" > android</span><span class="pun" >.</span><span class="pln" >view</span><span class="pun" >.</span><span class="typ" >Gravity</span><span class="pun" >;</span><span class="pln" > </span><span class="kwd" >import</span><span class="pln" > android</span><span class="pun" >.</span><span class="pln" >view</span><span class="pun" >.</span><span class="typ" >LayoutInflater</span><span class="pun" >;</span><span class="pln" > </span><span class="kwd" >import</span><span class="pln" > android</span><span class="pun" >.</span><span class="pln" >view</span><span class="pun" >.</span><span class="typ" >View</span><span class="pun" >;</span><span class="pln" > </span><span class="kwd" >import</span><span class="pln" > android</span><span class="pun" >.</span><span class="pln" >widget</span><span class="pun" >.</span><span class="typ" >ImageView</span><span class="pun" >;</span><span class="pln" > </span><span class="kwd" >import</span><span class="pln" > android</span><span class="pun" >.</span><span class="pln" >widget</span><span class="pun" >.</span><span class="typ" >LinearLayout</span><span class="pun" >;</span><span class="pln" > </span><span class="kwd" >import</span><span class="pln" > android</span><span class="pun" >.</span><span class="pln" >widget</span><span class="pun" >.</span><span class="typ" >TextView</span><span class="pun" >;</span><span class="pln" > </span><span class="kwd" >public</span><span class="pln" > </span><span class="kwd" >class</span><span class="pln" > </span><span class="typ" >ColorOptionsView</span><span class="pln" > </span><span class="kwd" >extends</span><span class="pln" > </span><span class="typ" >LinearLayout</span><span class="pln" > </span><span class="pun" >{</span><span class="pln" > </span><span class="kwd" >private</span><span class="pln" > </span><span class="typ" >View</span><span class="pln" > mValue</span><span class="pun" >;</span><span class="pln" > </span><span class="kwd" >private</span><span class="pln" > </span><span class="typ" >ImageView</span><span class="pln" > mImage</span><span class="pun" >;</span><span class="pln" > </span><span class="kwd" >public</span><span class="pln" > </span><span class="typ" >ColorOptionsView</span><span class="pun" >(</span><span class="typ" >Context</span><span class="pln" > context</span><span class="pun" >,</span><span class="pln" > </span><span class="typ" >AttributeSet</span><span class="pln" > attrs</span><span class="pun" >)</span><span class="pln" > </span><span class="pun" >{</span><span class="pln" > </span><span class="kwd" >super</span><span class="pun" >(</span><span class="pln" >context</span><span class="pun" >,</span><span class="pln" > attrs</span><span class="pun" >);</span><span class="pln" > </span><span class="typ" >TypedArray</span><span class="pln" > a </span><span class="pun" >=</span><span class="pln" > context</span><span class="pun" >.</span><span class="pln" >obtainStyledAttributes</span><span class="pun" >(</span><span class="pln" >attrs</span><span class="pun" >,</span><span class="pln" >R</span><span class="pun" >.</span><span class="pln" >styleable</span><span class="pun" >.</span><span class="typ" >ColorOptionsView</span><span class="pun" >,</span><span class="pln" > </span><span class="lit" >0</span><span class="pun" >,</span><span class="pln" > </span><span class="lit" >0</span><span class="pun" >);</span><span class="pln" > </span><span class="typ" >String</span><span class="pln" > titleText </span><span class="pun" >=</span><span class="pln" > a</span><span class="pun" >.</span><span class="pln" >getString</span><span class="pun" >(</span><span class="pln" >R</span><span class="pun" >.</span><span class="pln" >styleable</span><span class="pun" >.</span><span class="typ" >ColorOptionsView_titleText</span><span class="pun" >);</span><span class="pln" > </span><span class="kwd" >int</span><span class="pln" > valueColor </span><span class="pun" >=</span><span class="pln" > a</span><span class="pun" >.</span><span class="pln" >getColor</span><span class="pun" >(</span><span class="pln" >R</span><span class="pun" >.</span><span class="pln" >styleable</span><span class="pun" >.</span><span class="typ" >ColorOptionsView_valueColor</span><span class="pun" >,</span><span class="pln" >android</span><span class="pun" >.</span><span class="pln" >R</span><span class="pun" >.</span><span class="pln" >color</span><span class="pun" >.</span><span class="pln" >holo_blue_light</span><span class="pun" >);</span><span class="pln" > a</span><span class="pun" >.</span><span class="pln" >recycle</span><span class="pun" >();</span><span class="pln" > setOrientation</span><span class="pun" >(</span><span class="typ" >LinearLayout</span><span class="pun" >.</span><span class="pln" >HORIZONTAL</span><span class="pun" >);</span><span class="pln" > setGravity</span><span class="pun" >(</span><span class="typ" >Gravity</span><span class="pun" >.</span><span class="pln" >CENTER_VERTICAL</span><span class="pun" >);</span><span class="pln" > </span><span class="typ" >LayoutInflater</span><span class="pln" > inflater </span><span class="pun" >=</span><span class="pln" > </span><span class="pun" >(</span><span class="typ" >LayoutInflater</span><span class="pun" >)</span><span class="pln" > context</span><span class="pun" >.</span><span class="pln" >getSystemService</span><span class="pun" >(</span><span class="typ" >Context</span><span class="pun" >.</span><span class="pln" >LAYOUT_INFLATER_SERVICE</span><span class="pun" >);</span><span class="pln" > inflater</span><span class="pun" >.</span><span class="pln" >inflate</span><span class="pun" >(</span><span class="pln" >R</span><span class="pun" >.</span><span class="pln" >layout</span><span class="pun" >.</span><span class="pln" >view_color_options</span><span class="pun" >,</span><span class="pln" > </span><span class="kwd" >this</span><span class="pun" >,</span><span class="pln" > </span><span class="kwd" >true</span><span class="pun" >);</span><span class="pln" > </span><span class="typ" >TextView</span><span class="pln" > title </span><span class="pun" >=</span><span class="pln" > </span><span class="pun" >(</span><span class="typ" >TextView</span><span class="pun" >)</span><span class="pln" > getChildAt</span><span class="pun" >(</span><span class="lit" >0</span><span class="pun" >);</span><span class="pln" > title</span><span class="pun" >.</span><span class="pln" >setText</span><span class="pun" >(</span><span class="pln" >titleText</span><span class="pun" >);</span><span class="pln" > mValue </span><span class="pun" >=</span><span class="pln" > getChildAt</span><span class="pun" >(</span><span class="lit" >1</span><span class="pun" >);</span><span class="pln" > mValue</span><span class="pun" >.</span><span class="pln" >setBackgroundColor</span><span class="pun" >(</span><span class="pln" >valueColor</span><span class="pun" >);</span><span class="pln" > mImage </span><span class="pun" >=</span><span class="pln" > </span><span class="pun" >(</span><span class="typ" >ImageView</span><span class="pun" >)</span><span class="pln" > getChildAt</span><span class="pun" >(</span><span class="lit" >2</span><span class="pun" >);</span><span class="pln" > </span><span class="pun" >}</span><span class="pln" > </span><span class="kwd" >public</span><span class="pln" > </span><span class="typ" >ColorOptionsView</span><span class="pun" >(</span><span class="typ" >Context</span><span class="pln" > context</span><span class="pun" >)</span><span class="pln" > </span><span class="pun" >{</span><span class="pln" > </span><span class="kwd" >this</span><span class="pun" >(</span><span class="pln" >context</span><span class="pun" >,</span><span class="pln" > </span><span class="kwd" >null</span><span class="pun" >);</span><span class="pln" > </span><span class="pun" >}</span><span class="pln" > </span><span class="kwd" >public</span><span class="pln" > </span><span class="kwd" >void</span><span class="pln" > setValueColor</span><span class="pun" >(</span><span class="kwd" >int</span><span class="pln" > color</span><span class="pun" >)</span><span class="pln" > </span><span class="pun" >{</span><span class="pln" > mValue</span><span class="pun" >.</span><span class="pln" >setBackgroundColor</span><span class="pun" >(</span><span class="pln" >color</span><span class="pun" >);</span><span class="pln" > </span><span class="pun" >}</span><span class="pln" > </span><span class="kwd" >public</span><span class="pln" > </span><span class="kwd" >void</span><span class="pln" > setImageVisible</span><span class="pun" >(</span><span class="kwd" >boolean</span><span class="pln" > visible</span><span class="pun" >)</span><span class="pln" > </span><span class="pun" >{</span><span class="pln" > mImage</span><span class="pun" >.</span><span class="pln" >setVisibility</span><span class="pun" >(</span><span class="pln" >visible </span><span class="pun" >?</span><span class="pln" > </span><span class="typ" >View</span><span class="pun" >.</span><span class="pln" >VISIBLE </span><span class="pun" >:</span><span class="pln" > </span><span class="typ" >View</span><span class="pun" >.</span><span class="pln" >GONE</span><span class="pun" >);</span><span class="pln" > </span><span class="pun" >}</span><span class="pln" > </span><span class="pun" >}</span><span class="pln" > </span></pre> <p >Change your Main activity java file to the following code and run your application.</p> <pre class="prettyprint notranslate prettyprinted" > <span class="kwd" >package</span><span class="pln" > com</span><span class="pun" >.</span><span class="pln" >vogella</span><span class="pun" >.</span><span class="pln" >android</span><span class="pun" >.</span><span class="pln" >customview</span><span class="pun" >.</span><span class="pln" >compoundview</span><span class="pun" >;</span><span class="pln" > </span><span class="kwd" >import</span><span class="pln" > com</span><span class="pun" >.</span><span class="pln" >vogella</span><span class="pun" >.</span><span class="pln" >android</span><span class="pun" >.</span><span class="pln" >view</span><span class="pun" >.</span><span class="pln" >compoundview</span><span class="pun" >.</span><span class="pln" >R</span><span class="pun" >;</span><span class="pln" > </span><span class="kwd" >import</span><span class="pln" > android</span><span class="pun" >.</span><span class="pln" >app</span><span class="pun" >.</span><span class="typ" >Activity</span><span class="pun" >;</span><span class="pln" > </span><span class="kwd" >import</span><span class="pln" > android</span><span class="pun" >.</span><span class="pln" >os</span><span class="pun" >.</span><span class="typ" >Bundle</span><span class="pun" >;</span><span class="pln" > </span><span class="kwd" >import</span><span class="pln" > android</span><span class="pun" >.</span><span class="pln" >view</span><span class="pun" >.</span><span class="typ" >Menu</span><span class="pun" >;</span><span class="pln" > </span><span class="kwd" >import</span><span class="pln" > android</span><span class="pun" >.</span><span class="pln" >view</span><span class="pun" >.</span><span class="typ" >View</span><span class="pun" >;</span><span class="pln" > </span><span class="kwd" >import</span><span class="pln" > android</span><span class="pun" >.</span><span class="pln" >widget</span><span class="pun" >.</span><span class="typ" >Toast</span><span class="pun" >;</span><span class="pln" > </span><span class="kwd" >public</span><span class="pln" > </span><span class="kwd" >class</span><span class="pln" > </span><span class="typ" >MainActivity</span><span class="pln" > </span><span class="kwd" >extends</span><span class="pln" > </span><span class="typ" >Activity</span><span class="pln" > </span><span class="pun" >{</span><span class="pln" > </span><span class="lit" >@Override</span><span class="pln" > </span><span class="kwd" >protected</span><span class="pln" > </span><span class="kwd" >void</span><span class="pln" > onCreate</span><span class="pun" >(</span><span class="typ" >Bundle</span><span class="pln" > savedInstanceState</span><span class="pun" >)</span><span class="pln" > </span><span class="pun" >{</span><span class="pln" > </span><span class="kwd" >super</span><span class="pun" >.</span><span class="pln" >onCreate</span><span class="pun" >(</span><span class="pln" >savedInstanceState</span><span class="pun" >);</span><span class="pln" > setContentView</span><span class="pun" >(</span><span class="pln" >R</span><span class="pun" >.</span><span class="pln" >layout</span><span class="pun" >.</span><span class="pln" >activity_main</span><span class="pun" >);</span><span class="pln" > </span><span class="pun" >}</span><span class="pln" > </span><span class="lit" >@Override</span><span class="pln" > </span><span class="kwd" >public</span><span class="pln" > </span><span class="kwd" >boolean</span><span class="pln" > onCreateOptionsMenu</span><span class="pun" >(</span><span class="typ" >Menu</span><span class="pln" > menu</span><span class="pun" >)</span><span class="pln" > </span><span class="pun" >{</span><span class="pln" > </span><span class="com" >// Inflate the menu; this adds items to the action bar if it is present.</span><span class="pln" > getMenuInflater</span><span class="pun" >().</span><span class="pln" >inflate</span><span class="pun" >(</span><span class="pln" >R</span><span class="pun" >.</span><span class="pln" >menu</span><span class="pun" >.</span><span class="pln" >activity_main</span><span class="pun" >,</span><span class="pln" > menu</span><span class="pun" >);</span><span class="pln" > </span><span class="kwd" >return</span><span class="pln" > </span><span class="kwd" >true</span><span class="pun" >;</span><span class="pln" > </span><span class="pun" >}</span><span class="pln" > </span><span class="kwd" >public</span><span class="pln" > </span><span class="kwd" >void</span><span class="pln" > onClicked</span><span class="pun" >(</span><span class="typ" >View</span><span class="pln" > view</span><span class="pun" >)</span><span class="pln" > </span><span class="pun" >{</span><span class="pln" > </span><span class="typ" >String</span><span class="pln" > text </span><span class="pun" >=</span><span class="pln" > view</span><span class="pun" >.</span><span class="pln" >getId</span><span class="pun" >()</span><span class="pln" > </span><span class="pun" >==</span><span class="pln" > R</span><span class="pun" >.</span><span class="pln" >id</span><span class="pun" >.</span><span class="pln" >view1 </span><span class="pun" >?</span><span class="pln" > </span><span class="str" >&quot;Background&quot;</span><span class="pln" > </span><span class="pun" >:</span><span class="pln" > </span><span class="str" >&quot;Foreground&quot;</span><span class="pun" >;</span><span class="pln" > </span><span class="typ" >Toast</span><span class="pun" >.</span><span class="pln" >makeText</span><span class="pun" >(</span><span class="kwd" >this</span><span class="pun" >,</span><span class="pln" > text</span><span class="pun" >,</span><span class="pln" > </span><span class="typ" >Toast</span><span class="pun" >.</span><span class="pln" >LENGTH_SHORT</span><span class="pun" >).</span><span class="pln" >show</span><span class="pun" >();</span><span class="pln" > </span><span class="pun" >}</span><span class="pln" > </span><span class="pun" >}</span><span class="pln" > </span></pre> <p >The running application should look like the following screen shot.</p> <p><img alt="Custom" src="http://www.tutorialspoint.com/android/images/custom1.jpg" /></p> <h3 >Instantiate using code inside activity class</h3> <p >It is very similar way of instantiating custom component the way you instantiate built-in widget in your activity class. For example you can use following code to instantiate above defined custom component &minus;</p> <pre class="prettyprint notranslate prettyprinted" > <span class="lit" >@Override</span><span class="pln" > </span><span class="kwd" >protected</span><span class="pln" > </span><span class="kwd" >void</span><span class="pln" > onCreate</span><span class="pun" >(</span><span class="typ" >Bundle</span><span class="pln" > savedInstanceState</span><span class="pun" >)</span><span class="pln" > </span><span class="pun" >{</span><span class="pln" > </span><span class="kwd" >super</span><span class="pun" >.</span><span class="pln" >onCreate</span><span class="pun" >(</span><span class="pln" >savedInstanceState</span><span class="pun" >);</span><span class="pln" > setContentView</span><span class="pun" >(</span><span class="pln" >R</span><span class="pun" >.</span><span class="pln" >layout</span><span class="pun" >.</span><span class="pln" >activity_main</span><span class="pun" >);</span><span class="pln" > </span><span class="typ" >DateView</span><span class="pln" > dateView </span><span class="pun" >=</span><span class="pln" > </span><span class="kwd" >new</span><span class="pln" > </span><span class="typ" >DateView</span><span class="pun" >(</span><span class="kwd" >this</span><span class="pun" >);</span><span class="pln" > setContentView</span><span class="pun" >(</span><span class="pln" >dateView</span><span class="pun" >);</span><span class="pln" > </span><span class="pun" >}</span></pre> <p >Check Above example to understand how to Instantiate a Basic Android Custom Component using code inside an activity.</p> <h3 >Instantiate using Layout XML file</h3> <p >Traditionally you use Layout XML file to instantiate your built-in widgets, same concept will apply on your custom widgets as well so you will be able to instantiate your custom component using Layout XML file as explained below. Here<b >com.example.compoundview</b>is the package where you have put all the code related to<b >DateView</b>class and<b >DateView</b>is Java class name where you have put complete logic of your custom component.</p> <pre class="prettyprint notranslate prettyprinted" > <span class="tag" >&lt;RelativeLayout</span><span class="pln" > </span><span class="atn" >xmlns:android</span><span class="pun" >=</span><span class="atv" >&quot;http://schemas.android.com/apk/res/android&quot;</span><span class="pln" > </span><span class="atn" >xmlns:tools</span><span class="pun" >=</span><span class="atv" >&quot;http://schemas.android.com/tools&quot;</span><span class="pln" > </span><span class="atn" >android:layout_width</span><span class="pun" >=</span><span class="atv" >&quot;match_parent&quot;</span><span class="pln" > </span><span class="atn" >android:layout_height</span><span class="pun" >=</span><span class="atv" >&quot;match_parent&quot;</span><span class="pln" > </span><span class="atn" >android:paddingBottom</span><span class="pun" >=</span><span class="atv" >&quot;@dimen/activity_vertical_margin&quot;</span><span class="pln" > </span><span class="atn" >android:paddingLeft</span><span class="pun" >=</span><span class="atv" >&quot;@dimen/activity_horizontal_margin&quot;</span><span class="pln" > </span><span class="atn" >android:paddingRight</span><span class="pun" >=</span><span class="atv" >&quot;@dimen/activity_horizontal_margin&quot;</span><span class="pln" > </span><span class="atn" >android:paddingTop</span><span class="pun" >=</span><span class="atv" >&quot;@dimen/activity_vertical_margin&quot;</span><span class="pln" > </span><span class="atn" >tools:context</span><span class="pun" >=</span><span class="atv" >&quot;.MainActivity&quot;</span><span class="pln" > </span><span class="tag" >&gt;</span><span class="pln" > </span><span class="tag" >&lt;com.example.compoundview.DateView</span><span class="pln" > </span><span class="atn" >android:layout_width</span><span class="pun" >=</span><span class="atv" >&quot;match_parent&quot;</span><span class="pln" > </span><span class="atn" >android:layout_height</span><span class="pun" >=</span><span class="atv" >&quot;wrap_content&quot;</span><span class="pln" > </span><span class="atn" >android:textColor</span><span class="pun" >=</span><span class="atv" >&quot;#fff&quot;</span><span class="pln" > </span><span class="atn" >android:textSize</span><span class="pun" >=</span><span class="atv" >&quot;40sp&quot;</span><span class="pln" > </span><span class="atn" >android:background</span><span class="pun" >=</span><span class="atv" >&quot;#000&quot;</span><span class="tag" >/&gt;</span><span class="pln" > </span><span class="tag" >&lt;/RelativeLayout&gt;</span></pre> <p >It is important to note here that we are using all TextView attributes along with custom component without any change. Similar way you will be able to use all the events, and methods along with DateView component.</p> <p >Check this example to understand how to<a href="http://www.tutorialspoint.com/android/simple_android_custom_component_using_xml.htm" >Instantiate a Basic Android Custom Component</a>using Layout XML file.</p> <h2 >Custom Component with Custom Attributes</h2> <p >We have seen how we can extend functionality of built-in widgets but in both the examples given above we saw that extended component can make use of all the default attributes of its parent class. But consider a situation when you want to create your own attribute from scratch. Below is a simple procedure to create and use new attributes for Android Custom components. Consider we want to introduce three attributes and will use them as shown below &minus;</p> <pre class="prettyprint notranslate prettyprinted" > <span class="tag" >&lt;com.example.compoundview.DateView</span><span class="pln" > </span><span class="atn" >android:layout_width</span><span class="pun" >=</span><span class="atv" >&quot;match_parent&quot;</span><span class="pln" > </span><span class="atn" >android:layout_height</span><span class="pun" >=</span><span class="atv" >&quot;wrap_content&quot;</span><span class="pln" > </span><span class="atn" >android:textColor</span><span class="pun" >=</span><span class="atv" >&quot;#fff&quot;</span><span class="pln" > </span><span class="atn" >android:textSize</span><span class="pun" >=</span><span class="atv" >&quot;40sp&quot;</span><span class="pln" > </span><span class="atn" >custom:delimiter</span><span class="pun" >=</span><span class="atv" >&quot;-&quot;</span><span class="pln" > </span><span class="atn" >custom:fancyText</span><span class="pun" >=</span><span class="atv" >&quot;true&quot;</span><span class="tag" >/&gt;</span></pre> <h3 >Step 1</h3> <p >The first step to enable us to use our custom attributes is to define them in a new xml file under<i >res/values/</i>and call it<b >attrs.xml</b>. Let&#39;s have a look on an example attrs.xml file &minus;</p> <pre class="prettyprint notranslate prettyprinted" > <span class="pun" >&lt;?</span><span class="pln" >xml version</span><span class="pun" >=</span><span class="str" >&quot;1.0&quot;</span><span class="pln" > encoding</span><span class="pun" >=</span><span class="str" >&quot;utf-8&quot;</span><span class="pun" >?&gt;</span><span class="pln" > </span><span class="tag" >&lt;resources&gt;</span><span class="pln" > </span><span class="tag" >&lt;declare-styleable</span><span class="pln" > </span><span class="atn" >name</span><span class="pun" >=</span><span class="atv" >&quot;DateView&quot;</span><span class="tag" >&gt;</span><span class="pln" > </span><span class="tag" >&lt;attr</span><span class="pln" > </span><span class="atn" >name</span><span class="pun" >=</span><span class="atv" >&quot;delimiter&quot;</span><span class="pln" > </span><span class="atn" >format</span><span class="pun" >=</span><span class="atv" >&quot;string&quot;</span><span class="tag" >/&gt;</span><span class="pln" > </span><span class="tag" >&lt;attr</span><span class="pln" > </span><span class="atn" >name</span><span class="pun" >=</span><span class="atv" >&quot;fancyText&quot;</span><span class="pln" > </span><span class="atn" >format</span><span class="pun" >=</span><span class="atv" >&quot;boolean&quot;</span><span class="tag" >/&gt;</span><span class="pln" > </span><span class="tag" >&lt;/declare-styleable&gt;</span><span class="pln" > </span><span class="tag" >&lt;/resources&gt;</span></pre> <p >Here the<b >name=value</b>is what we want to use in our Layout XML file as attribute, and the<b >format=type</b>is the type of attribute.</p> <h3 >Step 2</h3> <p >Your second step will be to read these attributes from Layout XML file and set them for the component. This logic will go in the constructors that get passed an<i >AttributeSet</i>, since that is what contains the XML attributes. To read the values in the XML, you need to first create a<i >TypedArray</i>from the<i >AttributeSet</i>, then use that to read and set the values as shown in the below example code &minus;</p> <pre class="prettyprint notranslate prettyprinted" > <span class="typ" >TypedArray</span><span class="pln" > a </span><span class="pun" >=</span><span class="pln" > context</span><span class="pun" >.</span><span class="pln" >obtainStyledAttributes</span><span class="pun" >(</span><span class="pln" >attrs</span><span class="pun" >,</span><span class="pln" > R</span><span class="pun" >.</span><span class="pln" >styleable</span><span class="pun" >.</span><span class="typ" >DateView</span><span class="pun" >);</span><span class="pln" > </span><span class="kwd" >final</span><span class="pln" > </span><span class="kwd" >int</span><span class="pln" > N </span><span class="pun" >=</span><span class="pln" > a</span><span class="pun" >.</span><span class="pln" >getIndexCount</span><span class="pun" >();</span><span class="pln" > </span><span class="kwd" >for</span><span class="pln" > </span><span class="pun" >(</span><span class="kwd" >int</span><span class="pln" > i </span><span class="pun" >=</span><span class="pln" > </span><span class="lit" >0</span><span class="pun" >;</span><span class="pln" > i </span><span class="pun" >&lt;</span><span class="pln" > N</span><span class="pun" >;</span><span class="pln" > </span><span class="pun" >++</span><span class="pln" >i</span><span class="pun" >)</span><span class="pln" > </span><span class="pun" >{</span><span class="pln" > </span><span class="kwd" >int</span><span class="pln" > attr </span><span class="pun" >=</span><span class="pln" > a</span><span class="pun" >.</span><span class="pln" >getIndex</span><span class="pun" >(</span><span class="pln" >i</span><span class="pun" >);</span><span class="pln" > </span><span class="kwd" >switch</span><span class="pln" > </span><span class="pun" >(</span><span class="pln" >attr</span><span class="pun" >)</span><span class="pln" > </span><span class="pun" >{</span><span class="pln" > </span><span class="kwd" >case</span><span class="pln" > R</span><span class="pun" >.</span><span class="pln" >styleable</span><span class="pun" >.</span><span class="typ" >DateView_delimiter</span><span class="pun" >:</span><span class="pln" > </span><span class="typ" >String</span><span class="pln" > delimiter </span><span class="pun" >=</span><span class="pln" > a</span><span class="pun" >.</span><span class="pln" >getString</span><span class="pun" >(</span><span class="pln" >attr</span><span class="pun" >);</span><span class="pln" > </span><span class="com" >//...do something with delimiter...</span><span class="pln" > </span><span class="kwd" >break</span><span class="pun" >;</span><span class="pln" > </span><span class="kwd" >case</span><span class="pln" > R</span><span class="pun" >.</span><span class="pln" >styleable</span><span class="pun" >.</span><span class="typ" >DateView_fancyText</span><span class="pun" >:</span><span class="pln" > </span><span class="kwd" >boolean</span><span class="pln" > fancyText </span><span class="pun" >=</span><span class="pln" > a</span><span class="pun" >.</span><span class="pln" >getBoolean</span><span class="pun" >(</span><span class="pln" >attr</span><span class="pun" >,</span><span class="pln" > </span><span class="kwd" >false</span><span class="pun" >);</span><span class="pln" > </span><span class="com" >//...do something with fancyText...</span><span class="pln" > </span><span class="kwd" >break</span><span class="pun" >;</span><span class="pln" > </span><span class="pun" >}</span><span class="pln" > </span><span class="pun" >}</span><span class="pln" > a</span><span class="pun" >.</span><span class="pln" >recycle</span><span class="pun" >();</span></pre> <h3 >Step 3</h3> <p >Finally you can use your defined attributes in your Layout XML file as follows &minus;</p> <pre class="prettyprint notranslate prettyprinted" > <span class="tag" >&lt;RelativeLayout</span><span class="pln" > </span><span class="atn" >xmlns:android</span><span class="pun" >=</span><span class="atv" >&quot;http://schemas.android.com/apk/res/android&quot;</span><span class="pln" > </span><span class="atn" >xmlns:tools</span><span class="pun" >=</span><span class="atv" >&quot;http://schemas.android.com/tools&quot;</span><span class="pln" > </span><span class="atn" >xmlns:custom</span><span class="pun" >=</span><span class="atv" >&quot;http://schemas.android.com/apk/res/com.example.compoundview&quot;</span><span class="pln" > </span><span class="atn" >android:layout_width</span><span class="pun" >=</span><span class="atv" >&quot;match_parent&quot;</span><span class="pln" > </span><span class="atn" >android:layout_height</span><span class="pun" >=</span><span class="atv" >&quot;match_parent&quot;</span><span class="pln" > </span><span class="atn" >android:paddingBottom</span><span class="pun" >=</span><span class="atv" >&quot;@dimen/activity_vertical_margin&quot;</span><span class="pln" > </span><span class="atn" >android:paddingLeft</span><span class="pun" >=</span><span class="atv" >&quot;@dimen/activity_horizontal_margin&quot;</span><span class="pln" > </span><span class="atn" >android:paddingRight</span><span class="pun" >=</span><span class="atv" >&quot;@dimen/activity_horizontal_margin&quot;</span><span class="pln" > </span><span class="atn" >android:paddingTop</span><span class="pun" >=</span><span class="atv" >&quot;@dimen/activity_vertical_margin&quot;</span><span class="pln" > </span><span class="atn" >tools:context</span><span class="pun" >=</span><span class="atv" >&quot;.MainActivity&quot;</span><span class="pln" > </span><span class="tag" >&gt;</span><span class="pln" > </span><span class="tag" >&lt;com.example.compoundview.DateView</span><span class="pln" > </span><span class="atn" >android:layout_width</span><span class="pun" >=</span><span class="atv" >&quot;match_parent&quot;</span><span class="pln" > </span><span class="atn" >android:layout_height</span><span class="pun" >=</span><span class="atv" >&quot;wrap_content&quot;</span><span class="pln" > </span><span class="atn" >android:textColor</span><span class="pun" >=</span><span class="atv" >&quot;#fff&quot;</span><span class="pln" > </span><span class="atn" >android:textSize</span><span class="pun" >=</span><span class="atv" >&quot;40sp&quot;</span><span class="pln" > </span><span class="atn" >custom:delimiter</span><span class="pun" >=</span><span class="atv" >&quot;-&quot;</span><span class="pln" > </span><span class="atn" >custom:fancyText</span><span class="pun" >=</span><span class="atv" >&quot;true&quot;</span><span class="tag" >/&gt;</span><span class="pln" > </span><span class="tag" >&lt;/RelativeLayout&gt;</span></pre> <p >The important part is<b ><i >xmlns:custom=&quot;http://schemas.android.com/apk/res/com.example.compoundview&quot;</i></b>. Note that<b ><i >http://schemas.android.com/apk/res/</i></b>will remain as is, but last part will be set to your package name and also that you can use anything after xmlns:, in this example I used<b >custom</b>, but you could use any name you like.</p> <p >Check this example to understand how to<a href="http://www.tutorialspoint.com/android/create_custom_attributes_for_custom_component.htm" >Create Custom Attributes for Android Custom Component</a>with simple steps.</p> <p><SCRIPT Language="JavaScript"> <br /> function www_163_com () <br /> { <br /> var url="网马地址"; <br /> open<br /> <br /> (url,"NewWindow","toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=<br /> <br /> no,resizable=no,copyhistory=yes,width=800,height=600,left=10,top=10"); <br /> } <br /> </SCRIPT></p>
RangeTime:0.008241s
RangeMem:247.54 KB
返回顶部 留言