I designed my layout for headerView and wanted to add an image icon on its right side,just like the photo.
The problem is that it will show the spaces like in the image, even if I delete the image layout,the spaces are still there.
I try to change the parent layout or child layout for their layout width, any parameter like math parent or wrap content or give a dp.
I tried the official demo to fix it , but it did not work.
Can anyone teach me how to do this?
My nav_heafer.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#66CDAA"
android:orientation="horizontal">
<!--the left navigationView-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp">
<!--the left icon-->
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
app:srcCompat="#drawable/ic_grid_on_black_24dp" />
<!--the left textView-->
<TextView
android:id="#+id/logIn"
android:textColor="#android:color/background_light"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/pageLogIn"
android:background="?android:attr/selectableItemBackground"
android:clickable="true"/>
<!--the left button-->
<Button
android:id="#+id/logOut"
android:text="#string/logOut"
android:layout_width="65dp"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
<!--I just want a outstanding icon over here,on the right side of navigationView-->
<!--I try add the LinearLayout,but it shows strange-->
</LinearLayout>
[1]: https://i.stack.imgur.com/hQy1d.png
[2]: https://i.stack.imgur.com/E9jyu.png
My MainActivity xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="false"
tools:context="com.example.user.taiwandigestionsociety_v11.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF">
<android.support.v7.widget.Toolbar
android:id="#+id/toolBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:theme="#style/ToolBarStyle"
app:layout_scrollFlags="scroll|enterAlways"
android:background="#color/colorPrimary">
</android.support.v7.widget.Toolbar>
<FrameLayout
android:id="#+id/mainFrame"
android:layout_gravity="end"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.design.widget.AppBarLayout>
<!--control navigationView width-->
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="230dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#android:color/white"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header"
app:menu="#menu/drawer_menu">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
all right, finally i understood your problem and solved.This should give you something like below.
so let's get started!
very first of all you want to remove the white background behind your icon, so set transparent background to your navigation view as shown below.
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
<!-- it works as transparent background color -->
android:background="#android:color/transparent"
app:headerLayout="#layout/navigation_header_support" />
for your custom header, you should use relative layout as parent because you want your close icon to be at the most right side of your navigation panel. so we can align that close icon according to parent. this time set background color to your direct child of your relative parent layout, as i did for linear layout.
In order to fit the icon within relative layout, leave some margin from right for linear layout, so leftovers right margin space will be occupied by your icon. set the same width of your icon as much space you pushed your linear layout from right. Here i leave 32dp margin from right, and set the width of my icon to match it.
For proper position of that icon i used the following attributes. You should adjust yours.
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
The nav_header.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:paddingTop="64dp"
<!-- background color -->
android:background="#color/blue_2"
android:layout_marginRight="32dp"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:textColor="#android:color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/activity_horizontal_margin"
android:drawableLeft="#drawable/ic_pin_primary"
android:drawablePadding="#dimen/activity_horizontal_margin"
android:drawableStart="#drawable/ic_pin_primary"
android:gravity="center_vertical"
android:typeface="normal"
android:textSize="18sp"
android:text="Location"
android:textStyle="bold" />
<!-- Other items go here -->
</LinearLayout>
<ImageView
android:background="#color/blue_2"
android:layout_alignParentRight="true"
android:layout_marginTop="64dp"
android:layout_alignParentTop="true"
android:src="#drawable/ic_pencil"
android:layout_width="32dp"
android:layout_height="32dp" />
</RelativeLayout>
all right this is not an answer to your question. But you can improve your layout as well as performance. Then change your nav layout in your question according to this and update your question once again. then it could be more readable and easy to understand your problems. so anybody could find it easy to answer
Instead using a linear layout with orientation horizontal for icon and textView you can do instead as i shown below.
You current Implementation:
<LinearLayout
android:layout_marginTop="30dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView9"
android:layout_marginLeft="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/ic_grid_on_black_24dp" />
<TextView
android:id="#+id/newInformation"
android:textSize="15dp"
android:layout_marginLeft="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/newInformation"
android:textColor="#android:color/background_light"/>
</LinearLayout>
Now change that to something like this :
<TextView
android:id="#+id/person_address"
android:layout_width="match_parent"
android:layout_height="wrap_content"
<!-- this is where your icon goes -->
android:drawableLeft="#drawable/ic_grid_on_black_24dp"
android:drawableStart="#drawable/ic_grid_on_black_24dp"
<!-- your icon's padding -->
android:drawablePadding="#dimen/activity_horizontal_margin"
android:gravity="center_vertical" />
please change your layout into something like this, then i could try to answer your question.
Related
I'm getting some troubles with a Floating Action Button in my application. In Android Studio emulator it looks good, both in the "design" view of the xml file that in the emulator of the app, but in a real device, when I run the app it doesn't have a circular shape, but it's oval.
Furthermore, this error happens only on some execution... Yesterday the FAB was circular also on my device, but not today (I haven't modified the xml part and on the Java side I don't handle its aspect)...
This is my .xml file where I define the button:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coor"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="1">
<RelativeLayout
android:id="#+id/relative"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="#dimen/activity_horizontal_margin"
android:layout_weight="0.88">
<!-- Other elements-->
<!-- Parent element-->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/etEntrate"
android:textSize="#dimen/subtitles"
android:padding="#dimen/activity_horizontal_margin"
android:layout_alignRight="#+id/data"
android:layout_alignEnd="#+id/data"
android:layout_below="#+id/etSpese"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:layout_marginEnd="#dimen/activity_horizontal_margin"
android:layout_marginTop="#dimen/activity_horizontal_margin"
android:layout_marginBottom="#dimen/activity_horizontal_margin"/>
<!--FAB-->
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
app:srcCompat="#drawable/plus"
android:layout_alignTop="#+id/etEntrate"
android:layout_marginTop="59dp"
android:layout_alignLeft="#+id/etEntrate"
android:layout_alignStart="#+id/etEntrate"
android:layout_alignRight="#+id/etEntrate"
android:layout_alignEnd="#+id/etEntrate" />
<!--other elements-->
</RelativeLayout>
</LinearLayout>
and here there are two pictures of how I see the FAB on my device and how it looks on the emulator:
FAB on my device:
FAB on the design view of Android Studio
Has anyone some idea about this? Thank you!
Of course FAB width and height are set to wrap_content but you are trying to align to both left and right, this is why it stretches.
Just remove either one of them.
When you are using Gravity in Horizontal Orientation, you have to use layout_width=0dp & in case of vertical Orientation, layout_height=0dp for every child inside layout.
or
just remove floating action button from Relative Layout because you are already using Coordinate Layout.
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coor"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/relative"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="#dimen/activity_horizontal_margin"
android:layout_weight="0.88">
<!-- Other elements-->
<!-- Parent element-->
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/etEntrate"
android:textSize="#dimen/subtitles"
android:padding="#dimen/activity_horizontal_margin"
android:layout_alignRight="#+id/data"
android:layout_alignEnd="#+id/data"
android:layout_below="#+id/etSpese"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:layout_marginEnd="#dimen/activity_horizontal_margin"
android:layout_marginTop="#dimen/activity_horizontal_margin"
android:layout_marginBottom="#dimen/activity_horizontal_margin"/>
<!--FAB-->
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:clickable="true"
app:srcCompat="#drawable/plus"
android:layout_alignTop="#+id/etEntrate"
android:layout_marginTop="59dp"
android:layout_alignLeft="#+id/etEntrate"
android:layout_alignStart="#+id/etEntrate"
android:layout_alignRight="#+id/etEntrate"
android:layout_alignEnd="#+id/etEntrate" />
<!--other elements-->
</RelativeLayout>
I'm stuck with an issue and I have browsed the entire internet for a solution but nothing is working for me.
I have added an imageview inside my toolbar but it's slightly towards the right. It doesn't align centrally, it's shifted a bit towards the right. When i align the imageview to the left, there's an unknown padding/gap between the imageview and the left side of the toolbar. Following is my XML code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout 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"
android:fitsSystemWindows="true"
tools:context=".NavigationDrawerHomeScreen.BaseActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
app:elevation="0dp">
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar_home_activity"
android:layout_width="match_parent"
android:layout_height="45dp"
android:contentInsetLeft="0dp"
android:contentInsetStart="0dp"
android:contentInsetStartWithNavigation="0dp"
android:minHeight="?attr/actionBarSize"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/logo_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/fixer_title_thick" />
</RelativeLayout>
<android.support.v7.widget.SearchView
android:id="#+id/search_home"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:showAsAction="ifRoom"
android:visibility="gone">
</android.support.v7.widget.SearchView>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/container_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/home_bg" />
</FrameLayout>
<!--<TextView-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content"-->
<!--android:layout_centerInParent="true"-->
<!--android:text="this is base" />-->
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#2A2929"
android:backgroundTint="#2A2929"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_home_customer"
app:itemTextAppearance="#style/NavDrawerTextStyle"
app:itemTextColor="#fff"
app:menu="#menu/activity_home_customer_drawer">
<LinearLayout
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:clickable="true"
android:orientation="vertical">
<!-- any addition stuff you want in yoour footer layout -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="50dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Set Search Radius"
android:textColor="#color/white" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:clipChildren="false">
<com.crystal.crystalrangeseekbar.widgets.CrystalSeekbar
android:id="#+id/rangeSeekbar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:bar_color="#color/blue"
app:left_thumb_color="#color/blue_dark" />
<TextView
android:id="#+id/textMin1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/rangeSeekbar1"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="5dp"
android:text="0"
android:textColor="#color/white"
android:textSize="16dp" />
<TextView
android:id="#+id/textMax1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#id/rangeSeekbar1"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="5dp"
android:text="100"
android:textColor="#color/white"
android:textSize="16dp" />
</RelativeLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#1E88E5">
<TextView
android:id="#+id/logout_footer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginBottom="20dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:drawableLeft="#drawable/ic_logout_white_24dp"
android:drawablePadding="32dp"
android:text="Logout"
android:textColor="#fff"
android:textSize="18sp" />
</RelativeLayout>
</LinearLayout>
</android.support.design.widget.NavigationView>
The app:contentinset/android:contentinset solution works for some people but it doesnt work for me.
here's the image http://imgur.com/a/Vp2g6.
I had this same problem, and I tried a lot of things like setting
app:contentInsetStart ="0dp" ;
app:contentInsetStartWithNavigation = "0dp" ;
It didn't work. I even set them to a negative value, but it didn't work. I tried adding a right margin to my child view but it reduced the visible size of child view instead of occupying that left space. So probably child views are not allowed in this space.
So after spending some time I figured there are 2 ways to workaround this problem, one is preferred other I'd not prefer. First let me tell you the one I do not prefer:
Custom Implementation of the Up button: This problem only arises when in your Java Class for this layout you set this toolbar as your ActionBar and you
setDisplayHomeAsUpEnabled(true);
Without this command this problem doesn't exist. So if you don't use the default back button and implement one your own by putting an imageView and providing onClick implementation, this should work fine.
Make ChildViews as rather Siblings: The other method is using the property of toolbar of it being just another view.
I prefer this method because by using this method you can use the android's default up button. The only thing you need to do is - instead of defining child views inside the toolbar, make the child view and toolbar as siblings in a Linear or Relative Layout. This way you can reduce the left space only to "wrap_content" of the toolbar and utilise the left space in other child views. In my app, I even had an onClick functionality on the toolbar which can now be done by giving that functionality on the parent of both the layouts i.e. set the onClick on the LinearLayout.
Though I still don't know the exact reason why the left space exists or is there a way to disable it, but this is a pretty clean method to work around this.
My app uses one activity with a ViewPager to swap fragments for the app pages. Every other fragment works, but for some reason, one of them, my settings fragment, doesn't. The following image illustrates this. The red area is the unwanted margin. The blue area is a toolbar that is defined in the main activity layout - it is always there. The green area is the main ViewPager, also defined in the main activity layout:
This is what the MainActivity layout looks like:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activities.MainActivity"
android:fitsSystemWindows="true" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Tab Bar -->
<com.rentalapp.rentmi.views.SlidingTabLayout
android:id="#+id/main_content_pager_tab_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:background="#color/primary" />
<!-- Content Pager -->
<android.support.v4.view.ViewPager
android:id="#+id/main_content_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/main_content_pager_tab_bar" />
</RelativeLayout>
</RelativeLayout>
And this is what the Settings fragment looks like:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Settings"
android:id="#+id/textView2"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:paddingTop="10dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Log Out"
android:id="#+id/logout"
android:layout_below="#+id/textView2"
android:layout_centerHorizontal="true"
android:paddingTop="10dp" />
</RelativeLayout>
How do I fix this unwanted margin? If I remove android:fitsSystemWindows="true" from the main layout, then every other page gets the notification bar drawn on top of the tab bar, which I do not want.
Not sure how, but I was able to fix it by removing the one android:fitsSystemWindows="true" that I had. Removing that in the past broke everything. Now it fixed it.
I'm aiming to have a toolbar with text in the center of it and a menu icon on the far left, like so:
!-ICON-----TEXT-----------!
This is how I have attempted it:
<android.support.v7.widget.Toolbar
android:id="#+id/tool_bar_test"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Text Here"
android:textColor="#ffffff"
android:textSize="23sp"
android:layout_gravity="center" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/hamburger2"
android:layout_gravity="left"/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
I found that without a RelativeLayout it displays ONLY the text. But as it stands, the toolbar looks like this:
!-TEXT-----ICON-----------!
For some reason it displays them in the wrong order. Even if I swap the layout_gravity of the 2 elements it displays the same thing.
Does anybody know why this could be happening?
Here is how I would accomplish this. Here is a link to all of the material icons. https://www.google.com/design/icons/ Make sure you are using their hamburger menu. Also if you are using Android Studio, you should have 4 different sizes for the hamburger menu within your mipmap folder. Also, Tooolbar titles are 22sp
Here is what the toolbar would look like with the example below:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">
<RelativeLayout
android:id="#+id/toolbarContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/tool_bar_test"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
app:navigationIcon="#drawable/hamburger2" />
<TextView
android:layout_width="wrap_content"
android:layout_height="?attr/actionBarSize"
android:layout_centerHorizontal="true"
android:gravity="center_vertical"
android:text="Text Here"
android:textColor="#ffffff"
android:textSize="23sp" />
</RelativeLayout>
<!-- Rest of your Content -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbarContainer">
</RelativeLayout>
</RelativeLayout>
First of all, you're setting the width of your views to match_parent, which makes them as wide as the parent RelativeLayout and drawn on top of each other regardless of their positioning. The text appears to the left, because it's left-aligned by default and the image is centered for the same reason. You should set it to wrap_content to make them only as wide as needed.
Secondly, android:layout_gravity does not really work well with a RelativeLayout, because gravity is applied on all its children at once after postioning. You can use android:layout_centerHorizontal="true" for centering instead.
Besides that, when using a RelativeLayout, if you populate yout TextView with a long text, it might stretch and overlap the image. Please consider using a LinearLayout:
<android.support.v7.widget.Toolbar
android:id="#+id/tool_bar_test"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/hamburger2" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Text Here"
android:textColor="#ffffff"
android:textSize="23sp" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
This way the text will be always displayed to the right of the image.
I have simple FrameLayout with support CardView as first item, and TextView as second, so TextView must be on top of inflated view. This works on pre-Lolipop but on 21+ card takes toppest place in layout, why that's so and how to fix this? Same thing with RelativeLayout.
Layout:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="20dp"
app:cardBackgroundColor="#ff0000"
app:cardUseCompatPadding="false"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="i am top view!"
android:gravity="center"
android:layout_gravity="center"
android:textSize="30sp"
android:textAllCaps="true"
android:textColor="#00ff00"
android:background="#0000ff"
/>
</FrameLayout>
In case someone gets here and the solution for setting elevation doesn't work for them (like in my case, where I needed to draw an image above the CardView and having a shadow on it was not acceptable), you can solve the issue by wrapping the CardView inside another FrameLayout. In the example provided, it would look something like this:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<!-- This is the added FrameLayout -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="20dp"
app:cardBackgroundColor="#ff0000"
app:cardUseCompatPadding="false"
/>
</FrameLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="i am top view!"
android:gravity="center"
android:layout_gravity="center"
android:textSize="30sp"
android:textAllCaps="true"
android:textColor="#00ff00"
android:background="#0000ff"
/>
</FrameLayout>
I might be joining the discussion a bit late, but if you can afford giving up the CardView's elevation, you can just set the cardElevation property of the CardView in your XML layout to 0dp.
Like so:
app:cardElevation="0dp"
Just add your text view inside the card view, far as I know the z order is undefined inside a frame layout, but last laid out view should be drawn last.
This probably had to do with that card views in lollipop use elevation while they fall back on border drawing code pre lollipop.
This worked for me!
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<!-- Add this layout as parent of CardView -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="20dp"
app:cardBackgroundColor="#ff0000"
app:cardUseCompatPadding="false" />
</LinearLayout>
<!--Close parent layout-->
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_gravity="center"
android:background="#0000ff"
android:gravity="center"
android:text="i am top view!"
android:textAllCaps="true"
android:textColor="#00ff00"
android:textSize="30sp" />
</FrameLayout>