Activities, Fragments, Views — My Frontend Development Journey

As a frontend developer on MeetU, I spend most of my days working on layouts for the MeetU application. Rendering activites, creating fragments and views, and all of the other frontend things. Here is a brief explanation of it.

Customize your fonts

For MeetU, we are using Lato font-family, which is not from the list of default fonts. We can add this by adding an android resource folder called font in res/.

Creating an android resource folder called ‘font’ in res.

Inside the folder, we add all of the fonts needed in .ttf format inside of the font folder, and create the .xml files for the font-family name. An example would be :

<?xml version="1.0" encoding="utf-8"?>
<font-family xmlns:android="http://schemas.android.com/apk/res/android">

    <font
        android:fontStyle="normal"
        android:fontWeight="100"
        android:font="@font/lato_hairline" />

    <font
        android:fontStyle="italic"
        android:fontWeight="100"
        android:font="@font/lato_hairline_italic" />
</font-family>

Where we have lato_hairline.ttf and lato_hairline_italic.ttf in our font folders.

And we are done actually, pretty simple huh ? We can now use our lato font-family in the layouts .xml files :

<TextView
    android:id="@+id/date_display_date"
    android:layout_width="wrap_content"
    android:layout_height="72dp"
    android:layout_marginTop="-20dp"
    android:layout_marginBottom="-10dp"
    android:gravity="center"
    android:fontFamily="@font/lato_bold"
    android:textSize="55sp"
    android:textStyle="bold"
    android:textAppearance="@android:style/TextAppearance.Large"
    android:textColor="#222222"
    android:text="17 Feb"/>

<TextView
    android:id="@+id/date_display_day"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:fontFamily="@font/lato_light"
    android:textSize="20sp"
    android:textAppearance="@android:style/TextAppearance.Medium"
    android:textColor="#222222"
    android:text="Saturday"/>

Creating a rounded Button and TextView

MeetU design guideline has many rounded components, so we want to coorporate that into our layouts as well.

MeetU calendar display

How to make it ? We need to create a custom drawable shape of a circle then make it as the background for the button or the textviews. For example let’s try to create the blue circle for highlighting today’s date.

We firstly made an blue_circle.xml file on the drawable folder in res

With this, we can now assign our background’s button or textview with the blue_circle.

TextView txtView = view.findViewById(R.id.date_text);
txtView.setTextColor(Color.WHITE);
txtView.setBackgroundResource(R.drawable.blue_circle);

Creating fragments in activity

An application consist of many components, each with different purposes and actions. How can we differ them while still in the same page ? We can use android’s Fragments Let’s start by creating an CalendarFragment for our CalendarActivity

First, we create the layout of the fragment.

Fragment layout

And then we create our CalendarFragment which extends Fragment

CalendarFragment

Finally, to add it to an activity, we’ll then use getFragmentManager()

functions for showing the fragments

Of course we need to make the layout with the fragment, we can do this by adding <fragment /> inside of our activiy file.

<FrameLayout
  android:id="@+id/fragment_calendar"
  android:layout_width="match_parent"
  android:layout_height="wrap_content" />

ButterKnife to the rescue

Using android’s ButterKnife, we can shorten our code without losing its meaning and functionality !

Binding a view to a instance variable

Creating an on click function to a button

Using butterknife, say goodbye to messy codes with countless findViewById and anonymous inner functions :)

Conclusions

There are various parts of frontend development, and using the right thing at the right moment will speed up your development for your team. Happy coding my fellow developers !