Develop Reference

Change drawable color of the background of imageView using seekbar

I am trying to develop an application that can animate something like using knob to change light intensity and color in daily life.
My thought is that using drawable as background of a bulb imageview and then changing the color and radius of radial gradient by using seekbar to replace knob to archive this animation. In my partial implementation, I try to change the color when the seekbar is changed but it did not show up any change.
My code is as below, can anyone help? Thank you.
MainActivity.java
public class MainActivity extends AppCompatActivity {
private SeekBar intensity;
String colorChange;
ShapeDrawable mDrawable;
ShapeDrawable mDrawable2;
ImageView bulb;
RadialGradient radialGradient;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
radialGradient = new RadialGradient(300,300,240,
Color.YELLOW,Color.TRANSPARENT,Shader.TileMode.CLAMP);
mDrawable = new ShapeDrawable(new OvalShape());
mDrawable.getPaint().setShader(radialGradient);
bulb = (ImageView)findViewById(R.id.bulb);
bulb.setBackground(mDrawable);
}
#Override
protected void onStart() {
super.onStart();
intensity = (SeekBar)findViewById(R.id.intensity);
intensity.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
#Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
radialGradient = new RadialGradient(300,300,240,
Color.BLUE,Color.TRANSPARENT,Shader.TileMode.CLAMP);
mDrawable.getPaint().setShader(radialGradient);
bulb.setBackground(mDrawable);
}
#Override
public void onStartTrackingTouch(SeekBar seekBar) { }
#Override
public void onStopTrackingTouch(SeekBar seekBar) { }
});
}
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/backLayout"
tools:context=".MainActivity">
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:src="#drawable/ic_bulb_top"
android:id="#+id/bulb"/>
<SeekBar
android:id="#+id/intensity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.2" />
<SeekBar
android:id="#+id/color"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.2" />
</LinearLayout>

Define android SeekBar programmatically

I use SeekBar in my app with ticks. Currently this SeekBar is defined in xml file:
<SeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Base.Widget.AppCompat.SeekBar.Discrete"/>
and it looks ok but I want to define this element programmatically so I've added this instead:
SeekBar seekBar = new SeekBar(getContext(), null, R.style.Widget_AppCompat_SeekBar_Discrete);
but then the seekBar is invisible. Does anyone know what's wrong?
It's visible if I use only:
SeekBar seekBar = new SeekBar(getContext();
but i need ticks.

this works for me:
First, create a layout (e.g. layout_seekbar.xml):
<?xml version="1.0" encoding="utf-8"?>
<SeekBar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Widget.AppCompat.SeekBar.Discrete" />
then, you can programmatically add the seekbar in your code:
SeekBar bar = (SeekBar)LayoutInflater.from(this).inflate(R.layout.layout_seekbar, null);
bar.setMax(10);
...
bar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
...
}
public void onStartTrackingTouch(SeekBar seekBar) {}
public void onStopTrackingTouch(SeekBar seekBar) {}
});
myLinearLayout.addView(bar);
greetings, hope that helps

How to make double seekbar in android?

I am building an android application where the user select the a maximum value by seekbar.
I need another button on the same seekbar so that user can select maximum and minimum value from a particular unique seekbar.
Here is my code of single seek bar -
package com.ui.yogeshblogspot;
public class CustomSeekBarExActivity extends Activity implements OnSeekBarChangeListener{
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
SeekBar bar=(SeekBar)findViewById(R.id.seekBar1);
bar.setOnSeekBarChangeListener(this);
}
#Override
public void onProgressChanged(SeekBar seekBar, int progress,
boolean fromUser) {
// TODO Auto-generated method stub
TextView tv=(TextView)findViewById(R.id.textView2);
tv.setText(Integer.toString(progress)+"%");
}
#Override
public void onStartTrackingTouch(SeekBar seekBar) {
// TODO Auto-generated method stub
}
#Override
public void onStopTrackingTouch(SeekBar seekBar) {
// TODO Auto-generated method stub
}
}
Here is my xml code of seek bar -
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#FFFFFF">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Choose Your Progress"
android:textColor="#000000"
android:textAppearance="?android:attr/textAppearanceMedium" />
<SeekBar
android:id="#+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:progressDrawable="#xml/progress"
android:max="100"
android:thumb="#xml/thumb"/>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:gravity="center"
android:layout_gravity="center"
android:paddingTop="10dp"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>

Fully Customize two way and single way seek bar you can provide thumb color etc
http://codingsignals.com/crystal-range-seekbar-in-android/
Add in your gradle
dependencies {
compile 'com.crystal:crystalrangeseekbar:1.0.0'
}
<com.crystal.crystalrangeseekbar.widgets.BubbleThumbRangeSeekbar
android:id="#+id/rangeSeekbar5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:corner_radius="10"
app:min_value="0"
app:max_value="100"
app:steps="5"
app:bar_color="#F7BB88"
app:bar_highlight_color="#E07416"
app:left_thumb_image="#drawable/thumb"
app:right_thumb_image="#drawable/thumb"
app:left_thumb_image_pressed="#drawable/thumb_pressed"
app:right_thumb_image_pressed="#drawable/thumb_pressed"
app:data_type="_integer"/>

The Android widget class library has only one slider control, seekbar with only one thumb control. Did some research online and found this cool custom widget, range-seek-bar.
you can followed any one of below
https://github.com/edmodo/range-bar
https://code.google.com/p/range-seek-bar/
https://github.com/Larpon/RangeSeekBar

From Here
<com.appyvet.rangebar.RangeBar
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:id="#+id/SearchrangeSeekbarAge"
android:layout_width="match_parent"
android:layout_height="72dp"
custom:tickStart="18"
custom:tickInterval="1"
custom:tickEnd="70" />
<com.appyvet.rangebar.RangeBar
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:id="#+id/SearchrangeSeekbarHeight"
android:layout_width="match_parent"
android:layout_height="72dp"
custom:tickStart="4.5"
custom:tickInterval="0.10"
custom:tickEnd="7.0" />
rangebar.setOnRangeBarChangeListener(new RangeBar.OnRangeBarChangeListener() {
#Override
public void onRangeChangeListener(RangeBar rangeBar, int leftPinIndex,
int rightPinIndex,
String leftPinValue, String rightPinValue) {
}
});

Now that RangeSlider is officially added to Material Components and supports desired options I suggest using that instead of external libraries.
First of all you should add view to your XML layout:
<com.google.android.material.slider.RangeSlider
android:id="#+id/range_seek_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:valueFrom="0.0"
android:valueTo="100.0"
app:values="#array/initial_slider_values"/>
then add initial slider values to arrays
<resources>
<array name="initial_slider_values">
<item>20.0</item>
<item>70.0</item>
</array>
</resources>
after that you can access RangeSlider values in code:
binding.rangeSeekBar.addOnChangeListener { slider, value, fromUser ->
Logger.d(slider.values)
}
where values is a List of floats with 2 member

You do not need to use two seekbar , but you can just do the same function of minimum and maximum by using only one seekbar with having two thumbs over it
Here its a library you can use https://code.google.com/p/range-seek-bar/
You can use by using below code
private final Thumb getClosestThumb(float touchX)
{
double xValue = screenToNormalized(touchX);
return (Math.abs(xValue - normalizedMinValue) < Math.abs(xValue - normalizedMaxValue)) ? Thumb.MIN : Thumb.MAX;
}
And in the "public boolean onTouchEvent(MotionEvent event)",
if(pressedThumb == null),
pressedThumb = getClosestThumb(mDownMotionX);

RangeSeekBar https://github.com/RanaRanvijaySingh/RangeSeekBar. Also there are other libraries available which offers a lot of customization. If you want to go for more interactive design then look for Material Range Bar http://android-arsenal.com/details/1/1272.

You can use this libraby of mine. It comes with a lots of cutomizations. It supports seeking progress in both directions.

I think this link also might be helpful .range-seek-bar .
There is an explanation about it at jitpack.io.

How to increase or decrease counter using horizontally scrolling button

I am creating one android application in which I want add one horizontally scrolling button to increase/decrease the counter.
For instance if the user scrolls the button towards right, the counter should increase by 1 and scrolling left will decrease the counter by 1.
Please tell me what should I do to accomplish the task. Have a look at the attached image which has the function I want.
I want the counter to increase only when the user scrolls that particular button and not when he swipes somewhere else on the screen

You can use a SeekBar to increase or decrease the counter. An simple example of a layout you can use might be this:
<LinearLayout 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:orientation="vertical" >
<SeekBar
android:id="#+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/counter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="0" >
</TextView>
</LinearLayout>
And the code woul be this:
import android.app.Activity;
import android.os.Bundle;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;
import android.widget.TextView;
public class MainActivity extends Activity {
private TextView counter;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// Selects the TextView which holds the value of the counter
this.counter = (TextView) findViewById(R.id.counter);
SeekBar seekBar = (SeekBar) findViewById(R.id.seekBar);
// Sets the initial value of the SeekBar (it must be the same initial
// value of the counter)
seekBar.setProgress(0);
// Sets the max value of the counter
seekBar.setMax(100);
seekBar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
#Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
#Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
#Override
public void onProgressChanged(SeekBar seekBar, int progress,
boolean fromUser) {
// This code runs when you scroll the SeekBar to left or right.
// If you scroll to the left, the counter decreases and if you
// scroll to the right, the counter increases
counter.setText(String.valueOf(progress));
}
});
}
}

Android RelativeLayout - show items side by side when space but on separate lines when insufficient space?

I'm laying out an app which presents the results of a search in a ListView. I've defined each item to have a custom layout as follows:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="?android:attr/listPreferredItemHeight"
android:padding="5dp"
android:paddingRight="?android:attr/scrollbarSize" >
<TextView
android:id="#+id/title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:ellipsize="end"
android:textAppearance="?android:attr/textAppearanceSearchResultTitle"
android:textIsSelectable="false" />
<TextView
android:id="#+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/title"
android:layout_toRightOf="#+id/subtitle"
android:gravity="bottom|right"
android:textAppearance="?android:attr/textAppearanceSearchResultSubtitle"
android:textIsSelectable="false" />
<TextView
android:id="#+id/subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/title"
android:gravity="bottom|left"
android:textAppearance="?android:attr/textAppearanceSearchResultSubtitle"
android:textIsSelectable="false" />
</RelativeLayout>
This looks great when subtitle and date are of appropriate length to fit on a single line, however it looks awful if the subtitle consumes most of the line and forces date to take a very thin width and so wrap vertically.
What I'd like to do is have them appear side-by-side when there's space but on separate lines if there isn't. I've tried fiddling with the various layout_* attributes and the gravity to no avail and the question isn't very Google-able (at least, I can't think of the right words to search for). Can anyone point me towards the combination of layout rules that I need to achieve this? Or perhaps a different container if one would be more appropriate?

I believe the code below will do what you want but I can't see a way to do this only in the xml layout.
Basically I have added a textChangedListener to two different TextViews that have the two different layout options I believe you are looking for, both inside their own relative layout with the date displaying textview. When the subtitle is set the first of these is used to hold the text, if it requires more than a single line the second TextView is used and in either case the other has its visibility option set to GONE.
In my example I use a seperate thread to change the subtitle, hopefully this doesn't confuse things too much.
The layout xml is as follows:
<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: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=".MainActivity" >
<TextView
android:id="#+id/title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:ellipsize="end"
android:textAppearance="?android:attr/textAppearanceSearchResultTitle"
android:background="#FF009999"
android:textIsSelectable="false"
android:text="#string/my_title" />
<RelativeLayout
android:id="#+id/resizingTextContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/title" >
<TextView
android:id="#+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:textAppearance="?android:attr/textAppearanceSearchResultSubtitle"
android:textIsSelectable="false"
android:textColor="#FFFFFFFF"
android:background="#FF000000" />
<TextView
android:id="#+id/subtitle1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/date"
android:textAppearance="?android:attr/textAppearanceSearchResultSubtitle"
android:textIsSelectable="false"
android:textColor="#FFFFFF"
android:background="#FF00FF00" />
<TextView
android:id="#+id/subtitle2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/date"
android:textAppearance="?android:attr/textAppearanceSearchResultSubtitle"
android:textIsSelectable="false"
android:visibility="gone"
android:textColor="#FFFFFF"
android:background="#FF00FF00" />
</RelativeLayout>
<Button
android:id="#+id/startTestBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/resizingTextContainer"
android:layout_centerHorizontal="true"
android:text="Click To Begin"
/>
</RelativeLayout>
And the main activity code with the textview switching logic:
package com.example.code.examples.changelayoutwithtextlength;
import android.os.Bundle;
import android.app.Activity;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView;
public class MainActivity extends Activity {
TextWatcher textChangeDisplayCheck = new TextWatcher(){
#Override
public void afterTextChanged(Editable s) {
// TODO Auto-generated method stub
}
#Override
public void beforeTextChanged(CharSequence s, int start, int count,
int after) {
// TODO Auto-generated method stub
}
#Override
public void onTextChanged(CharSequence s, int start, int before,
int count) {
displayLatestSubtitle(s);
}
};
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TextView DateTextView = (TextView)findViewById(R.id.date);
DateTextView.setText("29th April 2013");
Button b = (Button)findViewById(R.id.startTestBtn);
b.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v)
{
v.setEnabled(false);
Thread thread = new testSubtitleThread();
thread.start();
}
});
TextView tv = (TextView)findViewById(R.id.subtitle1);
tv.addTextChangedListener(textChangeDisplayCheck);
TextView tv2 = (TextView)findViewById(R.id.subtitle2);
tv2.addTextChangedListener(textChangeDisplayCheck);
}
private void displayLatestSubtitle(CharSequence newSubtitle)
{
TextView tv = (TextView)findViewById(R.id.subtitle1);
TextView tv2 = (TextView)findViewById(R.id.subtitle2);
tv.removeTextChangedListener(textChangeDisplayCheck);
tv2.removeTextChangedListener(textChangeDisplayCheck);
tv.setVisibility(View.GONE);
tv2.setVisibility(View.GONE);
tv2.setText("");
tv.setText(newSubtitle);
if(tv.getLineCount() > 1)
{
tv.setText("");
tv2.setText(newSubtitle);
tv2.setVisibility(View.VISIBLE);
}
else
{
tv.setVisibility(View.VISIBLE);
}
tv.addTextChangedListener(textChangeDisplayCheck);
tv2.addTextChangedListener(textChangeDisplayCheck);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
public class testSubtitleThread extends Thread
{
String[] subtitles = new String[] { "a short one", "a really long winded subtitle that will take over more than the allowed space", "tiny",
"Really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, long.",
".....", "text just to long to fit on my device"};
private android.os.Handler handler = new android.os.Handler()
{
#Override
public void handleMessage(android.os.Message msg)
{
if(msg.what < subtitles.length)
{
TextView tv = (TextView)findViewById(R.id.subtitle1);
tv.setText(subtitles[msg.what]);
}
else
{
Button b = (Button)findViewById(R.id.startTestBtn);
b.setEnabled(true);
}
}
};
#Override
public void run()
{
for(int i = 0; i <= subtitles.length; i++)
{
handler.sendEmptyMessage(i);
try
{
Thread.sleep(3000);
}
catch (InterruptedException e)
{
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
}
}
I hope this helps.

In your layout, I would define two Views per item (subtitle and date), one in the same line and one in the line below.
Then I would check the length of those 2 fields (or their sum) and I would write this piece of code:
if (length > MAX_LENGTH_OF_LINE) > {
findViewById(R.id.subtitle_line_below).setVisibility(View.VISIBLE);
findViewById(R.id.subtitle_same_line).setVisibility(View.GONE);
} else {
findViewById(R.id.subtitle_line_below).setVisibility(View.GONE);
findViewById(R.id.subtitle_same_line).setVisibility(View.VISIBLE);
}