Develop Reference

Android Adding Text inside switch toggle. Newer API approach

I want to add text inside switches and expect toggle to completely cover the texts
I was able to achieve this in API 16 with below option
<Switch
android:textOff="off"
android:showText="true"
android:textOn="on"/>
However same switch looks odd in the higher version(i'm testing with API 27) where switch toggle is a round icon behind the text.
Is there a way i can fit the text inside the switch toggle using native library/methods.

I found this code in GitHub. After some addition and modification, I get what I need. This toggle button has YES NO text on it and works like switch button. You can give it a go.
public class ToggleButton extends RelativeLayout implements View.OnClickListener {
FrameLayout layout;
TextView toggleCircle;
View background_oval_off, background_oval_on;
int dimen;
private Boolean _crossfadeRunning = false;
private ObjectAnimator _oaLeft, _oaRight;
public ToggleButton(Context context, AttributeSet attrs) {
super(context, attrs);
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
inflater.inflate(R.layout.toggle_button, this, true);
background_oval_off = findViewById(R.id.background_oval_off);
background_oval_on = findViewById(R.id.background_oval_on);
toggleCircle = findViewById(R.id.toggleCircle);
layout = (FrameLayout) findViewById(R.id.layout);
layout.setOnClickListener(this);
//get a pixel size for a particular dimension - will differ by device according to screen density
dimen = getResources().getDimensionPixelSize(R.dimen.toggle_width);
_oaLeft = ObjectAnimator.ofFloat(toggleCircle, "x", dimen / 2, 0).setDuration(250);
_oaRight = ObjectAnimator.ofFloat(toggleCircle, "x", 0, dimen / 2).setDuration(250);
//setState();
}
public ToggleButton(Context context) {
this(context, null);
}
public void setState(String answer) {
Log.d("simul", "ans - " + answer);
if (answer.equals("1")) {
toggleCircle.setTextColor(ContextCompat.getColor(getContext(), R.color.green));
toggleCircle.setX(dimen / 2);
_crossfadeViews(background_oval_off, background_oval_on, 1);
toggleCircle.setText("Yes");
} else {
toggleCircle.setTextColor(ContextCompat.getColor(getContext(), R.color.red));
toggleCircle.setX(0);
_crossfadeViews(background_oval_on, background_oval_off, 1);
toggleCircle.setText("No");
}
}
private void _crossfadeViews(final View begin, View end, int duration) {
_crossfadeRunning = true;
end.setAlpha(0f);
end.setVisibility(View.VISIBLE);
end.animate().alpha(1f).setDuration(duration).setListener(null);
begin.animate().alpha(0f).setDuration(duration).setListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
begin.setVisibility(View.GONE);
_crossfadeRunning = false;
}
});
}
#Override
public void onClick(View view) {
if (_oaLeft.isRunning() || _oaRight.isRunning() || _crossfadeRunning) return;
if (toggleCircle.getText().equals("Yes")) {
_oaLeft.start();
_crossfadeViews(background_oval_on, background_oval_off, 110);
toggleCircle.setText("No");
toggleCircle.setTextColor(ContextCompat.getColor(getContext(), R.color.red));
mListener.toggleButtonClickListener("No");
} else {
_oaRight.start();
_crossfadeViews(background_oval_off, background_oval_on, 400);
toggleCircle.setText("Yes");
toggleCircle.setTextColor(ContextCompat.getColor(getContext(), R.color.green));
mListener.toggleButtonClickListener("Yes");
}
}
public ToggleButtonListener mListener = null;
public void setToggleButtonClickListener(ToggleButtonListener listener) {
mListener = listener;
}
public interface ToggleButtonListener {
public void toggleButtonClickListener(String content);
}
}
toogle_button_red_oval.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:right="#dimen/toggle_circle_diameter">
<shape android:shape="oval">
<solid android:color="#color/red"/>
<size
android:height="#dimen/toggle_circle_diameter"
android:width="#dimen/toggle_circle_diameter" />
</shape>
</item>
<item android:left="#dimen/toggle_circle_radius" android:right="#dimen/toggle_circle_radius">
<shape android:shape="rectangle">
<solid android:color="#color/red"/>
<size
android:height="#dimen/toggle_circle_diameter"
android:width="#dimen/toggle_circle_diameter" />
</shape>
</item>
<item android:left="#dimen/toggle_circle_diameter">
<shape android:shape="oval">
<solid android:color="#color/red"/>
<size
android:height="#dimen/toggle_circle_diameter"
android:width="#dimen/toggle_circle_diameter" />
</shape>
</item>
</layer-list>
toogle_button_green_oval.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:right="#dimen/toggle_circle_diameter">
<shape android:shape="oval">
<solid android:color="#color/green"/>
<size
android:height="#dimen/toggle_circle_diameter"
android:width="#dimen/toggle_circle_diameter" />
</shape>
</item>
<item android:left="#dimen/toggle_circle_radius" android:right="#dimen/toggle_circle_radius">
<shape android:shape="rectangle">
<solid android:color="#color/green"/>
<size
android:height="#dimen/toggle_circle_diameter"
android:width="#dimen/toggle_circle_diameter" />
</shape>
</item>
<item android:left="#dimen/toggle_circle_diameter">
<shape android:shape="oval">
<solid android:color="#color/green"/>
<size
android:height="#dimen/toggle_circle_diameter"
android:width="#dimen/toggle_circle_diameter" />
</shape>
</item>
</layer-list>
toogle_button_circle.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<solid android:color="#color/white"/>
<size
android:height="#dimen/toggle_circle_diameter"
android:width="#dimen/toggle_circle_diameter" />
</shape>
toogle_button.xml
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<FrameLayout
android:id="#+id/layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<View
android:layout_width="#dimen/toggle_width"
android:layout_height="#dimen/toggle_height"
android:id="#+id/background_oval_off"
android:background="#drawable/toggle_button_black_oval" />
<View
android:layout_width="#dimen/toggle_width"
android:layout_height="#dimen/toggle_height"
android:id="#+id/background_oval_on"
android:background="#drawable/toggle_button_green_oval"
android:visibility="gone" />
<TextView
android:paddingTop="10dp"
android:paddingLeft="10dp"
android:layout_width="#dimen/toggle_circle_diameter"
android:layout_height="#dimen/toggle_circle_diameter"
android:layout_gravity="center_vertical"
android:id="#+id/toggleCircle"
android:textSize="#dimen/toggle_text_size"
android:text="No"
android:background="#drawable/toggle_button_circle"/>
</FrameLayout>
</merge>
XML layout code
<package.name.ToggleButton
android:id="#+id/toggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</cpackage.name.ToggleButton>
Java Code :
ToggleButton toggleButton = findViewById(R.id.toggleButton);
toggleButton.setToggleButtonClickListener(new ToggleButton.ToggleButtonListener() {
#Override
public void toggleButtonClickListener(String content) {
if (content.equals("Yes")) {
} else {
}
}
});
dimens.xml
<dimen name="toggle_width">100dp</dimen>
<dimen name="toggle_height">50dp</dimen>
<dimen name="toggle_circle_diameter">50dp</dimen>
<dimen name="toggle_circle_radius">25dp</dimen>
Sorry for this long long answer. I had to add all the code here. please let me know if anything missing here. :)

SeekBar secondaryProgress not showing

I have a question, I have a seek bar and I want to show the buffer progress of an ExoPlayer media file using the secondary progress bar of the seekBar, the problem is that it´s not showing. Im running on API 21
Here´s the xml code:
<SeekBar
android:id="#+id/seekBarAudioA"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:maxHeight="3dip"
android:minHeight="3dip"
android:progressDrawable="#drawable/seek_bar_progress"
android:secondaryProgressTint="#android:color/holo_blue_dark"
android:thumbTint="#color/amber"
app:layout_constraintBottom_toBottomOf="#+id/play_pause"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#+id/play_pause"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/play_pause" />
and here´s the java code:
SeekBar = new Thread(new Runnable() {
#Override
public void run() {
try {
while (currentlyPlaying && currentAudioHolder.getAdapterPosition() == audioPosition) {
int duration = (int) exoPlayer.getDuration();
currentAudioHolder.seekBarAudio.setMax(duration);
currentAudioHolder.seekBarAudio.setSecondaryProgress((int) exoPlayer.getBufferedPosition());
final int currPosition = (int) exoPlayer.getCurrentPosition();
Log.d("Buffer", "secondary progress bar position is: " + (int) exoPlayer.getBufferedPosition() + ", and the current position is: " + currPosition);
currentAudioHolder.seekBarAudio.setProgress(currPosition);
((ChatActivity) context).runOnUiThread(new Runnable() {
#Override
public void run() {
currentAudioHolder.audioLength.setText(convertTime(currPosition));
}
});
Thread.sleep(sleep);
}
} catch (InterruptedException i) {
currentlyPlaying = false;
}
}
});
SeekBar.start();
Please help :(

I might be late, but here is my answer: you should check your seek_bar_progress file, that you use for android:progressDrawable, and see if it looks like this:
<?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">
<corners android:radius="2dp"/>
<solid android:color="#color/myBgColor"/>
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<scale android:scaleWidth="100%">
<shape android:shape="rectangle">
<corners android:radius="2dp"/>
<solid android:color="#color/myColor"/>
</shape>
</scale>
</item> <item android:id="#android:id/progress">
<clip>
<shape android:shape="rectangle">
<corners android:radius="2dp"/>
<solid android:color="#color/myColor"/>
</shape>
</clip>
</item>
</layer-list>
I found out that the part with the #android:id/secondaryProgress id was missing in my drawable, and that was the reason why it was not working for me.
Hope it helps.

RecyclerView and out of memory

I'm using RecyclerView to display a few resource-consuming images. My implementation looks like the following:
private class NoteConfigItemAdapter extends RecyclerView.Adapter<NoteConfigItemAdapter.NoteConfigViewHolder> {
public class NoteConfigViewHolder extends RecyclerView.ViewHolder {
private final ToggleButton tbButton;
private final TextView tvDescription;
private int index;
private final View.OnClickListener buttonClickListener = new View.OnClickListener() {
#Override
public void onClick(View v) {
int oldSelectedItem = selectedItem;
selectedItem = index;
notifyItemChanged(oldSelectedItem);
notifyItemChanged(selectedItem);
}
};
public NoteConfigViewHolder(View itemView) {
super(itemView);
tbButton = (ToggleButton)itemView.findViewById(R.id.notesConfig_tbButton);
tvDescription = (TextView)itemView.findViewById(R.id.notesConfig_tvDescription);
tbButton.setOnClickListener(this.buttonClickListener);
}
public void setData(int descriptionResource, int drawableResource, int index) {
this.index = index;
tvDescription.setText(descriptionResource);
Drawable background = ResourcesCompat.getDrawable(getResources(), drawableResource, null);
tbButton.setBackground(background);
tbButton.setChecked(index == selectedItem);
}
}
private List<NoteConfigItem> configItems;
private int layoutResource;
private int selectedItem = 0;
public NoteConfigItemAdapter(List<NoteConfigItem> configItems, int layoutResource) {
this.configItems = configItems;
this.layoutResource = layoutResource;
}
#Override
public NoteConfigViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View itemView = LayoutInflater
.from(parent.getContext())
.inflate(layoutResource, parent, false);
return new NoteConfigViewHolder(itemView);
}
#Override
public void onBindViewHolder(NoteConfigViewHolder holder, int position) {
NoteConfigItem item = configItems.get(position);
holder.setData(item.stringResource, item.drawableResource, position);
}
#Override
public int getItemCount() {
return configItems.size();
}
}
Single item's layout contains only ToggleButton and TextView:
I'm dynamically assigning background to the ToggleButton upon binding. Background is a Drawable, which defines two states for the button:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<layer-list>
<item>
<shape android:shape="rectangle">
<solid android:color="#color/colorPrimary" />
</shape>
</item>
<item>
<inset android:insetTop="#dimen/selectionBorderSize"
android:insetLeft="#dimen/selectionBorderSize"
android:insetRight="#dimen/selectionBorderSize"
android:insetBottom="#dimen/selectionBorderSize">
<layer-list>
<item>
<shape android:shape="rectangle">
<solid android:color="#ffffff"></solid>
</shape>
</item>
<item>
<bitmap android:src="#drawable/full_range" >
<padding android:bottom="#dimen/selectionBorderSize"
android:top="#dimen/selectionBorderSize"
android:left="#dimen/selectionBorderSize"
android:right="#dimen/selectionBorderSize" />
</bitmap>
</item>
</layer-list>
</inset>
</item>
</layer-list>
</item>
<item android:state_checked="false">
<layer-list>
<item>
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</item>
<item>
<inset android:insetTop="#dimen/selectionBorderSize"
android:insetLeft="#dimen/selectionBorderSize"
android:insetRight="#dimen/selectionBorderSize"
android:insetBottom="#dimen/selectionBorderSize">
<layer-list>
<item>
<shape android:shape="rectangle">
<solid android:color="#ffffff"></solid>
</shape>
</item>
<item>
<bitmap android:src="#drawable/full_range" >
<padding android:bottom="#dimen/selectionBorderSize"
android:top="#dimen/selectionBorderSize"
android:left="#dimen/selectionBorderSize"
android:right="#dimen/selectionBorderSize" />
</bitmap>
</item>
</layer-list>
</inset>
</item>
</layer-list>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</item>
</selector>
#drawable/fullRange is a PNG image. Itself it is not so big (~hundred of such images occupy around 400kb), but it is quite big (225px x 450px), so I guess the bitmap object created from this PNG can be memory-costly.
When I run the application, I monitor the memory usage. When I only scroll through RecyclerViews, the chart looks like the following:
But when I start to select items, occupied memory starts to grow until OutOfMemoryException:
What am I doing wrong? Why arent the resources being reused/disposed?

How do i change text color when button was pressed once (Android)

what i basically wanna do is this:
When i click on the button i want its Text color to appear in a different color.
What i tried is this:
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:color="#color/red" />
<item
android:state_pressed="false"
android:color="#000" />
</selector>
and then i did use this selector as drawable on the button android:textColor
but this doesn solve it since it only changes its color while i press the button.
I want it like this:
Default: black
on click: blue
on click again: black
any ideas how to do that? :S
this is my shape for the button (if it matters):
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetBottom="-1dp"
android:insetLeft="-1dp"
android:insetRight="-1dp">
<selector>
<item android:state_pressed="false">
<shape android:shape="rectangle" >
<corners
android:radius="0dp"
/>
<solid
android:color="#color/background_grey"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="100dp"
android:height="30dp"
/>
<stroke
android:width="1dp"
android:color="#ffb4b4b4"
/>
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="rectangle" >
<corners
android:radius="0dp"
/>
<solid
android:color="#color/pq_blue"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="100dp"
android:height="30dp"
/>
<stroke
android:width="1dp"
android:color="#ffb4b4b4"
/>
</shape>
</item>
</selector>
</inset>
thx in advance
EDIT
so i tried to do it programatically and tied the folowing just to see if it changes color´s ..but yea..it doesn´t (it seems like my onCLick event doesnt work):
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.listview_item, container, false);
final Button likeButton = (Button)rootView.findViewById(R.id.btLike);
likeButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
String test = "tester";
if(BUTTON_STATE==BUTTON_STATE_ONCE){
likeButton.setTextColor(getResources().getColor(R.color.pq_blue));
BUTTON_STATE = BUTTON_STATE_TWICE;
}else{
likeButton.setTextColor(getResources().getColor(R.color.red));
BUTTON_STATE = BUTTON_STATE_ONCE;
}
}
});
return rootView;
}
}
NOTE: i do all tht stuff in onCreateView since im in a Fragment of my ActionBarActivity(with tabs) if im doing it in the onCreate i get a null pointer exception at findViewById ( since it searches for the ID in my mainActivity, if im right?)
so yea..any ideas?

Your textselector.xml -
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:color="#color/red" /> <!--selected text colour-->
<item
android:state_focused="true"
android:color="#color/red" />
<item
android:color="#color/blue" /> <!--unselected text colour-->
</selector>
Your button in layout.xml -
<Button
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Exit"
android:textColor="#drawable/textselector" <!-- SET textselector HERE -->
android:background="#drawable/button_color"/>

You can use this code to do it programmatically:
myButton.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
ColorStateList myList=myButton.getTextColors();
int myColor=myList.getDefaultColor();
switch(myColor)
{
case Color.BLACK:
myButton.setTextColor(Color.BLUE);
break;
case Color.BLUE:
myButton.setTextColor(Color.BLACK);
break;
}
}
});

If You want to have a behaviour like:
First Click: Button text black
Second Click: Button text blue
third Click: button text black again
I don´t think it´s possible with the selector, also not with state focused. Because if any other view will be clicked, the button is not focused anymore and will loose the textcolor, goes back to default. You have to do it in a programmatically way:
First, set the default textColor to what You want: black inside Your xml. So than You have the color on no press. make a globa variabel to save the state:
private int BUTTON_STATE = 0;
private final int BUTTON_STATE_ONCE = 0;
private final int BUTTON_STATE_TWICE = 1;
button.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View view) {
if(BUTTON_STATE==BUTTON_STATE_ONCE){
button.setTextColor(Color.BLUE);
BUTTON_STATE = BUTTON_STATE_TWICE;
}else if(BUTTON_STATE==BUTTON_STATE_TWICE){
button.setTextColor(Color.BLACK);
BUTTON_STATE = BUTTON_STATE_ONCE;
}
}
});
That´s just a possible solution, there are many ways..
EDIT
for Your code:
Create that global variables like i did in my example above, and use them in the if/else statement:
likeButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
if(BUTTON_STATE==BUTTON_STATE_ONCE){
likeButton.setTextColor(getResources().getColor(R.color.pqBlue));
BUTTON_STATE = BUTTON_STATE_TWICE;
}else if(BUTTON_STATE==BUTTON_STATE_TWICE){
likeButton.setTextColor(getResources().getColor(R.color.pqBlack));
BUTTON_STATE = BUTTON_STATE_ONCE;
}
}
});

Try adding text_effect.xml drawable
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:color="#color/white" /> <!-- pressed -->
<item android:color="#color/black" /> <!-- default -->
</selector>
add this line in button control
android:textColor="#drawable/text_effect"
It will work. Enjoy:)

If you do not mandatorily need a simple Button, you could use a ToggleButton that is made for binary-state handling... With a ToggleButton your selector would look like this :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="#color/red" />
<!-- Default State -->
<item android:color="#000" />
</selector>

It seems like you wanna implement something like toggle button.
Instead of button u can use toggle button.
Though if you wanna use button only then u need to do some changes in your java code as well as xml code also
Create a file def_btn.xml it will look like this..
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:radius="0dp"
/>
<solid
android:color="#color/background_grey"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="100dp"
android:height="30dp"
/>
<stroke
android:width="1dp"
android:color="#ffb4b4b4"
/>
</shape>
Create another file press_btn.xml it will look like this..
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:radius="0dp"
/>
<solid
android:color="#color/pq_blue"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="100dp"
android:height="30dp"
/>
<stroke
android:width="1dp"
android:color="#ffb4b4b4"
/>
</shape>
Inside your activity declare a private boolean variable(say isPressed) by default isPressed is false. & for default button background will be def_btn.xml
Now write following in button's onClick event.
btn.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
isPressed = !isPressed;
if(isPressed){
btn.setBackgroundResource(R.drawable.def_btn);
}else{
btn.setBackgroundResource(R.drawable.press_btn);
}
}
});
That's it..

Circle button with shadow

I make a circle button with states and I want to add shadow to the button like the default buttons how I can do this? Here is my code:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="oval">
<solid android:color="#color/yellow_pressed" />
<stroke android:width="1dp" android:color="#fff" />
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="oval">
<solid android:color="#color/yellow_pressed" />
<stroke android:width="1dp" android:color="#fff" />
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#color/yellow_default" />
<stroke android:width="1dp" android:color="#fff" />
</shape>
</item>
</selector>

Starting from Lollipop, you can use:
public static void setOvalElevationToView(final View view) {
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP)
view.setOutlineProvider(new ViewOutlineProvider() {
#TargetApi(VERSION_CODES.LOLLIPOP)
#Override
public void getOutline(View view, Outline outline) {
final int size = view.getWidth();
outline.setOval(0, 0, size, size);
}
});
}
You might also need to disable clipping on the parent of the view, so that the shadows won't be clipped