Alpha applied to floating action button creates weird circle? - android

In my app I am using a material design floating action button. Whenever I change the backgroundTintColor property of the button to something with an alpha below 255, it creates this strange circle within the button. I have provided a picture of the button below with my xml code... Any help would be greatly appreciated.
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right|end"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="55dp"
android:layout_height="55dp"
android:clickable="true"
android:layout_margin="12dp"
android:src="#drawable/ic_play"
app:backgroundTint="#64a9a9a9"
android:layout_gravity="center"
/>
</FrameLayout>

Its most likely because background is used to create shadow or elevation and src to show the main content of fab but you are changing it take a look at this source code of fab https://android.googlesource.com/platform/frameworks/support/+/master/design/src/android/support/design/widget/FloatingActionButton.java?autodive=0%2F%2F

Related

FloatingActionButton remove press animation

I'm working on a camera app that simply takes pictures. I've decided to go with a FloatingActionButton anchored to a bottom app bar for the camera capture action. Everything works great, however I'm having a bit of difficulty with the FloatingActionButton itself. When I press and hold the button there is a shadow with a hexagon that appears. I don't want this animation at all. How do I remove this?
Here are images of the exact problem: The Issue
Here is the code:
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/capture_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#android:color/transparent"
android:clickable="true"
android:contentDescription="#string/shutter"
android:focusable="true"
android:soundEffectsEnabled="true"
android:tint="#color/white"
app:backgroundTint="#color/white"
app:borderWidth="3dp"
app:elevation="0dp"
app:fabCustomSize="90dp"
app:rippleColor="#null"
android:scaleType="fitXY"
app:layout_anchor="#id/bottom_app_bar" />
You can try to set a background or stateListAnimator="#null"

Floating action button always displays on top

I am trying to show textview on the top of Floating Action Button. Inside FrameLayout, I have 1 FAB and 1 TextView:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|start"
android:padding="#dimen/fab_margin">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabAddSeller"
android:layout_width="70dp"
android:layout_height="70dp"
app:backgroundTint="#3780f4"
android:stateListAnimator="#null"/>
<TextView
android:id="#+id/tvSellRecordCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/sell_record_counter"
android:layout_gravity="top|end"
android:text="12"
android:textColor="#FFFFFF"
android:textSize="10sp" />
</FrameLayout>
According to this answer, I have added
android:stateListAnimator="#null"
to FAB - no difference. I have put TextView after FAB - no effect.
How to show another view on top of FloatingActionButton?
In Android Studio, I could fix after adding an elevation to the text view:
android:elevation="6dp"
It seems that FAB has 5dp of elevation.
However, I'm not sure if this totally works to you since elevation is available for API>=21.
Try to make some tests in real devices...
Maybe, android:stateListAnimator="#null" is enough in real devices/emulator.
UPDATE
After adding app:elevation, this fix started to work with older APIs as well
app:elevation="6dp"
android:elevation="6dp"
Replace FrameLayout with RelativeLayout and add
<android.support.design.widget.FloatingActionButton
...
android:layout_below="#+id/tvSellRecordCount"
...
/>

ImageView icon missing when setBackgroundColor is called

The image I'm setting in the app is disappearing. Here is the layout XML file:
<TextView
android:id="#id/txt_colorText2"
android:layout_width="wrap_content"
android:layout_height="30.0dip"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#id/txt_colorText1"
android:text="#string/str_textColor2"
android:textColor="#0077dd"
android:textSize="18sp" />
<ImageView
android:id="#id/img_imgColorPreview"
android:layout_width="wrap_content"
android:layout_height="30.0dip"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#id/txt_colorText2"
android:background="#drawable/ic_launcher"
android:contentDescription="#string/str_imgColor" />
And here's the code. I do this in onTouch() method:
imgView_ImagePreview.setBackgroundColor(rgbCode);
Initially when the activity is started, ic_launcher icon is shown to the right of txt_colorText2. However on touching any part of the image, there is no content shown to the right of txt_colorText2.
I've debugged quite a lot, and haven't found the root cause. Any help is greatly appreciated.
By changing background color, you are changing the background itself. in the xml instead of setting background, set src to achieve what you want.
<ImageView
android:id="#id/img_imgColorPreview"
android:layout_width="wrap_content"
android:layout_height="30.0dip"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#id/txt_colorText2"
android:src="#drawable/ic_launcher"
android:contentDescription="#string/str_imgColor" />

Positioning a progress bar behind a button

I have a Button that is defined in a RelativeLayout as follows:
<Button
android:id="#+id/search_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/current_location"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:paddingBottom="30dp"
android:paddingTop="30dp"
android:text="#string/search" />
I would like to add a ProgressBar behind the Button that occupies the exact same space as the Button, so that when the button is disabled (translucent), you can see the progress bar behind it. How would I do this?
To do this I had to define the button in my main.xml first, followed by the progress bar as follows:
<Button
android:id="#+id/search_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/current_location"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:paddingBottom="30dp"
android:paddingTop="30dp"
android:text="#string/search" />
<ProgressBar
android:id="#+id/cooldown_bar"
style="#android:style/Widget.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/search_button"
android:layout_below="#id/current_location"
android:layout_marginBottom="6dp"
android:layout_marginLeft="9dp"
android:layout_marginRight="9dp"
android:layout_marginTop="1dp"
android:indeterminate="false"
android:progressDrawable="#drawable/progress_bar" />
Then, once I had initialized all the GUI components, I had to bring the button back in front of the progress bar with:
searchButton.bringToFront();
The end result
Button when enabled:
Button when disabled with progress bar:
put this right before the button inside the relative layout in your xml:
<ProgressBar
android:id="#+id/descriptive_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/current_location"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:paddingBottom="30dp"
android:paddingTop="30dp"
/>
by using all of the same layotu and padding attributes we can make sure the View will be in the same spot and roughly the same size (height could be different because of wrap_content) I think if you put the progress bar first in the layout file then the button should appear on top.
But also you can enforce whatever policy you want with view.setVisibility(visibility-ness)just make sure whenever you make one visible you make the other invisible.
that way in-case I am wrong about how they stack by default based on their position in the file (which I could be, I didn't verify it just now) and in the event you don't want to move the progress bar to bellow the button in the file, you could still achieve the same thing from the users perspective.

Transparent button bars found in Android Gallery App

I am trying to add a transparent button bars at the top and bottom of my activity, much like in the Android Gallery App.
I have been looking through the Gallery app source code, but I'm not able to see how they did it. When using some snippits of their code, I am able to produce a button bar, but it is a dark grey color with lighter grey buttons:
<LinearLayout android:id="#+id/gridView_multiSelectBar"
android:orientation="horizontal" android:visibility="gone"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:layout_weight="0" android:clickable="false"
android:paddingTop="5dp" android:paddingLeft="4dp"
android:paddingRight="4dp" android:paddingBottom="1dp"
android:background="#android:drawable/bottom_bar"
android:layout_alignParentBottom="true">
<Button android:id="#+id/gridView_multiSelectBar_button_share"
android:layout_width="0dp" android:layout_height="match_parent"
android:layout_weight="1" android:text="#string/gridView_multiSelectBar_button_share" />
<Button android:id="#+id/gridView_multiSelectBar_button_copy"
android:layout_width="0dp" android:layout_height="match_parent"
android:layout_weight="1" android:text="#string/gridView_multiSelectBar_button_copy" />
<Button android:id="#+id/gridView_multiSelectBar_button_delete"
android:layout_width="0dp" android:layout_height="match_parent"
android:layout_weight="1" android:text="#string/gridView_multiSelectBar_button_delete" />
<Button android:id="#+id/gridView_multiSelectBar_button_close"
android:layout_width="0dp" android:layout_height="match_parent"
android:layout_weight="1" android:text="#string/gridView_multiSelectBar_button_close" />
</LinearLayout>
The code implies that they are using Button widgets. The screenshot below almost looks like its using a menu for the bottom, but then I'm not sure how they are drawing the top area.
My app has a black background. I would like these buttons to a thin border to show the boundaries between them, as well as the main content.
Can anyone can point me in the right direction?
Thanks in advance,
Kevin
A similar question was asked and answered in
How to Set Opacity (Alpha) for View in Android.
It is a matter of setting the alpha content of your view. Hope that helps you.
Cheers!!!
nJoshi

Categories

Resources