Creating a custom toolbar in android

Question

I am trying to create a custom extended toolbar in android with an edit text in the toolbar. The layout that I want to implement looks something like this

The code that I have written to implement is something like this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"   android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"    tools:context=".MainActivity">

<android.support.v7.widget.Toolbar
    android:id="@+id/my_awesome_toolbar"
    android:layout_height="256dp"
    android:layout_width="match_parent"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"

    >

    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/searchbox"
        android:layout_alignParentBottom="true"
        android:text="Test"
        android:background="#ffffff"
        />

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

And the Activity has the following code

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
    if (toolbar != null) {
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayShowTitleEnabled(false);
        getSupportActionBar().setDisplayShowHomeEnabled(false);
    }}

But what I get instead is this:

There are not a lot of tutorials about customizing the extended toolbar so would really appreciate some help.

Klaipeda

Maybe this can help you: #31232109 – Ressieressler

Answer 1

I think you just need to add gravity="bottom" on the Toolbar settings like:

   <android.support.v7.widget.Toolbar
    android:id="@+id/my_awesome_toolbar"
    android:gravity="bottom"
    android:layout_height="256dp"
    android:layout_width="match_parent"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary">

I had to add some margin to the bottom of the layout to get the edit to appear but that should get the Text to the bottom of the edit.

Or you can set layout_gravity on the EditText.

        <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_gravity="bottom"
        android:id="@+id/searchbox"
        android:text="Test"
        android:background="#ffffff"/>

I'm surprised alignParentBottom compiles. I don't believe Toolbar inherits from RelativeLayout.

Edit - Here's my complete layout:

<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">

<android.support.v7.widget.Toolbar
    android:id="@+id/my_awesome_toolbar"
    android:layout_height="264dp"
    android:layout_width="match_parent"
    android:layout_alignParentBottom="true"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary">

    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_gravity="bottom"
        android:id="@+id/searchbox"
        android:text="Test"
        android:background="#ffffff"/>
</android.support.v7.widget.Toolbar>
</RelativeLayout>

Which results in this:

Lifelong

I've tried with that too. It displays it in a weird manner. You can see the results in this screenshot- dl.pushbulletusercontent.com/LKPBxwLnZez8neMwpuaNZXMmjTWbiDyO/… Moreover, the problem is also that the width is not properly aligned on both sides of the edit text. – Klaipeda

This problem was seen by more people - #27008485 #29239754 Don't see a clear solution to it though. – Klaipeda

I'm not entirely sure why you need the added margin on the bottom but that does work as best I can tell. – Lifelong

Answer 2

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="?attr/colorPrimary">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginRight="20dp"
        android:background="@android:color/white">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentTop="true"
            android:background="@null"
            android:inputType="text"
            android:textSize="22sp" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignParentTop="true"
            android:layout_alignParentRight="true"
            android:padding="12dp"
            android:src="@drawable/ic_search" />
    </RelativeLayout>
</android.support.v7.widget.Toolbar>

Excursive

Add some explanations to your answer please. – Annetteannex