Develop Reference

Changing src for ImageButton when clicked

I am doing an Android application in which I have placed an image button. I have given a default image source. When I click the image it should change the image source to another and if I press the image again I should get the default image back.
It's like toggling between two images. But I don't want to use toggleButton due to requirements of my app.

If you don't want anything to do with toggle, you would have to keep a counter.
XML:
<android.support.v7.widget.AppCompatImageButton
android:id="#+id/button"
android:layout_width="10dp"
android:layout_height="match_parent"
android:src="#mipmap/original"
android:background="#color/original"/>
Activity:
public class Activity extends AppCompatActivity {
int clickcounter = 0;
#Bind(R.id.button)
ImageButton Button;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//Butter Knife
ButterKnife.bind(this);
//Hook up the OnClick Listener
feedButton.setOnClickListener(feedButtonHandler);
}
View.OnClickListener feedButtonHandler = new View.OnClickListener() {
public void onClick(View v) {
clickcounter = clickcounter + 1;
if (clickcounter % 2 == 1) {
// setImageResource is the method for setting imagebutton's src in xml
Button.setImageResource(R.mipmap.new);
// setBackgroundResource is the method for setting imagebutton's background in xml
Button.setBackgroundResource(R.color.new);
}
if (clickcounter % 2 == 0) {
Button.setImageResource(R.mipmap.original);
Button.setBackgroundResource(R.color.original);
}
};
}
But toggle is a simpler way to do it.

ImageButton:
<ImageButton
android:id="#+id/imagebutton"
android:layout_width="250dp"
android:layout_height="100dp"
android:background="#drawable/img_btn_selector"/>
img_btn_selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="#drawable/img_selected" />
<item android:drawable="#drawable/img_un_selected" />
</selector>
Activity:
imgBtn.setOnClickListener(new OnClickListener() {
public void onClick(View button) {
if (button.isSelected()){
button.setSelected(false);
} else {
button.setSelected(true);
}
}
});

Setting to events On Image View

I have created ImageView and i want to make two action on it :
First : when i press on the ImageView it chnages its Background, to do that, i created Drawable Resource File named imgpressed.xml and added attribute android:background="imgpressed in ImageView Layout
Second : If I click on it (Action UP) , Toast should appear on the screen, to do that , I created method SetOnClickListener in Java Code
but noticed that when i add attribute android:clickable in imageView , the OnClickListener in code java does not work, and if I remove the Attribute OnClickListener in Java Code works....
that is my codes :
imageView Layout :
<ImageView
android:clickable="true"
android:background="#drawable/imgpressed"
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/imageView"
android:contentDescription="#string/pauseimgS"
android:focusableInTouchMode="false"
android:background="#drawable/pauseimg"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
/>
imgpressed.xml :
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<bitmap android:src="#drawable/pauseimg"/>
</item>
<item android:state_pressed="true">
<bitmap android:src="#drawable/pauseimgclicked"/>
</item>
</selector>
Code Java Main Activity
public class game extends AppCompatActivity {
RelativeLayout Rel_main_game;
View pauseButton;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.game);
LayoutInflater myInflater = (LayoutInflater) getApplicationContext().getSystemService(getApplicationContext().LAYOUT_INFLATER_SERVICE);
pauseButton = myInflater.inflate(R.layout.pause, null, false);
Rel_main_game = (RelativeLayout) findViewById(R.id.relativeLayout);
Rel_main_game.addView(pauseButton);
pauseButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Toast.makeText(game.this,"Thank You", Toast.LENGTH_SHORT).show();
}
});
}
}

why you have used two backgrounds for your ImageView?!
you should use android:src="pauseimg" for your image source
and android:background="#drawable/imgpressed" for your background change
also for making your imageview clickable you can use android:onClick="onImageClick" and then in your activity:
public void onImageClick(View view) {
Toast.makeText(game.this,"Thank You", Toast.LENGTH_SHORT).show();
}

How to add icon image button in android studio

I want to design the layout of this type of app(as shown in the image). In this layout when we click the circle icon it moves to next page. I want to know how its done.

in drawer folder create circle_background.xml and put this code to it :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<solid android:color="#FE4543"></solid>
<stroke android:color="#FE4543" android:width="1dp"></stroke>
</shape>
so now in your activity add image view like this
<ImageView
android:layout_width="wrap_content"
android:gravity="center"
android:layout_height="wrap_content"
android:src="#drawable/ic_action_search"
android:padding="15dp"
android:id="#+id/btn_search"
android:background="#drawable/circle_background"
/>
and if you want to add click action on this you have to use intent something like this , my view id is btn_search so at the first i have to find it like this and then set onclick listener for it like below
ImageView btnSearch= (ImageView) findViewById(R.id.btn_search);
btnSearch.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Intent intent= new Intent(getApplicationContext(),ExampleActivity.class)
}
});

The top one I think it can implement by ImageButton simplely.
Another one need a Layout with a circle background, and contain ImageView and TextView.
Hope it will be help for you.

public class TourActivity extends AppCompatActivity {
private ImageView tour;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tour);
tour = (ImageView) findViewById(R.id.tour);
tour.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Intent intent= new Intent(getApplicationContext(),FirstActivity.class);
launchThird();
}
});
}
private void launchThird() {
Intent intent = new Intent(this, FirstActivity.class);
startActivity(intent);
}
}

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);

How do I switch the state of an imagebutton with a different image, once the button is selected

I have a java file which has the reference to the button:
public View onCreateView(final LayoutInflater inflater, final ViewGroup container, final Bundle savedInstanceState) {
createMenus();
return inflater.inflate(R.layout.fragment_test, container, false);
}
#Override
public void onClick(final View view) {
final int actionBarHeight = getActivity().findViewById(R.id.title_main_container).getHeight();
switch (view.getId()) {
case R.id.news_article_menu_button:
mOptionsMenuHelper.showMenu(view.getBottom() + actionBarHeight, Gravity.RIGHT);
break;
case R.id.text_size:
mTextSize = TextSize.values()[(mTextSize.ordinal() + 1) % TextSize.values().length];
updateFontSize();
break;
default:
throw new IllegalArgumentException("Invalid view Id" + view.getId());
}
}
private void setOnclickListeners(final View view){
final ImageButton button = (ImageButton) view.findViewById(R.id.menu_button);
button.setOnClickListener(this);
}
private void createMenus() {
mPreferenceMenuItems.add(PreferenceMenuItems.MENU_PREFERENCES);
mPreferencesMenuHelper = new MenuHelper(getActivity(), mPreferenceMenuItems,this);
mDeleteMenuItems.add(DeleteMenuItems.DELETE_PREFERENCES);
mDeleteMenuHelper = new MenuHelper(getActivity(), mDeleteMenuItems,this);
}
This is the corresponding button "over_btn" where the selector is defined:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_enabled="false"
android:drawable="#drawable/over_pressed" />
<item
android:state_pressed="true"
android:state_enabled="true"
android:drawable="#drawable/over_pressed" />
<item
android:state_focused="true"
android:state_enabled="true"
android:drawable="#drawable/over_pressed" />
<item
android:state_enabled="true"
android:drawable="#drawable/over" />
</selector>
and this is one of the corresponding xml files using the same fragment_test:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_alignParentTop="true"
android:clickable="true"
android:background="#color/background_bar" >
<ImageButton
android:id="#+id/menu_button"
android:layout_width="49dp"
android:layout_height="48.5dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:background="#android:color/transparent"
android:gravity="right"
android:paddingRight="14dp"
android:src="#drawable/over_btn" />
</RelativeLayout>
I want the button to switch to a different image onclick and stay in that state till pressed again instead of highlighting once when pressed, is there any way to go about this?
Thanks!
Justin

add
<item
android:state_selected="true"
android:drawable="#drawable/info_selected" />
to your selector and when you click on the ImageButton, call view.setSelected(!view.isSelected()) to switch between status selected and unselected
public void onClick(final View view) {
switch (view.getId()) {
case R.id.imageButtonId:
view.setSelected(!view.isSelected());
break;
}
}

You should be able to do this with an onClick listener as show in this post.
//these are instance variables
private ImageButton button = null;
private boolean imageSwitched = false;
//call this method in your onActivityCreated() method. If the
//layout containing the button is not yet inflated you will not
//be able to find your image button.
private void initializeButton(){
button= (ImageButton)getActivity().findViewById(R.id.imgButton);
button.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
if(!imageSwitched){
button.setBackgroundResource(R.drawable.a);
imageSwitched = true;
} else {
buttons.setBackgroundResource(R.drawable.b);
imageSwitched = false;
}
}
});
}
To switch beteen 2 views you will need to use some state variable. I chose a boolean thats set on click to handle which image is swiched to on click.
Also if you don't want to use a listener you can set your button to have an onClick method in XML and use the same state handling idea
public void buttonSwitch(View v){
//state handling here
}
This way the method is called only when click and does not use the overhead of a listener.