Format text within a button

Question

I'm working on a custom numberpicker and I have a button with a '+' and '-' sign.
At the moment I just have this code to create the button.

increment = new Button(context);
increment.setTextSize(25);
increment.setText("+");

Now, i want to add the minimum and maximum value to be shown on the button like this.

How can I achieve this?
So I need to center the max label, and give it a different size as the plus sign.

Any help would be greatly appreciated! :)

Answer 1

I don't know whether this is what your need or not,,

But in your layout xml file,

<Button
         android:id="@+id/btn1"
         android:layout_width="0dip"
         android:background="@android:color/darker_gray"
         android:drawableBottom="@drawable/image_plus"
         android:text="Max: 10"
         />

<!-- 
android:drawableBottom="@drawable/image_plus" // plus sign from drawable
android:text="Max: 10" // Text you want to put on top of image
 -->

Or using code,

increment = new Button(context);
increment.setTextSize(25);
increment.setText("Max: 10");
increment.setCompoundDrawables(null, null, null, getResources().getDrawable(R.drawable.plus_sign)); // Here you have to apply + sign image to drawable

Answer 2

Many solutions:

• You can use a standard button and write many lines on it (with "\n" may be)
• You can create a Custom Button extending the Button class, and Override the onDraw method to write your maximum and minimum values.
• You can create a layout containing 3 textViews (or 2 textViews and an imageView) and add a backgroundDrawable for the click effect.

Hope this will help you

Answer 3

You could create your own custom button:

This is the layout:

<com.your.package.ui.widget.IncrementButton xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@drawable/button_grey" >

    <TextView
        android:id="@+id/increment_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="+"
        android:textColor="@android:color/black"
        android:textSize="22sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/increment_label"
        android:layout_centerHorizontal="true"
        android:text="Max 10"
        android:textColor="#FFFFFF"
        android:textSize="14sp" />

</com.your.package.ui.widget.IncrementButton>

You need a shape drawable for the background (to show clicks): You won't have the colors byt just replace them with your colors.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true"><shape>
            <padding android:bottom="10dip" android:left="10dip" android:right="10dip" android:top="10dip" />

            <corners android:radius="5dip" />

            <stroke android:width="1dip" android:color="@color/black" />

            <gradient android:angle="270" android:endColor="@color/button_dark_grey" android:startColor="@color/button_light_grey" />
        </shape></item>
    <item android:state_focused="true"><shape>
            <padding android:bottom="10dip" android:left="10dip" android:right="10dip" android:top="10dip" />

            <corners android:radius="5dip" />

            <stroke android:width="1dip" android:color="@color/black" />

            <gradient android:angle="45" android:endColor="@color/button_dark_grey" android:startColor="@color/button_light_grey" />
        </shape></item>
    <item><shape>
            <padding android:bottom="10dip" android:left="10dip" android:right="10dip" android:top="10dip" />

            <corners android:radius="5dip" />

            <stroke android:width="1dip" android:color="@color/black" />

            <gradient android:angle="270" android:endColor="@color/button_light_grey" android:startColor="@color/button_dark_grey" />
        </shape></item>

</selector>

And you then have full control over the button:

package com.your.package.ui.widget;



public class IncrementButton extends RelativeLayout implements OnClickListener {

    private OnIncrementClick onIncrementClickListener;

    public interface OnIncrementClick {
        void onIncrementClick();
    }

    public IncrementButton(Context context) {
        super(context);
        init();
    }

    public IncrementButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public IncrementButton(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    private void init() {
        setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        if(this.onIncrementClickListener != null)
            this.onIncrementClickListener.onIncrementClick();
    }

    public void setOnIncrementClickListener(OnIncrementClick onIncrementClickListener) {
        this.onIncrementClickListener = onIncrementClickListener;
    }
}

You then can include the button in any of your Layouts, reference it and add a click listener (just like a normal button).

 IncrementButton button = (IncrementButton) findViewById(R.id.whatever);
 button.setOnIncrementClickListener(yourListener);

Answer 4

increment = new Button(context);
increment.setTextSize(25);
String text="<h4>Max:10</h4><h1><b>+</b></h1>";
increment.setText(Html.formHtml(text));