Repository
https://github.com/enyason/custom_view
This is the first part of this tutorial series. By the end of this part 1, we are going to have understanding of custom views in android and how to implement it.
we can categorize android built in views into 3:
The simple view could be a TextField, a TextView or a Button. it displays one simple piece of information.
The container contains other views. Example of the container view includes: Linear Layout, Grid View, Relative Layout etc.
GridView
LinearLayout Vs RelativeLayout
The compound control is similar to container in that it has multiple views inside of it. It also has specific views inside. Example is a time picker.
TimePicker
Most times we would love to have looks and feels that goes far beyond what the android built in views offers. To achieve this we either extend any of the built in views (e.g textview, framelayout ) or we directly extend the view class if we want to have full control of the custom element. The following are advantages of using custom views
The simplest way to build a custom view is to extend a simple view (Android Built in component). To do this, you pick a view that is close to what you need and extend that so that you can reuse the parent class functionality while only writing codes for the parts you need. With this way, you don't have to handle all the drawing and layout complexity.
For this tutorial, we are going to extend the text view component
Choose a parent class view closest to what you need. We will use a Text View
we extend textview then we have 3 constructors, 1 for java, 1 for xml, and the other for xml with style
public class UtopianTextView extends android.support.v7.widget.AppCompatTextView {
public UtopianTextView(Context context) {
super(context);
init();
}
public UtopianTextView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
public UtopianTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
init() method defines our extra functionalities and is applied to all constructors. This is to ensure the view works as expected regardless of where it's being called, whether java or xml.Add extra functionality
void init() {
setText("UtopianDroid");
setTextSize(20);
setTextColor(getResources().getColor(R.color.colorPrimary));
setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.ic_android), null, null);
setOnClickListener(this);
}
In the init()method, add extra functionalities to our custom textview.
@Override
public void onClick(View v) {
Toast.makeText(getContext(),"Hello Utopian",Toast.LENGTH_SHORT).show();
Uri webPage = Uri.parse("https://utopian.io");
Intent intent = new Intent(Intent.ACTION_VIEW, webPage);
if (intent.resolveActivity(getContext().getPackageManager()) != null) {
getContext().startActivity(intent);
}
}
This is our onClick method where we put the logic to navigate the user to the webpage.
the intent object is created with the action type and uri as parameters.
we then navigate to the web page if there is any supported application for the implicit intent defined
Using the custom view we created above should reproduce what is in the image below
To create a custom view
we extend textview then we have 3 constructors, 1 for java, 1 for xml, and the other for xml with style
Choose a parent class view closest to what you need
Add extra functionality
Demo video of the app:
Proof of Work The complete source code can be found on gitHub https://github.com/enyason/custom_view