I need to arrange 4 FloatingActionButtons evenly, horizontally.
After reading many answers on SO, it turns out that the best way to do it is to have them in a LinearLayout with a layout_width of 0dp and all the buttons with a layout_weight of 1. After many attempts, layout_width of 0dp never worked.
Here's what I did:
<android.support.v7.widget.CardView
:
: >
<RelativeLayout
:
: >
<LinearLayout
android:id="#+id/toolbarBack"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/rlDetailLayoutBack"
android:layout_marginTop="4dp"
android:layout_centerHorizontal="true"
android:gravity="center"
android:weightSum="4">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabDirections"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/directions1"
android:borderWidth="0dp"
android:elevation="8dp"
android:layout_weight="1"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabCallMobile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/mobile"
android:borderWidth="0dp"
android:elevation="0dp"
android:layout_weight="1"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabCallLandline"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/landline"
android:borderWidth="0dp"
android:elevation="0dp"
android:layout_weight="1"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabWebsite"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/website1"
android:borderWidth="0dp"
android:elevation="0dp"
android:layout_weight="1"/>
</LinearLayout>
:
:
</RelativeLayout>
</android.support.v7.widgetCardView>
The rendering in Android Studio (v1.5.1) with API 21 (Android 5.0.1) is like this:
...and with API 17 (Android 4.2.2), it is like this (the images in the FAB appear correctly on a physical device, so that's not a problem):
My questions are:
Why are the buttons not uniformly laid out in API 21?
How can even even distribution (in fact, overall consistency) be achieved irrespective of the API?
How to get rid of the ugly lines bordering the buttons in API 21?
Many thanks in advance!
Courtesy the answer below from Nolly J, this is how the layout looks now on API 21, and works as well on API 17.
What's going on is you're seeing how the elevation is applied to the FAB on pre-lollipop.
In short, all FABs on API levels before v21 have 16dp padding where as FABS on v21+ have 0dp padding. This is inbuilt to support elevation pre-lollipop.
You should be able to add 16dp padding left/right in your styles-v21 and apply that as the padding to your FABs.
-"How can even distribution be achieved irrespective of the API".
I have recreated your LinearLayout in a way that four horizontal columns are place beside which other using layout_weight
<LinearLayout
android:id="#+id/toolbarBack"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/rlDetailLayoutBack"
android:layout_marginTop="4dp"
android:layout_centerHorizontal="true"
android:orientation="horizontal"
android:weightSum="4">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="8dp"
android:gravity="center|center_horizontal"
android:orientation="vertical">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabDirections"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/direction1"
android:borderWidth="0dp"
android:elevation="8dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="8dp"
android:gravity="center|center_horizontal"
android:orientation="vertical">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabCallMobile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/mobile"
android:borderWidth="0dp"
android:elevation="0dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="8dp"
android:gravity="center|center_horizontal"
android:orientation="vertical">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabCallLandline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/landline"
android:borderWidth="0dp"
android:elevation="0dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center|center_horizontal"
android:padding="8dp"
android:orientation="vertical">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabWebsite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/website1"
android:borderWidth="0dp"
android:elevation="0dp"/>
</LinearLayout>
For other questions, refer to #Charles Durham solution
Related
I'm making a weather app with material cards and its shadows.
I've found a way to center them using a Linear Layout, but it cuts off the shadows.
How can I prevent this? Is there a way to align them without using a linear layout or a frame layout?
Here's my layout code:
I used a FrameLayout as root, there's my LinearLayout containing both material cards, I just wanted them to be centred as a group, if you know another way to do this please tell me!
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:id="#+id/img_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/background"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name"
android:fontFamily="cursive"
android:layout_gravity="center_horizontal"
android:layout_marginTop="25dp"
android:textSize="50sp"
android:textColor="#FFF"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Your location's weather in a touch!"
android:layout_gravity="center_horizontal"
android:layout_marginTop="90dp"
android:textSize="17.3sp"
android:textColor="#color/colorPrimaryText"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center">
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="270dp"
android:layout_height="140dp"
android:layout_gravity="center_horizontal"
card_view:cardCornerRadius="4dp"
card_view:cardElevation="5dp">
<TextView
android:id="#+id/tv_temperature"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:padding="16dp"
android:text="30°C"
android:textColor="#color/colorPrimaryText"
android:textSize="50sp" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/cv_data"
android:layout_width="270dp"
android:layout_height="140dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="30dp"
card_view:cardCornerRadius="4dp"
card_view:cardElevation="5dp">
<TextView
android:id="#+id/tv_conditions"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:padding="16dp"
android:text="Scatted Clouds"
android:textColor="#color/colorPrimaryText"
android:textSize="30sp" />
</android.support.v7.widget.CardView>
</LinearLayout>
<ProgressBar
android:id="#+id/pb_loading"
android:layout_width="55dp"
android:layout_height="55dp"
android:layout_gravity="center"
android:elevation="20dp"/>
<TextView
android:id="#+id/tv_city_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:gravity="center"
android:padding="20dp"
android:fontFamily="sans-serif"
android:textColor="#FFF"
android:textSize="20sp"/>
It looks like your layout would be better as a ConstraintLayout instead of a FrameLayout, but we can still make what you have work.
The problem is that (on newer Android versions), the shadows for a CardView are actually drawn outside the view's bounds. Normally this is fine, but if the CardView is inside a parent, that parent can clip the shadows if the parent doesn't have enough room to show the shadows.
In your case, the "easy fix" is actually extremely easy. Change your LinearLayout's width to match_parent; this will give the cards room to draw their shadows.
Edit
What I said above will solve the shadows on the sides of each card, but won't solve the shadows above the top card or below the bottom card. Again, in the spirit of a quick fix, I'd suggest adding these attributes to your LinearLayout:
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:clipToPadding="false"
You need to change height and add change layout_gravity to gravity, like the code bellow:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="vertical">
It probably will solve your problems =]
If you want to improve your code, I suggest you not to set fixed width and height, it cand bring you problems in some devices. You can also load xmlns:card_view only once, at your LinearLayout, that it's your very first tag
After creating a PercentRelativeLayout, I noticed that the SwitchCompat control does not align to the center horizontally despite settings properties. What can be done in order to resolve this issue? I tried using android:layout_centerHorizontal="true", but this doesn't seem to work.
<android.support.percent.PercentRelativeLayout
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="wrap_content"
android:layout_weight="10"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp">
<ImageView
android:id="#+id/imageView1"
app:layout_widthPercent="40%"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:src="#drawable/ic_image1" />
<android.support.v7.widget.SwitchCompat
android:id="#+id/switch_map_emiratesairline_emiratesgreenwichpeninsula"
app:layout_widthPercent="20%"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:theme="#style/Theme.AppCompat.Light"
android:background="#android:color/transparent"
android:layout_toEndOf="#id/imageView1"/>
<ImageView
android:id="#+id/imageView2"
app:layout_widthPercent="40%"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:src="#drawable/ic_image2"
android:layout_toEndOf="#id/switch_tgl"/>
</android.support.percent.PercentRelativeLayout>
It might look like a bug, but actually it doesn't relate to SwitchCompat (as issue is reproduced for Switch as well.
But it also doesn't relate to PercentRelativeLayout. And even doesn't relate to RelativeLayout.
It relates to Switch with width different from wrap_content (as far as I can see).
Simple example:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">
<android.support.v7.widget.SwitchCompat
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"/>
</FrameLayout>
Neither gravity nor layout_gravity has effect on switch's position - it is aligned to the right.
One can replace FrameLayout with LinearLayout and result will be the same.
To understand why this happens one should try to find answer in Switch/SwitchCompat source code (sorry, I haven't tried to do so...)
So, to resolve your issue the only thing I could come up with is a hack: wrap SwitchCompat with some layout. And use wrap_content as SwitchCompat width.
<android.support.percent.PercentRelativeLayout
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="wrap_content"
android:layout_weight="10"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp">
<ImageView
android:id="#+id/imageView1"
app:layout_widthPercent="40%"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:src="#drawable/avatar" />
<FrameLayout
android:id="#+id/switch_tgl"
app:layout_widthPercent="20%"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:layout_toRightOf="#id/imageView1">
<android.support.v7.widget.SwitchCompat
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:theme="#style/Theme.AppCompat.Light"
android:background="#android:color/transparent" />
</FrameLayout>
<ImageView
android:id="#+id/imageView2"
app:layout_widthPercent="40%"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:src="#drawable/avatar"
android:layout_toRightOf="#id/switch_tgl"/>
</android.support.percent.PercentRelativeLayout>
Hope it helps
I have FrameLayout like this:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="changeColor"
android:text="new button"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="some text"/>
</FrameLayout>
The problem is that the button is displayed on top while FrameLayout class overview tells us this: "Child views are drawn in a stack, with the most recently added child on top".
Update:
in android 21+ after introduction of elevation one can play with elevation attribute of various widgets to put them on top of one another. here is a material design guide for elevation values.
for api < 21 :
This answer
Buttons in Lollipop and higher have a default elevation to them which
causes them to always draw on top. You can change this by overriding
the default StateListAnimator.
Try putting this into your button XML:
android:stateListAnimator="#null"
The FrameLayout should now cover the
button.
In the Android 5.0 (API 21) and above, you must add android:elevation into the view.
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="changeColor"
android:text="new button"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="some text"
android:elevation="3dp"/>
Put your Button inside FrameLayout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="new button" />
</FrameLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="some text" />
</RelativeLayout>
As the official android documantation points out:
FrameLayout is designed to block out an area on the screen to display
a single item. Generally, FrameLayout should be used to hold a single
child view, because it can be difficult to organize child views in a
way that's scalable to different screen sizes without the children
overlapping each other. You can, however, add multiple children to a
FrameLayout and control their position within the FrameLayout by
assigning gravity to each child, using the android:layout_gravity
attribute.
It's better if you put your Button and Textview in a RelativeLayout inside the FrameLayout like:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="some text"/>
<Button
android:id="#+id/button1"
android:layout_below="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="changeColor"
android:text="new button"/>
<RelativeLayout>
</FrameLayout>
Apperently android:stateListAnimator="#null" works only for API = 21 or higher,
So for those who target API<21 use this, it worked for me :D
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="changeColor"
android:text="new button"/>
</FrameLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="some text"/>
</FrameLayout>
FrameLayout should be used to hold a single child view, because it can be difficult to organize child views in a way that's scalable to different screen sizes without the children overlapping each other.
You should use LinearLayout or RelativeLayout in FrameLayout .
Like this way
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="changeColor"
android:text="new button"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="some text"/>
</RelativeLayout>
</FrameLayout>
For API < 21 you cant use android:stateListAnimator="#null" or change the elevation. In my case I used 2 frame layouts embedded in a constraint layout.
As the frame layouts can be stacked upon each other there is no need to change the elevation of the textview.
<android.support.constraint.ConstraintLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
>
<Button
android:id="#+id/my_daybutton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/cal_button_background"
android:textColor="#color/colorPrimaryDark"
android:gravity="start|top"
android:paddingTop="2dp"
android:paddingStart="2dp"
android:paddingEnd="2dp"
/>
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="bla"
android:textSize="9sp"
android:textColor="#android:color/holo_red_dark"
android:layout_gravity="bottom|end"
/>
</FrameLayout>
Just put elevation FrameLayout or any parent there you are going to load you fragment like
android:elevation="#dimen/dimen_20"
<FrameLayout
android:layout_width="match_parent"
android:layout_height="#dimen/dimen_0"
android:id="#+id/ready_to_scan"
app:layout_constraintTop_toTopOf="parent"
android:elevation="#dimen/dimen_20"
app:layout_constraintBottom_toBottomOf="parent"/>
I've spent years working with GridBagLayout in java, so I thought setting up a simple layout would be easy. After hours of fiddling with nested LinearLayouts, reading tutorials, and looking at RelativeLayout, I'm getting nowhere.
Below is what I want my main menu to look like. I assume this is possible to do, but many things do not make sense to me, for instance increasing weights seems to decrease the amount of space that a View takes up?
One thing I'm considering doing is just using a relative layout, laying everything else without caring about sizes, and then just setting the sizes in my onCreate since I'll know the size of the display and I can just set each element a certain number of pixels. Is that considered bad practice?
I'm just trying to create a layout with a title on top (the text as large it is can be to fill the width of the screen). That should take up the top 30%. Then the next 50% contains two buttons on the left, an area where I want to draw some animations (I assume using a SurfaceView is a good idea), and then two more buttons on the right.
The remaining 20% will be for a banner ad once I figure out how to add those in.
Is this possible to do? Can anyone show me some XML for this?
So thanks to Alok Nair, this was not hard to do ... I just had to set the sizes to 0px and let the layout weights take care of the sizing.
This is what it ended up being:
<LinearLayout
android:background="#drawable/main_menu_background"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:gravity="top"
android:id="#+id/mainSectionMenu"
>
<TextView
android:layout_width="match_parent"
android:layout_height="0px"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="LUNA PUMA"
android:id="#+id/mTitleText"
android:layout_gravity="center"
android:textColor="#ffffffff"
android:autoText="false"
android:textSize="50dp"
android:layout_weight=".3"
android:gravity="center"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight=".5">
<LinearLayout
android:orientation="vertical"
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight=".25">
<Button
android:layout_width="wrap_content"
android:layout_height="0px"
android:text="Easy"
android:id="#+id/mEasyButton"
android:layout_gravity="center"
android:layout_weight=".5"
android:background="#android:color/transparent"
android:textColor="#ff000000"/>
<Button
android:layout_width="wrap_content"
android:layout_height="0px"
android:text="Medium"
android:id="#+id/mMediumButton"
android:layout_gravity="center"
android:layout_weight=".5"
android:textColor="#ff000000"
android:background="#android:color/transparent"/>
</LinearLayout>
<SurfaceView
android:layout_width="0px"
android:layout_height="match_parent"
android:id="#+id/mAnimationSurfaceView"
android:layout_weight=".5"/>
<LinearLayout
android:orientation="vertical"
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight=".25"
>
<Button
android:layout_width="wrap_content"
android:layout_height="0px"
android:text="Hard"
android:id="#+id/mHardButton"
android:layout_gravity="center"
android:layout_weight=".5"
android:textColor="#ff000000"
android:background="#android:color/transparent"/>
<Button
android:layout_width="wrap_content"
android:layout_height="0px"
android:text="More ..."
android:id="#+id/mMoreButton"
android:layout_gravity="center"
android:layout_weight=".5"
android:background="#android:color/transparent"
android:textColor="#ff000000"/>
</LinearLayout>
</LinearLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight=".2">
</FrameLayout>
</LinearLayout>
You will have to use a combination of layouts, and to achieve this you can use either use android:layout_weight parameters to your views or use Android Percent Support Library.
With layout_weight you can specify a size ratio between multiple views. E.g. you have a view1 and a view2. The view1 should use 3/4 of the screen and view2 should use 1/4 of the screen. Then you will set the layout_weight of the view1 to 3 and the layout_weight of the view2 to 1.
To get it work you also have to set the height or width (depending on your orientation) to 0px.
The Android Percent Support Library allows to specify dimensions of views in terms of percentages instead of absolute numbers, or weights.
The library consists of two main layouts which allow nested views to specify percentage based layouts: PercentRelativeLayout and PercentFrameLayout which work much like their non-Percent counterparts.
Once you've incorporated one of these containers into your layout you can then specify attributes in percentages such as app:layout_widthPercent or app:layout_marginTopPercent="25%".
For using it in your app, just add percent support library to your project
dependencies {
compile 'com.android.support:percent:22.2.0'
}
Here is an example layout using this lib:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerview"
style="#style/match"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
style="#style/block"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
<android.support.percent.PercentRelativeLayout
android:layout_marginTop="?attr/actionBarSize"
android:clickable="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="#+id/row_one_item_one"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignParentTop="true"
android:background="#5182bb"
app:layout_heightPercent="15%"
app:layout_widthPercent="30%" />
<View
android:id="#+id/row_one_item_two"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_toRightOf="#+id/row_one_item_one"
android:background="#396190"
app:layout_heightPercent="15%"
app:layout_widthPercent="30%" />
<View
android:id="#+id/row_one_item_three"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_toRightOf="#+id/row_one_item_two"
android:background="#8fb5e1"
app:layout_heightPercent="15%"
app:layout_widthPercent="40%" />
<View
android:id="#+id/row_two_item_one"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="#+id/row_one_item_one"
android:background="#d89695"
app:layout_heightPercent="15%" />
<View
android:id="#+id/row_three_item_one"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_below="#+id/row_two_item_one"
android:background="#f9c093"
app:layout_heightPercent="20%"
app:layout_widthPercent="40%" />
<View
android:id="#+id/row_three_item_two"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_below="#+id/row_two_item_one"
android:layout_toRightOf="#+id/row_three_item_one"
android:background="#948957"
app:layout_heightPercent="10%"
app:layout_widthPercent="60%" />
<View
android:id="#+id/row_four_item_one"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_below="#+id/row_three_item_one"
android:background="#ccc2d9"
app:layout_heightPercent="20%"
app:layout_widthPercent="40%" />
<View
android:id="#+id/row_four_item_two"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_below="#+id/row_three_item_two"
android:layout_toRightOf="#+id/row_four_item_one"
android:background="#c3d59e"
app:layout_heightPercent="25%"
app:layout_widthPercent="60%" />
<View
android:id="#+id/row_five_item_one"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_below="#+id/row_four_item_one"
android:background="#948957"
app:layout_heightPercent="10%"
app:layout_widthPercent="40%" />
<View
android:id="#+id/row_five_item_two"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_below="#+id/row_four_item_two"
android:layout_toRightOf="#+id/row_five_item_one"
android:background="#e6e0ec"
app:layout_heightPercent="10%"
app:layout_widthPercent="60%" />
<View
android:id="#+id/row_six_item_one"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_below="#+id/row_five_item_one"
android:background="#f9c093"
app:layout_heightPercent="20%"
app:layout_widthPercent="20%" />
<View
android:id="#+id/row_six_item_two"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_below="#+id/row_five_item_one"
android:layout_toRightOf="#+id/row_six_item_one"
android:background="#588fd3"
app:layout_heightPercent="20%"
app:layout_widthPercent="20%" />
<View
android:id="#+id/row_six_item_three"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_below="#+id/row_five_item_two"
android:layout_toRightOf="#+id/row_six_item_two"
android:background="#a6a6a6"
app:layout_heightPercent="25%"
app:layout_widthPercent="60%" />
</android.support.percent.PercentRelativeLayout>
You can get idea from this and use it to implement for your design requirements.
I have a layout in which a button is aligned at the bottom of the RelativeLayout as in below code :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="250dp"
android:background="#color/background_material_light"
android:layout_height="match_parent">
<View
android:layout_alignParentLeft="true"
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#color/strokeColor"/>
<RelativeLayout
android:id="#+id/rlHeaderFilter"
android:layout_width="match_parent"
android:layout_height="#dimen/abc_action_bar_default_height_material">
<View
android:id="#+id/separator"
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#color/strokeColor"/>
<TextView
android:background="#color/actionbar_background"
android:id="#+id/tvFilterText"
style="#style/textStyleHeading2"
android:layout_toRightOf="#+id/separator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:gravity="center"
android:textColor="#color/white"
android:text="Filter Search" />
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:src="#drawable/refresh"
android:id="#+id/resetLeadsFilter"
android:contentDescription="#string/emptyString"
android:layout_centerVertical="true"
android:padding="6dp"/>
</RelativeLayout>
<TextView
android:layout_below="#+id/rlHeaderFilter"
android:layout_marginTop="10dp"
android:id="#+id/tvBudgetFromFilter"
style="#style/textSpinnerStyleHeading"
android:layout_margin="8dp"
android:hint="Budget From"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:layout_below="#+id/tvBudgetFromFilter"
android:layout_marginTop="10dp"
android:id="#+id/tvBudgetToFilter"
style="#style/textSpinnerStyleHeading"
android:layout_margin="8dp"
android:hint="Budget To"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<include
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_below="#+id/tvBudgetToFilter"
android:id="#+id/sourceLayout"
layout="#layout/source_layout" />
<include
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/statusLayout"
android:layout_margin="8dp"
android:layout_below="#+id/sourceLayout"
layout="#layout/status_layout" />
<Button
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:layout_marginTop="10dp"
android:textColor="#color/white"
android:background="#color/actionbar_background"
android:text="SEARCH"
android:id="#+id/bFilterLeads"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
I can see the button at the bottom of the layout as shown in the screenshot .It displays like this in pre Lollipop devices(below < 5.0 devices) :
But in Lollipop the button at the bottom does not appear as shown in following screenshot :
I am not able to get the reason for that Please help me out . Thanks in advance .
I have solved my problem ! In fact, the LinearLayout was behind the navigationBar. To fix it, just add this line to the Activity (after setContentView();)
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION);
I'm not sure why the layout behaves differently between Lollipop/pre-Lollipop (unless there's some other piece that's not shown). I will point out though that I don't think layoutGravity is valid for views within a RelativeLayout -- that's something you'd use with a LinearLayout. I'd first remove that property and see how it behaves on pre-Lollipop, and then see about correcting the layout once that's done. It could be that layoutGravity is causing some sort of incorrect behavior pre-Lollipop.