CustomToggleButton

Android custom toggle button with Custom font example

 

In this tutorial, we can learn how to customise Toggle Button hold a custom font and can use the Toggle Button in the whole project.

STEP 1:-First of all create the Assets Folder if it's not created already, Copy the font you want to use in your project.

STEP 2:- Create an attrs,xml in in res/values 

<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="CustomToggleButton">
    <attr name="ct_fontName" format="string" />
    <attr name="ct_draw_left" format="reference" />
    <attr name="ct_draw_right" format="reference" />
    <attr name="ct_draw_top" format="reference" />
    <attr name="ct_draw_bottom" format="reference" />
    <attr name="ct_draw_background" format="reference" />
    <attr name="ct_draw_btn" format="reference" />
 </resources>

STEP 3:- Create a selector in drawables  bg_button_selector.xml

 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/colorPrimary" android:state_checked="true" />
    <item android:drawable="@color/colorAccent" android:state_checked="false" />
</selector>

 

STEP 4:- Create a Java class CustomToggleButton.java 

public class CustomToggleButton extends ToggleButton implements View.OnClickListener {
    private static final String TAG = "CustomToggleButton";

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public CustomToggleButton(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        if (!isInEditMode()) {
            initAttributes(context, attrs);
        }
    }

    public CustomToggleButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        if (!isInEditMode()) {
            initAttributes(context, attrs);
        }
    }

    public CustomToggleButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        if (!isInEditMode()) {
            initAttributes(context, attrs);
        }
    }

    private void initAttributes(Context context, AttributeSet attrs) {
        if (attrs != null) {
            TypedArray attributeArray = getContext().obtainStyledAttributes(attrs, R.styleable.CustomToggleButton);
            Drawable drawableLeft = null;
            Drawable drawableRight = null;
            Drawable drawableBottom = null;
            Drawable drawableTop = null;
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                drawableLeft = attributeArray.getDrawable(R.styleable.CustomToggleButton_ct_draw_left);
                drawableRight = attributeArray.getDrawable(R.styleable.CustomToggleButton_ct_draw_right);
                drawableBottom = attributeArray.getDrawable(R.styleable.CustomToggleButton_ct_draw_bottom);
                drawableTop = attributeArray.getDrawable(R.styleable.CustomToggleButton_ct_draw_top);
            } else {
                final int drawableLeftId = attributeArray.getResourceId(R.styleable.CustomToggleButton_ct_draw_left, -1);
                final int drawableRightId = attributeArray.getResourceId(R.styleable.CustomToggleButton_ct_draw_right, -1);
                final int drawableBottomId = attributeArray.getResourceId(R.styleable.CustomToggleButton_ct_draw_bottom, -1);
                final int drawableTopId = attributeArray.getResourceId(R.styleable.CustomToggleButton_ct_draw_top, -1);
                if (drawableLeftId != -1)
                    drawableLeft = AppCompatResources.getDrawable(getContext(), drawableLeftId);
                if (drawableRightId != -1)
                    drawableRight = AppCompatResources.getDrawable(getContext(), drawableRightId);
                if (drawableBottomId != -1)
                    drawableBottom = AppCompatResources.getDrawable(getContext(), drawableBottomId);
                if (drawableTopId != -1)
                    drawableTop = AppCompatResources.getDrawable(getContext(), drawableTopId);
            }
            String fontName = attributeArray.getString(R.styleable.CustomToggleButton_ct_fontName);
            if (fontName != null) {
                Typeface typeface = Typeface.createFromAsset(getContext().getAssets(), "fonts/" + fontName);
                if (typeface != null) {
                    setTypeface(typeface);
                }
            }
            setCompoundDrawablesWithIntrinsicBounds(drawableLeft, drawableTop, drawableRight, drawableBottom);
            attributeArray.recycle();
        }
    }

    @Override
    public void onClick(View view) {
        Log.d(TAG, "onClick() called with: view = [" + view + "]");
    }
}

STEP 5:- Then create main_activity.xml like below

<com.cretlabs.customtogglebutton.CustomToggleButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:drawablePadding="12dp"
    android:layout_marginTop="8dp"
    android:background="@drawable/bg_button_selector"
    android:button="@color/trans"
    android:textOff="on "
    android:textOn="off"
    android:textColor="@color/white"
    app:ct_draw_right="@drawable/ic_down_24dp"
    app:ct_draw_bottom="@drawable/ic_down_24dp"
    app:ct_draw_left="@drawable/ic_down_24dp"
    app:ct_draw_top="@drawable/ic_down_24dp"
    app:ct_fontName="@string/font_steel_works"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

STEP 6:-Add your font file name in strings.xml

<string name="steel_work_font">Steelworks Vintage Demo.ttf</string>

Add font name to Custom text view in activity_main.xml like below

app:fontName="@string/steel_work_font"

 

 

As you wish, you can add multiple fonts to assets and use one by one in your project.