I created a custom toolbar to show at the top of my Tab Layout activity. After including it in my activity's xml, it acts as a background color(ORANGE) to different Fragment tabs of my Tab Layout.
Here
ToolBar xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:background="#color/ColorPrimary"
android:id="#+id/toolbar_clashmate"
android:elevation="4dp">
</android.support.v7.widget.Toolbar>
TabLayout Activity's XML (Where to add toolbar at the top)
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:background="#dfdfdf"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/PrimaryColor"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
/>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/tabs"
/>
</RelativeLayout>
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar"
/>
</FrameLayout>
How to set it to Top of the activity where i can further add buttons to it?
Change your toolbar to this
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:background="#color/ColorPrimary"
android:id="#+id/toolbar_clashmate"
android:elevation="4dp">
</android.support.v7.widget.Toolbar>
You are using android:layout_width="match_parent" to the ToolBar placed into an element (TabLayout) that have android:layout_height="wrap_content"
That causes the problem
Use this to set height of ToolBar corresponding to the default ActionBar height
android:layout_height="?android:attr/actionBarSize"
You can use this code
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:background="#dfdfdf"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include
android:id="#+id/tool_bar"
layout="#layout/testtoolbar"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
Related
I made the Toolbar and TabLayout transparent. In TabLayout, I have two fragments with RecyclerView.
When I scroll, the contents of the recyclerView do not go under the tolbar. Please tell me how to fix.
I use the behaviour but it seems not working
app_bar_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activity.MainActivity"
android:id="#+id/coordinator">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="112dp"
android:background="#color/transparent" />
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/transparent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#color/transparent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView ..... />
<TextView ..... />
</LinearLayout>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_height="?android:attr/actionBarSize"
android:layout_width="match_parent">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton ..../>
</android.support.design.widget.CoordinatorLayout>
fragment.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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".fragment.PoemFragment">
<android.support.v7.widget.RecyclerView
android:id="#+id/rvPoem"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:clipToPadding="false"
android:paddingBottom="88dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</RelativeLayout>
You should use this behavior in root of that view that want to place below of AppBarLayout, not in child of views (Fragments)
just add this behavior to ViewPager
just change :
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="112dp"
android:background="#color/transparent" />
to :
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="112dp"
android:background="#color/transparent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
I have made a layout in which I have created a toolbar of my own in XML and I have set the Navigation View according to my requirement. I want that after clicking the hamburger icon the topleft , navigationView content should be displayed along with the back button on the topleft. I am able to make the content in the navigation View Visible but not the back button. Because the Navigation View is overlapping on my toolbar and the back button gets behind or underneath the navigation view. I am not getting the way to sort this out in XML. help me in this situation.
Code for the XML layout is given below:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
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:gravity="start"
android:id="#+id/dl"
android:orientation="vertical"
tools:context="com.example.loveb.demo_viewpager.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:id="#+id/toolbar"
>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:id="#+id/tablayout"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/Theme.AppCompat.Light.DarkActionBar">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/tablayout"
android:id="#+id/pager">
</android.support.v4.view.ViewPager>
</RelativeLayout>
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:id="#+id/navview"
app:headerLayout="#layout/drawer_layout"
app:menu="#menu/menu"
>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
you must set toolbar in an other parent layout test below code:
<?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">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"></android.support.v7.widget.Toolbar>
<android.support.v4.widget.DrawerLayout
android:id="#+id/dl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="start"
android:orientation="vertical"
tools:context="com.example.loveb.demo_viewpager.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TabLayout
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/Theme.AppCompat.Light.DarkActionBar">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/tablayout">
</android.support.v4.view.ViewPager>
</RelativeLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/drawer_layout"
app:menu="#menu/menu">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>
I'm trying to integrate a search toolbar with google maps.
This is the relevant part:
<LinearLayout 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:label="MyApp"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.myapp.DrawerActivityMainActivity">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.AppBarOverlay">
</android.support.v7.widget.Toolbar>
<com.miguelcatalan.materialsearchview.MaterialSearchView
android:id="#+id/search_view"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</com.miguelcatalan.materialsearchview.MaterialSearchView>
<include layout="#layout/activity_maps"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</FrameLayout>
</LinearLayout>
And activity_maps.xml:
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.myapp.MapsActivity" />
The problem is the MaterialSearchView is showing bellow the map (i.e the map overlaps). How to integrate MaterialSearchView with Toolbar and Google map?
Use Relative Layout to setup view Below and bind it with the Frame Layout as you already doing. Also change root layout to Relative Layout instead of Linear Layout.
Like
<?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"
android:label="MyApp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/frameOne"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.AppBarOverlay" />
<com.miguelcatalan.materialsearchview.MaterialSearchView
android:id="#+id/search_view"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</FrameLayout>
<include
layout="#layout/activity_maps"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/frameOne"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</RelativeLayout>
</RelativeLayout>
You can view the output below as well it seems to be fix with this.
i habe an TabLayout in my Application where each Tab has its own Fragment. But i cannot see the full content of my Fragment because the TabLayout overlaps the bottom of the fragment. How can i solve the problem?
activity_main.xml
<RelativeLayout
android:id="#+id/main_layout"
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=".activitys.MainActivity">
<de.fhbielefeld.cardash.cardash.NonSwipeableViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:tabMode="fixed"
app:tabGravity="fill"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
fragment.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" >
<com.skobbler.ngx.map.SKMapViewHolder
android:id="#+id/map_surface_holder"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_media_pause"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"/>
</RelativeLayout>
try this
<?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:context="com.union.experiment2.MainActivity"
tools:showIn="#layout/activity_main">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<de.fhbielefeld.cardash.cardash.NonSwipeableViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:tabMode="fixed"
app:tabGravity="fill"
android:layout_alignParentBottom="true"/>
<include
layout="#layout/fragment"/>
Hope this will work make the tab layout in linear layout with orientation verticle
and then just include the things u want to display in your layout
I have coded a simple fragment which couple of text views and a button , all in a RelativeLayout.
<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"
tools:context=".fragments.TutorialFragment">
<TextView
android:id="#+id/tuto_title"
style="?android:textAppearanceLarge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp"
android:text="#string/tutorial_title"/>
<TextView
android:id="#+id/tuto_msg"
style="?android:textAppearanceLarge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/tuto_title"
android:padding="20dp"
android:text="#string/tutorial_txt"/>
<Button
android:id="#+id/nextBtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_margin="15dp"
android:text="#string/next"/>
</RelativeLayout>
This fragment displays great on the StudioDesigner , however when executing the code the title is missing
The Activity Layout is
<?xml version="1.0" encoding="utf-8"?>
<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"
android:id="#+id/coordinatorLayout"
tools:context="com.crocodil.software.a1ccalc.A1CActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
It looks as the fragment calculates its available space before the toolbar is placed...
This is the Screen as I see it in the designer
Thanks for any hints
The problem is that the FrameLayout is behind the toolbar, the main way of adding a view within the coordinator layout that has a toolbar is to either set a margin or add app:layout_behavior="#string/appbar_scrolling_view_behavior" to the Framelayout
<?xml version="1.0" encoding="utf-8"?>
<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"
android:id="#+id/coordinatorLayout"
tools:context="com.crocodil.software.a1ccalc.A1CActivity">
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_marginTop="?attr/actionBarSize"
android:layout_height="match_parent" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
Take this attribute
app:layout_behavior="#string/appbar_scrolling_view_behavior"
and put it on the FrameLayout fragment_container.