Custom Button with two TextView

Question

I\'m trying to Customize button with two TextView with different typeface within a single button. For that I just extended Button and with have written the following code in

Answer 1

You can use Layout as a button by setting ur custom button style to layout and can add two textViews to it, in 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);

Answer 2

You can derive a new class from Button and override the onDraw(Canvas canvas) method. I did it for a button with an icon and a text, and it works without any xml. The main problem will be to write the text at the good place on the button. For this you can use the Paint.getTextBounds() function to get the text dimensions.

Using a LayoutInflater is probably a better practice, but I didn't manage to make it work.

public class CustomButton extends Button {

    private int     mWidth;
    private int     mHeight;
    private Bitmap  mBitmap;
    private String  mText;

    private Paint   mPaintIcon;
    private Rect    mRectIconSrc;
    private Rect    mRectIconDst;
    private Paint   mPaintText;

    public CustomButton(Context context, Bitmap bitmap, int width, int height, String text) {
        super(context);

        mBitmap = bitmap;
        mWidth = width;
        mHeight = height;
        mText = text;
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(width, height);
        setLayoutParams(params);

        mPaintIcon = new Paint();
        mRectIconSrc = new Rect(0, 0, mBitmap.getWidth(), mBitmap.getHeight());
        mRectIconDst = new Rect(0, 0, mHeight, mHeight);

        mPaintText = new Paint();
        mPaintText.setColor(0xFF778800);
        mPaintText.setTextSize(30);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.drawBitmap(mBitmap, mRectIconSrc, mRectIconDst, mPaintIcon);
        canvas.drawText(mText, mWidth/4, mHeight*2/3, mPaintText);
    }

}

Answer 3

You can surround the button with a FrameLayout and then add a textview within the FrameLayout. You can manage the typeface in the activity. If the text doesn't show try using bringToFront()

layout:

 <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            android:id="@+id/button_frame"
            >
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/button_border"
            android:gravity="center"
            android:onClick="onClick"
            android:text="@string/get_more"
            android:id="@+id/get_more"
            android:stateListAnimator="@null"

        />

            <TextView
                android:id="@+id/linearTimer"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:layout_gravity="right"
                android:padding="10dp"
                android:text="123"
             >
    </FrameLayout>

Activity:

 countDownView = (TextView) findViewById(R.id.linearTimer);
 Typeface tf = Typeface.createFromAsset(getAssets(), "fonts/digital-7.ttf");
 countDownView.setTypeface(tf);
 countDownView.bringToFront();