What are Custom Views? <\/h2>\n\n\n\n<\/div>\n\n\n\nA custom view is a view that you design in any way you want by extending another view and then overwriting everything you feel necessary. This custom view can then be used in code, and everything defined in it will be inserted wherever it is used. Maybe a stock dialog isn\u2019t the layout you want for all the dialogs in your project? Create a custom dialog you can then call instead.<\/p>\n\n\n\n
Let\u2019s walk through the steps of creating a custom view with an example. I am going to create a custom view that contains a user info. This view could then be used anywhere I want to display my user. In my example, the info I need to display includes a username, user level and a logo.<\/p>\n\n\n\n
<\/div>\n\n\n\nStep 1: Decide what to extend<\/h2>\n\n\n\n<\/div>\n\n\n\nYou can extend from any view\/layout, but think of picking a view that provides some functionality you may want [1]. For example, if you are going to want a card, extend card to start and then customize the corners, elevation, content etc so you don\u2019t have to start from scratch. For my example, I am going to extend a linear layout to hold my stuff, as that functionality is all the functionality I need from my parent class.<\/p>\n\n\n\n
<\/div>\n\n\n\nStep 2: Create layout file<\/h2>\n\n\n\n<\/div>\n\n\n\nIn your layout file, you specify all the details just like you would if you weren\u2019t going to have a custom view. The benefit to this custom view is that now this will only be in this one place instead of repeated everywhere you want to use it. Here is my very simple example layout file:<\/p>\n\n\n\n
<\/div>\n\n\n\n![\"\"](\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4737\/files\/2021\/11\/image-1.jpg\")
<\/figure>\n\n\n\n<\/div>\n\n\n\nStep 3: Create a child class extending some view<\/h2>\n\n\n\n<\/div>\n\n\n\nIn my case, I will create the UserInfoView class and extend linear layout. <\/p>\n\n\n\n
<\/div>\n\n\n\n![\"\"](\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4737\/files\/2021\/11\/image-2.jpg\")
<\/figure>\n\n\n\nWithin this class I have basically inflated my custom view\u2019s XML file, and then set up the ability to set the imageview\u2019s image and textviews\u2019 texts in both code or via custom XML attributes. Let\u2019s talk about both of these:<\/p>\n\n\n\n
<\/div>\n\n\n\nStep 4a: \u00a0Create Custom attributes<\/h2>\n\n\n\n<\/div>\n\n\n\nTo create custom attributes, we declare a styleable (customarily this would live in a res\/values\/attrs.xml). Place each attribute name in here and then declare what type you are passing in. For example, the username will be a string and the logoRef will be a reference to a drawable.<\/p>\n\n\n\n
<\/div>\n\n\n\n![\"\"](\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4737\/files\/2021\/11\/image-3.jpg\")
<\/figure>\n\n\n\n<\/div>\n\n\n\nNext, look in the above picture of my UserInfoView class and note the init function. To access these attributes in our class, we obtain the styled attributes [2]. If attributes are not null, then we can get text and resource by referencing the given name from the styleable and assigning those to wherever we are going to use them in our custom view. One last note, when done with your styled attribute access, remember to call .recycle()<\/p>\n\n\n\n
<\/div>\n\n\n\nStep 4b: Create variables to dynamically update view in code<\/h2>\n\n\n\n<\/div>\n\n\n\nThe UserInfoView class shows three variables that can be used to dynamically set data for the custom view: username, logo, and level. Custom setters were set up so that when somebody assigns a value to these variables that the resulting textviews and imageview will be updated accordingly.<\/p>\n\n\n\n
<\/div>\n\n\n\nStep 5: Add custom view to our project<\/h2>\n\n\n\n<\/div>\n\n\n\nTo add this custom view, we can simply use it like any other view in our resource file. In this example program, we use it twice. <\/p>\n\n\n\n
<\/div>\n\n\n\n![\"\"](\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4737\/files\/2021\/11\/iamge-4.jpg\")
<\/figure>\n\n\n\n<\/div>\n\n\n\nThe first use just shows the basic implementation, while the second shows the use of the custom XML attributes we set up earlier. Notice that to set the username attribute, all we needed to do was add a line in our custom view that said app:username=\u201d{string resource here}\u201d. The code above from our UserInfoView class access and assigns that value.<\/p>\n\n\n\n
<\/div>\n\n\n\nNow let\u2019s look at the MainActivity class and see how we can dynamically update the code.<\/p>\n\n\n\n
<\/div>\n\n\n\n![\"\"](\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4737\/files\/2021\/11\/image-5.jpg\")
<\/figure>\n\n\n\n<\/div>\n\n\n\nNotice for meInfo, we simply find the view, and then have access to the view\u2019s .username, .level, and .logo properties to assign a value.<\/p>\n\n\n\n
<\/div>\n\n\n\nResult<\/h2>\n\n\n\n<\/div>\n\n\n\nThe result of this code is here:<\/p>\n\n\n\n
<\/div>\n\n\n\n![\"\"](\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4737\/files\/2021\/11\/image-6.jpg\")
<\/figure>\n\n\n\n<\/div>\n\n\n\nNotice that we got to repeat the set of views with a logo, username and level multiple times without having to copy and paste that set of views in every spot in our main activity layout file. For groups of views that you know you will use a lot, making a custom view for the design can save repeating code and make your code less error prone. And the benefit doesn\u2019t stop there. This also allows you to create your own edittext or textview where you override its normal functionality, create repeated logic-heavy views in one spot, or even a completely unique view when no pre-built view meets your needs [3]. Custom views allow you to create a fully custom app.<\/p>\n\n\n\n
<\/div>\n\n\n\nSources:<\/h2>\n\n\n\n<\/div>\n\n\n\n[1] \u201cCreating a View Class\u201d, Oct 27, 2021. Accessed on: Nov 4, 2021. [Online]. Available: https:\/\/developer.android.com\/training\/custom-views\/create-view<\/a><\/p>\n\n\n\n<\/div>\n\n\n\n[2] Elye, Building Custom Components with Kotlin<\/em>, Medium, May 27, 2017. Accessed on: Nov 4, 2021. [Online] Available: https:\/\/medium.com\/mobile-app-development-publication\/building-custom-component-with-kotlin-fc082678b080<\/a><\/p>\n\n\n\n<\/div>\n\n\n\n[3] \u201cCustom View Components\u201d, Dec 27, 2019. Accessed on: Nov 4, 2021. [Online]. Available: https:\/\/developer.android.com\/guide\/topics\/ui\/custom-components<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"Let\u2019s say you are making a project that has a certain set of views that are often repeated. For example, maybe you are placing a name and address combo in many locations in your project. Currently, if just using the stock views within Android, you may end up repeating the same set of views in… Continue reading Creating a Custom View in Android<\/span><\/a><\/p>\n","protected":false},"author":11613,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-64","post","type-post","status-publish","format-standard","hentry","category-uncategorized","entry"],"_links":{"self":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts\/64","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/users\/11613"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/comments?post=64"}],"version-history":[{"count":1,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts\/64\/revisions"}],"predecessor-version":[{"id":71,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts\/64\/revisions\/71"}],"wp:attachment":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/media?parent=64"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/categories?post=64"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/tags?post=64"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
A custom view is a view that you design in any way you want by extending another view and then overwriting everything you feel necessary. This custom view can then be used in code, and everything defined in it will be inserted wherever it is used. Maybe a stock dialog isn\u2019t the layout you want for all the dialogs in your project? Create a custom dialog you can then call instead.<\/p>\n\n\n\n
Let\u2019s walk through the steps of creating a custom view with an example. I am going to create a custom view that contains a user info. This view could then be used anywhere I want to display my user. In my example, the info I need to display includes a username, user level and a logo.<\/p>\n\n\n\n
Step 1: Decide what to extend<\/h2>\n\n\n\n<\/div>\n\n\n\nYou can extend from any view\/layout, but think of picking a view that provides some functionality you may want [1]. For example, if you are going to want a card, extend card to start and then customize the corners, elevation, content etc so you don\u2019t have to start from scratch. For my example, I am going to extend a linear layout to hold my stuff, as that functionality is all the functionality I need from my parent class.<\/p>\n\n\n\n
<\/div>\n\n\n\nStep 2: Create layout file<\/h2>\n\n\n\n<\/div>\n\n\n\nIn your layout file, you specify all the details just like you would if you weren\u2019t going to have a custom view. The benefit to this custom view is that now this will only be in this one place instead of repeated everywhere you want to use it. Here is my very simple example layout file:<\/p>\n\n\n\n
<\/div>\n\n\n\n<\/figure>\n\n\n\n<\/div>\n\n\n\nStep 3: Create a child class extending some view<\/h2>\n\n\n\n<\/div>\n\n\n\nIn my case, I will create the UserInfoView class and extend linear layout. <\/p>\n\n\n\n
<\/div>\n\n\n\n<\/figure>\n\n\n\nWithin this class I have basically inflated my custom view\u2019s XML file, and then set up the ability to set the imageview\u2019s image and textviews\u2019 texts in both code or via custom XML attributes. Let\u2019s talk about both of these:<\/p>\n\n\n\n
<\/div>\n\n\n\nStep 4a: \u00a0Create Custom attributes<\/h2>\n\n\n\n<\/div>\n\n\n\nTo create custom attributes, we declare a styleable (customarily this would live in a res\/values\/attrs.xml). Place each attribute name in here and then declare what type you are passing in. For example, the username will be a string and the logoRef will be a reference to a drawable.<\/p>\n\n\n\n
<\/div>\n\n\n\n<\/figure>\n\n\n\n<\/div>\n\n\n\nNext, look in the above picture of my UserInfoView class and note the init function. To access these attributes in our class, we obtain the styled attributes [2]. If attributes are not null, then we can get text and resource by referencing the given name from the styleable and assigning those to wherever we are going to use them in our custom view. One last note, when done with your styled attribute access, remember to call .recycle()<\/p>\n\n\n\n
<\/div>\n\n\n\nStep 4b: Create variables to dynamically update view in code<\/h2>\n\n\n\n<\/div>\n\n\n\nThe UserInfoView class shows three variables that can be used to dynamically set data for the custom view: username, logo, and level. Custom setters were set up so that when somebody assigns a value to these variables that the resulting textviews and imageview will be updated accordingly.<\/p>\n\n\n\n
<\/div>\n\n\n\nStep 5: Add custom view to our project<\/h2>\n\n\n\n<\/div>\n\n\n\nTo add this custom view, we can simply use it like any other view in our resource file. In this example program, we use it twice. <\/p>\n\n\n\n
<\/div>\n\n\n\n<\/figure>\n\n\n\n<\/div>\n\n\n\nThe first use just shows the basic implementation, while the second shows the use of the custom XML attributes we set up earlier. Notice that to set the username attribute, all we needed to do was add a line in our custom view that said app:username=\u201d{string resource here}\u201d. The code above from our UserInfoView class access and assigns that value.<\/p>\n\n\n\n
<\/div>\n\n\n\nNow let\u2019s look at the MainActivity class and see how we can dynamically update the code.<\/p>\n\n\n\n
<\/div>\n\n\n\n<\/figure>\n\n\n\n<\/div>\n\n\n\nNotice for meInfo, we simply find the view, and then have access to the view\u2019s .username, .level, and .logo properties to assign a value.<\/p>\n\n\n\n
<\/div>\n\n\n\nResult<\/h2>\n\n\n\n<\/div>\n\n\n\nThe result of this code is here:<\/p>\n\n\n\n
<\/div>\n\n\n\n<\/figure>\n\n\n\n<\/div>\n\n\n\nNotice that we got to repeat the set of views with a logo, username and level multiple times without having to copy and paste that set of views in every spot in our main activity layout file. For groups of views that you know you will use a lot, making a custom view for the design can save repeating code and make your code less error prone. And the benefit doesn\u2019t stop there. This also allows you to create your own edittext or textview where you override its normal functionality, create repeated logic-heavy views in one spot, or even a completely unique view when no pre-built view meets your needs [3]. Custom views allow you to create a fully custom app.<\/p>\n\n\n\n
<\/div>\n\n\n\nSources:<\/h2>\n\n\n\n<\/div>\n\n\n\n[1] \u201cCreating a View Class\u201d, Oct 27, 2021. Accessed on: Nov 4, 2021. [Online]. Available: https:\/\/developer.android.com\/training\/custom-views\/create-view<\/a><\/p>\n\n\n\n<\/div>\n\n\n\n[2] Elye, Building Custom Components with Kotlin<\/em>, Medium, May 27, 2017. Accessed on: Nov 4, 2021. [Online] Available: https:\/\/medium.com\/mobile-app-development-publication\/building-custom-component-with-kotlin-fc082678b080<\/a><\/p>\n\n\n\n<\/div>\n\n\n\n[3] \u201cCustom View Components\u201d, Dec 27, 2019. Accessed on: Nov 4, 2021. [Online]. Available: https:\/\/developer.android.com\/guide\/topics\/ui\/custom-components<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"Let\u2019s say you are making a project that has a certain set of views that are often repeated. For example, maybe you are placing a name and address combo in many locations in your project. Currently, if just using the stock views within Android, you may end up repeating the same set of views in… Continue reading Creating a Custom View in Android<\/span><\/a><\/p>\n","protected":false},"author":11613,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-64","post","type-post","status-publish","format-standard","hentry","category-uncategorized","entry"],"_links":{"self":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts\/64","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/users\/11613"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/comments?post=64"}],"version-history":[{"count":1,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts\/64\/revisions"}],"predecessor-version":[{"id":71,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts\/64\/revisions\/71"}],"wp:attachment":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/media?parent=64"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/categories?post=64"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/tags?post=64"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
You can extend from any view\/layout, but think of picking a view that provides some functionality you may want [1]. For example, if you are going to want a card, extend card to start and then customize the corners, elevation, content etc so you don\u2019t have to start from scratch. For my example, I am going to extend a linear layout to hold my stuff, as that functionality is all the functionality I need from my parent class.<\/p>\n\n\n\n
Step 2: Create layout file<\/h2>\n\n\n\n<\/div>\n\n\n\nIn your layout file, you specify all the details just like you would if you weren\u2019t going to have a custom view. The benefit to this custom view is that now this will only be in this one place instead of repeated everywhere you want to use it. Here is my very simple example layout file:<\/p>\n\n\n\n
<\/div>\n\n\n\n<\/figure>\n\n\n\n<\/div>\n\n\n\nStep 3: Create a child class extending some view<\/h2>\n\n\n\n<\/div>\n\n\n\nIn my case, I will create the UserInfoView class and extend linear layout. <\/p>\n\n\n\n
<\/div>\n\n\n\n<\/figure>\n\n\n\nWithin this class I have basically inflated my custom view\u2019s XML file, and then set up the ability to set the imageview\u2019s image and textviews\u2019 texts in both code or via custom XML attributes. Let\u2019s talk about both of these:<\/p>\n\n\n\n
<\/div>\n\n\n\nStep 4a: \u00a0Create Custom attributes<\/h2>\n\n\n\n<\/div>\n\n\n\nTo create custom attributes, we declare a styleable (customarily this would live in a res\/values\/attrs.xml). Place each attribute name in here and then declare what type you are passing in. For example, the username will be a string and the logoRef will be a reference to a drawable.<\/p>\n\n\n\n
<\/div>\n\n\n\n<\/figure>\n\n\n\n<\/div>\n\n\n\nNext, look in the above picture of my UserInfoView class and note the init function. To access these attributes in our class, we obtain the styled attributes [2]. If attributes are not null, then we can get text and resource by referencing the given name from the styleable and assigning those to wherever we are going to use them in our custom view. One last note, when done with your styled attribute access, remember to call .recycle()<\/p>\n\n\n\n
<\/div>\n\n\n\nStep 4b: Create variables to dynamically update view in code<\/h2>\n\n\n\n<\/div>\n\n\n\nThe UserInfoView class shows three variables that can be used to dynamically set data for the custom view: username, logo, and level. Custom setters were set up so that when somebody assigns a value to these variables that the resulting textviews and imageview will be updated accordingly.<\/p>\n\n\n\n
<\/div>\n\n\n\nStep 5: Add custom view to our project<\/h2>\n\n\n\n<\/div>\n\n\n\nTo add this custom view, we can simply use it like any other view in our resource file. In this example program, we use it twice. <\/p>\n\n\n\n
<\/div>\n\n\n\n<\/figure>\n\n\n\n<\/div>\n\n\n\nThe first use just shows the basic implementation, while the second shows the use of the custom XML attributes we set up earlier. Notice that to set the username attribute, all we needed to do was add a line in our custom view that said app:username=\u201d{string resource here}\u201d. The code above from our UserInfoView class access and assigns that value.<\/p>\n\n\n\n
<\/div>\n\n\n\nNow let\u2019s look at the MainActivity class and see how we can dynamically update the code.<\/p>\n\n\n\n
<\/div>\n\n\n\n<\/figure>\n\n\n\n<\/div>\n\n\n\nNotice for meInfo, we simply find the view, and then have access to the view\u2019s .username, .level, and .logo properties to assign a value.<\/p>\n\n\n\n
<\/div>\n\n\n\nResult<\/h2>\n\n\n\n<\/div>\n\n\n\nThe result of this code is here:<\/p>\n\n\n\n
<\/div>\n\n\n\n<\/figure>\n\n\n\n<\/div>\n\n\n\nNotice that we got to repeat the set of views with a logo, username and level multiple times without having to copy and paste that set of views in every spot in our main activity layout file. For groups of views that you know you will use a lot, making a custom view for the design can save repeating code and make your code less error prone. And the benefit doesn\u2019t stop there. This also allows you to create your own edittext or textview where you override its normal functionality, create repeated logic-heavy views in one spot, or even a completely unique view when no pre-built view meets your needs [3]. Custom views allow you to create a fully custom app.<\/p>\n\n\n\n
<\/div>\n\n\n\nSources:<\/h2>\n\n\n\n<\/div>\n\n\n\n[1] \u201cCreating a View Class\u201d, Oct 27, 2021. Accessed on: Nov 4, 2021. [Online]. Available: https:\/\/developer.android.com\/training\/custom-views\/create-view<\/a><\/p>\n\n\n\n<\/div>\n\n\n\n[2] Elye, Building Custom Components with Kotlin<\/em>, Medium, May 27, 2017. Accessed on: Nov 4, 2021. [Online] Available: https:\/\/medium.com\/mobile-app-development-publication\/building-custom-component-with-kotlin-fc082678b080<\/a><\/p>\n\n\n\n<\/div>\n\n\n\n[3] \u201cCustom View Components\u201d, Dec 27, 2019. Accessed on: Nov 4, 2021. [Online]. Available: https:\/\/developer.android.com\/guide\/topics\/ui\/custom-components<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"Let\u2019s say you are making a project that has a certain set of views that are often repeated. For example, maybe you are placing a name and address combo in many locations in your project. Currently, if just using the stock views within Android, you may end up repeating the same set of views in… Continue reading Creating a Custom View in Android<\/span><\/a><\/p>\n","protected":false},"author":11613,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-64","post","type-post","status-publish","format-standard","hentry","category-uncategorized","entry"],"_links":{"self":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts\/64","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/users\/11613"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/comments?post=64"}],"version-history":[{"count":1,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts\/64\/revisions"}],"predecessor-version":[{"id":71,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts\/64\/revisions\/71"}],"wp:attachment":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/media?parent=64"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/categories?post=64"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/tags?post=64"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
In your layout file, you specify all the details just like you would if you weren\u2019t going to have a custom view. The benefit to this custom view is that now this will only be in this one place instead of repeated everywhere you want to use it. Here is my very simple example layout file:<\/p>\n\n\n\n
<\/figure>\n\n\n\nStep 3: Create a child class extending some view<\/h2>\n\n\n\n<\/div>\n\n\n\nIn my case, I will create the UserInfoView class and extend linear layout. <\/p>\n\n\n\n
<\/div>\n\n\n\n<\/figure>\n\n\n\nWithin this class I have basically inflated my custom view\u2019s XML file, and then set up the ability to set the imageview\u2019s image and textviews\u2019 texts in both code or via custom XML attributes. Let\u2019s talk about both of these:<\/p>\n\n\n\n
<\/div>\n\n\n\nStep 4a: \u00a0Create Custom attributes<\/h2>\n\n\n\n<\/div>\n\n\n\nTo create custom attributes, we declare a styleable (customarily this would live in a res\/values\/attrs.xml). Place each attribute name in here and then declare what type you are passing in. For example, the username will be a string and the logoRef will be a reference to a drawable.<\/p>\n\n\n\n
<\/div>\n\n\n\n<\/figure>\n\n\n\n<\/div>\n\n\n\nNext, look in the above picture of my UserInfoView class and note the init function. To access these attributes in our class, we obtain the styled attributes [2]. If attributes are not null, then we can get text and resource by referencing the given name from the styleable and assigning those to wherever we are going to use them in our custom view. One last note, when done with your styled attribute access, remember to call .recycle()<\/p>\n\n\n\n
<\/div>\n\n\n\nStep 4b: Create variables to dynamically update view in code<\/h2>\n\n\n\n<\/div>\n\n\n\nThe UserInfoView class shows three variables that can be used to dynamically set data for the custom view: username, logo, and level. Custom setters were set up so that when somebody assigns a value to these variables that the resulting textviews and imageview will be updated accordingly.<\/p>\n\n\n\n
<\/div>\n\n\n\nStep 5: Add custom view to our project<\/h2>\n\n\n\n<\/div>\n\n\n\nTo add this custom view, we can simply use it like any other view in our resource file. In this example program, we use it twice. <\/p>\n\n\n\n
<\/div>\n\n\n\n<\/figure>\n\n\n\n<\/div>\n\n\n\nThe first use just shows the basic implementation, while the second shows the use of the custom XML attributes we set up earlier. Notice that to set the username attribute, all we needed to do was add a line in our custom view that said app:username=\u201d{string resource here}\u201d. The code above from our UserInfoView class access and assigns that value.<\/p>\n\n\n\n
<\/div>\n\n\n\nNow let\u2019s look at the MainActivity class and see how we can dynamically update the code.<\/p>\n\n\n\n
<\/div>\n\n\n\n<\/figure>\n\n\n\n<\/div>\n\n\n\nNotice for meInfo, we simply find the view, and then have access to the view\u2019s .username, .level, and .logo properties to assign a value.<\/p>\n\n\n\n
<\/div>\n\n\n\nResult<\/h2>\n\n\n\n<\/div>\n\n\n\nThe result of this code is here:<\/p>\n\n\n\n
<\/div>\n\n\n\n<\/figure>\n\n\n\n<\/div>\n\n\n\nNotice that we got to repeat the set of views with a logo, username and level multiple times without having to copy and paste that set of views in every spot in our main activity layout file. For groups of views that you know you will use a lot, making a custom view for the design can save repeating code and make your code less error prone. And the benefit doesn\u2019t stop there. This also allows you to create your own edittext or textview where you override its normal functionality, create repeated logic-heavy views in one spot, or even a completely unique view when no pre-built view meets your needs [3]. Custom views allow you to create a fully custom app.<\/p>\n\n\n\n
<\/div>\n\n\n\nSources:<\/h2>\n\n\n\n<\/div>\n\n\n\n[1] \u201cCreating a View Class\u201d, Oct 27, 2021. Accessed on: Nov 4, 2021. [Online]. Available: https:\/\/developer.android.com\/training\/custom-views\/create-view<\/a><\/p>\n\n\n\n<\/div>\n\n\n\n[2] Elye, Building Custom Components with Kotlin<\/em>, Medium, May 27, 2017. Accessed on: Nov 4, 2021. [Online] Available: https:\/\/medium.com\/mobile-app-development-publication\/building-custom-component-with-kotlin-fc082678b080<\/a><\/p>\n\n\n\n<\/div>\n\n\n\n[3] \u201cCustom View Components\u201d, Dec 27, 2019. Accessed on: Nov 4, 2021. [Online]. Available: https:\/\/developer.android.com\/guide\/topics\/ui\/custom-components<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"Let\u2019s say you are making a project that has a certain set of views that are often repeated. For example, maybe you are placing a name and address combo in many locations in your project. Currently, if just using the stock views within Android, you may end up repeating the same set of views in… Continue reading Creating a Custom View in Android<\/span><\/a><\/p>\n","protected":false},"author":11613,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-64","post","type-post","status-publish","format-standard","hentry","category-uncategorized","entry"],"_links":{"self":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts\/64","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/users\/11613"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/comments?post=64"}],"version-history":[{"count":1,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts\/64\/revisions"}],"predecessor-version":[{"id":71,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts\/64\/revisions\/71"}],"wp:attachment":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/media?parent=64"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/categories?post=64"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/tags?post=64"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
In my case, I will create the UserInfoView class and extend linear layout. <\/p>\n\n\n\n
<\/figure>\n\n\n\nWithin this class I have basically inflated my custom view\u2019s XML file, and then set up the ability to set the imageview\u2019s image and textviews\u2019 texts in both code or via custom XML attributes. Let\u2019s talk about both of these:<\/p>\n\n\n\n
Step 4a: \u00a0Create Custom attributes<\/h2>\n\n\n\n<\/div>\n\n\n\nTo create custom attributes, we declare a styleable (customarily this would live in a res\/values\/attrs.xml). Place each attribute name in here and then declare what type you are passing in. For example, the username will be a string and the logoRef will be a reference to a drawable.<\/p>\n\n\n\n
<\/div>\n\n\n\n<\/figure>\n\n\n\n<\/div>\n\n\n\nNext, look in the above picture of my UserInfoView class and note the init function. To access these attributes in our class, we obtain the styled attributes [2]. If attributes are not null, then we can get text and resource by referencing the given name from the styleable and assigning those to wherever we are going to use them in our custom view. One last note, when done with your styled attribute access, remember to call .recycle()<\/p>\n\n\n\n
<\/div>\n\n\n\nStep 4b: Create variables to dynamically update view in code<\/h2>\n\n\n\n<\/div>\n\n\n\nThe UserInfoView class shows three variables that can be used to dynamically set data for the custom view: username, logo, and level. Custom setters were set up so that when somebody assigns a value to these variables that the resulting textviews and imageview will be updated accordingly.<\/p>\n\n\n\n
<\/div>\n\n\n\nStep 5: Add custom view to our project<\/h2>\n\n\n\n<\/div>\n\n\n\nTo add this custom view, we can simply use it like any other view in our resource file. In this example program, we use it twice. <\/p>\n\n\n\n
<\/div>\n\n\n\n<\/figure>\n\n\n\n<\/div>\n\n\n\nThe first use just shows the basic implementation, while the second shows the use of the custom XML attributes we set up earlier. Notice that to set the username attribute, all we needed to do was add a line in our custom view that said app:username=\u201d{string resource here}\u201d. The code above from our UserInfoView class access and assigns that value.<\/p>\n\n\n\n
<\/div>\n\n\n\nNow let\u2019s look at the MainActivity class and see how we can dynamically update the code.<\/p>\n\n\n\n
<\/div>\n\n\n\n<\/figure>\n\n\n\n<\/div>\n\n\n\nNotice for meInfo, we simply find the view, and then have access to the view\u2019s .username, .level, and .logo properties to assign a value.<\/p>\n\n\n\n
<\/div>\n\n\n\nResult<\/h2>\n\n\n\n<\/div>\n\n\n\nThe result of this code is here:<\/p>\n\n\n\n
<\/div>\n\n\n\n<\/figure>\n\n\n\n<\/div>\n\n\n\nNotice that we got to repeat the set of views with a logo, username and level multiple times without having to copy and paste that set of views in every spot in our main activity layout file. For groups of views that you know you will use a lot, making a custom view for the design can save repeating code and make your code less error prone. And the benefit doesn\u2019t stop there. This also allows you to create your own edittext or textview where you override its normal functionality, create repeated logic-heavy views in one spot, or even a completely unique view when no pre-built view meets your needs [3]. Custom views allow you to create a fully custom app.<\/p>\n\n\n\n
<\/div>\n\n\n\nSources:<\/h2>\n\n\n\n<\/div>\n\n\n\n[1] \u201cCreating a View Class\u201d, Oct 27, 2021. Accessed on: Nov 4, 2021. [Online]. Available: https:\/\/developer.android.com\/training\/custom-views\/create-view<\/a><\/p>\n\n\n\n<\/div>\n\n\n\n[2] Elye, Building Custom Components with Kotlin<\/em>, Medium, May 27, 2017. Accessed on: Nov 4, 2021. [Online] Available: https:\/\/medium.com\/mobile-app-development-publication\/building-custom-component-with-kotlin-fc082678b080<\/a><\/p>\n\n\n\n<\/div>\n\n\n\n[3] \u201cCustom View Components\u201d, Dec 27, 2019. Accessed on: Nov 4, 2021. [Online]. Available: https:\/\/developer.android.com\/guide\/topics\/ui\/custom-components<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"Let\u2019s say you are making a project that has a certain set of views that are often repeated. For example, maybe you are placing a name and address combo in many locations in your project. Currently, if just using the stock views within Android, you may end up repeating the same set of views in… Continue reading Creating a Custom View in Android<\/span><\/a><\/p>\n","protected":false},"author":11613,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-64","post","type-post","status-publish","format-standard","hentry","category-uncategorized","entry"],"_links":{"self":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts\/64","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/users\/11613"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/comments?post=64"}],"version-history":[{"count":1,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts\/64\/revisions"}],"predecessor-version":[{"id":71,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts\/64\/revisions\/71"}],"wp:attachment":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/media?parent=64"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/categories?post=64"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/tags?post=64"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
To create custom attributes, we declare a styleable (customarily this would live in a res\/values\/attrs.xml). Place each attribute name in here and then declare what type you are passing in. For example, the username will be a string and the logoRef will be a reference to a drawable.<\/p>\n\n\n\n
<\/figure>\n\n\n\nNext, look in the above picture of my UserInfoView class and note the init function. To access these attributes in our class, we obtain the styled attributes [2]. If attributes are not null, then we can get text and resource by referencing the given name from the styleable and assigning those to wherever we are going to use them in our custom view. One last note, when done with your styled attribute access, remember to call .recycle()<\/p>\n\n\n\n
Step 4b: Create variables to dynamically update view in code<\/h2>\n\n\n\n<\/div>\n\n\n\nThe UserInfoView class shows three variables that can be used to dynamically set data for the custom view: username, logo, and level. Custom setters were set up so that when somebody assigns a value to these variables that the resulting textviews and imageview will be updated accordingly.<\/p>\n\n\n\n
<\/div>\n\n\n\nStep 5: Add custom view to our project<\/h2>\n\n\n\n<\/div>\n\n\n\nTo add this custom view, we can simply use it like any other view in our resource file. In this example program, we use it twice. <\/p>\n\n\n\n
<\/div>\n\n\n\n<\/figure>\n\n\n\n<\/div>\n\n\n\nThe first use just shows the basic implementation, while the second shows the use of the custom XML attributes we set up earlier. Notice that to set the username attribute, all we needed to do was add a line in our custom view that said app:username=\u201d{string resource here}\u201d. The code above from our UserInfoView class access and assigns that value.<\/p>\n\n\n\n
<\/div>\n\n\n\nNow let\u2019s look at the MainActivity class and see how we can dynamically update the code.<\/p>\n\n\n\n
<\/div>\n\n\n\n<\/figure>\n\n\n\n<\/div>\n\n\n\nNotice for meInfo, we simply find the view, and then have access to the view\u2019s .username, .level, and .logo properties to assign a value.<\/p>\n\n\n\n
<\/div>\n\n\n\nResult<\/h2>\n\n\n\n<\/div>\n\n\n\nThe result of this code is here:<\/p>\n\n\n\n
<\/div>\n\n\n\n<\/figure>\n\n\n\n<\/div>\n\n\n\nNotice that we got to repeat the set of views with a logo, username and level multiple times without having to copy and paste that set of views in every spot in our main activity layout file. For groups of views that you know you will use a lot, making a custom view for the design can save repeating code and make your code less error prone. And the benefit doesn\u2019t stop there. This also allows you to create your own edittext or textview where you override its normal functionality, create repeated logic-heavy views in one spot, or even a completely unique view when no pre-built view meets your needs [3]. Custom views allow you to create a fully custom app.<\/p>\n\n\n\n
<\/div>\n\n\n\nSources:<\/h2>\n\n\n\n<\/div>\n\n\n\n[1] \u201cCreating a View Class\u201d, Oct 27, 2021. Accessed on: Nov 4, 2021. [Online]. Available: https:\/\/developer.android.com\/training\/custom-views\/create-view<\/a><\/p>\n\n\n\n<\/div>\n\n\n\n[2] Elye, Building Custom Components with Kotlin<\/em>, Medium, May 27, 2017. Accessed on: Nov 4, 2021. [Online] Available: https:\/\/medium.com\/mobile-app-development-publication\/building-custom-component-with-kotlin-fc082678b080<\/a><\/p>\n\n\n\n<\/div>\n\n\n\n[3] \u201cCustom View Components\u201d, Dec 27, 2019. Accessed on: Nov 4, 2021. [Online]. Available: https:\/\/developer.android.com\/guide\/topics\/ui\/custom-components<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"Let\u2019s say you are making a project that has a certain set of views that are often repeated. For example, maybe you are placing a name and address combo in many locations in your project. Currently, if just using the stock views within Android, you may end up repeating the same set of views in… Continue reading Creating a Custom View in Android<\/span><\/a><\/p>\n","protected":false},"author":11613,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-64","post","type-post","status-publish","format-standard","hentry","category-uncategorized","entry"],"_links":{"self":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts\/64","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/users\/11613"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/comments?post=64"}],"version-history":[{"count":1,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts\/64\/revisions"}],"predecessor-version":[{"id":71,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts\/64\/revisions\/71"}],"wp:attachment":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/media?parent=64"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/categories?post=64"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/tags?post=64"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
The UserInfoView class shows three variables that can be used to dynamically set data for the custom view: username, logo, and level. Custom setters were set up so that when somebody assigns a value to these variables that the resulting textviews and imageview will be updated accordingly.<\/p>\n\n\n\n
Step 5: Add custom view to our project<\/h2>\n\n\n\n<\/div>\n\n\n\nTo add this custom view, we can simply use it like any other view in our resource file. In this example program, we use it twice. <\/p>\n\n\n\n
<\/div>\n\n\n\n<\/figure>\n\n\n\n<\/div>\n\n\n\nThe first use just shows the basic implementation, while the second shows the use of the custom XML attributes we set up earlier. Notice that to set the username attribute, all we needed to do was add a line in our custom view that said app:username=\u201d{string resource here}\u201d. The code above from our UserInfoView class access and assigns that value.<\/p>\n\n\n\n
<\/div>\n\n\n\nNow let\u2019s look at the MainActivity class and see how we can dynamically update the code.<\/p>\n\n\n\n
<\/div>\n\n\n\n<\/figure>\n\n\n\n<\/div>\n\n\n\nNotice for meInfo, we simply find the view, and then have access to the view\u2019s .username, .level, and .logo properties to assign a value.<\/p>\n\n\n\n
<\/div>\n\n\n\nResult<\/h2>\n\n\n\n<\/div>\n\n\n\nThe result of this code is here:<\/p>\n\n\n\n
<\/div>\n\n\n\n<\/figure>\n\n\n\n<\/div>\n\n\n\nNotice that we got to repeat the set of views with a logo, username and level multiple times without having to copy and paste that set of views in every spot in our main activity layout file. For groups of views that you know you will use a lot, making a custom view for the design can save repeating code and make your code less error prone. And the benefit doesn\u2019t stop there. This also allows you to create your own edittext or textview where you override its normal functionality, create repeated logic-heavy views in one spot, or even a completely unique view when no pre-built view meets your needs [3]. Custom views allow you to create a fully custom app.<\/p>\n\n\n\n
<\/div>\n\n\n\nSources:<\/h2>\n\n\n\n<\/div>\n\n\n\n[1] \u201cCreating a View Class\u201d, Oct 27, 2021. Accessed on: Nov 4, 2021. [Online]. Available: https:\/\/developer.android.com\/training\/custom-views\/create-view<\/a><\/p>\n\n\n\n<\/div>\n\n\n\n[2] Elye, Building Custom Components with Kotlin<\/em>, Medium, May 27, 2017. Accessed on: Nov 4, 2021. [Online] Available: https:\/\/medium.com\/mobile-app-development-publication\/building-custom-component-with-kotlin-fc082678b080<\/a><\/p>\n\n\n\n<\/div>\n\n\n\n[3] \u201cCustom View Components\u201d, Dec 27, 2019. Accessed on: Nov 4, 2021. [Online]. Available: https:\/\/developer.android.com\/guide\/topics\/ui\/custom-components<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"Let\u2019s say you are making a project that has a certain set of views that are often repeated. For example, maybe you are placing a name and address combo in many locations in your project. Currently, if just using the stock views within Android, you may end up repeating the same set of views in… Continue reading Creating a Custom View in Android<\/span><\/a><\/p>\n","protected":false},"author":11613,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-64","post","type-post","status-publish","format-standard","hentry","category-uncategorized","entry"],"_links":{"self":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts\/64","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/users\/11613"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/comments?post=64"}],"version-history":[{"count":1,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts\/64\/revisions"}],"predecessor-version":[{"id":71,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts\/64\/revisions\/71"}],"wp:attachment":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/media?parent=64"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/categories?post=64"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/tags?post=64"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
To add this custom view, we can simply use it like any other view in our resource file. In this example program, we use it twice. <\/p>\n\n\n\n
<\/figure>\n\n\n\nThe first use just shows the basic implementation, while the second shows the use of the custom XML attributes we set up earlier. Notice that to set the username attribute, all we needed to do was add a line in our custom view that said app:username=\u201d{string resource here}\u201d. The code above from our UserInfoView class access and assigns that value.<\/p>\n\n\n\n
Now let\u2019s look at the MainActivity class and see how we can dynamically update the code.<\/p>\n\n\n\n
<\/figure>\n\n\n\nNotice for meInfo, we simply find the view, and then have access to the view\u2019s .username, .level, and .logo properties to assign a value.<\/p>\n\n\n\n
Result<\/h2>\n\n\n\n<\/div>\n\n\n\nThe result of this code is here:<\/p>\n\n\n\n
<\/div>\n\n\n\n<\/figure>\n\n\n\n<\/div>\n\n\n\nNotice that we got to repeat the set of views with a logo, username and level multiple times without having to copy and paste that set of views in every spot in our main activity layout file. For groups of views that you know you will use a lot, making a custom view for the design can save repeating code and make your code less error prone. And the benefit doesn\u2019t stop there. This also allows you to create your own edittext or textview where you override its normal functionality, create repeated logic-heavy views in one spot, or even a completely unique view when no pre-built view meets your needs [3]. Custom views allow you to create a fully custom app.<\/p>\n\n\n\n
<\/div>\n\n\n\nSources:<\/h2>\n\n\n\n<\/div>\n\n\n\n[1] \u201cCreating a View Class\u201d, Oct 27, 2021. Accessed on: Nov 4, 2021. [Online]. Available: https:\/\/developer.android.com\/training\/custom-views\/create-view<\/a><\/p>\n\n\n\n<\/div>\n\n\n\n[2] Elye, Building Custom Components with Kotlin<\/em>, Medium, May 27, 2017. Accessed on: Nov 4, 2021. [Online] Available: https:\/\/medium.com\/mobile-app-development-publication\/building-custom-component-with-kotlin-fc082678b080<\/a><\/p>\n\n\n\n<\/div>\n\n\n\n[3] \u201cCustom View Components\u201d, Dec 27, 2019. Accessed on: Nov 4, 2021. [Online]. Available: https:\/\/developer.android.com\/guide\/topics\/ui\/custom-components<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"Let\u2019s say you are making a project that has a certain set of views that are often repeated. For example, maybe you are placing a name and address combo in many locations in your project. Currently, if just using the stock views within Android, you may end up repeating the same set of views in… Continue reading Creating a Custom View in Android<\/span><\/a><\/p>\n","protected":false},"author":11613,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-64","post","type-post","status-publish","format-standard","hentry","category-uncategorized","entry"],"_links":{"self":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts\/64","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/users\/11613"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/comments?post=64"}],"version-history":[{"count":1,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts\/64\/revisions"}],"predecessor-version":[{"id":71,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts\/64\/revisions\/71"}],"wp:attachment":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/media?parent=64"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/categories?post=64"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/tags?post=64"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
The result of this code is here:<\/p>\n\n\n\n
<\/figure>\n\n\n\nNotice that we got to repeat the set of views with a logo, username and level multiple times without having to copy and paste that set of views in every spot in our main activity layout file. For groups of views that you know you will use a lot, making a custom view for the design can save repeating code and make your code less error prone. And the benefit doesn\u2019t stop there. This also allows you to create your own edittext or textview where you override its normal functionality, create repeated logic-heavy views in one spot, or even a completely unique view when no pre-built view meets your needs [3]. Custom views allow you to create a fully custom app.<\/p>\n\n\n\n
Sources:<\/h2>\n\n\n\n<\/div>\n\n\n\n[1] \u201cCreating a View Class\u201d, Oct 27, 2021. Accessed on: Nov 4, 2021. [Online]. Available: https:\/\/developer.android.com\/training\/custom-views\/create-view<\/a><\/p>\n\n\n\n<\/div>\n\n\n\n[2] Elye, Building Custom Components with Kotlin<\/em>, Medium, May 27, 2017. Accessed on: Nov 4, 2021. [Online] Available: https:\/\/medium.com\/mobile-app-development-publication\/building-custom-component-with-kotlin-fc082678b080<\/a><\/p>\n\n\n\n<\/div>\n\n\n\n[3] \u201cCustom View Components\u201d, Dec 27, 2019. Accessed on: Nov 4, 2021. [Online]. Available: https:\/\/developer.android.com\/guide\/topics\/ui\/custom-components<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"Let\u2019s say you are making a project that has a certain set of views that are often repeated. For example, maybe you are placing a name and address combo in many locations in your project. Currently, if just using the stock views within Android, you may end up repeating the same set of views in… Continue reading Creating a Custom View in Android<\/span><\/a><\/p>\n","protected":false},"author":11613,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-64","post","type-post","status-publish","format-standard","hentry","category-uncategorized","entry"],"_links":{"self":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts\/64","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/users\/11613"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/comments?post=64"}],"version-history":[{"count":1,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts\/64\/revisions"}],"predecessor-version":[{"id":71,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts\/64\/revisions\/71"}],"wp:attachment":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/media?parent=64"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/categories?post=64"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/tags?post=64"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
[1] \u201cCreating a View Class\u201d, Oct 27, 2021. Accessed on: Nov 4, 2021. [Online]. Available: https:\/\/developer.android.com\/training\/custom-views\/create-view<\/a><\/p>\n\n\n\n [2] Elye, Building Custom Components with Kotlin<\/em>, Medium, May 27, 2017. Accessed on: Nov 4, 2021. [Online] Available: https:\/\/medium.com\/mobile-app-development-publication\/building-custom-component-with-kotlin-fc082678b080<\/a><\/p>\n\n\n\n [3] \u201cCustom View Components\u201d, Dec 27, 2019. Accessed on: Nov 4, 2021. [Online]. Available: https:\/\/developer.android.com\/guide\/topics\/ui\/custom-components<\/a><\/p>\n","protected":false},"excerpt":{"rendered":" Let\u2019s say you are making a project that has a certain set of views that are often repeated. For example, maybe you are placing a name and address combo in many locations in your project. Currently, if just using the stock views within Android, you may end up repeating the same set of views in… Continue reading Creating a Custom View in Android<\/span><\/a><\/p>\n","protected":false},"author":11613,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-64","post","type-post","status-publish","format-standard","hentry","category-uncategorized","entry"],"_links":{"self":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts\/64","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/users\/11613"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/comments?post=64"}],"version-history":[{"count":1,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts\/64\/revisions"}],"predecessor-version":[{"id":71,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts\/64\/revisions\/71"}],"wp:attachment":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/media?parent=64"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/categories?post=64"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/tags?post=64"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}