Custom View with two TextViews

Question

I want to create a custom view with 2 TextViews, with possibility change text and text appearances from xml. This view should have two state - normal and selected (TextViews style should be different for each state).

I need some example for it.

Answer 1

Custom views are pretty basic and there are examples all over the internet. For something simple like two text views, it's usually easiest to extend LinearLayout.

Here is the LinearLayout with two text views, arranged side by side.

res/double_text.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="horizontal"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <TextView
        android:id="@+id/left_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:maxLines="1"/>
    <TextView
        android:id="@+id/right_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:maxLines="1"/>
</LinearLayout>

Next we define a styleable resource block so we can add custom attributes to our custom layout.

res/values/attrs.xml

<resources>
    <declare-styleable name="DoubleText">
        <attr name="leftText" format="string" />
        <attr name="rightText" format="string" />
        <attr name="android:ems" />

    </declare-styleable>
</resources>

Next the class file for DoubleText custom view. In here we pull out the custom attributes and set each of the TextViews.

DoubleTextView.java

public class DoubleTextView extends LinearLayout {
   LinearLayout layout = null;
   TextView leftTextView = null;
   TextView rightTextView = null;
   Context mContext = null;

   public DoubleTextView(Context context) {

      super(context);
      mContext = context;
   }

   public DoubleTextView(Context context, AttributeSet attrs) {
      super(context, attrs);

      mContext = context;

      TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.DoubleText);

      String leftText = a.getString(R.styleable.DoubleText_leftText);
      String rightText = a.getString(R.styleable.DoubleText_rightText);

      leftText = leftText == null ? "" : leftText;
      rightText = rightText == null ? "" : rightText;

      String service = Context.LAYOUT_INFLATER_SERVICE;
      LayoutInflater li = (LayoutInflater) getContext().getSystemService(service);

      layout = (LinearLayout) li.inflate(R.layout.double_text, this, true);

      leftTextView = (TextView) layout.findViewById(R.id.left_text);
      rightTextView = (TextView) layout.findViewById(R.id.right_text);

      leftTextView.setText(leftText);
      rightTextView.setText(rightText);

      a.recycle();
   }

   public DoubleTextView(Context context, AttributeSet attrs, int defStyle) {
      super(context, attrs, defStyle);
      mContext = context;
   }

   @SuppressWarnings("unused")
   public void setLeftText(String text) {
      leftTextView.setText(text);
   }

   @SuppressWarnings("unused")
   public void setRightText(String text) {
      rightTextView.setText(text);
   }

   @SuppressWarnings("unused")
   public String getLeftText() {
      return leftTextView.getText().toString();
   }

   @SuppressWarnings("unused")
   public String getRightText() {
      return rightTextView.getText().toString();
   }

}

Finally, using the custom class is as simple as declaring it in a layout file.

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/main_text"
        android:text="Hello World!"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/custom"/>

    <example.com.test.DoubleTextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:leftText="Text Left"
        app:rightText="Text Right"
        android:layout_below="@+id/main_text"/>
</RelativeLayout>

Easy peasy.