I'm creating a Soundboard app which uses buttons currently to make different sounds. However I want to change the buttons to image buttons, having tried this I get the following error:
Unexpected Cast to ImageButton: Layout tag was imageView.
I've tried looking around the internet but can't find a fix. The code in the java class looks like this.
public class SecondActivity extends AppCompatActivity {
Button b,b2;
MediaPlayer nice,burp,fancy;
ImageButton IMG;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_second);
b = (Button) findViewById(R.id.button);
b2 = (Button) findViewById(R.id.button3);
nice = MediaPlayer.create(this, R.raw.nice);
burp = MediaPlayer.create(this, R.raw.burp);
fancy = MediaPlayer.create(this, R.raw.fancy);
configureImageButton();
b.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
nice.start();
}
}
);
b2.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
fancy.start();
}
}
);
}
private void configureImageButton() {
ImageButton IMG = (ImageButton) findViewById(R.id.IMG);
IMG.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
burp.start();
}
}
);
}
The XML code looks like this:
<?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: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.example.oliver.olliessoundofmusic.MainActivity">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nice"
android:id="#+id/button"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Fancy"
android:id="#+id/button3"
android:layout_alignTop="#+id/button"
android:layout_toEndOf="#+id/button" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/IMG"
android:background="#drawable/robert"
android:layout_toEndOf="#+id/button3" />
</RelativeLayout>
I just want imageButtons to work with action listeners the same way a normal button would, to make the app more visually appealing.
Thanks in advance.
In your xml change ImageView tag to ImageButton
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nice"
android:id="#+id/button"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Fancy"
android:id="#+id/button3"
android:layout_alignTop="#+id/button"
android:layout_toEndOf="#+id/button" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/IMG"
android:background="#android:color/transparent"
android:src="#drawable/robert"
android:layout_toEndOf="#+id/button3" />
Please notice that I made the background to a transparent color, and made the drawable to be in src property
Cast this to an ImageView instead, then since that is what you have in the XML
ImageButton IMG = (ImageButton) findViewById(R.id.IMG);
The OnClickListener will still work as expected.
Also, beware of variable shadowing. You'd want line this instead.
IMG = (ImageButton) findViewById(R.id.IMG);
Declare IMG as ImageView in you activity or use imagebutton widget in the layout file.
Related
i want to make a button in another button ,
for example :
we have 2 buttons : 1.imageButton (100 * 50)dp , 2.button (100 * 100)dp
so my question is how can i put my imageButton inside my button ?
You can use RelativeLayout and just put second ImageButton over first ImageButton.
Update
Or You can use magrin in LinearLayour, for example:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentTop="true" />
<ImageButton
android:layout_marginLeft="-100dp"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_alignParentTop="true" />
</LinearLayout>
Hope this may help you..
You should use Frame Layout for this.
In XML file , do like this
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button"
android:layout_width="100dp"
android:layout_height="100dp" />
<ImageButton
android:id="#+id/imagebutton"
android:layout_width="100dp"
android:layout_height="50dp"
android:src="#drawable/buttonsample"/>
</FrameLayout>
And now in java file, declare the instance of Button and ImageButton
ImageButton imagebutton;
Button button;
In onCreate() function of java class, do....
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
imagebutton = (ImageButton)findViewById(R.id.imagebutton);
button = (Button)findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
//do your stuff
}
});
imagebutton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
//do your stuff
}
});
}
Set z-elevation property if you want the buttons to overlap and both needs to be visibile. android:elevation="2dp"
I am developing a simple game and in an activity I have 2 image buttons:
<ImageButton
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/desc"
android:src="#drawable/img1"
android:onClick="btn1_click" />
<ImageButton
android:id="#+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/desc"
android:src="#drawable/img2"
android:onClick="btn2_click" />
And I am showing some animations when buttons are clicked:
public void btn1_click(View v) {
v.startAnimation(animLeftTranslate);
}
public void btn2_click(View v) {
v.startAnimation(animRightTranslate);
}
Of course, only the clicked button is being animated but what I want to do is to show animation for both two buttons when one of them are clicked. How can I do this?
Instead of using android:onClick, you can do it in java code:
ImageButton btn1 = (ImageButton) findViewById(R.id.bt1);
ImageButton btn2 = (ImageButton) findViewById(R.id.bt2);
View.OnClickListener listener = new View.OnClickListener() {
#Override
public void onClick(View v) {
btn1.startAnimation(animRightTranslate);
btn2.startAnimation(animRightTranslate);
}
};
btn1.setOnClickListener(listener);
btn2.setOnClickListener(listener);`
`
You can accomplish this by your own approach i.e. using android:onClick attribute:
Assign one function to both ImageButton for example btns_clicked(). So add android:onClick='btns_clicked' to both your buttons. And in that function write:
public void btns_clicked(View v) {
View btn1 = findViewById(R.id.btn1);
View btn2 = findViewById(R.id.btn2);
btn1.startAnimation(animLeftTranslate);
btn2.startAnimation(animRightTranslate);
}
you can do this as describe below.
<ImageButton
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/desc"
android:src="#drawable/img1"
android:onClick="btn_click" />
<ImageButton
android:id="#+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/desc"
android:src="#drawable/img2"
android:onClick="btn_click" />
and in activity, you have to use
public void btn_click(View v) {
if(v.getId() == R.id.btn1)
v.startAnimation(animLeftTranslate);
else if(v.getId() == R.id.btn2)
v.startAnimation(animRightTranslate);
}
I'm making a program that change the color of the background, for example, when I press white, change background to white, black to black, and so on... and after have pressed a button the others disappear and I have already done that but what I want to do is that each tap on the Textview the buttons appear/disappear. how can I do this?
this is my code
LinearLayout myLayout;
LinearLayout myLayout2;
// Declare UI elements
private Button firstButton;
private Button secondButton, thirdButton;
// private ImageView changeBackground;
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
myLayout = (LinearLayout) findViewById(R.id.myLayout);
myLayout2 = (LinearLayout) findViewById(R.id.myLayout2);
// Initialize the UI components
firstButton = (Button) findViewById(R.id.button1);
// When we creating a button and if we expect that to use for event handling we have to set the listener
firstButton.setOnClickListener(this);
secondButton = (Button) findViewById(R.id.button2);
secondButton.setOnClickListener(this);
thirdButton = (Button) findViewById(R.id.button3);
thirdButton.setOnClickListener(this);
}
#Override
public void onClick(View v) { // Parameter v stands for the view that was clicked.
switch(v.getId()) {
case R.id.button1:
myLayout.setBackgroundColor(Color.WHITE);
myLayout2.setVisibility(View.INVISIBLE);
break;
case R.id.button2:
myLayout.setBackgroundColor(Color.BLACK);
myLayout2.setVisibility(View.INVISIBLE);
break;
case R.id.button3:
myLayout.setBackgroundColor(Color.RED);
myLayout2.setVisibility(View.INVISIBLE);
break;
}
}
the xml
<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"
android:background="#A9F5F2"
android:id="#+id/myLayout"
tools:context=".MainActivity" >
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/hello_world" />
<LinearLayout
android:id="#+id/myLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#D8D8D8"
android:orientation="horizontal"
android:gravity="center"
tools:context=".MainActivity" >
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/white" />
<Button
android:id="#+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button1"
android:layout_alignBottom="#+id/button1"
android:layout_toRightOf="#+id/button1"
android:text="#string/black" />
<Button
android:id="#+id/button3"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button2"
android:layout_alignBottom="#+id/button2"
android:layout_toRightOf="#+id/button2"
android:text="#string/red" />
</LinearLayout>
</LinearLayout>
Try this
myLayout.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v){
myLayout2.setVisibility(View.VISIBLE);
}
});
and change this:
myLayout2.setVisibility(View.INVISIBLE);
to:
myLayout2.setVisibility(View.GONE);
Just to explain why you need to use GONE instead of INVISIBLE, if you set the visibility to INVISIBLE the object will continue to alter to exist in the screen, you just can't see the object... and when you use GONE the object doesn't exist on the screen but exist in the app instance.
If you want your button to disappear with all his characteristics use :
myLayout2.setVisibility(View.GONE);
instead of
myLayout2.setVisibility(View.INVISIBLE);
INVISIBLE:
This view is invisible, but it still takes up space for layout purposes.
GONE:
This view is invisible, and it doesn't take any space for layout purposes.
I have an app, which shows toast below the actionbar. I'm using Crouton library for displaying toast. Here I'm placing custom layout for toast, that layout contains one textview and one button (for close option). So Toast appears with button. If I click that it should close the toast but nothing happens.. Below Code for this example. Any Help Appreciated
MainActivity.java
public class MainActivity extends SherlockActivity implements OnClickListener {
private View customToastView;
private TextView customToastMessageView;
private Button customToastCloseButton;
private Button doneButton;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
doneButton = (Button) findViewById(R.id.done_button);
customToastView = getLayoutInflater().inflate(R.layout.toast_custom_layout, null);
customToastMessageView = (TextView) customToastView.findViewById(R.id.messages);
customToastCloseButton = (Button) customToastView.findViewById(R.id.close_button);
customToastCloseButton.setOnClickListener(this);
doneButton.setOnClickListener(this);
}
#Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.done_button:
Crouton.cancelAllCroutons();
customToastMessageView.setText("Message");
Crouton.show(this, customToastView);
break;
case R.id.close_button:
Crouton.cancelAllCroutons();
break;
}
}
}
toast_custom_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/messages"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="26dp"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="#+id/close_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="23dp"
android:text="Button" />
</RelativeLayout>
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<Button
android:id="#+id/done_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="146dp"
android:text="Button" />
</RelativeLayout>
Im new to android..please guide me..
I want to set image to act as button..
How to implement this in xml and in class file?
I now the code to set button in xml and class file like this..
<Button
android:id="#+id/nxt_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/rdtxt"
android:layout_marginRight="22dp"
android:layout_marginTop="34dp"
android:text="Next" />
Button nextBtn = (Button) findViewById(R.id.nxt_btn);
I want practice.png this image want to act as button..I have put this image into drawables..
Now how to implement this by code...please guide me...
Thank a lot...
In xml you can add:
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/image" />
And in Activity:
ImageView image = (ImageView) findViewById(R.id.image);
image.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View arg0) {
//Do your stuff here
}
});
In a xml file:-
<Button
android:id="#+id/nxt_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/rdtxt"
android:layout_marginRight="22dp"
android:background="#drawable/practice"
android:layout_marginTop="34dp" />
or
In a Activity :-
Button nextBtn = (Button) findViewById(R.id.nxt_btn);
nextBtn.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View arg0) {
//Do your stuff here
}
});
Use ImageButton. You can set an image to it using android:src="#drawable/myImage" and you can set OnClickListener to it.
For example :
<ImageButton
android:id="#+id/nxt_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/rdtxt"
android:layout_marginRight="22dp"
android:layout_marginTop="34dp"
android:src="#drawable/next_btn_img" />
ImageButton next = (ImageButton) findViewById(R.id.nxt_btn);