Android: Custom EditText (TextArea) with custom Background

In this example I will show how to create custom background with custom EditText  (TextArea). The final result you can see in the picture.

The background is downloaded from background textures. Text area is surrounded with black color and in the bottom is a counter how many characters user still can enter. 

When the user hits SHOW button the Toast displays entered text.

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;

/**
 * @author Peter.Gostincar
 *
 */
public class MainFragment extends Fragment {

 private int mMaxCount;
 private EditText mText;
 private Button mButtonShowText;
 private TextView mCounter;
 private String mFinalText;

 @Override
 public void onCreate(Bundle savedInstanceState){
  super.onCreate(savedInstanceState);
  mMaxCount = Integer.parseInt(getString(R.string.max_value));
 }


 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup parent, Bundle savedInstanceState){
  View v = inflater.inflate(R.layout.fragment_main, parent, false);
  mText = (EditText) v.findViewById(R.id.custom_text_view);
  mCounter = (TextView) v.findViewById(R.id.counter);
  mButtonShowText = (Button) v.findViewById(R.id.button_show);
  setListeners();
  return v;
 }


 /**
  * 
  */
 private void setListeners() {
  mText.addTextChangedListener(new TextWatcher() {
   @Override
   public void onTextChanged(CharSequence s, int start, int before, int count) {}
   @Override
   public void beforeTextChanged(CharSequence s, int start, int count, int after) {}
   @Override
   public void afterTextChanged(Editable s) {
    int strLenght = s.toString().length();
    int available = mMaxCount - strLenght;
    setAvailableSpace(available);
    if(available < 0){
     s.delete(strLenght-1, strLenght);
    }
    mFinalText = s.toString();
   }
  });

  mButtonShowText.setOnClickListener(new OnClickListener() {
   @Override
   public void onClick(View arg0) {
    Toast.makeText(getActivity(), mFinalText, Toast.LENGTH_SHORT).show();
   }
  });
 }

 protected void setAvailableSpace(int available) {
  mCounter.setText(available + "");
 }
}

We put this file (border.xml) into res/drawable  folder

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <solid android:color="#ffffff" />

    <stroke
        android:width="1dp"
        android:color="#000000" />

</shape>

We put this file (repeating.xml) into res/drawable  folder

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/nistri" 
    android:tileMode="repeat"/>

Nistri is the name of the image copied into drawable folder.

We put this file (fragment_main.xml) into res/layout folder

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/repeating"
    android:orientation="vertical" >

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="15dp" >

        <EditText
            android:id="@+id/custom_text_view"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:background="@drawable/border"
            android:gravity="top"
            android:hint="Enter text"
            android:padding="2dp" />

        <TextView
            android:id="@+id/counter"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@id/custom_text_view"
            android:layout_alignRight="@id/custom_text_view"
            android:padding="5dp"
            android:text="@string/max_value"
            android:textColor="@color/counter" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="15dp" >

        <Button
            android:id="@+id/button_show"
            android:layout_centerHorizontal="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="SHOW" />
    </RelativeLayout>

</LinearLayout>