Friday, January 15, 2016

android - How to use SeekBar drawable

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rl"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    tools:context=".MainActivity"
    android:background="#ffffff"
    >
    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="35sp"
        android:layout_centerHorizontal="true"
        android:textStyle="bold"
        />
    <!--
        SeekBar
            A SeekBar is an extension of ProgressBar that adds a draggable thumb. The user can touch
            the thumb and drag left or right to set the current progress level or use the arrow keys.
            Placing focusable widgets to the left or right of a SeekBar is discouraged.

            Clients of the SeekBar can attach a SeekBar.OnSeekBarChangeListener to be notified
            of the user's actions.
    -->
    <SeekBar
        android:id="@+id/seekbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100"
        android:layout_below="@id/tv"
        android:progressDrawable="@drawable/seekbar_drawable_progress"
        android:thumb="@drawable/seekbar_drawable_thumb"
        android:padding="30dp"
        />
</RelativeLayout>
drawable/seekbar_drawable_progress.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <stroke android:color="#dadbdc" android:width="2dp" />
            <solid android:color="#b7b7b7"/>
            <corners android:radius="10dp"/>
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip android:clipOrientation="horizontal" android:gravity="left">
            <shape android:shape="rectangle">
                <stroke android:color="#ffe735" android:width="2dp" />
                <solid android:color="#ff0d00"/>
                <corners android:radius="10dp"/>
            </shape>
        </clip>
    </item>
</layer-list>
drawable/seekbar_drawable_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="#585eff"/>
            <stroke android:color="#99c8f7" android:width="3dp"/>
            <size android:height="30dp" android:width="30dp"/>
        </shape>
    </item>
</selector>
MainActivity.java

package com.cfsuman.me.androidcodesnippets;

import android.content.Context;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Window;
import android.widget.RelativeLayout;
import android.widget.SeekBar;
import android.widget.TextView;


public class MainActivity extends AppCompatActivity {
    private Context mContext;

    private RelativeLayout mRelativeLayout;
    private SeekBar mSeekBar;
    private TextView mTextView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // Request window feature action bar
        requestWindowFeature(Window.FEATURE_ACTION_BAR);
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Get the application context
        mContext = getApplicationContext();

        // Change the action bar color
        getSupportActionBar().setBackgroundDrawable(
                new ColorDrawable(Color.parseColor("#FF738CCA"))
        );

        // Get the widgets reference from XML layout
        mRelativeLayout = (RelativeLayout) findViewById(R.id.rl);
        mSeekBar = (SeekBar) findViewById(R.id.seekbar);
        mTextView = (TextView) findViewById(R.id.tv);

        // Set a SeekBar change listener
        mSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
                // Display the current progress of SeekBar
                mTextView.setText(""+i);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });
    }
}