how to Custom Button (has two TextFields) on Android

I need to develop a button that has two label in.

I find some good articles about custom views, but I can't imagine that how can I create a myButton Class(with custom layout in it) extends button... is it possible..

Also in XML some views,layouts... How can we do this??

You can create a custom view. I have used Layout as a button by setting custom button style to the layout and have added two textViews to it, this way:

<LinearLayout android:id="@+id/customButtonLayout"
android:layout_height="wrap_content" style="@android:style/Widget.Button"
android:layout_width="wrap_content">
<TextView android:text="First" android:id="@+id/firstTextView"
    android:layout_width="wrap_content" android:layout_height="wrap_content"
    android:textColor="#000"></TextView>
<TextView android:textColor="#000" android:text="Second"
    android:layout_height="wrap_content" android:id="@+id/secondTextView"
    android:layout_width="wrap_content" android:layout_marginLeft="10dp"></TextView>
</LinearLayout>

and in Activity you can have this to set different typeface:

Typeface font=Typeface.createFromAsset(getAssets(),"ARIALN.TTF") ;   
Typeface font2=Typeface.createFromAsset(getAssets(), "COMPCTAN.TTF");

TextView firstTextView = (TextView)findViewById(R.id.firstTextView);
TextView secondTextView = (TextView)findViewById(R.id.secondTextView);

firstTextView.setTypeface(font);
secondTextView.setTypeface(font2);

LinearLayout btnLayout=(LinearLayout) findViewById(R.id.customButtonLayout);
btnLayout.setOnClickListener(this);

I writed this like,.. I have a layout problem. I cant fill screen with two buttons. parentlayout fills screen, but I cant these two buttons put should be..

My button layout:

<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_height="wrap_content" 
        android:layout_width="fill_parent"
        android:layout_weight="1"
        android:gravity="center">
        <ImageView
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:id="@+id/xbutton2_icon" />
        <TextView
                android:id="@+id/xbutton2_tv"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                 />
</LinearLayout>

And its class:

public XButton2(Context context, AttributeSet attrs) {
        super(context, attrs);
        LayoutInflater layoutInflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View view = layoutInflater.inflate(R.layout.xbutton2, this);
        icon = (ImageView) view.findViewById(R.id.xbutton2_icon);
        tv = (TextView) view.findViewById(R.id.xbutton2_tv);
        init(attrs);
    }
    protected void init(AttributeSet attrs) {
        parseAttributes(attrs);
        setAttrs();
    }
    protected void parseAttributes(AttributeSet attrs) {
        TypedArray param = getContext().obtainStyledAttributes(attrs,
                R.styleable.com_matriksdata_bavul_XButton2);
        this.text = param
                .getString(R.styleable.com_matriksdata_bavul_XButton2_text);
        String str = param
                .getString(R.styleable.com_matriksdata_bavul_XButton2_icon);

        if (str != null) {
            String[] arr = str.split("\\/");
            this.iconResorucesID = getResources().getIdentifier(
                    getContext().getApplicationContext().getPackageName() + ":"
                            + arr[arr.length - 2] + "/"
                            + arr[arr.length - 1].split("\\.")[0], null, null);
        }
        this.textSize = param.getFloat(
                R.styleable.com_matriksdata_bavul_XButton2_textSize, 40);

        param.recycle();
    }

    protected void setAttrs() {
        if (text != null) {
            tv.setText(text);
            tv.setTextSize(XUtil.convertToPixcell(getContext(), textSize));
            // tv.setTextColor(textColor);
            // tv.setHighlightColor(textSelectedColor);
        }
        if (iconResorucesID != 0)
            icon.setImageResource(iconResorucesID);

    }

    public void setChecked(boolean isChecked) {
        if (isChecked) {
            // setBackgroundResource(selectedBg);
            tv.setSelected(true);
        } else {
            tv.setSelected(false);
            // setBackgroundResource(bg);
        }
        this.isChecked = isChecked;
    }

And it is where I used it.

<com.matriksdata.widget.SplitButtonController
                            android:layout_marginLeft="8dip"
                            android:layout_marginRight="8dip"
                            android:layout_width="fill_parent"
                            android:orientation="horizontal"
                            android:layout_height="wrap_content"
                            android:gravity="center_vertical"

                            >
                            <com.matriksdata.widget.XButton2
                                    mtx:text="@string/strFlight"
                                    mtx:textSize="20"
                                    mtx:icon="@drawable/flight_buttonicon"
                                    android:layout_width="fill_parent"
                                    android:layout_height="wrap_content" 
                                    android:layout_weight="1"/>

                            <com.matriksdata.widget.XButton2
                                    mtx:text="@string/strBus"
                                    mtx:textSize="20"
                                    mtx:icon="@drawable/bus_buttonicon_gray"
                                    android:layout_height="wrap_content"
                                    android:layout_width="fill_parent"
                                    android:layout_weight="1" />
                    </com.matriksdata.widget.SplitButtonController>