Android provides a powerful built-in View components such as Button, TextView, EditText, ListView, Gridview, Spinner, etc. and layouts like LinearLayout, RelativeLayout, FrameLayout, etc. to build our application UI based on our requirements.
In android, we can also create our own custom components in case, if we are not satisfied with the built-in widgets or layouts functionality.
In case, if we want to extend the functionality of an existing built-in widget or layout, we can do it by overriding the methods of widget or layout based on our requirements.
If we create our own custom components, we will have a great control over the functionality and appearance of View elements in our application.
Now we will learn how to create and use custom Views in our android applications.
In android, creating a custom view component is something similar to defining a class in Java. Following is the high-level overview of what we need to know to get started in creating our own View components in android applications.
While creating a custom component, we need to remember that it should provide an easy interface to use it in our applications and allow users to configure custom style attributes from android XML layouts.
Following is the example of creating a custom View by extending the default view such as TextView in the android application.
package com.tutlane.customcomponents;
import android.content.Context;
import android.support.v7.widget.AppCompatTextView;
import android.util.AttributeSet;
/**
* Created by tutlane on 02-11-2017.
*/
public class TutlaneView extends AppCompatTextView {
public TutlaneView(Context context){
super(context);
}
public TutlaneView(Context context, AttributeSet attributeSet){
super(context,attributeSet);
}
public TutlaneView(Context context,AttributeSet attributeSet, int defStyle){
super(context,attributeSet,defStyle);
}
}
As we discussed, we need to allow users to configure custom attributes from android XML layouts to control the behavior and appearance of custom view in our applications.
Following is the example of creating an attributes for custom view in the android XML layout.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="TutlaneView">
<attr name="setColor" format="boolean"/>
<attr name="settitle" format="string"/>
</declare-styleable>
</resources>
Once we are done with creation of custom attributes, we can use those attributes in our layout files like as shown below.
<com.tutlane.customcomponents.TutlaneView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:settitle="Welcome to Tutlane"
app:setColor="true" />
If you observe above code snippet, we are accessing custom view with name and using custom attributes properties in XML layout file.
When a view is created from XML layout, the attributes in XML are read from the resource bundle and passed into the view’s constructor as an AttributeSet. We can read the attributes by calling the obtainStyledAttributes() method.
Following is the example of reading custom attributes using the obtainStyledAttributes() method from XML.
TypedArray tarry = context.obtainStyledAttributes(attributeSet,R.styleable.TutlaneView);
title = tarry.getString(R.styleable.TutlaneView_settitle);
if(title == null)
setText("Custom Message");
else
setText("Welcome to Tutlane");
color = tarry.getBoolean(R.styleable.TutlaneView_setColor, false);
if(color == true)
setTextColor(Color.MAGENTA);
If you observe above code snippet, we are reading custom attributes from XML and updating those attributes based on our requirements.
Following is the example of creating a custom view by extending the built-in TextView control in the android application.
Create a new android application using android studio and give names as CustomComponents. In case if you are not aware of creating an app in android studio check this article Android Hello World App.
Now we need to define our custom view for that create a new class file (TutlaneView.java) in \java\com.tutlane.customcomponents folder and write the code like as shown below.
package com.tutlane.customcomponents;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Color;
import android.support.v7.widget.AppCompatTextView;
import android.util.AttributeSet;
/**
* Created by surdasari on 02-11-2017.
*/
public class TutlaneView extends AppCompatTextView {
private String title;
private boolean color;
public TutlaneView(Context context){
super(context);
}
public TutlaneView(Context context, AttributeSet attributeSet){
super(context,attributeSet);
TypedArray tarry = context.obtainStyledAttributes(attributeSet,R.styleable.TutlaneView);
try {
title = tarry.getString(R.styleable.TutlaneView_settitle);
if(title == null)
setText("Custom Message");
else
setText("Welcome to Tutlane");
color = tarry.getBoolean(R.styleable.TutlaneView_setColor, false);
if(color == true)
setTextColor(Color.MAGENTA);
}
finally {
tarry.recycle();
}
}
public TutlaneView(Context context,AttributeSet attributeSet, int defStyle){
super(context,attributeSet,defStyle);
}
}
If you observe above code, we used custom attributes such as settitle and setColor for our custom view. We need to define our custom attributes for that create a new class file (customattr.xml) in \res\values folder and write the code like as shown below.
To use our custom view component in our application, we need to open an activity_main.xml file from \res\layout path and write the code like as shown below
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<com.tutlane.customcomponents.TutlaneView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:settitle="Welcome to Tutlane"
app:setColor="true"
android:layout_marginTop="200dp"
android:layout_marginLeft="120dp"
android:textStyle="bold"
android:textSize="18dp"/>
</LinearLayout>
If you observe above code, we used a custom view component by referring with custom view name. Once we are done with adding required custom view components, we need to load the XML layout resource from our activity onCreate() callback method, for that open main activity file MainActivity.java from \java\com.tutlane.customcomponents path and write the code like as shown below.
package com.tutlane.customcomponents;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
Generally, during the launch of our activity, onCreate() callback method will be called by android framework to get the required layout for an activity.
When we run the above example using an android virtual device (AVD) we will get a result like as shown below.
If you observe the above result, we are able to show our custom view component with custom attributes in our application.
This is how we can create custom view components in our application to extend the behavior of existing built-in views or we can complete new custom views based on our requirements.