Toolbar with EditText material design

Question

I'm trying to make Toolbar with EditText within it like this:

Right now I can do some thing similar but only with static title, Any ideas to get started?

Wenwenceslaus

Can't you just put EditTexts in a AppBarLayout? developer.android.com/reference/android/support/design/widget/… – Udella

Yes, but i want The EditText to turn into normal TextView and smoothly go smaller when the user scrolls up. – Wenwenceslaus

use appbarlayout and collapsible toolbar – Thunderstorm

MoHaKa, how can EditText be scrolled to title position when user scroll upward. – Huda

Answer 1

I have done this like below:

There is Toolbar as AppBar (aka ActionBar) at the top and second toolbar below it with two EditText. First Toolbar is under CollapsingToolbarLayout in case you want it to be collapsed.

Java:

public class MainActivity extends AppCompatActivity {
    Toolbar toolbar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        toolbar = (Toolbar) findViewById(R.id.toolbar_1);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setTitle("");
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}

activity_main.xml:

<android.support.design.widget.CoordinatorLayout
    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="wrap_content"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"      >

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_tool_bar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:elevation="0dp"
            app:expandedTitleTextAppearance="@style/Widget.AppCompat.ActionBar.TabText"
            app:layout_scrollFlags="scroll|enterAlways"
            app:statusBarScrim="?attr/colorAccent">


            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar_1"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/primary"
                android:minHeight="?attr/actionBarSize"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:layout_collapseMode="none"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
            </android.support.v7.widget.Toolbar>

        </android.support.design.widget.CollapsingToolbarLayout>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar_2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/primary"
            android:minHeight="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_collapseMode="none"
            app:elevation="0dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:paddingLeft="32dp"
                android:paddingTop="16dp"
                android:paddingBottom="56dp"
                android:paddingRight="16dp">

                <android.support.design.widget.TextInputLayout
                    android:id="@+id/lNameLayout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/fNameLayout"
                    android:layout_marginTop="10dp">

                    <EditText
                        android:id="@+id/ltitle"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:ems="10"
                        android:hint="Title"/>
                </android.support.design.widget.TextInputLayout>

                <android.support.design.widget.TextInputLayout
                    android:id="@+id/lNameLayout2"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/fNameLayout"
                    android:layout_marginTop="10dp"
                    android:layout_marginBottom="10dp">

                    <EditText
                        android:id="@+id/ldesc"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:ems="10"
                        android:hint="Description"/>
                </android.support.design.widget.TextInputLayout>


            </LinearLayout>
        </android.support.v7.widget.Toolbar>

    </android.support.design.widget.AppBarLayout>


</android.support.design.widget.CoordinatorLayout>

Colors:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary">#303F9F</color>
    <color name="primary_dark">#3F51B5</color>
    <color name="accent">#00E5FF</color>

</resources>

And styles.xml:

<resources>
    <style name="AppTheme" parent="AppTheme.Base"/>
    <style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primary_dark</item>
        <item name="colorAccent">@color/accent</item>
        <item name="colorControlNormal">#FFF</item>
    </style>    
</resources>

Use android:theme="@style/AppTheme" for application in manifest and android:theme="@style/AppTheme.Base" forMainActivity`.

Bound

Thank you for trying to help me, I just want to ask about what happens if user scrolls up? – Wenwenceslaus

İt depends on you, use scrollFlags to control it. You can fix both tabs or one, or can hide them while scrolling. – Bound

but title does not become toolbar title in above implementation when you scroll – Bound

Can i make the title EditText turns into TextView and goes smaller up to activity title place while scrolling? – Wenwenceslaus

Hi this is nice, why are there 2 toolbars here? What does the other one do? – Shallop

@NeonWarge 2nd Toolbar contains that EditTexts on top. You can use LinearLayout too i guess – Bound

Can you please tell me how to use scrollFlags to hide 2nd edittext and show 1st edittext when scrolled up? – Stettin

Answer 2

I think that you need to create you own toolbarlyout and set it to the activity toolbar. try this :

http://javatechig.com/android/actionbar-with-custom-view-example-in-android you just need to create your component. i hope that will be helpful for you ;)

Breastwork

Do you have an idea to make smooth scrolling while the user scrolls up and down? – Wenwenceslaus

I want The EditText to turn into normal TextView and smoothly go smaller when the user scrolls up. – Wenwenceslaus

Why don't you just toggle visibility with an TextView which is located at the same position and animate this when scrolling? – Dinodinoflagellate

Answer 3

You can use a linear layout with the same color of your toolbar. The toolbar attribute android:elevation needs to be 0px.

Activity (xml)

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

    <include
        layout="@layout/toolbar_task"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
    ></include>

    <fragment xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools" android:id="@+id/fragment_task"
              android:name="com.hashicode.simpletodo.fragment.TaskFragment" tools:layout="@layout/fragment_task"
              android:layout_width="match_parent" android:layout_height="match_parent" />

</LinearLayout>

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:id="@+id/toolbar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:fitsSystemWindows="true"
    android:minHeight="?attr/actionBarSize"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:background="?attr/colorPrimaryDark"
    android:elevation="0px">
</android.support.v7.widget.Toolbar>

Fragment (xml)

<?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:layout_width="match_parent"
                                                 android:layout_height="match_parent"
                                                 android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <LinearLayout
            android:id="@+id/taskname_area"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/PrimaryDarkColor"
            android:orientation="vertical">

            <android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingBottom="36dp"
                android:paddingLeft="72dp"
                android:paddingRight="16dp">

                <EditText
                    android:id="@+id/task_name"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/task.name"
                    android:textSize="30dp"/>

            </android.support.design.widget.TextInputLayout>

        </LinearLayout>

         <!-- some code -->

        </android.support.design.widget.CoordinatorLayout>

Activity (java)

public class TaskActivity extends AppCompatActivity {


    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        initializeTodo(savedInstanceState);
        setContentView(R.layout.activity_task);
        //set the toolbar
        setSupportActionBar((Toolbar) findViewById(R.id.toolbar));
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setTitle(null);
    }

The result:

Inapt