DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Read this if you aren't yet creating Custom Text widgets!
Chitranshi Srivastava
Chitranshi Srivastava

Posted on

Read this if you aren't yet creating Custom Text widgets!

Have you ever added Text Views to any of your Android projects? Of course you have. Have you added attributes to those Text Views...? Style, Color, Size, Font... blah blah blah? Well Of course you have. Now the real question -
Do you add these attributes individually for every Text View in your app? Even if half of them have the exact same size? Almost all of them have the exact same font & color? Do you think defining those attributes for each time was necessary? Do you think there should be a way you could just specify once a few categories of Text Views & what they should look like & then just tell all the Text Views what category they belong?
Turns out, there's is a way to do just that! & it has existed from even before you were born (Joking). & it's so simple, it'll make you smile.

  1. Add font to project
    Add your font to the font folder.

  2. Create a new Kotlin class. Call it something that conveys what the custom Text View is for. Like if you're using this one for all the headlines in your app, let's call it HeadlineTextView.

    // HeadlineTextView
    
    class HeadlineTextView{
    }
    
  3. Extend this class to AppCompatTextView. Specify the context & attributeSet constructor parameters.
    AppCompatTextView is basically a class that's already used when you create TextViews. You only need to care about it when you're customizing a TextView in code like we're doing here. It has its siblings too, like for custom Edit Texts there's this class called AppCompatEditText. Similarly, we have AppCompatButton, AppCompatImageView... (you get my point).

    // HeadlineTextView
    
    class HeadlineTextView(context: Context, attrs: AttributeSet)
        : AppCompatTextView(context, attrs) {
    }
    
  4. Create a function to apply parameters to the Text View & call it in the init block.

    // HeadlineTextView
    
    class HeadlineTextView(context: Context, attrs: AttributeSet)
        : AppCompatTextView(context, attrs) {
    
        init {
            applyFont()
        }
    
        private fun applyFont() {
        }
    }
    
  5. Inside this method, initialize a typeface & set the Typeface to this.
    Typeface has everything to do with how a font appears on the screen... is it regular, or italic, or bold? You can select a font from the assets or from the fonts folder, like here & create the Typeface you want.

    // HeadlineTextView
    
        private fun applyFont() {
            val headlineTypeface: Typeface = Typeface.create("Montserrat Bold", Typeface.BOLD)
            typeface = headlineTypeface
        }
    
  6. Use the custom widget we just created by changing the TextView in the XML to HeadlineTextView.

    // activity_main.xml
    
    // Replace this-
    
    <TextView
        android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:textStyle="bold"
      android:fontFamily="montserrat"
      android:text="This is a Headline!" />
    
    // With this -
    
    <com.gmail.something.utils.HeadlineTextView
        android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="This is a Headline!" />
    

You can now use custom widgets. That won't stop Global warming of course but it can come in handy!
Feel free to drop a comment or contact me for clarifications/suggestions.


Top comments (0)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›