Building Custom Views and Custom Layouts in Android
In this article we will look at how to:
- Create a Custom EditText with a Prefix
- Expose the Prefix to the XML
- Expose the Prefix to the Code
- Create a CustomLayout that contains the Prefix EditText and a TextView as a single layout.
The Result:

- Knowing how to build Custom Views (custom editText for example) gives you the ability to create complex UIs.
- Knowing how to create Custom Layouts allows you to create UIs with less code
Step 1: Create A Custom EditText With A Prefix
The Code:
PrefixEditText.kt:
Steps:
- Create a class (mine is called PrefixEditText.kt) and extend AppCompatEditText (if you wanted to edit a TextView, you would extend AppCompatTextView)
- Pass in Context and AttributeSet as constructors. AttributeSet gives you access to the XML tags such as “android:text=“title””, it will be used to create our own tag called Prefix in Part 2 of this tutorial
- The rest of the code is specifically focused on adding prefix to the front of an editText
- Now you will be able to use this new custom EditText in your layout XML files, see the example below:
Example:
Recap
Great!! We’ve created our own CustomView which we can start using in our code, but the prefix is hardcoded as a “€”, let’s look at how we can expose the prefix to the XML so that our code looks like this:
Here is the code for Part 1: GitHub Link
Step 2: Expose the Prefix to the XML
The Code:
PrefixEditText.kt:
attrs.xml:
activity_main.xml:
Steps:
- If you don’t already have an attrs.xml file, create one
- The attrs.xml allows us to create Attribute Tags for our PrefixEditText, you can see above we are creating a tag named “prefix” which expects a string value, “<attr name=“prefix” format=“string”” (note: the “name” has to be unique to the attrs.xml file)
- In our PrefixEditText class create an init block, first, we will access the PrefixEditText styleable we created in the attrs.xml
- Then assign the string value from the PrefixEditText styleable in the attrs.xml to the prefix variable in our class. (note: be careful when assigning, if the styleable is called PrefixEditText and the name of the attr is prefix, it needs to be referenced like this: “R.styleable.PrefixEditText_prefix”)
- Set the prefix in your layout XML
Recap
Now we can set the prefix from the XML! Now let’s see how we can expose the Prefix to the code.
Here is the code for Part 2: Github Link
Step 3: Expose the Prefix to the Code
PrefixEditText.kt:
MainActivity.kt:
Steps:
This step continues from Step 1, not from Step 2.
- Create a function (“assignPrefix()”) that takes a string and assigns it to our Prefix variable in the PrefixEditText.kt
- Create a setter to set the prefix to our prefix variable (this block of code is the setter “private var prefix: String = “”…”
- Now within your Activity or Fragment Class you can programmatically assign the prefix by calling the method assignPrefix()
Recap
Now we can assign the Prefix programmatically
Here is the code for Part 3: Github Link
Step 4: Create A Custom Layout
In this final step we will combine the TextView and PrefixEditText into a single layout, whilst maintaining the ability to assign the Prefix via XML
PrefixEditText.kt
PrefixLayout.kt
prefix_layout.xml
activity_main.xml
attrs.xml
Steps:
- Create a prefix_layout.xml file, this file will house our custom layout, simply place your TextView and PrefixEditText within here.
- Create a PrefixLayout.kt, within here create two setters, one for the title of the TextView and one for the prefix of the PrefixEditText
- Create the attrs styleables which will allow us to set the Title of the TextView and Prefix from the XML, then create an init block within the PrefixLayout.kt and assign the setters to the attrs styleables as we did in Step 2
- We will use the method assignPrefix() within the PrefixLayout.kt to pass the prefix to our PrefixEditTextClass
- Finally, we can use the PrefixLayout we’ve created and add it to our activity_main.xml and set the title and prefix from there
Recap:
That’s it! Now we can reuse our Prefix Layout throughout the app wherever it is needed!
Here is the code for Part 4: Github Link
Final Notes:
Credits:
The prefix code was inspired by this article: Prefix Article
- If you found the article useful please give it a like!