FAB - square on pre Lollipop and without shadow on Lollipop - android

It looks like FloatingActionButton is not working ether on Android 4.0 and Lollipop. As you can see on image below, on Android Lollipopo shadow is missing and on Android 4.1.1 it's square :/
Anyone faced this issue?
Library version:
compile 'com.android.support:design:22.2.0'
Code:
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/abc_ic_clear_mtrl_alpha"/>

Thanks to #harism comment, simply setting app:borderWidth="0dp" resolve both issues.
Note: don't forget to add xmlns:app="http://schemas.android.com/apk/res-auto" to your root layout.

If the FAB still appears as square after setting borderWidth to 0dp, make sure that you aren't setting android:background in your XML or calling setBackgroundColor in code.
You should use android:backgroundTint (XML) or setSupportBackgroundTintList (code)

#Raghunandan, I have same problem on Lollipop also.
Finally I find that the root cause is a drawable named "fab_background" in my drawable folder.
The drawable is previously used for my own fab implementation.
Now I can see round fab after I rename this drawable.

Setting
app:borderWidth="0dp"
works. But if you are getting rendering issues in Android studio and have the Renderer set to Android M or 22, set it to 21

Seems to be a bug. A developer said "Fixed internally. Will be out soon.".

Related

Design issue in Android Studio

Issue
In design background is fit.
In attributes background is set to fill_parent
In phone it has gap from both sides!
Any idea why I get padding in phone and how to remove it?
Solved by android:scaleType="fitXY"

MotionLayout in AndroidX

I want to use MotionLayout but my app is in AndroidX, I have tried using the usual XML tags but they don't work. The Layout Editor just shows a gray box with the tag name. How do I use MotionLayout in AndroidX, or if that is not possible can you give me an alternative.
Thanks :)
It now happened with GridLayout too. Here are the screenshots:
This is just weird.
The code for GridLayout:
<androidx.gridlayout.widget.GridLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content>
</androidx.gridlayout.widget.GridLayout>
MotionLayout was added to ConstraintLayout 2.0 so make sure that you have
implementation 'androidx.constraintlayout:constraintlayout:$androidConstraintLayoutVersion'
within your app's build.gradle where $androidConstraintLayoutVersion is at least 2.0
hard to say without code,
but make sure that you xml tag is right:
<androidx.constraintlayout.motion.widget.MotionLayout ...>

android:tint on background drawable of a layout on sdk<21

I know there are many topics discussing tint functionality prior to sdk 21, but
they either use some kind of imageviews (which I dont) or solve it programmatically (which I dont want to).
My case:
I have a constraint layout with a 9-patch drawable as background:
<android.support.constraint.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/testDrawable">
This is my drawable:
<nine-patch xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/ninepatchdrawable"
android:tint="#color/lightBlue"
android:tintMode="multiply" />
This works fine for updated devices, but as I said the tint isn't working for devices sdk < 21. I don't get any kind of error message either.
I already tried changing my layout to:
<android.support.constraint.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/testDrawable"
android:backgroundTint="#color/lightBlue"
android:backgroundTintMode="multiply">
or using app:backgroundTint as suggestet in another question.
Thanks in advance
You can try something like this:
ImageView.getDrawable().setColorFilter(new PorterDuffColorFilter(context.getResources().getColor(**color**), PorterDuff.Mode.SRC_IN));
Don't believe it'll work with a lower API -> but its a good way to change tint on the fly
There is an obvious reason why.
If you check the docs. The first part of the first line is:
With Android 5.0 (API level 21) and above,
Because android:tint was added with material design in API 21. And because it was added in API 21, it is a tag that has no meaning on API 20 and lower.
Using the support library (appcompat library) should allow you to use it. You need to add another namespace, but that isn't the biggest job to do. You can also do it in styles.xml
And backgroundTint is something completely different as you can see in this question

How to add shadow to the FAB provided with the android support design library?

The title is pretty self explaining.
The following code does not render shadow below the Floating Action Button. What can be done to render shadow? Is this feature really not supported even on API 21+?
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/ic_add"
android:clickable="true" />
Note: Adding android:elevation does not add shadow on API 21.
Screenshot taken from the example by dandar3:
https://github.com/dandar3/android-support-design
Simply setting app:borderWidth="0dp" resolve this issues for me.
Note: don't forget to add xmlns:app="http://schemas.android.com/apk/res-auto" to your root layout.
This issue should be fixed in next release of android design library.
For API 21+ you need to set app:borderWidth="0dp" and app:elevation="[number]dp". Setting elevation you are giving the size of shadow that you want:
Here is an example of code for API 21+:
<android.support.design.widget.FloatingActionButton
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/locate_user_FAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/location_off"
app:elevation="6dp"
app:borderWidth="0dp"
android:layout_above="#+id/take_taxi_FAB"
app:backgroundTint="#color/colorAccentGrey">
One important thing to remember for APIs below to 21 (Android 4), is for terms of compatibility FAB will put a margins around your button to draw the shadow. Then you should do something like that (I'm currently using this code and works):
<android.support.design.widget.FloatingActionButton
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/locate_user_FAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/location_off"
app:elevation="6dp"
app:borderWidth="0dp"
android:layout_above="#+id/take_taxi_FAB"
android:layout_alignParentRight="true"
android:layout_marginRight="#dimen/map_FAB_marginRight"
android:layout_marginBottom="#dimen/locate_user_FAB_marginBottom"
app:backgroundTint="#color/colorAccentGrey">
I prefer to put xmlns:app="http://schemas.android.com/apk/res-auto" at the beginning of the XML, but I put there just to remind you ;]
I was experiencing this same issue and I got it to work by deleting this tag from my AndroidManifest.xml.
android:hardwareAccelerated="false"
I initially added it, together with android:largeHeap="true", because I thought I needed it for a HeatMap in which a large number of points where shown, but then I realized it could work just with android:largeHeap="true".
If this still isn't working for some, there is a significant difference between:
app:elevation="6dp"
app:borderWidth="0dp"
and
app:borderWidth="0dp"
app:elevation="6dp"
Order seems to matter for some reason (The first order works, second doesn't) and this is from the support library 23.3.0
Check manifest in project or libraries in Application tag and delete them
android:hardwareAccelerated="false"
android:largeHeap="true"
But if you need these options then shadows and transformation animations will not work
In case it help, I was using
android:tint="#color/myColor"
instead of
android:backgroundTint="#color/myColor".
Replacing tint by backgroundTint brought back the shadow.

dividers between TabWidgets

Is the android:divider attribute under the TabWidget working? I tried the Tab Layout tutorial from android just to test (http://developer.android.com/resources/tutorials/views/hello-tabwidget.html) and set the android:divider to some image (for now I used the android vertical scrollbar as the drawable to really emphasize if its getting picked up (copied it from frameworks), but when I ran it on the emulator, it doesn't appear to be working. According to the docs, the TabWidget does seem to support this attribute: "Drawable used to draw the divider between tabs."
Can anyone help? I am using a nine-patched drawable as my divider image drawable.
MB
It doesn't look like the divider attribute is available anymore for TabWidget. One way to add a custom divider is to set it programmatically:
mTabHost.getTabWidget().setDividerDrawable(R.drawable.divider_vertical_dark);
Make sure however, you call this before you set the content of the tabs. It would crash on me if I called it after.
I had the problem in ICS, where divider was visible. None of the solutions worked except for the following.
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="bottom"
android:layout_alignParentBottom="true"
android:fadingEdge="none"
android:showDividers="none" >
</TabWidget>
Key line was android:showDividers="none"
I had this issue and solved it with the following code
tabHost1.getTabWidget().setDividerDrawable(R.drawable.example1);
if(Build.VERSION.SDK_INT >= 11)
tabHost1.getTabWidget().setShowDividers(TabWidget.SHOW_DIVIDER_MIDDLE);
For api levels below 11, it worked with the first line. For 11 and higher I included this to get this working. setShowDividers is added in linearlayout from api level 11. Hope this helps someone
Having the same issue myself. I only see the problem in Ice Cream Sandwich (ICS / 4.0.x). In android 1.6 - 2.3.4 there is no issue, dividers show up properly when setting a drawable in code, or in the xml layout.
I've tried just about everything I can think of to fix it but nothing works, including Josh's answer above :( though I have noticed that when setting any drawable as the divider, it will take up the space between tabs as if there was a drawable there, but it's just not visible.
Hopefully that gives someone else a hint as to what could be happening..?
I removed divider line from tabbar with use of below magical lines.
mTabHost.getTabWidget().setDividerDrawable(null);
OR
mTabHost.getTabWidget().setDividerDrawable(R.Color.transperant);

Categories

Resources