Content gets pushed under toolbar when using animateLayoutChanges="true" - android

I created a new Android Studio Project with the Navigation Drawer Activity.
Then I added a simple TextView inside a LinearLayout in the content_main.xml.
To this LinearLayout (also tried it with the standart RelativeLayout) I added the
android:animateLayoutChanges="true"
parameter.
If I now toggle the visibility of the TextView between GONE and VISIBLE, the whole root LinearLayout of content_main.xml gets pushed up and is hidden under the toolbar.
here is my content_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/app_bar_main"
tools:context=".MainActivity"
android:background="#84d8ff">
<TextView android:text="Hello World!" android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button"
android:layout_below="#+id/textView2"
android:layout_centerHorizontal="true"
android:layout_marginTop="207dp" />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ff0004"
android:animateLayoutChanges="true">
<TextView android:text="Lorem Ipsum..."
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/test_item"
android:layout_marginTop="29dp" />
</LinearLayout>
Here is a picture:
picture
The blue background belongs to the root LinearLayout of content_main.xml, the green background belongs to the app_bar_main.xml which includes the content_main.xml
Does anyone know why this is happening and how to solve it?

I stumbled upon the same problem. This can be fixed by opening the layout app_bar_main.xml
You find the line:
<include layout="#layout/content_main" />
Change it to this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="bottom">
<include layout="#layout/content_main" />
</LinearLayout>
This is an ugly fix but it works for now.
If another issue raises, you can fix it by adding this as the direct child of the rootlayout:
<android.support.v4.widget.Space
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
</android.support.v4.widget.Space>

Related

Linear Layout overlapping with Scroll view and other Linear Layout

Recently i have encounterd a problem. My linear layout where my edit text and image button is in is overlapping with my toolbar and my scroll view. I've tried other things like layout_below etc and nothing worked. Groupchat.xml
<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"
tools:context=".GroupChatActivity"
android:orientation="vertical">
<include
android:id="#+id/group_chat_bar_layout"
layout="#layout/app_bar_layout">
</include>
<ScrollView
android:id="#+id/my_scroll_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/group_chat_bar_layout"
android:layout_above="#+id/myLinearLayout">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/group_chat_text_display"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:textAllCaps="false"
android:textSize="20sp"
android:textColor="#android:color/background_dark"
android:layout_marginStart="2dp"
android:layout_marginEnd="2dp"
android:layout_marginBottom="50dp"/>
</LinearLayout>
</ScrollView>
<LinearLayout
android:id="#+id/myLinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:id="#+id/input_group_message"
android:layout_width="270dp"
android:layout_height="wrap_content"
android:hint="Write message..." />
<ImageButton
android:id="#+id/send_message_button"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:src="#drawable/send_message" />
</LinearLayout>
This is how the preview of the groupchat.xml file looks in Android Studio:
enter image description here
This was how the app looked with this code.
This are the results
Just in case, this is the code of my toolbar: Appbarlayout.xml
<android.support.v7.widget.Toolbar
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:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
It in a seperate xml because i'm using it for other activities in my app to thats why theres ang include in th Groupchat.xml
ALSO I AM FOLLOWING THIS TUTORILA. I suggest you go ther and see it because that is what i followed.
go to this video
Thank you.
The problem is with layout placements. your LinearLayout with ID: myLinearLayout is not aligned anywhere in RelativeLayout that's why it is getting rendered on top of the screen. make following changes and your good to go.
in your LinearLayout with id: myLinearLayout, add this line:
android:layout_alignParentBottom="true"
like this:
<LinearLayout
android:id="#+id/myLinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
Add
android:layout_below="#+id/group_chat_bar_layout"
this line to LinearLayout
<LinearLayout
android:id="#+id/myLinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/group_chat_bar_layout"
android:orientation="horizontal">
<EditText
android:id="#+id/input_group_message"
android:layout_width="270dp"
android:layout_height="wrap_content"
android:hint="Write message..." />
<ImageButton
android:id="#+id/send_message_button"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:src="#drawable/bkg" />
</LinearLayout>`

Floating Action Button bad rendering

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>

How do i fill up the drawerLayout

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.

Android - Padding/Gap on the left of toolbar's child layout

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.

Strange margin above entire layout

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.

Categories

Resources