Building Custom Views and Custom Layouts in Android

Tin Novakovic
Nov 6 · 3 min read

In this article we will look at how to:

  1. Create a Custom EditText with a Prefix
  2. Expose the Prefix to the XML
  3. Expose the Prefix to the Code
  4. Create a CustomLayout that contains the Prefix EditText and a TextView as a single layout.

The Result:

EditText with a Prefix
  • 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:

  1. Create a class (mine is called PrefixEditText.kt) and extend AppCompatEditText (if you wanted to edit a TextView, you would extend AppCompatTextView)
  2. 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
  3. The rest of the code is specifically focused on adding prefix to the front of an editText
  4. 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:

  1. If you don’t already have an attrs.xml file, create one
  2. 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)
  3. In our PrefixEditText class create an init block, first, we will access the PrefixEditText styleable we created in the attrs.xml
  4. 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”)
  5. 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.

  1. Create a function (“assignPrefix()”) that takes a string and assigns it to our Prefix variable in the PrefixEditText.kt
  2. Create a setter to set the prefix to our prefix variable (this block of code is the setter “private var prefix: String = “”…”
  3. 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:

  1. Create a prefix_layout.xml file, this file will house our custom layout, simply place your TextView and PrefixEditText within here.
  2. Create a PrefixLayout.kt, within here create two setters, one for the title of the TextView and one for the prefix of the PrefixEditText
  3. 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
  4. We will use the method assignPrefix() within the PrefixLayout.kt to pass the prefix to our PrefixEditTextClass
  5. 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!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade