CODEWITHSUNDEEP
androidandroid-actionbartoolbarappbar
Bram-N
Bram-N

Reputation: 426

Extended app bar?

I'm trying to achieve an extended app bar like this:

screenshot

But I have no idea how to do it, I've been looking for a while now but haven't come across something that explains how to do it so now I'm here.

My XML code for my current toolbar is

<?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_add_activity"
android:layout_width="match_parent"
android:layout_height="232dp"
android:minHeight="56dp"
android:background="@color/colorPrimary"
android:elevation="4dp"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
>

But I don't know how to continue, if anyone can give an example, point me in the right direction or provide a tutorial that would be great.

Thanks in advance!

Upvotes: 1

Views: 1091

Answers (1)

Bram-N
Bram-N

Reputation: 426

I have no idea if this is the correct way of doing this since I can't find any examples or explanations of how it is correctly achieved, but at the moment I've fixed it with this code:

<?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_add_activity"
android:layout_width="match_parent"
android:layout_height="232dp"
android:minHeight="56dp"
android:background="@color/colorPrimary"
android:elevation="4dp"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">


<LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="56dp"
    android:layout_marginLeft="72dp">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/input_title"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_marginBottom="8dp">
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/editText8"
        android:hint="Title" />
</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
    android:id="@+id/input_description"
    android:layout_width="match_parent"
    android:layout_height="72dp"
    android:layout_marginBottom="16dp">
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/editText9"
        android:hint="Description" />
</android.support.design.widget.TextInputLayout>
</LinearLayout>
</android.support.v7.widget.Toolbar>

And it looks like this (I can't embed images yet due to not having enough rep): image

It's without the 'return' arrow in the upper left corner, that's for another time

If anyone can confirm this is the correct way or provide the correct way of doing this that would be great!

Edit: Activating the up arrow in the toolbar to go back to the parent activity automatically gives the textinputs in the linearlayout the left margin, so you can delete the 72dp left margin

Upvotes: 1

Related Questions