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.
Related
I have seen this post before with the same question, but recently Google introduced another TabLayout
QUESTION:
Is there a way of reducing the space between text and icon using an attribute for instance, or another google-maintainable method in order to avoid having to go through creating a separate layout with text and an icon?
My current layout looks like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.viewpager.widget.ViewPager
android:id="#+id/mViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/homeTabs">
<com.google.android.material.tabs.TabLayout
style="#style/Widget.MaterialComponents.TabLayout"
android:id="#+id/homeTabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:tabIndicatorColor="#color/clear_blue">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:icon="#drawable/one_svg"
android:text="#string/one"/>
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:icon="#drawable/two_svg"
android:text="#string/two"/>
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:icon="#drawable/three_svg"
android:text="#string/three"/>
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:icon="#drawable/four_svg"
android:text="#string/four"/>
</com.google.android.material.tabs.TabLayout>
</RelativeLayout>
As I could understand after some tests, no.
The Google Tab Item is created to match with the material design rules, so the space between icon and text is calculated following that rules, as you can read here in the post you reported.
Only way is to create a custom layout, with an ImageView and a TextView and inflating it in the TabItem.
I suggest you this way, because is fully customizable so you can create pratically what you want.
Hope I helped you! If you have any question write a comment.
No, looks like you cannot do that with just attribute. This change will definitely require creating custom layout. And this gonna be the right way - almost any application has custom views. But this class looks complicated (there is source code). So there is inner class TabView, that contains ImageView and TextView, and there is method inflateAndAddDefaultIconView(). The easiest way for you my opinion is just to copy that class into your project and change it as you need, the license (Apache 2.0) allows you to do that.
when I set Image for FloatingActionButton it will be margin at all directions .so I want the ActionButton to be filled with image without any margin.
Use the attribute
android:src="YOUR_DRAWABLE"
in your android.support.design.widget.FloatingActionButton block of XML layout.
Also in you styles.xml, under the style you are using (normally it is AppTheme) use
<item name="colorAccent">#android:color/transparent</item>
I think this is what you want to achieve. Use this code.
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:fitsSystemWindows="true"
android:cropToPadding="true"
android:background="#android:color/primary_text_dark"
android:src="#drawable/zvam" />
You will get something like this.
http://i.stack.imgur.com/FC4xg.png
Sorry that I do not answer your question directly (I would comment if I could), but I don't think that this is a good idea.
It seems to me that you just want to have a done/check-image on the FAB. If that's the case, you should use the "done" icon from google's material-icons page: https://design.google.com/icons/#ic_done
Also, have a look at google's designguidelines for FABs: https://www.google.com/design/spec/components/buttons-floating-action-button.html.
In my observation, the EditText pictured below is separated into 2 parts: one being a simple grid of which values are saved, and another being an actual EditText.
Has any of you know any EditText library that performs similarly like this? Or is there any alternative solution? Thanks!
That is called Chips - Components - Google design guidelines
See this libraries below :-
TokenAutoComplete
Material Chips
For example Add in your layout like this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.tokenautocomplete.ContactsCompletionView
android:id="#+id/searchView"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
And all is done
Or You can create by your own using SpannableStingBuilder and ImageSpan
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 :)
I do have a toolbar right now, but I don't really understand a lot of the things that I needed to add and copypaste from tutorials and other questions to get it to work. Also, my toolbar doesn't display an elevation even though I set android:elevation to 9dp.
Similar to the Google I/O app, I've set up a resource in /layout for my toolbar. I copied the name and named it "toolbar_actionbar_with_headerbar". Please excuse that it doesn't make any sense.
This is the content:
toolbar_actionbar_with_headerbar.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="128dp">
<Toolbar
android:id="#+id/toolbar"
android:elevation="9dp"
android:layout_height="128dp"
android:layout_width="match_parent"
android:minHeight="?android:attr/actionBarSize"
android:background="?android:attr/colorPrimary"
android:gravity="bottom" />
</LinearLayout>
Now, as it's apparently supposed to be done, I am applying my toolbar to activities by including them in their /layout XML-file. Works fine.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
[...]
<include layout="#layout/toolbar_actionbar_with_headerbar" />
[...]
</RelativeLayout>
However, this is my first question. When I did that initially, my toolbar was cut off at the sides like all other content of the activity, according to the margins set at the beginning of the xml. Right now, I simply deleted those, and add margins for every text field and other things on the activity. There probably is a better way?
The second question is: Why doesn't my elevation work? I've even tried setting it through code onCreate, but that doesn't work either. And lastly, what would I have to do to properly support devices pre-Level21?
Thanks a lot.
You should read this post: appcompat-v21
Take care when you copy some code text, there are some ” that are wrong, and you should change to ".
About elevation (you can read it in the post too), it only works with lollipop.