Toggle Button In Iphone Style

May 10, 2024 Post a Comment

In android the Toggle buttons are looks like below - Can we modify this as Iphone style like below - And, Can we include the iphone functionality of toggle button like drag to t

Solution 1:

Use SwitchCompat:

<!-- SwitchCompat --><androidx.appcompat.widget.SwitchCompatandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:checked="true"android:thumb="@drawable/thumb_selector"app:track="@drawable/track_selector"/><!-- thumb_selector.xml --><?xml version="1.0" encoding="utf-8"?><selectorxmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:state_checked="false"><shapeandroid:shape="oval"><solidandroid:color="@android:color/white" /><sizeandroid:width="20dp"android:height="20dp" /><strokeandroid:width="2dp"android:color="#0000ffff" /></shape><!-- shape circle --></item></selector><!-- track_selector.x --><?xml version="1.0" encoding="utf-8"?><selectorxmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:state_checked="true"><shapeandroid:shape="rectangle"><sizeandroid:width="36dp"android:height="20dp"/><solidandroid:width="1dp"android:color="@android:color/holo_orange_dark"/><cornersandroid:radius="50dp"/></shape></item><itemandroid:state_checked="false"><shapeandroid:shape="rectangle"><sizeandroid:width="36dp"android:height="20dp"/><solidandroid:width="1dp"android:color="@android:color/darker_gray"/><cornersandroid:radius="50dp"/></shape></item></selector>

Solution 2:

You just have to provide 2 drawables.

<ToggleButtonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/toggle_me"/>

and the drawable will be something like:

<selectorxmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:state_checked="true"android:drawable="@drawable/toggle_me_on" /><!-- checked --><itemandroid:drawable="@drawable/toggle_me_off" /><!-- default/unchecked --></selector>

Unfortunately, this solution doesn't provide great transition effects, but will give you exactly what you asked.

Solution 3:

If you want to do with shapes (without using images) try this. Currently im using it in a custom checkbox

<com.myapp.views.MyCheckBox xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@android:id/checkbox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="5dp"
        android:button="@null"
        android:checked="false"
        android:clickable="false"
        android:drawableRight="@drawable/checkbox_selector"
        android:focusable="false"
        android:textColor="@color/orange" />

checkbox_selector.xml

<?xml version="1.0" encoding="utf-8"?><selectorxmlns:android="http://schemas.android.com/apk/res/android" ><itemandroid:state_checked="false"android:drawable="@drawable/toggle_button_off" /><!-- pressed --><itemandroid:state_checked="true"android:drawable="@drawable/toggle_button_on" /><!-- focused --><!-- default --><itemandroid:drawable="@drawable/toggle_button_off" /></selector>

toggle_button_off.xml

<?xml version="1.0" encoding="utf-8"?><layer-listxmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:drawable="@drawable/toggle_background_off"></item><itemandroid:drawable="@drawable/white_toggle_icon"android:left="2dp"android:right="27.5dp"android:bottom="1.5dp"android:top="1.5dp"></item></layer-list>

toggle_button_on.xml

<?xml version="1.0" encoding="utf-8"?><layer-listxmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:drawable="@drawable/toggle_background_on"></item><itemandroid:drawable="@drawable/white_toggle_icon"android:right="2dp"android:left="27.5dp"android:bottom="1.5dp"android:top="1.5dp"></item></layer-list>

toggle_background_off.xml

<?xml version="1.0" encoding="utf-8"?><shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><sizeandroid:height="32dp"android:width="60dp"/><solidandroid:width="1dp"android:color="#919090"/><cornersandroid:radius="18dp" /></shape>

toggle_background_on.xml

Baca Juga

<?xml version="1.0" encoding="utf-8"?><shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><sizeandroid:height="32dp"android:width="60dp"/><solidandroid:width="1dp"android:color="@color/orange"/><cornersandroid:radius="18dp" /></shape>

white_toggle_icon.xml

<?xml version="1.0" encoding="utf-8"?><shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"><solidandroid:color="#ffffff"/><strokeandroid:width="2dp"android:color="#fff" /><sizeandroid:width="25dp"android:height="25dp"/></shape>

Solution 4:

Use of below code from Android-Switch-Demo example. I can get desired output.

publicMySwitch(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);

    mTextPaint = newTextPaint(Paint.ANTI_ALIAS_FLAG);
    Resourcesres= getResources();
    mTextPaint.density = res.getDisplayMetrics().density;
    mTextPaint.setShadowLayer(0.5f, 1.0f, 1.0f, Color.BLACK);

    TypedArraya= context.obtainStyledAttributes(attrs,
            R.styleable.MySwitch, defStyle, 0);

    mThumbDrawable = a.getDrawable(R.styleable.MySwitch_thumb);
    mTrackDrawable = a.getDrawable(R.styleable.MySwitch_track);
    mTextOn = a.getText(R.styleable.MySwitch_textOn);
    mTextOff = a.getText(R.styleable.MySwitch_textOff);
    mTextOutsideTrack = a.getBoolean(R.styleable.MySwitch_textOutsideTrack, false);
    mTextOnThumb = a.getBoolean(R.styleable.MySwitch_textOnThumb, false);
    mThumbTextPadding = a.getDimensionPixelSize( R.styleable.MySwitch_thumbTextPadding, 0);
    mTrackTextPadding = a.getDimensionPixelSize( R.styleable.MySwitch_trackTextPadding, 0);
    mSwitchMinWidth = a.getDimensionPixelSize( R.styleable.MySwitch_switchMinWidth, 0);
    mSwitchMinHeight = a.getDimensionPixelSize( R.styleable.MySwitch_switchMinHeight, 0);
    mSwitchPadding =  a.getDimensionPixelSize( R.styleable.MySwitch_switchPadding, 0);

    mTrackDrawable.getPadding(mTrackPaddingRect) ;
    //Log.d(TAG, "mTrackPaddingRect=" + mTrackPaddingRect);
    mThumbDrawable.getPadding(mThumbPaddingRect);
    //Log.d(TAG, "mThumbPaddingRect=" + mTrackPaddingRect);intappearance= a.getResourceId(R.styleable.MySwitch_switchTextAppearanceAttrib, 0);
    if (appearance != 0) {
        setSwitchTextAppearance(context, appearance);
    }
    a.recycle();

    ViewConfigurationconfig= ViewConfiguration.get(context);
    mTouchSlop = config.getScaledTouchSlop();
    mMinFlingVelocity = config.getScaledMinimumFlingVelocity();

    // Refresh display with current params
    refreshDrawableState();
    setChecked(isChecked());
    this.setClickable(true);
    //this.setOnClickListener(clickListener);
}

Screenshot of the Application -

Solution 5:

My SwitchCompat with 62dp with and 26dp height (base on @Thắng answer but I add 2 more TextView and 1 style)

<androidx.constraintlayout.widget.ConstraintLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent"><androidx.appcompat.widget.SwitchCompatandroid:id="@+id/switch_on_off"android:layout_width="wrap_content"android:layout_height="wrap_content"android:checked="true"android:theme="@style/MyIOSSwitch"android:thumb="@drawable/switch_thumb_selector"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintTop_toTopOf="parent"app:track="@drawable/switch_track_selector" /><TextViewandroid:id="@+id/switch_text_on"android:layout_width="31dp"android:layout_height="match_parent"android:gravity="center"android:paddingLeft="4dp"android:text="ON"android:textColor="#fff"android:textSize="12sp"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toLeftOf="@id/switch_text_off"app:layout_constraintTop_toTopOf="parent" /><TextViewandroid:id="@+id/switch_text_off"android:layout_width="31dp"android:layout_height="match_parent"android:gravity="center"android:paddingRight="4dp"android:text="OFF"android:textColor="#fff"android:textSize="12sp"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toRightOf="@id/switch_text_on"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent" /></androidx.constraintlayout.widget.ConstraintLayout>

switch_thumb_selector.xml

<?xml version="1.0" encoding="utf-8"?><selectorxmlns:android="http://schemas.android.com/apk/res/android"><item><shapeandroid:shape="rectangle"><sizeandroid:width="31dp"android:height="26dp" /><solidandroid:color="@android:color/white" /><strokeandroid:width="2dp"android:color="@android:color/transparent"/><cornersandroid:radius="26dp"/></shape></item></selector>

switch_track_selector.xml

<?xml version="1.0" encoding="utf-8"?><selectorxmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:state_checked="true"><shapeandroid:shape="rectangle"><sizeandroid:width="62dp"android:height="26dp" /><solidandroid:color="#F50000" /><cornersandroid:radius="26dp" /></shape></item><itemandroid:state_checked="false"><shapeandroid:shape="rectangle"><sizeandroid:width="62dp"android:height="26dp" /><solidandroid:color="#888888" /><cornersandroid:radius="26dp" /></shape></item></selector>

themes.xml

<resourcesxmlns:tools="http://schemas.android.com/tools">
    ...
    <!-- It helps change color when you press and slide on Switch --><stylename="MyIOSSwitch"parent="Theme.AppCompat.Light"><itemname="colorControlActivated">#F50000</item><itemname="android:colorForeground">#888888</item></style></resources>

You don't need to show/hide text ON/OFF because color of both thumb and text is white. If your text color is different, you can show/hide text by listen to setOnCheckedChangeListener on SwitchCompat

accessories-cc4u