Skip to main content

Switch : Material Design Tips

Switch : Material Design Tips
From google material design documentation.
On/off switches toggle the state of a single settings option. The option that the switch controls, as well as the state it’s in, should be made clear from the corresponding inline label. Switches take on the same visual properties of the radio button.
The on/off slide toggle with the text “on” and “off” included within the asset is deprecated. Use the switch shown here instead.

How to add?

I. In your build.gradle add latest appcompat library.
dependencies {  
    compile 'com.android.support:appcompat-v7:X.X.X' // where X.X.X version
}
II. Make your activity extend android.support.v7.app.AppCompatActivity.
public class MainActivity extends AppCompatActivity {  
    ...
}
III. Declare your SwitchCompat inside any layout.xml file
<android.support.v7.widget.SwitchCompat  
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="true"/>
SwitchCompat is a backward compatible version of the Switch widget.

How to style?

Switch Style : Material Design Tips

I. Declare custom style in your styles.xml file.
<style name="MySwitch" parent="Theme.AppCompat.Light">  
    <!-- active thumb & track color (30% transparency) -->
    <item name="colorControlActivated">@color/indigo</item>

    <!-- inactive thumb color -->
    <item name="colorSwitchThumbNormal">@color/pink</item>

    <!-- inactive track color (30% transparency) -->
    <item name="android:colorForeground">@color/grey</item>
</style>  
II. Apply this style to your SwitchCompat via android:theme attribute.
<android.support.v7.widget.SwitchCompat  
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="true"
    android:theme="@style/MySwitch"/>
Android automatically add 30% transparency to colorControlActivated and android:colorForeground for SwitchCompat.

Comments

Popular posts from this blog

Android Basic Tutorial : Get the Current Date and Time

Here’s a code snipped to get the current date and/or time. This snipped uses the Calendar object (java.util.Calendar) which is a useful class when working with dates.






//Get a calendar object for the current date and time Calendar CurrentDateTime = Calendar.getInstance();
//Example: Get current day of the month

Android Basic Tutorial : Circular Seek Bar

public class Welcome extends Activity {     CircularSeekBar circularSeekbar;
    @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         circularSeekbar = new CircularSeekBar(this);         circularSeekbar.setMaxProgress(100);         circularSeekbar.setProgress(100);         setContentView(circularSeekbar);         circularSeekbar.invalidate();
        circularSeekbar.setSeekBarChangeListener(new OnSeekChangeListener() {
            @Override             public void onProgressChange(CircularSeekBar view, int newProgress) {                 Log.d("Welcome", "Progress:" + view.getProgress() + "/" + view.getMaxProgress());             }         });
    } }