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?

Can't you just put EditTexts in a AppBarLayout? https://developer.android.com/reference/android/support/design/widget/AppBarLayout.html — Kenneth, Sep 09 '15 at 10:45
Yes, but i want The EditText to turn into normal TextView and smoothly go smaller when the user scrolls up. — Heysem Katibi, Sep 09 '15 at 11:43
MoHaKa, how can EditText be scrolled to title position when user scroll upward. — mahesh, May 09 '16 at 04:35

Jemshit · Accepted Answer · 2017-03-19T08:37:43.633

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`.

Thank you for trying to help me, I just want to ask about what happens if user scrolls up? — Heysem Katibi, Sep 12 '15 at 16:11
İt depends on you, use `scrollFlags` to control it. You can fix both tabs or one, or can hide them while scrolling. — Jemshit, Sep 12 '15 at 16:16
but title does not become toolbar title in above implementation when you scroll — Jemshit, Sep 12 '15 at 16:18
Can i make the title EditText turns into TextView and goes smaller up to activity title place while scrolling? — Heysem Katibi, Sep 12 '15 at 16:20
Hi this is nice, why are there 2 toolbars here? What does the other one do? — Neon Warge, Mar 16 '16 at 12:08
@NeonWarge 2nd `Toolbar` contains that `EditText`s on top. You can use `LinearLayout` too i guess — Jemshit, Mar 16 '16 at 12:47
Can you please tell me how to use `scrollFlags` to hide 2nd `edittext` and show 1st `edittext` when scrolled up? — Kaushal28, Jun 18 '17 at 19:40

score 0 · Answer 2 · answered Sep 09 '15 at 11:00

0

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 ;)

answered Sep 09 '15 at 11:00

Ahmed.ess

265
3
10

Do you have an idea to make smooth scrolling while the user scrolls up and down? – Heysem Katibi Sep 09 '15 at 11:49
I want The EditText to turn into normal TextView and smoothly go smaller when the user scrolls up. – Heysem Katibi Sep 09 '15 at 11:50
Why don't you just toggle visibility with an TextView which is located at the same position and animate this when scrolling? – and_dev Sep 11 '15 at 13:09

hashiCode · Answer 3 · 2016-07-03T03:09:28.983

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:

Toolbar with EditText material design

3 Answers3

Linked