How to add a toolbar to an Android Activity?

Question

The official Twitter client for Android has a nice toolbar when you click on a message that lets you retweet, reply, etc. How can I re-create a toolbar like that?

Solution 1

For the LinearLayout approach, the code is simple, just add some weights and play around with what your looking for. This gives you a rough idea of the approach:

<EditText android:text="Example Layout" 
          android:layout_width="match_parent"
          android:id="@+id/editText"
          android:layout_height="wrap_content"
          android:layout_weight="0.95"></EditText>

<LinearLayout
  android:layout_width="fill_parent"
  android:orientation="horizontal"
  android:weightSum="1.0" 
  android:padding="1px"
  android:layout_height="wrap_content"
  android:layout_weight="0.05">

  <ImageButton android:id="@+id/testButton1"
          android:layout_weight="0.2"
          android:background="@drawable/btn"
          android:layout_height="wrap_content"
          android:layout_width="wrap_content"/>

  <ImageButton android:id="@+id/testButton2"
          android:layout_weight="0.2"
          android:background="@drawable/btn"
          android:layout_height="wrap_content"
          android:layout_width="wrap_content" />

  <ImageButton android:id="@+id/testButton3"
          android:layout_weight="0.2"
          android:background="@drawable/btn"
          android:layout_height="wrap_content"
          android:layout_width="wrap_content" />

  <ImageButton android:id="@+id/testButton4"
          android:layout_weight="0.2"
          android:background="@drawable/btn"
          android:layout_height="wrap_content"
          android:layout_width="wrap_content" />

  <ImageButton android:id="@+id/testButton5"
          android:layout_weight="0.2"
          android:background="@drawable/btn"
          android:layout_height="wrap_content"
          android:layout_width="wrap_content" />

</LinearLayout>

And results in something like this: http://i.stack.imgur.com/bShgb.png

You may also be happy with ActionBar as well, just watch the API requirements: http://developer.android.com/guide/topics/ui/actionbar.html

Solution 2

We call it QuickAction:

Find more about how to implement it here: http://www.londatiga.net/it/how-to-create-quickaction-dialog-in-android/

Comments

[aromero]

The toolbar that is shown in the message detailed view (the one in the left in your screenshot) seems to be a linearlayout with a bunch of buttons layouted at the bottom of the screen.

[ingsaurabh]

ALthough what you want is QuickAction but one possible and simple solution is to use custom Popupwindow that what is used in QuickAction

[aromero]

He knows what a toolbar is and whats for, he is asking for an implementation. BTW androidpatterns.com/uap_pattern/toolbar

[Sheehan Alam]

Here is a screenshot of the Twitter toolbar wirefresh.com/images/twitter-android-update-1.jpg

[Jack]

There's at least 2 different views of a Toolbar I know of, so thank you for the screenshot. Have you tried a simple Horizontal LinearLayout with your Buttons placed in it?