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.
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 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.
I have the following layout (here is presented much simpler design):
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_main">
<FrameLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hey, badge!"
android:layout_margin="10dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AAAAA"
android:layout_margin="10dp"
android:textSize="12sp"
android:background="#ff00ff"
android:padding="10dp"
android:layout_gravity="top|end"
/>
</FrameLayout>
</RelativeLayout>
I wish to set TextView with text "AAAA" to act as a badge for Button, i.e. to be placed over the button in its upper right corner, which is not the case.
Instead, when I try this code on HTC One M7 with Lollipop, or on Genymotion Nexus 6 with Lollipop, screen looks something like this:
When I try the same code on Genymotion Nexus 5 with KitKat, everything looks as expected, i.e. first view (button) is shown underneath badge (textview)
Does anyone have any clue what could be wrong here?
Thanks,
Deveti
The elevation causes this issue. It was introduced in Lollipop and responsible for z-ordering too. Copy your layout to layout-v21 and set android:elevation="0dp" for the button.
I saw this on another thread somewhere but you can put this into your elements :
android:stateListAnimator="#null"
as others said the button elevation in lolipop and up is changed so its covering the other elements.
for example in my button view below i use it and it shows:
<FrameLayout
android:id="#+id/ib_one_container"
android:layout_width="38dp"
android:layout_height="38dp"
android:layout_marginLeft="5.3dp"
android:orientation="vertical"
android:padding="3dp"
>
<Button
android:id="#+id/ib"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:clickable="true"
android:gravity="center"
android:stateListAnimator="#null"
android:textSize="11sp" />
<com.mobile.pomelo.UI.customViews.CustomDiagonalLineView
android:id="#+id/diagaonal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="visible"
/>
</FrameLayout>
I had a similar problem with an FrameLayout that I was using as a progress indicator overlay (when my screen is busy loading).
I didn't want to add XML to every other element in my app, so I just added an elevation to to my FrameLayout overlay. Note the clickable attribute which ensures that click events are not passed down to the buttons underneath.
Progress Indicator overlay:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/progress_overlay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0.4"
android:background="#android:color/black"
android:animateLayoutChanges="true"
android:elevation="10dp"
android:clickable="true"
android:visibility="gone">
<ProgressBar
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:indeterminate="true"/>
</FrameLayout>
Including the progress indicator in my other views:
<include layout="#layout/progress_overlay"/>
Original solution from: https://stackoverflow.com/a/29542951/1912127
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>
I have an activity with several entry fields. I has an action bar. When I move down, at a certain point, the action bar starts to move up, and if I enter some entry fields further down, the action bar disappears totally.
How do I ensure that the action bar is fixed at the top and does not disappear, even if there are many fields down the window?
...
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/activityHeader"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:orientation="horizontal"
android:paddingLeft="3dp"
android:paddingRight="3dp">
<TextView
android:id="#+id/activityTitleTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#FFFFFF" />
</LinearLayout>
... other horizontal LinearLayout follow...
...
One solution is to use ScrollView as "root" layout, then only one direct dependent Layout (such as a LinearLayout) that will serve as container for all other necessary layouts and components needed to your activity.
...
Such as:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/activityHeader"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:orientation="horizontal"
android:paddingLeft="3dp"
android:paddingRight="3dp">
<TextView
android:id="#+id/activityTitleTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#FFFFFF" />
</LinearLayout>
... all other necessary layouts here...
</LinearLayout>
You could use a Toolbar and place it into the linear layout as a sibling along with your scroll view. It will look something like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/activityHeader"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:orientation="horizontal"
android:paddingLeft="3dp"
android:paddingRight="3dp">
<TextView
android:id="#+id/activityTitleTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#FFFFFF" />
</LinearLayout>
... all other necessary layouts here...
</LinearLayout>
Make sure that android:orientation is set to "vertical"
I "Googled" the problem and could not find the same type of problem described, and no solution.
It is when I was viewing Udacity NanoDegree Lesson on Developing Android Apps that I saw the use of ScrollView. So the solution is to use a ScrollView as the root layout, then a single LinearLayout that will be the container of all other necessary layouts and views needed for your activity. ScrollView can only one dependent. See YouTube demo
do you mean your action bar is like this and you want to make it stable like the fourth picture?
you need to chandge the theme and make windowActionBarOverlay set to false
from
<item name="android:windowActionBarOverlay">true</item>
to
false