Android view class - drawing View over button - background vs foreground? - android

I'm drawing an ImageView (a 50% transparent icon) over an ImageButton, but the icon disappears when I click the ImageButton (an Activity transition gets triggered at this moment). That looks pretty awful...
What is the best approach to do this, without actually putting the icon into the src-File of the ImageButton? Is there a way to do it with setting drawables as background or foreground? And what exactly are those two properties for? I can't find any documentation about android:foreground...
BTW: I'm using the new Lollipop shared element transition and testing on a nexus 9.
<Relative Layout...>
<ImageButton
android:id="#+id/imageView1"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_width="400dp"
android:layout_height="250dp"
android:src="#drawable/call1"
android:foreground="#drawable/phone" <!-- Does this make any sense?-->
android:transitionName="#string/trans_call_pic"
android:onClick="clickCall"
/>
<ImageView
android:id="#+id/imageButton1"
android:layout_width="150dp"
android:layout_height="150dp"
android:src="#drawable/phone"
android:layout_alignBottom="#id/imageView1"
android:alpha="0.5"
android:layout_marginLeft="14dp"
/>
</RelativeLayout

The android:foreground attribute is for a foreground selector (added to a FrameLayout). It's not intended to simply draw an image.
One solution would be to wrap the button & the image in a container view and put your transition on the container. This way the two child views would be treated as one.

Try adding a foreground selector to your view. You can extend ImageButton, override onDraw(), and draw the foreground selector after calling super.onDraw(). This will ensure that the foreground selector is drawn on top of the entire ImageButton. More detailed instructions can be found here.

Related

ImageView overlaps BottomBar but it doesn't get displayed

I'm using a library named AHBottomNavigation and what I want to achieve in my layout is add an ImageView on top of the bottom bar.
So I wrapped the bottomBar inside a FrameLayout and added an ImageView :
<FrameLayout
android:layout_width="match_parent" android:layout_height="wrap_content">
<com.aurelhubert.ahbottomnavigation.AHBottomNavigation
android:id="#+id/bb_bottom_bar_navigation"
android:layout_width="match_parent" android:layout_height="wrap_content"/>
<ImageView
android:src="#drawable/icon"
android:layout_gravity="center" android:contentDescription="Take Photo"
android:layout_width="32dp" android:layout_height="32dp" />
</FrameLayout>
and while it seems to work (and I can confirm that on three devices I have already tested I can see the image) when I test it on devices that run android 5.0 or later the image is not there!
I have tried different pngs, adding background color to the ImageView but still no result.
If I use uiautomatorView I can see the View is in the position I want it and takes the space I have already defined in the xml.
Obviously there's something that intercepts the view from drawing, but I don;t know such a mechanism on android. I tried digging through the code of the library but don't knowing what I'm searching for didn't help.
Any ideas ? (cause I'm out of ideas)

Make borderless image button small on Android

There is some closeable view in my app and it has a close button in header. I want make this button borderless and small.The code:
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="?android:attr/borderlessButtonStyle"
android:layout_margin="0dp"
android:padding="0dp"
android:src="#android:drawable/ic_menu_close_clear_cancel"/>
In result the button is borderless but has much empty place around cross image (button is hitted on screenshot to make empty space visible)
How could I fix it?
You should use:
android:background="?selectableItemBackgroundBorderless"
Added
android:minHeight="0dp"
android:minWidth="0dp"
android:padding="2dp"
The result
Also I'll use negative margins to place the button closer to corner.
You can use the following on your ImageButton to remove the 'border':
android:background="#android:color/transparent"
or
android:background="#null"
If you would like change the background when the user clicks the button you can create a selector. Example ImageButton doesn't highlight on click with Transparent background.
With the introduction of ConstraintLayout, you can use constraints to reduce the width of the borderless ImageButton, that's way too wide by default, by constraining it to be as wide as the height:
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/my_closeable_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton
style="?android:attr/borderlessButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:contentDescription="#string/action_close"
android:src="#android:drawable/ic_menu_close_clear_cancel"
app:layout_constraintDimensionRatio="w,1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
I don't recommend you to make it any smaller than this because the touch target needs to be at least 48dp x 48dp, as for Google's Material Design guidelines, otherwise a user would have a hard time trying to touch it.
If you really need it to look like it's closer to the edges of the view, you can always use an image that's not centered (has transparent padding on one or two sides), but I'd try my best to avoid doing this workaround and try rethinking my app's design in order to accommodate the button as it is.
use textView for that..
and use textview.OnTouchListener
finally onTouch change the color of text.. thats it
or else in your code just use
android:background="#null"

How can I stretch the image in imagebutton to the whole area of the imagebutton?

Here is a picture that will help you understand my problem:
I want to stretch the image shown inside ImageButton to the whole area of the ImageButton.
As you can see, the picture with the number 1 only take about 95% of the ImageButton and you can also see the boundaries of the ImageButton.
I still want to maintain the image button style
Here's how I am using ImageView:
<ImageButton
android:id="#+id/secondActivityBbuttonDownRight"
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:scaleType="fitStart"
android:src="#drawable/111" />
I think I found out what is my problem.
I need a custom component that can contain only an image and have a clicking effect.
ImageButton is ImageView.
If you want your image to fill button
than set android:scaleType="fitXY", so the image you set in android:src will be stretched to fill whole image button.
ImageButton has a background under your image and padding.
If you do not want background
set android:background="#android:color/transparent".
If you do not want padding
set android:padding="0" or set background without padding.
You can also use
android:scaleType="centerCrop"
android:padding="0dp"
android:scaleType="fitXY" tested and works correctly.
Use below code :-
<ImageButton
android:id="#+id/secondActivityBbuttonDownRight"
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:scaleType="fitStart"
android:background="#drawable/111" />
You should consider creating a 9-patch image to make the image fit correctly on an ImageButton in case you need to stretch it, but you don't want the image to become distorted.
To have a button with an image that completely covers it, you can use something like this:
<ImageButton android:id="#+id/iconBtn"
android:layout_width="64dip"
android:layout_height="64dip"
android:src="#drawable/icon_button"
android:scaleType="fitCenter"
android:background="#00000000"/>
For a full tutorial on creating buttons with custom skins and the use of selectors to manage their states, you can check a tutorial I've written some time ago here (Creating a custom Android button with a resizable skin).
If your image "111" has no padding itself then simply use android:background"#drawable/111"
Just set this two attributes on the ImageButton:
android:background="?attr/selectableItemBackgroundBorderless"
android:scaleType="centerCrop"
With those, you will get the provided src to be stretched, and also if you put some specific width and height on that ImageButton you won't get a rectangle around it.

Set clickable areas over a background image

I'm developing an Android 2.3.3 application that will work on mobile and tablet devices.
I have a main view with a background image. This image has buttons and other texts and I want to make a clickable area over those buttons. They are not real buttons, those buttons are part of the background image.
How can I do that?
Maybe I can use an ImageButton without image because I don't know how to set a button transparent.
You can use a Framelayout as the click area and just use ImageView as an indicator.
For example :
<FrameLayout
android:id="#+id/play_button_frame"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#drawable/button_frame_colors">
<ImageView
android:id="#+id/play_button_indicator"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:src="#drawable/button_indicator"
android:background="#android:color/transparent"/>
</FrameLayout>
create your custom ImageView, define regions (rects or coordinates) and listen for onTouch events and iterate trough your list when touch event occurs and react if user has touched a defined region
You can also place a layout with no background. It will work for sure as you want.

Android Image Control

I have a big problem. I want to create a control for android in which the user sees an image and over lapping this image are smaller icons/image which are positioned relative to background image.
The smaller icons can be selected.
I really do not know how to go about it.
You could do this by having a clean image as background, like this:
and then you could have TextViews within a RelativeLayout with the names for example, and on every textView you can set the attribute clickable to your method.
Something like this:
<TextView
android:id="#+id/nevada"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/Oregon"
android:layout_marginRight="50dp"
android:layout_marginTop="21dp"
android:layout_toLeftOf="#+id/Cali"
android:clickable="true"
android:onClick="showState"
android:text="#string/Nevada"
android:textColor="#color/contact_map_text_color" />
and on your activity/fragment you will have your method that will be called by the View, in the example case: "showState"
Edit: its probably not the best approach but it certainly works

Categories

Resources