Format text within a button
-
21-06-2021 - |
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! :)
Solution
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
OTHER TIPS
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
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);
increment = new Button(context);
increment.setTextSize(25);
String text="<h4>Max:10</h4><h1><b>+</b></h1>";
increment.setText(Html.formHtml(text));