8

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

enter image description here

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: enter image description here

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

Vinay Gaba
  • 1,156
  • 3
  • 12
  • 26
  • Maybe this can help you: http://stackoverflow.com/questions/31231609/creating-a-button-in-android-toolbar/31477092#31477092 – Machado Jan 26 '16 at 10:20

2 Answers2

3

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:

ToolBar

Vinny K
  • 194
  • 15
  • I've tried with that too. It displays it in a weird manner. You can see the results in this screenshot- https://dl.pushbulletusercontent.com/LKPBxwLnZez8neMwpuaNZXMmjTWbiDyO/Screenshot_2015-05-29-22-29-05.png Moreover, the problem is also that the width is not properly aligned on both sides of the edit text. – Vinay Gaba May 29 '15 at 17:00
  • This problem was seen by more people - http://stackoverflow.com/questions/27007985/support-toolbars-custom-view-not-using-full-width http://stackoverflow.com/questions/29239254/extended-toolbar-with-custom-view-not-displaying-with-full-width Don't see a clear solution to it though. – Vinay Gaba May 29 '15 at 17:07
  • I'm not entirely sure why you need the added margin on the bottom but that does work as best I can tell. – Vinny K May 29 '15 at 17:37
0
<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>
Krunal Pandav
  • 21
  • 5