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.

Answer 1

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