I want to use the Toolbar in my app (create with Eclipse IDE) and use this Toolbar on all Activities.
I think this code will be work:
<LinearLayout 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"
android:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:titleTextColor="#android:color/white"
android:background="?attr/colorPrimary">
</android.support.v7.widget.Toolbar>
<!-- Layout for content is here. This can be a RelativeLayout -->
but i dont have any idea for usage
sorry for bad english, i'm iranian.
Thanks for help.
Include Toolbar in each layout.xml of all your Activities.
Just for example:
<LinearLayout
...>
<Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
...
</LinearLayout>
Related
I'm trying to pin my toolbar at the top just like a normal 'Action Bar' just like when u click on a twitter post the toolbar up top stays there no matter how much u scroll down.
I found a lot of guides on "how to make the Toolbar collapse and other cool effects" but what i want from it, is to act as an Action bar and stay at the top, is there a simple way of accomplishing that ? without the use of (CoordinatorLayout, CollapsingToolbarLayout, ...) ?
Yes you can pin your toolbar at the top of the activity for that you have to create a layout file named toolbar_layoutlike this
<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"
android:layout_width="match_parent"
android:layout_height="?android:actionBarSize"
android:background="#color/colorPrimary"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
android:theme="#style/ToolbarStyle"
app:titleTextColor="#color/colorWhite"
app:subtitleTextColor="#color/colorWhite"
app:titleTextAppearance="#style/ToolbarStyle"/>
And in the activity layout i.e activity_main file include it as like this:-
<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:orientation="vertical">
<include layout="#layout/toolbar_layout"/>
</LinearLayout>
And after that design accordingly the layout
Cheers Happy Coding.
You can make your layout xml like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
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="?attr/actionBarSize" />
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- Your content here -->
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</LinearLayout>
or put RecyclerView instead of ScrollView + LinearLayout if you have a list
I'm willing to create a custom toolbar for the main menu of an app I'm working on, like this:
https://i.stack.imgur.com/GJdjn.png.
It contains a background image and another centered image as thumbnail. It does not collapse and stays static until an item is selected inside one of the tabs.
I'm using Android Studio in the developing process, which can be a little rough to deal with layout, but I believe there's a solution that uses the material design features, but I couldn't find anything about that (besides the toolbar with a background image).
Thanks in advance.
You can customize the Toolbar widget to your needs. Use something like this:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_top"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#color/action_bar_bkgnd"
app:theme="#style/ToolBarTheme" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Toolbar Title"
android:layout_gravity="center"
android:id="#+id/toolbar_title" >
//...your code here
</RelativeLayout>
</android.support.v7.widget.Toolbar>
And then add this toolbar to the top of your UI.
Based on the example you used, it looks like they are using a CollapsingToolbarLayout with the collapsing effect turned off. The layout may look something like this:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="enterAlways">
<FrameLayout
android:id="#+id/header_frame"
android:layout_width="match_parent"
android:layout_height="#dimen/height_header"
app:layout_collapseMode="pin">
<ImageView
android:id="#+id/header_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"/>
<ImageView
android:id="#+id/square_image"
android:layout_width="#dimen/size_square_image"
android:layout_height="#dimen/size_square_image"
android:layout_gravity="center|bottom"
android:scaleType="centerCrop"/>
</FrameLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
Right now, I have a normal looking Toolbar. What I want to do is add a custom layout between the Toolbar and the TabLayout, as shown in the picture below:
On the left is what my Toolbar looks like now, and on the right is what I want it to look like.
As you can see, I want to add an ImageView and two TextViews to the layout.
How can I achieve this?
Here is my current layout:
<?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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
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"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.design.widget.TabLayout
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="48dp"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
AppBarLayout extends LinearLayout, so you can add any number of views to your AppBarLayout: there's no reason to add the views specifically to your Toolbar.
You'll want to make sure you use the same layout_scrollFlags as your Toolbar if you want them to scroll the same.
Toolbar is just a ViewGroup, you can customize is as much as you want.
Try this :
<android.support.v7.widget.Toolbar
style="#style/ToolBarStyle"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="#dimen/abc_action_bar_default_height_material">
<ImageView
android:layout_width="wrap_content"
android:contentDescription="#string/logo"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/ic_launcher"/>
This should bring your imageView in center of toolbar.
I notice this type of toolbar used in recent apps on PlayStore, and I need to achieve this.
I know how to create a simple toolbar in XML.
Simple Toolbar
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:background="#color/ColorPrimary"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
android:theme="#style/about_toolbar"
>
...
</android.support.v7.widget.Toolbar>
I seems like a toolbar with padding.
So I'm not entirely sure.
Please can someone who has done this help me out !
Example with cardView:
<?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"
android:background="#bcbcbc"
>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentTop="true"
android:layout_margin="20dp"
android:background="#android:drawable/dialog_holo_light_frame"
/>
</RelativeLayout>
So, I have this main activity layout using CoordinatorLayout to display a toolbar and tabs below it:
<android.support.design.widget.CoordinatorLayout
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="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="0dp"
local:layout_scrollFlags="scroll|enterAlways"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:elevation="4dp"
local:tabMode="fixed"
local:tabGravity="fill"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:foreground="#drawable/header_shadow"
local:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Then I have 2 fragment layouts, each for each of the 2 tabs I'll have. One fragment displays a ListView on its content:
<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"
android:foreground="#drawable/header_shadow"
tools:context=".StationsFragment">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe_refresh_layout"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<ListView
android:id="#+id/stations_listview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.SwipeRefreshLayout>
</FrameLayout>
I want my toolbar to hide when I scroll the listview above, and it should be ok with the code I have, at least from what I read in this answer, but it's not working. At the moment I've tried to remove the FrameLayout from the fragment activity but that didn't solve the issue. I've considered hard coding the scroll event from the listview but if possible I really want this to be working with no code behind..
Thanks in advance.
This is because you are using CoordinatorLayout with ListView. You can change your implementation to RecyclerView to achieve correct scroll.
check my answer here. This may help you.
try change from
local:layout_scrollFlags="scroll|enterAlways"
to
local:layout_scrollFlags="scroll|exitUntilCollapsed"