Android toolbar extra gap - android

I have seen the answer of this question but none of them work for me. In android I have an extra gap between the margin and toolbar so it is not looking like a actionbar. How to remove that gap?activity_main image
toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:background="#FF7043"
android:elevation="4dp"
android:layout_height="?actionBarSize"
android:contentInsetLeft="0dp"
android:contentInsetStart="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:contentInsetRight="0dp"
android:contentInsetEnd="0dp"
app:contentInsetRight="0dp"
app:contentInsetEnd="0dp"
android:id="#+id/tool_bar">
</android.support.v7.widget.Toolbar>
Activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:background="#00E676"
tools:context="com.example.partha.customtitlebar.MainActivity">
<include
android:id="#+id/tool_bar"
layout="#layout/toolbar"
></include>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:id="#+id/textView"
android:layout_below="#+id/tool_bar"
android:layout_alignParentStart="true"
android:layout_marginTop="55dp" />
</RelativeLayout>

If you look closely, you'll notice that you've applied padding for all four sides on the Toolbar's parent, i.e, the RelativeLayout
Removing the following lines will fix it:
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"

This is because of the padding you have added to the parent RelativeLayout ViewGroup.
you have two options
it's either you set the padding to 0dp but you will lose padding for the entire screen
or you nest the the TextView inside another ViewGroup like LinearLayout and apply the padding to that LinearLayout rather than the RelativeLayout. with this you get the padding for your entire content while still making sure there is no padding around the Toolbar which will make it fit the screen like the deprecated ActionBar.
This examples illustrate how you can achieve the second option
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00E676"
tools:context="com.example.partha.customtitlebar.MainActivity">
<include
android:id="#+id/tool_bar"
layout="#layout/toolbar">
</include>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/tool_bar"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:id="#+id/textView"
android:layout_below="#+id/tool_bar"
android:layout_alignParentStart="true"
android:layout_marginTop="55dp" />
</LinearLayout>
</RelativeLayout>

Related

Can't eliminate margins on all side of a toolbar in android

I'm trying to include a toolbar widget into an activity, but, the toolbar has extra spacing on all sides.
toolbar.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/toolbar"
android:minHeight="?android:attr/actionBarSize"
android:background="?attr/colorPrimary"
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:layout_alignParentTop="true"
android:contentInsetLeft="0dp"
android:contentInsetStart="0dp"
android:contentInsetRight="0dp"
android:contentInsetEnd="0dp"
local:contentInsetEnd="0dp"
local:contentInsetStart="0dp"
local:contentInsetLeft="0dp"
local:contentInsetRight="0dp"
/>
Preview of toolbar.xml:
activity_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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:layout_gravity="center"
android:orientation="vertical"
tools:context="com.infotoall.newsapp.FacebookLoginActivity">
<include
layout="#layout/toolbar"
android:id="#+id/toolbar"
/>
</LinearLayout>
Preview of layout:
Remove Padding from your Linear Layout.
Remove these lines
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
Check the XML for your Activity and remove the padding attributes. The Activity is the holder for your toolbar and thus the padding attributes will apply for to all of it's child elements.
You are providing paddings in the root LinearLayout of activity_main.xml.Change your activity_main.xml as below:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:layout_gravity="center"
android:orientation="vertical"
tools:context="com.infotoall.newsapp.FacebookLoginActivity">
<include
layout="#layout/toolbar"
android:id="#+id/toolbar"
/>
</LinearLayout>

Android Framelayout with two custom views

So I am currently using a framelayout to hold two custom views and a scrolling text view so that they are all stacked on each other.
Here is my XML file for the activity:
<?xml version="1.0" encoding="utf-8"?>
<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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context=".canvas.CanvasActivity"
>
<com.alastech.andyluo.crowdshout_androidapp.canvas.ShoutCanvasView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/shout_canvas"
android:layout_gravity="center" />
<com.alastech.andyluo.crowdshout_androidapp.canvas.FeatureShoutView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/feature_shout"
android:elevation="8dp"
android:layout_gravity="center" />
<ScrollView
android:layout_width="232dp"
android:layout_height="200dp"
android:id="#+id/messageScrollView"
android:layout_marginTop="167dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="New Text"
android:id="#+id/messageTextView" />
</ScrollView>
<android.support.v7.widget.Toolbar
android:id="#+id/canvas_toolbar"
android:layout_width="match_parent"
android:elevation="4dp"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</FrameLayout>
This should be putting a text view on top of a featureShoutView on top of a shoutCanvasView.
Instead it is sandwiching the text view in between my two custom views. Both featureShoutView and shoutCanvasView are drawing onto canvases. Any idea what may be causing this issue? Is it possible that two canvases don't play nice in a single layout? Any help is appreciated and I can provide more details as needed.

RelativeLayout: how to delete border around second layout?

I have an xml file which contains two RelativeLayouts. The trouble is that the second Relativelayout does not go up to the display limit. It looks like a border around the layout.
How can I display the second layer also on the border of the display?
<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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:background="#color/colorAccent"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="newservice"
tools:showIn="#layout/activity_newservice">
<RelativeLayout
android:id="#+id/test"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark"
android:layout_alignBottom="#+id/viewmap"
android:layout_centerHorizontal="true">
</RelativeLayout>
</RelativeLayout>
Remove this line on the top layout:
android:paddingTop="#dimen/activity_vertical_margin"
You are putting a padding on the top, so the second layout will not fill the first like you want.
Regards!
Remove your
android:paddingXXX from parent RelatvieLayout
that is making issue
<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"
android:background="#color/colorAccent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="newservice"
tools:showIn="#layout/activity_newservice">
<RelativeLayout
android:id="#+id/test"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark"
android:layout_alignBottom="#+id/viewmap"
android:layout_centerHorizontal="true">
</RelativeLayout>
</RelativeLayout>
Try this

Android ViewPager on full screen

I have the following android layout
<?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_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:layout_width="match_parent"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:gravity="center"
android:orientation="vertical"
android:background="#3f5561"
android:id="#+id/MainLayout">
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:layout_below="#+id/tabs" />
<com.astuetz.PagerSlidingTabStrip
android:id="#+id/tabs"
app:pstsShouldExpand="true"
app:pstsTextAllCaps="true"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#a97878"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true" />
As you can see, the ViewPager has grey color around it, which is the color of the MainLayout. My question is, how can i set the ViewPager on fullscreen(Without the MainLayout around it). For example like YouTube, PlayStore and ect. That's how i want it to look
How can i possibly do that? Example will be greatly appreciated!
You are adding left, right and top padding to the container, that's why you are getting the grey area. There is no bottom padding so bottom part is ok.
Remove these line from your RelativeLayout
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
you added padding that's why it's showing MainLayout around it, remove padding to apply ViewPager to whole screen
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"

Material Design Floating Button (FAB) Blocking RecyclerView

I'm facing a strange issue while trying to use a material design FAB button in my app. I'm using this library (https://github.com/makovkastar/FloatingActionButton).
My activity xml has a RecyclerView and the FAB. But the FAB is actually blocking the lower portion of the entire screen. Something like this :
http://i.stack.imgur.com/FtEcb.png
It can be seen in the picture that the RecyclerView containing the cards is being blocked by the Floating Button. Here's the code I'm using:
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:orientation="vertical"
tools:context=".MainActivity">
<fragment
class="com.rubberduck.zoop.fragments.OffersFragment"
android:id="#+id/fragment_enter_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
tools:layout="#layout/fragment_offer" />
<com.melnykov.fab.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="8dp"
android:elevation="6dp"
android:src="#drawable/ic_place_white_24dp"
fab:fab_colorNormal="#color/color_accent"
fab:fab_colorPressed="#color/color_accent_pressed"
fab:fab_colorRipple="#color/ripple" />
</LinearLayout>
fragment_offer.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:context="com.rubberduck.zoop.fragments.OffersFragment">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_offers"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<include
android:id="#+id/card_offer"
layout="#layout/offer_card" />
</LinearLayout>
When you use a LinearLayout as the container for your fragment and FloatingActionButton, items do not overlap: The LinearLayout gives the full width to each component when you use orientation="vertical". Instead, as per the FloatingActionButton readme, you should use a FrameLayout (which allows items to overlap - ensuring the FloatingActionButton appears above the RecyclerView):
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:orientation="vertical"
tools:context=".MainActivity">
<fragment
class="com.rubberduck.zoop.fragments.OffersFragment"
android:id="#+id/fragment_enter_name"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout="#layout/fragment_offer" />
<com.melnykov.fab.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="8dp"
android:elevation="6dp"
android:src="#drawable/ic_place_white_24dp"
fab:fab_colorNormal="#color/color_accent"
fab:fab_colorPressed="#color/color_accent_pressed"
fab:fab_colorRipple="#color/ripple" />
</FrameLayout>

Categories

Resources