Custom SeekBar in Android With Labels in Bottom.

By | August 9, 2016

In this article I will be making a SeekBar as shown in the below screenshot.

Custom SeekBar in Android

CustomSeekBar Class

We will create a custom class for creating the custom Seekbar. I named it “CustomSeekBar.java”

[java]
package com.coderzheaven.customseekbar;

import android.content.Context;
import android.util.Log;
import android.view.Gravity;
import android.widget.LinearLayout;
import android.widget.SeekBar;
import android.widget.TextView;

public class CustomSeekBar {

int maxCount, textColor;
Context mContext;
LinearLayout mSeekLin;
SeekBar mSeekBar;

public CustomSeekBar(Context context, int maxCount, int textColor) {
this.mContext = context;
this.maxCount = maxCount;
this.textColor = textColor;
}

public void addSeekBar(LinearLayout parent) {

if (parent instanceof LinearLayout) {

parent.setOrientation(LinearLayout.VERTICAL);
mSeekBar = new SeekBar(mContext);
mSeekBar.setMax(maxCount – 1);

// Add LinearLayout for labels below SeekBar
mSeekLin = new LinearLayout(mContext);
mSeekLin.setOrientation(LinearLayout.HORIZONTAL);
mSeekLin.setPadding(10, 0, 10, 0);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.MATCH_PARENT,
LinearLayout.LayoutParams.WRAP_CONTENT
);
params.setMargins(35, 10, 35, 0);
mSeekLin.setLayoutParams(params);

addLabelsBelowSeekBar();
parent.addView(mSeekBar);
parent.addView(mSeekLin);

} else {

Log.e("CustomSeekBar", " Parent is not a LinearLayout");

}

}

private void addLabelsBelowSeekBar() {
for (int count = 0; count < maxCount; count++) {
TextView textView = new TextView(mContext);
textView.setText(String.valueOf(count + 1));
textView.setTextColor(textColor);
textView.setGravity(Gravity.LEFT);
mSeekLin.addView(textView);
textView.setLayoutParams((count == maxCount – 1) ? getLayoutParams(0.0f) : getLayoutParams(1.0f));
}
}

LinearLayout.LayoutParams getLayoutParams(float weight) {
return new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT, weight);
}

}

[/java]

Usage

Here is the layout.

[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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.coderzheaven.customseekbar.MainActivity">

<TextView
android:id="@+id/t1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_margin="10dp"
android:textSize="20sp"
android:textStyle="bold"
android:text="Rate CoderzHeaven.com" />

<LinearLayout
android:id="@+id/lin1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/t1"
android:layout_centerInParent="true"
android:orientation="vertical"></LinearLayout>

</RelativeLayout>

[/xml]
This is how you use it in your Activity.

You are adding the CustomSeekbar to a LinearLayout. So the one parameter would be a Linearlayout.

[java]

LinearLayout mSeekLin = (LinearLayout) findViewById(R.id.lin1);
CustomSeekBar customSeekBar = new CustomSeekBar(this, 5, Color.DKGRAY);
customSeekBar.addSeekBar(mSeekLin);

[/java]

Please send your valuable comments to coderzheaven@gmail.com

One thought on “Custom SeekBar in Android With Labels in Bottom.

Leave a Reply

Your email address will not be published. Required fields are marked *