Designing Toolbars and Using Floating Buttons

While there is some information on the internet on how advanced works Toolbar

and how you are going to add different ones to it View

, I would like to get a step-by-step guide for me and anyone else who wants to implement advanced Toolbar

in their applications
(in particular , how to add views to Toolbar

which measurements should I use for the field between different View

and Toolbar

etc.

If possible, I would also like to implement floating action buttons and some material design animations, since I don't see any class or built-in methods for this in Android.

+3


source to share


2 answers



UPDATE:

After Google I / O 2015, you can use the Design Support Library to achieve kinds of material designs like floating action button (FAB). Toolbar

will still be built using v7 support library as shown below.


Design Toolbar

:

By reviewing these specs and guidelines from google , I was able to establish advanced Toolbar

how I would like to use the correct specs and measurements.

In my case, I used Fragment

to change the main content (where Views

inside the extended one would Toolbar

also be different), so I had a layout file for the activity and different layout files for my other fragments. layout of my main activity :

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <include android:id="@+id/main_toolbar" layout="@layout/toolbar" />

    <FrameLayout
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/main_toolbar" />
</RelativeLayout>

      

@layout/toolbar

just referenced the following layout (the layout I used for the standard toolbar (i.e. normal height, like ActionBar

)):



<?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:id="@+id/toolbar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

      

And the content in FrameLayout

(in the layout for the main activity) will be changed in Java. One of my snippets required two Spinner

and I wanted to include them in the extended one Toolbar

. Toolbar

, conveniently, can be used like ViewGroup

, so I created and used the following layout for one of my snippets :

<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.support.v7.widget.Toolbar
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/extended_toolbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:contentInsetStart="72dp"
        app:contentInsetEnd="16dp"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" >

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="bottom|center_horizontal"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" >

            <include layout="@layout/toolbar_space_margin" />

            <Spinner
                android:id="@+id/spinner_one"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>

            <Spinner
                android:id="@+id/spinner_two
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"/>

            <include layout="@layout/toolbar_space_margin" />
        </LinearLayout>
    </android.support.v7.widget.Toolbar>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/extended_toolbar" >

        <!-- The main content of that activity layout -->

    </ScrollView>
</RelativeLayout>

      

?attr/colorPrimary

refers to the base color ( colorPrimary

) that I defined in styles.xml

. Two attributes contentInsetStart

and contentInsetEnd

I think this is as an addition for Toolbar

. This means that it LinearLayout

will be 72dp

from the left edge Toolbar

and will also be 16dp

from its right edge. Also, I referenced twice @layout/toolbar_space_margin

, which was the basically empty view I used for the top and bottom margins :

<?xml version="1.0" encoding="utf-8"?>
<Space
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="16dp" />

      

Using floating action buttons:

Regarding the use of floating action buttons, I found various tutorials and a post about it, so I used them. I should have studied this part of the question a little better ...

I hope others who have encountered this design issue find this answer helpful.

+4


source


There is a good tutorial here on how to work with the new toolbar.

After integrating the toolbar into your activity, you can add menu items as usual. (via onCreateOptionMenu () and also via xxx_menu.xml)



and ... Here is a tutorial about FAB aka Floating-Action-Button.

+1


source







All Articles