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 inside the constructor,

LayoutInflater layoutInflater = (LayoutInflater) context
        .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View layout = layoutInflater.inflate(R.layout.custom_button,
        (ViewGroup) findViewById(R.id.custom_button_view));

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

in the layout custom_button I have placed two TextView with different typeface and text and custom_button_view is the ID of that LinearLayout, what I got is an empty button with no text.

Any Ideas, Thanks.

http://stackoverflow.com/questions/2973270/using-a-custom-typeface-in-android have a look at that; it pretty has everything. — Hades, Sep 07 '11 at 04:42
What does the xml layout for custom_button look like? Do you set the text there? — aj.esler, Sep 07 '11 at 04:49

score 8 · Answer 1 · answered Sep 07 '11 at 07:26

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);

score 2 · Answer 2 · answered May 23 '12 at 14:51

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);
    }

}

Sharone Lev · Answer 3 · 2017-12-05T09:18:41.740

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();

Custom Button with two TextView

3 Answers3

Linked

Related