CODEWITHSUNDEEP
androidandroid-layoutbutton
Elton Santana
Elton Santana

Reputation: 989

Android - Button with multiple drawables

I have to create a button as the following image:

Sample button

It almost ok, like this:

<Button
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/main_shape_button"
    android:fontFamily="sans-serif-condensed"
    android:textColor="@color/colorSecundary"
    android:textAlignment="viewStart"
    android:drawableLeft="@drawable/ico_alerta"
    android:drawableRight="@drawable/ico_seta_r"
    android:text="@string/main_botao_painel_alertas" />

Where "@drawable/main_shape_button" is the following:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:left="-1dp" android:right="-1dp" android:bottom="-1dp">
        <shape>
            <solid android:color="@android:color/transparent" />
            <stroke android:width="1dp" android:color="#ffffff" />
        </shape>
    </item>
</layer-list>

But, I still have to add the yellow indicator with the number of unviewed alerts of the user.

How can I achieve it?

Update:

I achieve it extending the button class:

public class AlertButton extends Button {

    public AlertButton(Context context) {
        super(context);
    }

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

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

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        int h = canvas.getHeight();
        int w = canvas.getWidth();
        //Calculate the x coordinate 
        float xCoodinate = (3*w)/4;
        //Calculate 80% of the button height to the ratio.
        float ratio = (h/2) * 0.8f;

        Paint paint = new Paint();
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(getResources().getColor(R.color.colorTertiary));

        canvas.drawCircle(x, h/2 , ratio, paint);

        Paint textPaint = new Paint();
        textPaint.setColor(Color.BLACK);
        textPaint.setTextSize(50f);
        textPaint.setAntiAlias(true);
        textPaint.setTextAlign(Paint.Align.CENTER);

        String text = "10";

        Rect bounds = new Rect();
        paint.getTextBounds(text, 0, text.length(), bounds);

        float yCoordinate = 71f; //hard coded
        canvas.drawText(text, x, yCoordinate, textPaint);
    }
}

However I didn't discover how calculate the y-coordinate for the text being drawn.

How I can do it?

Upvotes: 2

Views: 1653

Answers (2)

earthw0rmjim
earthw0rmjim

Reputation: 19417

Instead of a Button i would create a layout with the desired look and make it clickable by the android:clickable="true" attribute.

Another option is to create your own custom Component by extending Button and override it's appropriate methods.

Check this link out for more information on Custom Components.

Upvotes: 2

Muhammad Waleed
Muhammad Waleed

Reputation: 2601

Add attribute in to android:clickable="true"

<Button
    android:id="@+id/your_button"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/main_shape_button"
    android:fontFamily="sans-serif-condensed"
    android:textColor="@color/colorSecundary"
    android:textAlignment="viewStart"
    android:drawableLeft="@drawable/ico_alerta"
    android:drawableRight="@drawable/ico_seta_r"
    android:clickable="true"
    android:text="@string/main_botao_painel_alertas" />

Upvotes: 0

Related Questions