How to make ImageButton behave as ToggleButton - android

I want my Android button to have some properties:
Have Android HoloLight style
Behave as an ImageButton - have an image as its content, not text
Behave as a ToggleButton - toggle on/off status
So my codes currently look something like these:
My xml file:
<ImageButton
android:id="#+id/button"
style="#android:style/Widget.Holo.Light.Button.Toggle"
android:layout_width="70px"
android:layout_height="70px"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="5dp"
android:src="#drawable/icon" />
My java file:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layout_file);
Button button = (ImageButton) findViewById(R.id.button);
button.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
Log.v(log, "button pressed");
if (skillsButton.isSelected()) {
Log.v(log, "button is unselected");
button.setSelected(false);
} else {
Log.v(log, "button is selected");
button.setSelected(true);
}
}
});
}
As I run my code and click the button, I can see that my button has an image as its description, and looks like an Android HoloLight ToggleButton, but it does not turn on and off as I pressed it (the blue light does not turn on).
I can see that the isSelected() status of the button is changing on LogCat though.
Is there a solution to what I want?
Also, as far as I have tried, the "color" of an Android HoloLight themed button is fixed to light gray. Is there a way to change this color to another one, preferably white?

This is what I did so I can have 2 or 3 Buttons with images that toggle and are in a RadioGroup so only one can be selected at a time.
Make it a ToggleButton
<ToggleButton
android:id="#+id/button"
style="#android:style/CustomButton" // Note the style
android:layout_width="70px"
android:layout_height="70px"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="5dp" />
Create a style that it references above in res/styles
<style name="CustomButton" parent="#android:style/Widget.CompoundButton"> // you can change the parent here depending on what you need
<item name="android:background">#drawable/icon</item>
<item name="android:textOff"></item>
<item name="android:textOn"></item>
// add other properties if you need
</style>
In mine the #drawable/cold_button references a selector because it changes when pressed but your can simply be an image for the background

My recommendation is to provide tow drawable for your button. One for one state and one for off state that the "on" state drawable has a right side blue and "off" state button has a left side blue. After that you have to set OnTouchListener on your button like below:
#Override
public boolean onTouch(View v, MotionEvent event) {
if(event.getAction()==MotionEvent.ACTION_DOWN){
float x=event.getX();
if(x<=v.getWidth()/2){
v.setBackgroundResource(R.drawable.off);
state=0;
}else{
v.setBackgroundResource(R.drawable.on);
state=1;
}
}
return false;
}

Related

ToggleButton change color

I have two ToggleButton in my activity. I want to click on the first button and have its color change to white. If I click on the second button, the color of first button should change to black and the color of second button change to white.
I want to know which button is selected. How can I do this with ToggleButton, or with something else?
<ToggleButton android:id="#+id/tg_btn1"
android:layout_width="match_parent"
android:layout_height="46px"
android:background="#ffffff" />
<ToggleButton android:id="#+id/tg_btn1"
android:layout_width="match_parent"
android:layout_height="46px"
android:background="#ffffff" />
Please help me, I would appreciate that.
use a Style for your Toggle Button
<style name="ToggleButton.YourTheme" parent="Theme.AppCompat.Light">
<item name="colorControlNormal">#color/your_color</item>
<item name="colorControlActivated">#color/your_color</item>
</style>
Apply that to your button and it should work. Have not tested it recently.
<ToggleButton android:id="#+id/tg_btn1"
android:layout_width="match_parent"
android:layout_height="46px"
android:theme="#style/ToggleButton.YourTheme"
android:background="#ffffff" />
In order to have two ToggleButtons in an activity which, when ToggleButton1 is clicked, ONLY that button changes color and the other one does not, but then when the ToggleButton2 is switched on: the ToggleButton1 turns "off" and ToggleButton2 turns "on", I created two global variables: One boolean for the first toggle, and a boolean for the second toggle.
package com.example.micha_000.togglecolors;
import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ToggleButton;
public class MainActivity extends AppCompatActivity {
Boolean toggleOneOn = false;
Boolean toggleTwoOn = false;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
public void ToggleOne(View view){
//If the Toggle Button is off
if(!toggleOneOn){
//This view element references the ToggleButton1
view.setBackgroundColor(Color.WHITE);
toggleOneOn = true;
}
//If it is is clicked while on
else{
view.setBackgroundColor(Color.BLACK);
toggleOneOn = false;
}
}
public void ToggleTwo(View view){
//If the Toggle Button is clicked while off
if(!toggleTwoOn){
//This view element references the ToggleButton2
view.setBackgroundColor(Color.WHITE);
//This ToggleButton element references the ToggleButton1
ToggleButton toggle1 = findViewById(R.id.ToggleButton1);
toggle1.setBackgroundColor(Color.BLACK);
toggleOneOn = false;
toggleTwoOn = true;
}
//If it is is clicked while on
else{
view.setBackgroundColor(Color.BLACK);
toggleTwoOn = false;
}
}
}
I then used the "onClick" property in xml to reference the ToggleOne and ToggleTwo methods I created in my java class (Those methods must be public, void, and have a View as a parameter as they do in my code). I then have conditionals checking those global booleans, and then using "setBackgroundColor" to change the color of the toggle appropriately.
<?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="#color/colorPrimary"
tools:context=".MainActivity">
<ToggleButton
android:id="#+id/ToggleButton1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerInParent="true"
android:onClick="ToggleOne"
android:background="#000000"
android:layout_marginBottom="5dp"/>
<ToggleButton
android:id="#+id/ToggleButton2"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerInParent="true"
android:onClick="ToggleTwo"
android:background="#000000"
android:layout_below="#+id/ToggleButton1"/>
</RelativeLayout>
If you wanted to switch the other toggle button when one is pressed, you just need to adjust what happens inside the if/else statements inside the toggleButton methods

How to disable other button until a button is clicked

I am new in android programming. I have made an app which is fill in the blanks type app. Until the answer-confirm button is clicked, the next and the previous Button should be disabled. If it is clicked and answer is checked, then next and previous Button to get enabled. please help!!!!!!!!
If you want to disable a button in xml use this code
<Button
android:text="Next"
android:id="#+id/my_button_del"
android:layout_width="72dp"
android:layout_height="40dp"
android:visibility="invisible"/>
for enabling the button when we click on previous then in onClick function(previous) add this code
next.setVisibility(View.VISIBLE);
next is the button
something like that (maybe its not the best way, you can play with it and make it better)
protected void onCreate(Bundle savedInstanceState) {
...
firstButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
enableNextButton();
}
});
...
}
private void enableNextButton(){
nextButton.setBackgroundResource(R.drawable.button_active);
nextButton.setClickable(true);
nextButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
goNext();
}
});
}
private void disableNextButton(){
nextButton.setBackgroundResource(R.drawable.button_inactive);
nextButton.setClickable(false);
}
and in your xml the buttons should be something like
<Button
android:id="#+id/first_button"
android:layout_width="match_parent"
android:layout_height="#dimen/generic_button_heigth"
android:background="#drawable/button_active"
android:layout_margin="#dimen/generic_margin"
android:text="#string/first_button_text"
android:textColor="#color/white"/>
<Button
android:id="#+id/next_button"
android:layout_width="match_parent"
android:layout_height="#dimen/generic_button_heigth"
android:background="#drawable/button_inactive"
android:clickable="false"
android:layout_margin="#dimen/generic_margin"
android:text="#string/next_button_text"
android:textColor="#color/white"/>
this way you start with an active button and an inactive button, when the first is pressed you can "activate" the next button
Please use punctuations and uppercases but anyway.
You can check here for more infos about buttons : http://developer.android.com/reference/android/widget/Button.html
Otherwise, the method setVisible() allow you to make visibile or not a button of your layout. Set button visibility to GONE (button will be completely "removed" -- the buttons space will be available for another widgets) or INVISIBLE (button will became "transparent" -- its space will not be available for another widgets):
View b = findViewById(R.id.button);
b.setVisibility(View.GONE);
or in xml:
<Button ... android:visibility="gone"/>
EDIT
Oh sorry ! So you can use setEnabled().

How to make imagebutton and textview to be clicked together in android?

I have ImageButton and TextView inside RelativeLayout.
I want to change their colors to blue when they are pressed and make them white again when released. also I need to do it to both of them no matter which of them I click.
and I want to activate the same action to both of them, for example a Toast that will be shown on the screen.
I tried to do it using selectors and duplicateParentState and many other options.
Can someone give me a simple example of how to do it?
UPDATE:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/trash_pressed" android:state_pressed="true"/>
<item android:drawable="#drawable/trash_pressed" android:state_focused="true"/>
<item android:drawable="#drawable/trash"/>
</selector>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="#33B5E5" />
<item android:state_focused="true" android:color="#33B5E5" />
<item android:color="#ffffff" />
</selector>
and this is the layout
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitCenter"
android:gravity="center"
android:layout_gravity="center">
<ImageButton
android:id="#+id/button_ResetData"
android:layout_width="wrap_content"
android:layout_height="25dp"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:clickable="true"
android:duplicateParentState="true"
android:scaleType="fitCenter"
android:src="#drawable/reset_button_selector"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#id/button_ResetData"
android:scaleType="fitCenter"
android:clickable="true"
android:text="#string/Button_ResetData"
android:textSize="10dp"
android:duplicateParentState="true"
android:textColor="#drawable/main_buttons_text_color_selector"/>
</RelativeLayout>
when I click the layout the selectors of the text and button is activated but not the click event. when I click the button the selectors don't work but the click event works
You can set selectors to RelativeLayout directly and implement onClickListener for the same. And make sure you include android:clickable="true" inside your RelativeLayout.
Very Simple
In your activity where u call the on click function... define them separately but use them like this
public class yourclass extends Activity implements OnClickListener
{
ImageButton IMGBTN1;
TextView tv1;
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_previousentry);
IMGBTN1 = (ImageButton) findViewById(R.id.imageButton1);
tv1= (TextView) findViewById(R.id.textview1);
IMGBTN1.setOnClickListener(this);
tv1.setOnClickListener(this);
}
public void onClick(View v)
{
if (v == IMGBTN1 )
{
IMGBTN1.setBackgroundColor(Color.BLUE);
tv1.setTextColor(Color.parseColor("#bdbdbd"));
Toast.makeText(getBaseContext(),"img 1 pressed", Toast.LENGTH_LONG).show();
delay();
}
if (v == tv1)
{
IMGBTN1.setBackgroundColor(Color.BLUE);
tv1.setTextColor(Color.parseColor("#bdbdbd"));
Toast.makeText(getBaseContext(),"textview 1 pressed", Toast.LENGTH_LONG).show();
delay();
}
public void delay()
{
final Handler handler = new Handler();
handler.postDelayed(new Runnable() {
#Override
public void run()
{
IMGBTN1.setBackgroundColor(Color.RED);
tv1.setTextColor(Color.parseColor("#ffffff"));
}
}, 500);
}
}
Use yourView.performClick() to programatically click a button.
You can try this,
Add selectors to both Textview and image drawable. Add that image drawable to textview using attributes like drawableLeft, drawableTop etc in xml.
Let me know if it works.
FOUND A SOLUTION:
final ImageButton resetButton = (ImageButton) findViewById(R.id.button_ResetData);
final TextView resetButton_Title = (TextView) findViewById(R.id.textview_button_ResetData_title);
View.OnTouchListener onTouchListener_ResetButton = new View.OnTouchListener() {
#Override
public boolean onTouch(View view, MotionEvent motionEvent) {
switch (motionEvent.getAction()){
case MotionEvent.ACTION_DOWN:
resetButton.setImageResource(R.drawable.trash_pressed);
resetButton_Title.setTextColor(getResources().getColor(R.color.Blue_Light));
break;
case MotionEvent.ACTION_UP:
resetButton.setImageResource(R.drawable.trash);
resetButton_Title.setTextColor(Color.WHITE);
AlertDialog.Builder builder = new Builder(MainActivity.this);
builder.setMessage("Are you sure you want to clear the list (except \"In progress\")?")
.setPositiveButton("Yes", resetListDialogClickListener)
.setNegativeButton("No", resetListDialogClickListener);
AlertDialog dialog = builder.show();
TextView messageView = (TextView) dialog.findViewById(android.R.id.message);
messageView.setGravity(Gravity.CENTER);
}
return false;
}
};
resetButton.setOnTouchListener(onTouchListener_ResetButton);
resetButton_Title.setOnTouchListener(onTouchListener_ResetButton);

android transparent ImageButton not clickable in MvvmCross

How does one create an ImageButton with transparent background that still clickable (still acts like a Button)?
This is the xml snippet:
<ImageButton
android:paddingRight="10dp"
android:paddingLeft="10dp"
android:paddingTop="7dp"
android:paddingBottom="7dp"
android:src="#drawable/serverschedule"
android:background="#null"
android:clickable="true"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="#string/predict"
local:MvxBind="Click PredictCmd" />
I have also tried android:background="#00000000" and android:background="#android:color/transparent"and in all cases, I do get the desired visual effect but button no longer can be clicked.
I am using MvvmCross framework to binding to the Click event of the button, hence there is no code behind.
I am testing against API Level 15, if this matters.
EDIT Added entire axml for button.
EDIT Adding MVVM framework as it may have something to do with problem.
TIA.
Thanks for all of the suggestions.
This is what finally worked for me:
android:background="?android:attr/selectableItemBackground"
Based on responses from this thread.
Please provide width and height of your button.
Also try this :
ImageButton theButton = (ImageButton )findViewById(R.id.theButton);
theButton.setVisibility(View.VISIBLE);
theButton.setBackgroundColor(Color.TRANSPARENT);
theButton.setOnClickListener(new OnClickListener()
{
#Override
public void onClick(View v)
{
// DO STUFF
}
});
Hope this helps.
Do certain Necessary changes
<ImageButton
android:paddingRight="10dp"
android:paddingLeft="10dp"
android:paddingTop="7dp"
android:paddingBottom="7dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/serverschedule"
android:background="#null"
android:id="#+id/mybutton"
</ImageButton
Into Your code:
mybutton.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View view) {
//Your Stuff here
}
});
try this...
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/timeText"
android:layout_centerHorizontal="true"
android:background="#android:color/transparent"
android:clickable="true"
android:contentDescription="image button"
android:src="#drawable/anchor" />
set clickable attribute to true, and handle onclick event in your activity like
findViewById(R.id.imageButton).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Toast.makeText(getApplicationContext(), "text", Toast.LENGTH_SHORT).show();
}
});
No change in your xml file.. even no need to add this android:clickable="true"
edit your java file as below code...
ImageButton imageButton;
#Override
public void onCreate(Bundle savedInstanceState) {
imageButton = (ImageButton) findViewById(R.id.imageButton1);
imageButton.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View arg0) {
Toast.makeText(MyAndroidAppActivity.this,
"ImageButton is clicked!", Toast.LENGTH_SHORT).show();
}
});
}
}
If this doesn't work you might have problem with your parent layout. Please post that if so....
what's the meaning of the "acts as a button" ? when you use
android:background="#null"
your ImageButton will have no background and you can use selector as the src ,you'll get the same acts as a button,also can click as usual
selector like this
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_bg_pressed" android:state_pressed="true"/>
<item android:drawable="#drawable/button_bg_pressed" android:state_focused="true"/>
<item android:drawable="#drawable/button_bg_normal"/>
</selector>
also see enter link description here
back.setBackgroundColor(Color.TRANSPARENT);
works for all android versions

How to disable blinking of textview onClick

I have a TextView with an onClickListener().
When I click on the TextView it blinks.
How to disable this effect?
Here is the XML
<TextView
android:id="#+id/descriptionText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/background"
android:ellipsize="end"
android:paddingTop="4dp"
android:paddingLeft="8dp"
android:maxLines="3"
/>
I tried to remove android:ellipsize and android:maxLines tags - no effect.
And here is the code:
accountDescriptionTextView = (TextView) v.findViewById(R.id.descriptionText);
accountDescriptionTextView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
if (descriptionOpened)
{
// accountDescriptionTextView.setEllipsize(TextUtils.TruncateAt.END);
// accountDescriptionTextView.setMaxLines(3);
descriptionOpened = false;
}
else
{
// accountDescriptionTextView.setEllipsize(null);
// accountDescriptionTextView.setMaxLines(100);
descriptionOpened = true;
}
}
});
I need to have the commented functionality, but even when this lines are commented I still see how the textview blinks.
The text just disapears when i place my finger on the screen and apears when I take the finger away.
Android uses a selector to give different colors to widgets' pressed state.
If you don't want that behavior, you can use solid colors for android:textColor and android:textColorHighlight.
Check the TextView doc.

Categories

Resources