How do you create flexible space header with textview/edittext instead of image?

Question

I would like to create app which has UI similar to the picture below.

I have already looked into following library ManuelPeinado/FadingActionBar, ksoichiro/Android-ObservableScrollView, kmshack/Android-ParallaxHeaderViewPager, flavienlaurent/NotBoringActionBar and none of them has this ability to add combination of EditText, Textview and ImageView.

There is already an application on playstore which has similar functionality.

Also what is the official name of purple color part?

I am completely frustrated as I am not able to find any tutorials or libraries to help me with my project.

Any help is appreciated!

Answer 1

You can add views directly to a toolbar as it's a viewgroup. Then you simply set it as your supportActionBar

Code styles.xml

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="windowActionBar">false</item>
</style>

Layout of Main:

<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"
            tools:context=".MainActivity">

custom toolbar layout:

    <?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
    android:background="@android:color/holo_red_dark">

   <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/abc_ic_menu_moreoverflow_mtrl_alpha"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:hint="Enter Text"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textview"
        android:text="Hello world"/>
   </LinearLayout>

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

Main Activity:

package com.example.ppoborca.testers;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.TextView;


public class MainActivity extends ActionBarActivity {

    private Toolbar mToolbar;
    private TextView mTextView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        mTextView = (TextView) mToolbar.findViewById(R.id.textview);
        mTextView.setText("This worked!");
        setSupportActionBar(mToolbar);
    }

}