Button with text aligned left and right

Question

I'm pretty new in android development and I need your help. I need button with bold text aligned to the left hand side and another text with different font (smaller and different colour) aligned to the right, something like that:

[**Name**           john]
//Name is bold and black
// john is smaller and let's say blue

I did a researched online but I couldn't find anything. I tried:

this.button.setText(Html.fromHtml(styledText));

But it looks like it doesn't work with alignment="right", text-allign:right or even float:right.

I also find another solution to use table layout and table row but I need to have one button which will fired some action. I don't want two buttons for two parts of the text.

Thanks, in advance.

Text in button is in center by default, so if you add some spaces between, your two parts shall be apart automatically — Saqib, Apr 11 '14 at 10:45
Use linear layout with two textview and treat that linear layout as button. So you can change font color and size of both textview. — Neha Agarwal, Apr 11 '14 at 10:54
http://stackoverflow.com/questions/7328890/custom-button-with-two-textview — Zohra Khan, Apr 11 '14 at 11:05

score 2 · Accepted Answer · answered Apr 11 '14 at 11:11

2

Step 1: res/drawable/button_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/button_bg_pressed" android:state_pressed="true"></item>
    <item android:drawable="@drawable/button_bg_normal"></item>
</selector>

Step 2: Create one LinearLayout with two TextView.

           <LinearLayout
                android:id="@+id/myCustomButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:background="@drawable/button_selector" >

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="left"
                    android:textStyle="bold"
                    android:textColor="@color/black"
                    android:background="@drawable/ai_contact_us" />

                <TextView
                    android:id="@+id/aiResetPwdButton"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="right"
                    android:textColor="@color/blue"/>

            </LinearLayout>

Step 3: In your onCreate()

View buttonView = findViewById(R.id.myCustomButton);
buttonView.setOnClickListener(new View.OnClickListenet(){
    @Override
    public void onClick(View view) {
    Toast.makeText(MainActivity.this, "Button Clicked", Toast.LENGTH_SHORT).show();
    }
});

answered Apr 11 '14 at 11:11

Vishesh Chandra

6,951
6
35
38

I tried your code and it layout the views right exactly as I want but the row is not changed the background once tapped. – Greg Apr 14 '14 at 09:14
Have you keep **res/drawable/button_selector.xml** this file and both drawable .png or .jpg file for background change on pressed and normal state? – Vishesh Chandra Apr 14 '14 at 10:08
Yes I added it to drawable mdpi and I changed the images to colours "@android:color/dark_gray" – Greg Apr 14 '14 at 10:17
No, i think it won't accept color pls use drawable. try with @drawable/button_bg_normal – Vishesh Chandra Apr 14 '14 at 10:28
What I want to achieve is white(transparent)background for normal button state and fray when the button is pressed. I've created list of the buttons and first of those has rounded top rectangle the middle one are square and the last one has rounded bottom rectangle. I haven't got images for every single state of the buttons. It would be easier to use colours. – Greg Apr 14 '14 at 10:46
Are you using shape for background? – Vishesh Chandra Apr 14 '14 at 11:25
Yes, I have LinearLayout with shape background which contains buttons separate by views (just line). – Greg Apr 14 '14 at 11:59

score 0 · Answer 2 · answered Apr 11 '14 at 11:06

0

Don't use button, it's simple to use a RelativeLayout(or even a LinearLayout could do) with two textviews. Give ihat layout a background which makes it look like a button. And then, add an OnClickListener to the layout.

answered Apr 11 '14 at 11:06

Seshu Vinay

13,560
9
60
109

score 0 · Answer 3 · answered Mar 17 '16 at 18:11

0

Anything wrong with using the gravity?

android:gravity="right|center_vertical"

answered Mar 17 '16 at 18:11

Brill Pappin

4,692
1
36
36

Button with text aligned left and right

3 Answers3