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?

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

Answer 2

AppBarLayout would be best bet

Ref https://developer.android.com/reference/android/support/design/widget/AppBarLayout.html

Example http://www.feelzdroid.com/2015/07/android-appbarlayout-scrolling-example.html

obviously you would need to do customizations

Hope this helps

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:

Answer 4

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