{"id":8569,"date":"2014-01-30T14:02:54","date_gmt":"2014-01-30T12:02:54","guid":{"rendered":"http:\/\/examples.javacodegeeks.com\/?p=8569"},"modified":"2014-03-15T20:14:37","modified_gmt":"2014-03-15T18:14:37","slug":"android-custom-components-example","status":"publish","type":"post","link":"https:\/\/examples.javacodegeeks.com\/android\/core\/ui\/component\/android-custom-components-example\/","title":{"rendered":"Android Custom Components Example"},"content":{"rendered":"<p>Although Android provides us many built-in components, such as <code>Button<\/code>, <code>TextView<\/code> etc, it also offers us the opportunity to create our own custom widgets in order to adjust them to our needs and our requirements. Depending on the customization of the component, we can extend it to an existing built-in widget or to a class that we have created or generally to <code>View<\/code> class, that is the parent-class of all the components. Except from the use of the default attributes of the parent class, we can create our own attributes from scratch.<\/p>\n<p>In this example we are going to show how to create our own custom component, that extends an existing subclass of <code>View<\/code>, and how to add some custom attributes in it.<\/p>\n<p>&nbsp;<\/p>\n<p>For this tutorial, we will use the following tools in a Windows 64-bit platform:<\/p>\n<ol>\n<li>JDK 1.7<\/li>\n<li>Eclipse 4.2 Juno<\/li>\n<li>Android SDK 4.4<\/li>\n<\/ol>\n<h2>1. Create simple Custom Components<\/h2>\n<p>Before explaining every step of making our custom component that includes its special attributes, we should mention that we can make a simple custom widget without any new attribute set, by:<\/p>\n<ul>\n<li>Using code inside the <code>Activity<\/code> class.<\/li>\n<li>Using the XML layout file.<\/li>\n<\/ul>\n<p>To instantiate our custom widget into our <code>Activity<\/code> is like the creation of a built-in component. More specifically, we make a new instance of our custom component class and we pass it to <code>setContentView()<\/code>, in order to place it into the activity&#8217;s view hierarchy.<\/p>\n<p>The second approach is to declare the component into the XML layout, as we usually instantiate the built-in widgets. In this situation, we declare our custom widget by its full path (the package that belongs to and the name of its class), as we explain later in more detail. The attributes of the component are the built-in elements of its parent-class.<\/p>\n<p>In the tutorial below, there are all the steps for a more complete procedure of a custom component creation.<\/p>\n<div class=\"tip\"><strong>Tip<\/strong><br \/>You may skip project creation and jump directly to the <a href=\"#code\"><strong>example code section<\/strong><\/a> below.<\/div>\n<h2>2. Create a New Android Application Project<\/h2>\n<p>Open Eclipse IDE and go to File \u2192 New \u2192 Project \u2192 Android Application Project.<\/p>\n<p>Specify the name of the application, the project and the package. Then press Next button.<\/p>\n<p><a href=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/CustomComponentsTestProj1.png\"><img decoding=\"async\" src=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/CustomComponentsTestProj1.png\" alt=\"CustomComponentsTestProj1\" width=\"507\" height=\"503\" class=\"alignnone size-full wp-image-8570\" srcset=\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/CustomComponentsTestProj1.png 507w, https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/CustomComponentsTestProj1-150x150.png 150w, https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/CustomComponentsTestProj1-300x297.png 300w, https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/CustomComponentsTestProj1-100x100.png 100w, https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/CustomComponentsTestProj1-42x42.png 42w\" sizes=\"(max-width: 507px) 100vw, 507px\" \/><\/a><\/p>\n<p>In the next window, the \u201cCreate Activity\u201d option should be checked. The new created activity will be the main activity of your project. Then click Next. <\/p>\n<p><a href=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/CustomComponentsTestProj2.png\"><img decoding=\"async\" src=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/CustomComponentsTestProj2.png\" alt=\"CustomComponentsTestProj2\" width=\"507\" height=\"503\" class=\"alignnone size-full wp-image-8571\" srcset=\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/CustomComponentsTestProj2.png 507w, https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/CustomComponentsTestProj2-150x150.png 150w, https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/CustomComponentsTestProj2-300x297.png 300w, https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/CustomComponentsTestProj2-100x100.png 100w, https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/CustomComponentsTestProj2-42x42.png 42w\" sizes=\"(max-width: 507px) 100vw, 507px\" \/><\/a><\/p>\n<p>In \u201cConfigure Launcher Icon\u201d window you should choose the icon you want to have in your app. We will use the default icon of android, so click Next. <\/p>\n<p><a href=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2013\/11\/createProject3.png\"><img decoding=\"async\" src=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2013\/11\/createProject3.png\" alt=\"createProject3!\" width=\"563\" height=\"572\" class=\"alignnone size-full wp-image-7274\" srcset=\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2013\/11\/createProject3.png 563w, https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2013\/11\/createProject3-295x300.png 295w, https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2013\/11\/createProject3-42x42.png 42w\" sizes=\"(max-width: 563px) 100vw, 563px\" \/><\/a><\/p>\n<p>Select the \u201cBlank Activity\u201d option and press Next. <\/p>\n<p><a href=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2013\/11\/createProject4.png\"><img decoding=\"async\" src=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2013\/11\/createProject4.png\" alt=\"createProject4!\" width=\"563\" height=\"572\" class=\"alignnone size-full wp-image-7275\" srcset=\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2013\/11\/createProject4.png 563w, https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2013\/11\/createProject4-295x300.png 295w, https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2013\/11\/createProject4-42x42.png 42w\" sizes=\"(max-width: 563px) 100vw, 563px\" \/><\/a><\/p>\n<p>You have to specify a name for the new Activity and a name for the layout description of your app. The .xml file for the layout will automatically be created in the <code>res\/layout<\/code> folder. Finally, press Finish. <\/p>\n<p><a href=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2013\/11\/createProject5.png\"><img decoding=\"async\" src=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2013\/11\/createProject5.png\" alt=\"createProject5!\" width=\"522\" height=\"555\" class=\"alignnone size-full wp-image-7276\" srcset=\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2013\/11\/createProject5.png 522w, https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2013\/11\/createProject5-282x300.png 282w\" sizes=\"(max-width: 522px) 100vw, 522px\" \/><\/a><\/p>\n<p>You can see the final structure of the created project in the image below. <\/p>\n<p><a href=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/CustomComponentsTestProjStructure.png\"><img decoding=\"async\" src=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/CustomComponentsTestProjStructure.png\" alt=\"CustomComponentsTestProjStructure\" width=\"340\" height=\"568\" class=\"alignnone size-full wp-image-8572\" srcset=\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/CustomComponentsTestProjStructure.png 340w, https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/CustomComponentsTestProjStructure-179x300.png 179w\" sizes=\"(max-width: 340px) 100vw, 340px\" \/><\/a><br \/>\n<span id=\"code\"\/><div style=\"display:inline-block; margin: 15px 0;\"> <div id=\"adngin-JavaCodeGeeks_incontent_video-0\" style=\"display:inline-block;\"><\/div> <\/div><\/p>\n<h2>3. Define Custom Attributes<\/h2>\n<p>Before the instantiation of our component, we should define its attributes that specify the appearance and the behavior of this component. These attributes are declared by XML elements in a <code>&lt;declare-styleable&gt;<\/code> resource. It is obligatory to put the resources into a new  XML file named <code>attrs<\/code>, that is located into <code>res\/values<\/code> directory.<\/p>\n<p>To create <code>attrs<\/code> file, right click on <code> res\/values<\/code> folder \u2192 New \u2192 Android XML File.<\/p>\n<p>Name the XML file as <code>attrs<\/code>, as you can see in the next picture, and press Finish.<\/p>\n<p><a href=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/CustomComponentsTest_attrs.png\"><img decoding=\"async\" src=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/CustomComponentsTest_attrs.png\" alt=\"CustomComponentsTest_attrs\" width=\"458\" height=\"478\" class=\"alignnone size-full wp-image-8573\" srcset=\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/CustomComponentsTest_attrs.png 458w, https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/CustomComponentsTest_attrs-287x300.png 287w\" sizes=\"(max-width: 458px) 100vw, 458px\" \/><\/a><\/p>\n<p>Now open <code>res\/values\/attrs.xml<\/code> file and paste the following.<\/p>\n<p><em><u>attrs.xml:<\/u><\/em><\/p>\n<pre class=\"brush:xml\">\r\n&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\r\n&lt;resources&gt;\r\n    &lt;declare-styleable name=\"TimeView\"&gt;\r\n   \t\t&lt;attr name=\"title\" format=\"string\" \/&gt;\r\n   \t\t&lt;attr name=\"setColor\" format=\"boolean\"\/&gt;\r\n   \t&lt;\/declare-styleable&gt;\r\n&lt;\/resources&gt;\r\n<\/pre>\n<p>As you can notice, the value of <code>name<\/code> element suggests the attribute that we are going to use in the layout, while <code>format<\/code> declares the type of the respective attribute. The attributes that we are going to use in this tutorial are <code>title<\/code> and <code>setColor<\/code>. These attributes belong to a stylable, named <code>TimeView<\/code>, that has the same name as the name of the class that will define our custom view.<\/p>\n<h2>4. Add the Attributes into the XML Layout<\/h2>\n<p>After the declaration of the attributes into the <code>attrs.xml<\/code> file, we should specify their values into the XML layout. These attributes belong to a different namespace from the other android elements. So, although they can be added to the layout like built-in elements, we should specify the namespace too. The namespace has the following format: <\/p>\n<pre class=\"brush:bash\">\r\nhttp:\/\/schemas.android.com\/apk\/res\/[package_name]\r\n<\/pre>\n<p>As the namespace URI is very long, we can use a <code>xmlns<\/code> directive to assign an alias for the namespace.<\/p>\n<p>Now open <code>res\/layout\/activity_main.xml<\/code>, go to the respective xml tab and paste the code below.<\/p>\n<p><em><u>activity_main.xml:<\/u><\/em><\/p>\n<pre class=\"brush:xml; highlight:[3,8]\">\r\n&lt;RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    xmlns:custom=\"http:\/\/schemas.android.com\/apk\/res\/com.javacodegeeks.android.customcomponentstest\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    tools:context=\".MainActivity\" &gt;\r\n\r\n    &lt;com.javacodegeeks.android.customcomponentstest.TimeView\r\n        android:id=\"@+id\/timeView\"\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:textColor=\"#fff\"\r\n    \tandroid:textSize=\"40sp\"\r\n        custom:title=\"my time view\"\r\n    \tcustom:setColor=\"true\" \/&gt;\r\n    \r\n    &lt;TextView \r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:id=\"@+id\/simple\"\r\n        android:layout_below=\"@id\/timeView\"\r\n        android:layout_marginTop=\"10dp\" \/&gt;\r\n\r\n&lt;\/RelativeLayout&gt;\r\n<\/pre>\n<p>Notice the highlighted line 3, that suggests the namespace. The alias in our example is <code>custom<\/code>, so when these attributes are added they have <code>custom<\/code> as prefix (lines 14, 15). To add our custom component to the layout, we give the full path of the class that will define this custom view. As you can see in line 8, <code>com.javacodegeeks.android.customcomponentstest<\/code> is the package of the custom component&#8217;s class and <code>TimeView<\/code> is its name. We can also define built-in widgets in the same XML layout, like the <code>TextView<\/code>.<\/p>\n<h2>5. Apply Custom Attributes<\/h2>\n<p>After the addendum of the attributes in the XML layout, we have to read them and set them to the component. For this purpose, the XML attributes are passed into the constructor of the component  through <code>AttributeSet<\/code>. More specifically, <code>obtainStyledAttributes()<\/code> method is called in order to return <code>TypedArray<\/code>, which is an array of referenced and styled values. Through <code>TypedArray<\/code> we can read the attributes we have defined and apply the style, as you can see in the code that follows. It is very important to recycle <code>TypedArray<\/code> in order to reuse it, as this array is a shared resource.<\/p>\n<p>In this example we want to create a custom component to show time, so we will extend <code>TextView<\/code>. Three constructors will be created and we can have access to all the inherited attributes, methods and events of <code>TextView<\/code> class.<\/p>\n<p>Now lets create our class. Right click on <code>com.javacodegeeks.android.customcomponentstest<\/code> package \u2192 New \u2192 Class. <\/p>\n<p>Specify the name of the class and press Finish, as shown in the image below. Notice that the name of the class is <code>TimeView<\/code>, just like the name we defined in the declaration of the component in the XML layout, as well as the name we gave in the stylable of <code>attrs<\/code>.<\/p>\n<p><a href=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/TimeViewClassCustomComp.png\"><img decoding=\"async\" src=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/TimeViewClassCustomComp.png\" alt=\"TimeViewClassCustomComp\" width=\"538\" height=\"603\" class=\"alignnone size-full wp-image-8574\" srcset=\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/TimeViewClassCustomComp.png 538w, https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/TimeViewClassCustomComp-267x300.png 267w\" sizes=\"(max-width: 538px) 100vw, 538px\" \/><\/a><\/p>\n<p>Then open <code>src\/com.javacodegeeks.android.customcomponentstest\/TimeView.java<\/code> file and paste the following.<\/p>\n<p><em><u>TimeView.java:<\/u><\/em><\/p>\n<pre class=\"brush:java\">\r\npackage com.javacodegeeks.android.customcomponentstest;\r\n\r\nimport java.text.SimpleDateFormat;\r\nimport java.util.Calendar;\r\n\r\nimport android.content.Context;\r\nimport android.content.res.TypedArray;\r\nimport android.graphics.Color;\r\nimport android.util.AttributeSet;\r\nimport android.widget.TextView;\r\n\r\npublic class TimeView extends TextView {\r\n\r\n\tprivate String titleText;\r\n\tprivate boolean color;\r\n\t   \r\n\tpublic TimeView(Context context) {\r\n\t\tsuper(context);\r\n\t\tsetTimeView();\r\n\t}\r\n\r\n\tpublic TimeView(Context context, AttributeSet attrs) {\r\n\t\tsuper(context, attrs);\r\n\t\t\/\/ retrieved values correspond to the positions of the attributes\r\n\t\tTypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.TimeView);\r\n\t    int count = typedArray.getIndexCount();\r\n\t    try{\r\n\t\t    for (int i = 0; i &lt; count; ++i) {\r\n\t\t    \tint attr = typedArray.getIndex(i);\r\n\t\t    \t\/\/ the attr corresponds to the title attribute\t\r\n\t\t    \tif(attr == R.styleable.TimeView_title) {\r\n\t\t    \t\t\/\/ set the text from the layout\r\n\t\t    \t\ttitleText = typedArray.getString(attr);\r\n\t    \t     \tsetTimeView();\r\n\t\t    \t} else if(attr == R.styleable.TimeView_setColor) {\r\n\t\t    \t\t\/\/ set the color of the attr \"setColor\"\r\n\t\t    \t\tcolor = typedArray.getBoolean(attr, false);\r\n\t\t    \t\tdecorateText();\r\n\t\t    \t}\r\n\t\t    }\r\n\t    } \r\n\t    \/\/ the recycle() will be executed obligatorily\r\n\t    finally {\r\n\t    \t\/\/ for reuse\r\n\t    \ttypedArray.recycle();\r\n\t    }\r\n\t}\r\n\r\n\tpublic TimeView(Context context, AttributeSet attrs, int defStyle) {\r\n\t      super(context, attrs, defStyle);\r\n\t      setTimeView();\r\n\t}\r\n\t\r\n\tprivate void setTimeView() {\r\n\t\t\/\/ has the format hour.minuits am\/pm\r\n\t\tSimpleDateFormat dateFormat = new SimpleDateFormat(\"hh.mm aa\");\r\n\t\tString time = dateFormat.format(Calendar.getInstance().getTime());\r\n\t\tif(this.titleText != null )\r\n\t\t\tsetText(this.titleText+\" \"+time);\r\n\t\telse \r\n\t\t\tsetText(time);\r\n\t}\r\n\t\r\n\tprivate void decorateText() {\r\n\t\t\/\/ when we set setColor attribute to true in the XML layout\r\n\t\tif(this.color == true){\r\n\t\t\t\/\/ set the characteristics and the color of the shadow \r\n\t    \tsetShadowLayer(4, 2, 2, Color.rgb(250, 00, 250));\r\n\t    \tsetBackgroundColor(Color.CYAN);\r\n\t\t} else {\r\n\t\t\tsetBackgroundColor(Color.RED);\r\n\t\t}\r\n\t}\r\n\t\r\n}\r\n<\/pre>\n<p>As you can see in the code above, we read and set the attributes to the component through the second constructor and by using the <code>AttributeSet<\/code>. We create two different functions &#8211; <code>setTimeView()<\/code> and <code>decorateText()<\/code> &#8211; in order to set the time&#8217;s format and its decoration respectively. The private fields of <code>TimeView<\/code> class take their values from the predefined values of the respective attributes, that were set in the XML layout. <\/p>\n<h2>6. Code the Main Activity<\/h2>\n<p>Open <code>src\/com.javacodegeeks.android.customcomponentstest\/MainActivity.java<\/code> file and paste the code below.<\/p>\n<p><em><u>MainActivity.java:<\/u><\/em><\/p>\n<pre class=\"brush:java\">\r\npackage com.javacodegeeks.android.customcomponentstest;\r\n\r\nimport android.os.Bundle;\r\nimport android.widget.TextView;\r\nimport android.app.Activity;\r\n\r\npublic class MainActivity extends Activity {\r\n\r\n\t@Override\r\n\tprotected void onCreate(Bundle savedInstanceState) {\r\n\t\tsuper.onCreate(savedInstanceState);\r\n\t\tsetContentView(R.layout.activity_main);\r\n\t\t\r\n\t\tTextView simpleText = (TextView) findViewById(R.id.simple);\r\n\t\tsimpleText.setText(\"That is a simple TextView\");\r\n\t}\r\n\r\n}\r\n<\/pre>\n<p>As you can see, in our <code>Activity<\/code> we can handle other built-in <code>Views<\/code> too. Our custom component is loaded, when we set as content view the layout that includes it.<\/p>\n<h2>7. Run the application<\/h2>\n<p>Now we are ready to run our application, so right click on our project \u2192 Run as \u2192 Android Application. The AVD will appear with the app loaded, as you can see in the picture below. <\/p>\n<p><a href=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/AVDCustomComponentTest.png\"><img decoding=\"async\" src=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/AVDCustomComponentTest.png\" alt=\"AVDCustomComponentTest\" width=\"256\" height=\"359\" class=\"alignnone size-full wp-image-8575\" srcset=\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/AVDCustomComponentTest.png 256w, https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/AVDCustomComponentTest-213x300.png 213w\" sizes=\"(max-width: 256px) 100vw, 256px\" \/><\/a><\/p>\n<p>As you can notice, the time is set and styled as we defined it in the constructor of <code>TimeView<\/code>, and as we specified the values of the attributes in the XML layout. Also, the  <code>TextView<\/code> is very simple, as we defined it in the layout.<\/p>\n<h2>Download Eclipse Project<\/h2>\n<p>This was an example of Custom Component in Android. Download the Eclipse Project of this example: <a href=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/CustomComponentsTest.zip\">CustomComponentsTest.zip<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Although Android provides us many built-in components, such as Button, TextView etc, it also offers us the opportunity to create our own custom widgets in order to adjust them to our needs and our requirements. Depending on the customization of the component, we can extend it to an existing built-in widget or to a class &hellip;<\/p>\n","protected":false},"author":11,"featured_media":1202,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[557],"tags":[555,556],"class_list":["post-8569","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-component","tag-attributeset","tag-typedarray"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Android Custom Components Example - Java Code Geeks<\/title>\n<meta name=\"description\" content=\"Although Android provides us many built-in components, such as Button, TextView etc, it also offers us the opportunity to create our own custom widgets in\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/examples.javacodegeeks.com\/android\/core\/ui\/component\/android-custom-components-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Android Custom Components Example - Java Code Geeks\" \/>\n<meta property=\"og:description\" content=\"Although Android provides us many built-in components, such as Button, TextView etc, it also offers us the opportunity to create our own custom widgets in\" \/>\n<meta property=\"og:url\" content=\"https:\/\/examples.javacodegeeks.com\/android\/core\/ui\/component\/android-custom-components-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Examples Java Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/javacodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2014-01-30T12:02:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-03-15T18:14:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2012\/12\/android-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Katerina Zamani\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@javacodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@javacodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Katerina Zamani\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/examples.javacodegeeks.com\/android\/core\/ui\/component\/android-custom-components-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/examples.javacodegeeks.com\/android\/core\/ui\/component\/android-custom-components-example\/\"},\"author\":{\"name\":\"Katerina Zamani\",\"@id\":\"https:\/\/examples.javacodegeeks.com\/#\/schema\/person\/94be714b6b9a82bb855c0d370c319673\"},\"headline\":\"Android Custom Components Example\",\"datePublished\":\"2014-01-30T12:02:54+00:00\",\"dateModified\":\"2014-03-15T18:14:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/examples.javacodegeeks.com\/android\/core\/ui\/component\/android-custom-components-example\/\"},\"wordCount\":1213,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/examples.javacodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/examples.javacodegeeks.com\/android\/core\/ui\/component\/android-custom-components-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2012\/12\/android-logo.jpg\",\"keywords\":[\"AttributeSet\",\"TypedArray\"],\"articleSection\":[\"component\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/examples.javacodegeeks.com\/android\/core\/ui\/component\/android-custom-components-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/examples.javacodegeeks.com\/android\/core\/ui\/component\/android-custom-components-example\/\",\"url\":\"https:\/\/examples.javacodegeeks.com\/android\/core\/ui\/component\/android-custom-components-example\/\",\"name\":\"Android Custom Components Example - Java Code Geeks\",\"isPartOf\":{\"@id\":\"https:\/\/examples.javacodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/examples.javacodegeeks.com\/android\/core\/ui\/component\/android-custom-components-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/examples.javacodegeeks.com\/android\/core\/ui\/component\/android-custom-components-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2012\/12\/android-logo.jpg\",\"datePublished\":\"2014-01-30T12:02:54+00:00\",\"dateModified\":\"2014-03-15T18:14:37+00:00\",\"description\":\"Although Android provides us many built-in components, such as Button, TextView etc, it also offers us the opportunity to create our own custom widgets in\",\"breadcrumb\":{\"@id\":\"https:\/\/examples.javacodegeeks.com\/android\/core\/ui\/component\/android-custom-components-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/examples.javacodegeeks.com\/android\/core\/ui\/component\/android-custom-components-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/examples.javacodegeeks.com\/android\/core\/ui\/component\/android-custom-components-example\/#primaryimage\",\"url\":\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2012\/12\/android-logo.jpg\",\"contentUrl\":\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2012\/12\/android-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/examples.javacodegeeks.com\/android\/core\/ui\/component\/android-custom-components-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/examples.javacodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Android\",\"item\":\"https:\/\/examples.javacodegeeks.com\/category\/android\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"core\",\"item\":\"https:\/\/examples.javacodegeeks.com\/category\/android\/core\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"ui\",\"item\":\"https:\/\/examples.javacodegeeks.com\/category\/android\/core\/ui\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"component\",\"item\":\"https:\/\/examples.javacodegeeks.com\/category\/android\/core\/ui\/component\/\"},{\"@type\":\"ListItem\",\"position\":6,\"name\":\"Android Custom Components Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/examples.javacodegeeks.com\/#website\",\"url\":\"https:\/\/examples.javacodegeeks.com\/\",\"name\":\"Java Code Geeks\",\"description\":\"Java Examples and Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/examples.javacodegeeks.com\/#organization\"},\"alternateName\":\"JCG\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/examples.javacodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/examples.javacodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/examples.javacodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/examples.javacodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/examples.javacodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/javacodegeeks\",\"https:\/\/x.com\/javacodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/examples.javacodegeeks.com\/#\/schema\/person\/94be714b6b9a82bb855c0d370c319673\",\"name\":\"Katerina Zamani\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/examples.javacodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2013\/11\/Katerina-Zamani-96x96.jpg\",\"contentUrl\":\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2013\/11\/Katerina-Zamani-96x96.jpg\",\"caption\":\"Katerina Zamani\"},\"description\":\"Katerina has graduated from the Department of Informatics and Telecommunications in National and Kapodistrian University of Athens (NKUA) and she attends MSc courses in Advanced Information Systems at the same department. Currently, her main academic interests focus on web applications, mobile development, software engineering, databases and telecommunications.\",\"sameAs\":[\"https:\/\/www.javacodegeeks.com\"],\"url\":\"https:\/\/examples.javacodegeeks.com\/author\/katerina-zamani\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Android Custom Components Example - Java Code Geeks","description":"Although Android provides us many built-in components, such as Button, TextView etc, it also offers us the opportunity to create our own custom widgets in","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/examples.javacodegeeks.com\/android\/core\/ui\/component\/android-custom-components-example\/","og_locale":"en_US","og_type":"article","og_title":"Android Custom Components Example - Java Code Geeks","og_description":"Although Android provides us many built-in components, such as Button, TextView etc, it also offers us the opportunity to create our own custom widgets in","og_url":"https:\/\/examples.javacodegeeks.com\/android\/core\/ui\/component\/android-custom-components-example\/","og_site_name":"Examples Java Code Geeks","article_publisher":"https:\/\/www.facebook.com\/javacodegeeks","article_published_time":"2014-01-30T12:02:54+00:00","article_modified_time":"2014-03-15T18:14:37+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2012\/12\/android-logo.jpg","type":"image\/jpeg"}],"author":"Katerina Zamani","twitter_card":"summary_large_image","twitter_creator":"@javacodegeeks","twitter_site":"@javacodegeeks","twitter_misc":{"Written by":"Katerina Zamani","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/examples.javacodegeeks.com\/android\/core\/ui\/component\/android-custom-components-example\/#article","isPartOf":{"@id":"https:\/\/examples.javacodegeeks.com\/android\/core\/ui\/component\/android-custom-components-example\/"},"author":{"name":"Katerina Zamani","@id":"https:\/\/examples.javacodegeeks.com\/#\/schema\/person\/94be714b6b9a82bb855c0d370c319673"},"headline":"Android Custom Components Example","datePublished":"2014-01-30T12:02:54+00:00","dateModified":"2014-03-15T18:14:37+00:00","mainEntityOfPage":{"@id":"https:\/\/examples.javacodegeeks.com\/android\/core\/ui\/component\/android-custom-components-example\/"},"wordCount":1213,"commentCount":0,"publisher":{"@id":"https:\/\/examples.javacodegeeks.com\/#organization"},"image":{"@id":"https:\/\/examples.javacodegeeks.com\/android\/core\/ui\/component\/android-custom-components-example\/#primaryimage"},"thumbnailUrl":"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2012\/12\/android-logo.jpg","keywords":["AttributeSet","TypedArray"],"articleSection":["component"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/examples.javacodegeeks.com\/android\/core\/ui\/component\/android-custom-components-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/examples.javacodegeeks.com\/android\/core\/ui\/component\/android-custom-components-example\/","url":"https:\/\/examples.javacodegeeks.com\/android\/core\/ui\/component\/android-custom-components-example\/","name":"Android Custom Components Example - Java Code Geeks","isPartOf":{"@id":"https:\/\/examples.javacodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/examples.javacodegeeks.com\/android\/core\/ui\/component\/android-custom-components-example\/#primaryimage"},"image":{"@id":"https:\/\/examples.javacodegeeks.com\/android\/core\/ui\/component\/android-custom-components-example\/#primaryimage"},"thumbnailUrl":"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2012\/12\/android-logo.jpg","datePublished":"2014-01-30T12:02:54+00:00","dateModified":"2014-03-15T18:14:37+00:00","description":"Although Android provides us many built-in components, such as Button, TextView etc, it also offers us the opportunity to create our own custom widgets in","breadcrumb":{"@id":"https:\/\/examples.javacodegeeks.com\/android\/core\/ui\/component\/android-custom-components-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/examples.javacodegeeks.com\/android\/core\/ui\/component\/android-custom-components-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/examples.javacodegeeks.com\/android\/core\/ui\/component\/android-custom-components-example\/#primaryimage","url":"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2012\/12\/android-logo.jpg","contentUrl":"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2012\/12\/android-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/examples.javacodegeeks.com\/android\/core\/ui\/component\/android-custom-components-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/examples.javacodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"Android","item":"https:\/\/examples.javacodegeeks.com\/category\/android\/"},{"@type":"ListItem","position":3,"name":"core","item":"https:\/\/examples.javacodegeeks.com\/category\/android\/core\/"},{"@type":"ListItem","position":4,"name":"ui","item":"https:\/\/examples.javacodegeeks.com\/category\/android\/core\/ui\/"},{"@type":"ListItem","position":5,"name":"component","item":"https:\/\/examples.javacodegeeks.com\/category\/android\/core\/ui\/component\/"},{"@type":"ListItem","position":6,"name":"Android Custom Components Example"}]},{"@type":"WebSite","@id":"https:\/\/examples.javacodegeeks.com\/#website","url":"https:\/\/examples.javacodegeeks.com\/","name":"Java Code Geeks","description":"Java Examples and Code Snippets","publisher":{"@id":"https:\/\/examples.javacodegeeks.com\/#organization"},"alternateName":"JCG","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/examples.javacodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/examples.javacodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/examples.javacodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/examples.javacodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/examples.javacodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/javacodegeeks","https:\/\/x.com\/javacodegeeks"]},{"@type":"Person","@id":"https:\/\/examples.javacodegeeks.com\/#\/schema\/person\/94be714b6b9a82bb855c0d370c319673","name":"Katerina Zamani","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/examples.javacodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2013\/11\/Katerina-Zamani-96x96.jpg","contentUrl":"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2013\/11\/Katerina-Zamani-96x96.jpg","caption":"Katerina Zamani"},"description":"Katerina has graduated from the Department of Informatics and Telecommunications in National and Kapodistrian University of Athens (NKUA) and she attends MSc courses in Advanced Information Systems at the same department. Currently, her main academic interests focus on web applications, mobile development, software engineering, databases and telecommunications.","sameAs":["https:\/\/www.javacodegeeks.com"],"url":"https:\/\/examples.javacodegeeks.com\/author\/katerina-zamani\/"}]}},"_links":{"self":[{"href":"https:\/\/examples.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/8569","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/examples.javacodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/examples.javacodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/examples.javacodegeeks.com\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/examples.javacodegeeks.com\/wp-json\/wp\/v2\/comments?post=8569"}],"version-history":[{"count":0,"href":"https:\/\/examples.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/8569\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/examples.javacodegeeks.com\/wp-json\/wp\/v2\/media\/1202"}],"wp:attachment":[{"href":"https:\/\/examples.javacodegeeks.com\/wp-json\/wp\/v2\/media?parent=8569"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/examples.javacodegeeks.com\/wp-json\/wp\/v2\/categories?post=8569"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/examples.javacodegeeks.com\/wp-json\/wp\/v2\/tags?post=8569"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}