I am using the new CoordinatorLayout from Google's new design support library.
I have the following layout:
<android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.AppBarLayout>
<android.support.design.widget.CollapsingToolbarLayout
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
app:layout_behavior="#string/appbar_scrolling_view_behavior" >
<android.support.design.widget.TabLayout />
<android.support.v4.view.ViewPager
android:id="#+id/viewPager" />
</LinearLayout>
<com.getbase.floatingactionbutton.FloatingActionsMenu
app:layout_anchor="#id/viewPager"
app:layout_anchorGravity="bottom|right|end"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
>
<com.getbase.floatingactionbutton.FloatingActionButton />
</com.getbase.floatingactionbutton.FloatingActionsMenu>
</android.support.design.widget.CoordinatorLayout>
The problem is that the ViewPager always overlays on top of the FloatingActionMenu on API >= 21, is there a fix for this? I tried using view.bringToFront() to fix this, but no luck. I also moved the Views around as well, still no luck. Things I tried:
Moving the FABMenu inside AppBarLayout
Moving the FABMenu inside LinearLayout
No luck.
Has anyone experienced anything similar?
This turned out to be a simple elevation issue, I was setting the elevation as android:elevation=".." and this was a lower elevation than another view, thus covering the FloatingActionButtonMenu. This only occurs on API >= 21.
although you seemed to have found the answer yourself, there is an absolutely amazing resource here: https://github.com/chrisbanes/cheesesquare
This is an implementation of viewpager inside a coordinator layout that uses the official google design support library, along with all the other goodies supported by this library (including an extremely easy to use Navigation side panel).
Why am I sharing this? Because the code is clean, uses an official latest library and is backward compatible. I found it very easy to use this as a base to my application and I am already getting good feedback on the overall implementation of the design which closely follows the material guidelines.
The example is written by a person from the official android team so it is also reliable that way!
Hope you find this useful (although not totally a direct answer to your question - but related nonetheless).
I am a new user who can't even post comments due to low rep so awarding the rep will be really helpful!
Thanks :)
Related
I would like to design this layout on my project:
as many googleing AFIAK is some library to can design that on Android but I can't find it, I take this screen shot from Android material website. Can anybody help me to design that? thanks in advance
At the bottom of the material design page there's a link on how you can implement that on Android, Flutter, iOS, etc.
As for Android, you'll have to use the BottomAppBar widget to achieve what you want. You can also read more about it on the docs.
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Other components and views -->
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:navigationIcon="#drawable/ic_menu_24"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="#id/bar"/>
</android.support.design.widget.CoordinatorLayout>
Taken from here.
You can change the FAB position by using the method setAnchorId(int) with the following parameters:
FAB_ALIGNMENT_MODE_CENTER
FAB_ALIGNMENT_MODE_END
Alternatively you can set that in the XML using the app:layout_anchor attribute.
P.S.: As stated on the docs, to change the BottomAppBar background use the app:backgroundTint attribute instead of the default android:background.
I started with development with material design.
My layouts and styles are separated in those for pre-lollipop devices and those for lollipop and higher.
E.g i use
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
style="#style/Toolbar" />
In my pre-lollipop layout file and
<Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
style="#style/Toolbar" />
in the other one.
Therefore I am forced to use two different objects in the related activity class. That confuses me a lot and leads to confusing code.
I know how to distinguish between API levels via
Build.VERSION.SDK_INT
Nevertheless what is the best approach to solve this problem?
Thank you for answers
i usually use android.support.v7.widget.Toolbar, because it's compatible with other API. The regular one will give you a lot of problems if you use it a lot in your code.
I'm facing strange warning, trying to customize the Toolbar appearance. I put RelativeLayout inside android.support.v7.widget.Toolbar to reorganize Toolbar. Everything works and appears as expected on both emulator and device. The only problem is the annoying warning that appears in .xml file as seen below:
The question is what is the actual problem, how can it harm my application and how can I solve this warning. As I know Toolbar behaves as ViewGroup, why RelativeLayout is not allowed to be it's child?
Thanks.
Toolbar extends from ViewGroup and RelativeLayout's too.
I've tried that on Android Studio 1.5.1 and i couldn't see that problem.
<android.support.v7.widget.Toolbar
android:id="#+id/toolBar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<RelativeLayout
android:id="#+id/toolBarTv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/app_name"
android:textSize="18dp">
</RelativeLayout>
</android.support.v7.widget.Toolbar>
You should be able to update your Android Studio to the last version or checking if you are using outdated Platform, then you need to just update that Platform to the last version.
And then it won't show up.or perhaps it will fixed in the next update.
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.
So i use SlidingMenu library with a FragmentActivity in my app.
There is a GoogleMap in the layout and a menu on the left side with some content.
When i pull the menu to see it, there is a big black rectangle there, covering my sliding menu content. After i click it once, it is disapearing.
Can anybody has something to say about this?
I had the same issue on android 2.3.7 but not in 3.x or later versions. After rotating the view the menu renders fine after.
I found a solution using a custom TransparentSupportMapFragment from: Android MapView With Sliding Menu Obscures Menu
Fragment Black screen issue
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.ViewPager
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</android.support.v4.view.ViewPager>
<!-- hack to fix ugly black artefact with maps v2 -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent" />
</FrameLayout>
This is a known problem.
You may want to have a look at these issues:
http://code.google.com/p/gmaps-api-issues/issues/detail?id=4639
http://code.google.com/p/gmaps-api-issues/issues/detail?id=4659
Maybe you can find a workaround in comments there.
I know this question is too old but since I come here by chance and see there is no accpeted answer I will answer this.Hope it help someone someday.
My solution is add a light layout (about 1dp) with transparent background above the "Shopradar" layout of yours. This worked for me,hope it works for you too ;)