How to create an ImageButton with an overlayed image? - android

I have a button that starts out as a placeholder, but once the user authenticates, it changes to a custom image for that user.
<ImageButton android:id="#+id/button"
android:background="#null"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/button_default"/>
And then later:
ImageButton ib = (ImageButton)findViewById(R.id.button);
ib.setImageBitmap(previouslyDecodedBitmap);
But this looks terrible. I can't figure out how to style it properly so that the newly decoded bitmap is the right size and behaves like an ImageButton. I suspect there is some combination of widgets I can use other than ImageButton to achieve this? I was hoping I could just nest an ImageView on top of the ImageButton by adding it as a child to ImageButton, but that doesn't seem to be allowed (it is in Silverlight...).
Anyway, any suggestions on how to properly do this are welcome. Thanks.

One way would be to use frame layout and place buttons and image one over the other , top being imageview , keep it invisible (android:visibility = "invisible")
On clicking the button and authenticating , make it visible over the button or else even you can hide the button below and show only image on top.

Related

ConstraintLayout Notification Badge

Regarding ConstraintLayout Notification Badge
I have used ConstraintLayout for notification as shown below.
here i used ImageButton and textview
out put:
here i used Button and textview
output :
insted of imageview is used button then it look like this.
can any help me to solve this in constraintLayout.
ex :
when i tryed with button it displaying like this .
one more new thing i got to know if you are using FrameLayout or RelativeLayout display badge is working fine for both Button , ImageView or ImageButtom.
But on long-press or click of Button Notification badge is going back , in Imageview and imagebutton it working fine.
This happens, because Button has its own elevation.
Higher elevation, gets views to the front.
Try adding higher elevation to your Badge like below.
android:elevation="10dp"
And, you don't want to scale your Image, you must use ImageView or ImageButton.
Use this style="?android:attr/borderlessButtonStyle" in the Button xml
<Button
style="?android:attr/borderlessButtonStyle"
android:background="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
Final i got the solution for the above question
1 : for Button
android:elevation will not effect beacuse internal it has elevation.
instead of elevation use android:stateListAnimator="#null"
2 : for other then button elevation will work

How to bring an image to front?

I'm translating an image from somewhere to another, and where it goes there is a button. But i want it to be unclickable when the image's over it! It's not seen but still can be clicked! How can i bring the image to front, so the button will not be worked? Thanks in advance.
Implement setAnimationListener in your translate animation and in onAnimationStart(Animation animation) put your bringToFront() method. It does work for me.
Try this:
Button btn = (Button)findViewById(R.id.my_btn);
btn.setEnabled(false);
I think it could help if you make that the ImageView clickable.
This could be achieved by:
Setting the clickable attribute (http://developer.android.com/reference/android/view/View.html#attr_android:clickable) to true in the layout XML
Invoking setClickable(true) (http://developer.android.com/reference/android/view/View.html#setClickable%28boolean%29) on the ImageView object in your code
Change the order of your xml file. The Views that are listed first will be behind the Views that are listed after them.
<ImageView android:id="#+id/iv01"/>
<Button android:id="#+id/btn01"/>
In the code above the button will be placed on top of the ImageView.
<Button android:id="#+id/btn01"/>
<ImageView android:id="#+id/iv01"/>
In the code above the ImageView will be placed on top of the Button.
You can also hide the Button from the layout in your .java (Activity) file.
Button btn = findViewById(R.id.btn01);
btn.setVisibility(View.GONE);
Also you can set the Butt

How do I layout a button bar with buttons of different heights?

How do I go about implementing a button bar with buttons of different shapes and heights? As an example (please excuse my poor drawing skills for this quick mockup):
The example bar has 3 buttons, with the middle button (3) a different shape and height than the other 2 buttons (1,2). The button bar will be a view that is included and merged into other views so as to seem to float on top of the parent view.
I was thinking of implementing buttons 1 and 2 into a layout, and then button 3 as another layout that I then merge with the first two button's layout.
like my previous comrades said, you need some kind of layout or container that can have a background (if you wish for button #3 to hoover above it) then use relative layout for mixing the two the disadvantage of this other than complexity is that youcannot relate to the other two buttons since they reside in a different layout.
More elegant solution may be to have a special background drawable that can:
have a method setCurrentHeight() that will specify the height the actual viewable section should have the rest will be filled with transparent color.
override it's own draw so just before it's drawing it will have a callback called, call back you can register yourself to.
then you can register the callback in your activity to take the current position of the #3 button and set the height accordingly, this way you are still with one layout with special drawable as background.
A customized LevelDrawable might do the trick.
I would layout this bar as follows:
A RelativeLayout as a container for the rest, with height set to wrap_content and alignparentbottom = true
An ImageView for the bar
2 Buttons with a transparent background (Button 1 and 2)
Button 3 is a custom Button with a custom Image of a trapezoid as background
So you will have a Layout similar to this:
<RelativeLayout
...>
<ImageView
.../>
<Button
... Button 1 />
<Button
... Button 2 />
<Button
... Button 3 />
</RelativeLayout>
I don't exactly know that this will work, and I can't test it, but you might give something like this a try; I believe it can all be done elegantly through XML.
Have a RelativeLayout (id:mainLayout) that will contain all of your views, wrap_content for both dimensions.
Have a blank View as your first child that will serve as your background bar
Set the View's background color/image to what you want; layout_width to fill_parent; layout_height to wrap_content; layout_alignTop="#id/leftButton"; layout_alignBottom="#id/leftButton".
Add an ImageButton for your center button (id:bigButton), wrap_content for both dimensions; layout_centerInParent="true".
Add an ImageButton for your left button (id:leftButton), wrap_content for both dimensions; layout_toLeftOf="#id/bigButton"; layout_centerInParent="true".
Add an ImageButton for your right button (id:rightButton), wrap_content for both dimensions; layout_toRightOf="#id/bigButton"; layout_centerInParent="true".
In my head, I believe this works, but I could be off. Regardless, something to think about, and I hope it helps you find a solution. :)
Better you can tablelayout with different button styles or relative layout for button "3"

Can I hide an image button on a layout, (dimensions and background) until a call to set visible?

I have a hidden image button in one of my xmls layouts, with a background set to a drawable image. I set the visibility to invisible, as I only want the image to display every once in a while. The problem is, even if the drawable isn't shown, the image button still takes us space - Is there a way to hide the background image, and make it's dimensions 0 until I call on it to be shown in my main class?
Thanks!
Edit: So in my xml, how would I write that?
<ImageButton android:id="#+id/myimage" android:visibility="invisible"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="center" android:background="#drawable/my_image"></ImageButton>
I want to have the image always gone, unless a certain condition occurs, I then want the image to be visible under that one condition. So in my xml I would need to be set to GONE, but in my conditional statement so I say something like:
myimage.setVisibility(SHOW);?
Try setting the visibility to GONE
Don't set the width/height to zero, that's ugly. The view will always take up the space, unless you change the visibility setting. This is the code you want:
myImageButton.setVisibility(View.GONE);
View.GONE - invisible, takes up no space
View.INVISIBLE - invisible, but still takes up space
View.VISIBLE - use this to bring it back
All views, including ImageButton, inherit from android.view.View, so they all have a visibility attribute that can be set. Instead of setting the visibility of the drawable resource, set it on the ImageButton.
Set Visibility property of Imageview like this in java
imgView.setVisibility(View.VISIBLE);
imgView.setVisibility(View.INVISIBLE);
imgView.setVisibility(View.GONE);
Or like this in XML
android:visibility="visible"
android:visibility="gone"
android:visibility="invisible"
Result for each will be like this

Displaying popup images on button click

Please refer the image given in the url
http://docs.google.com/Doc?docid=0AQhgDtGvE2HgZGZ6cmtua185M2RneG5nYmNm&hl=en
My query is, How can I display the messages corresponding to the rounded buttons and the table row , when I click on the rounded button with question mark.
I know, I have to use listener for the ? button , but what should I do in listener exactly, such that when I click, it shows those alerts(images) and when I click again, it disappears.
For this UI, I have used Relative layout as was suggested here -- Aligning components at desired positions -- and it worked perfect for me.
So, do I need to change my base layout altogether for accomplishing this?
You can use a FrameLayout as the base for your ui layout and then add an ImageView overlay. For example:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/MainFrame"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<!-- Put your normal layout stuff here -->
</FrameLayout>
Then in your code you can create the ImageView and add it to the MainFrame and it will overlay your UI, like this:
FrameLayout mainFrame = (FrameLayout)findViewById(R.id.MainFrame);
ImageView overlay = new ImageView(this);
overlay.setImageBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.overlay));
mainFrame.addView(overlay);
Then later you can call:
mainFrame.removeView(overlay);
to have it go away.

Categories

Resources