Creating Custom Components in the PSLab Android App
PSLab Android App supports a lot of features and each of these features need components & views for their implementation. A typical UI of PSLab is shown in the figure below. Considering the number of views & components used in the figure, implementation of each view & component separately would lead to a huge volume of repetitive and inefficient code. As it is evident that the EditText and two buttons beside it keep repeating a lot, it is wiser to create a single custom component consisting of an EditText and two buttons. This not only leads to efficient code but also results in a drastic reduction of the volume of code.
Android has a feature which allows creating components. For almost all the cases, the pre-defined views in Android serve our purpose of creating the UIs. However, sometimes there is a need to create custom components to reduce code volume and improve quality. Custom components are used when a particular set of component needed by us is not present in the Android view collection or when a pattern of components is frequently repeated or when we need to reduce the code complexity.
The above set can be replaced by defining a custom component which includes an edittext and two buttons and then treating it like just any other component. To get started with creating a custom component, the steps are the following:
Create a layout for the custom component to be designed
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:id="@+id/button_control_plus" android:layout_width="0dp" android:layout_weight="0.5" android:layout_height="20dp" android:background="@drawable/button_minus" /> <EditText android:id="@+id/edittext_control" android:layout_width="0dp" android:layout_weight="2" android:layout_height="24dp" android:layout_marginTop="@dimen/control_margin_small" android:inputType="numberDecimal" android:padding="@dimen/control_edittext_padding" android:background="@drawable/control_edittext" /> <Button android:id="@+id/button_control_minus" android:layout_width="0dp" android:layout_weight="0.5" android:layout_height="20dp" android:background="@drawable/button_plus" /> </LinearLayout>
The layout file edittext_control.xml is created with three views and each one of them has been assigned an ID along with all the other relevant parameters.
Incorporate the newly created custom layout in the Activity/Fragment layout file
<org.fossasia.pslab.others.Edittextwidget android:id="@+id/etwidget_control_advanced1" android:layout_height="wrap_content" android:layout_width="0dp" android:layout_weight="2" android:layout_marginLeft="@dimen/control_margin_small" android:layout_marginStart="@dimen/control_margin_small" />
The custom layout can be added the activity/fragment layout just like any other view and can be assigned properties similarly.
Create the activity file for the custom layout
public class Edittextwidget extends LinearLayout{ private EditText editText; private Button button1; private Button button2; private double leastCount; private double maxima; private double minima; public Edittextwidget(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); applyAttrs(attrs); } public Edittextwidget(Context context, AttributeSet attrs) { super(context, attrs); applyAttrs(attrs); } public Edittextwidget(Context context) { super(context); } public void init(Context context, final double leastCount, final double minima, final double maxima) { View.inflate(context, R.layout.edittext_control, this); editText = (EditText) findViewById(R.id.edittext_control); button1 = (Button) findViewById(R.id.button_control_plus); button2 = (Button) findViewById(R.id.button_control_minus); button1.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { Double data = Double.valueOf(editText.getText().toString()); data = data - leastCount; data = data > maxima ? maxima : data; data = data < minima ? minima : data; editText.setText(String.valueOf(data)); } }); button2.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { Double data = Double.valueOf(editText.getText().toString()); data = data + leastCount; data = data > maxima ? maxima : data; data = data < minima ? minima : data; editText.setText(String.valueOf(data)); } }); } private void applyAttrs(AttributeSet attrs) { TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.Edittextwidget); final int N = a.getIndexCount(); for (int i = 0; i < N; ++i) { int attr = a.getIndex(i); switch (attr) { case R.styleable.Edittextwidget_leastcount: this.leastCount = a.getFloat(attr, 1.0f); break; case R.styleable.Edittextwidget_maxima: this.maxima = a.getFloat(attr, 1.0f); break; case R.styleable.Edittextwidget_minima: this.minima = a.getFloat(attr, 1.0f); } } a.recycle(); } }
In the activity file Editextwidget.java, the views of the custom layout are defined and functionalities are assigned to them. For example, here there are two buttons which work as increment/decrement buttons and an edittext which takes numeric input. The buttons are initiated just like the way they are done in other activity/fragment using OnClickListener.
Define the attributes for the custom layout
<declare-styleable name="Edittextwidget"> <attr name="leastcount" format="float" /> <attr name="maxima" format="float" /> <attr name="minima" format="float" /> </declare-styleable>
The attributes for the custom layout are defined in the attrs.xml file. Each attribute is assigned a name and a format which can be int, float, double, string etc.
Finally call the methods of the custom layout from the desired activity/fragment
Edittextwidget etwidgetControlAdvanced1 = (Edittextwidget)view.findViewById(R.id.etwidget_control_advanced1); etwidgetControlAdvanced1.init(getContext(), 1.0, 10.0, 5000.0);
The init method of Edittextwidget.java is called while passing the relevant parameters like context, least count, maxima and minima.
Additional Resources on Custom Components
- Official Android Guide on Custom components – https://developer.android.com/guide/topics/ui/custom-components.html
- Simple example of creating a custom component to get started – https://www.tutorialspoint.com/android/android_custom_components.htm
