Search code examples
androidandroid-titlebar

How to put buttons in activity header?


I'm trying to design a dialog, which looks similarly to the system one:

enter image description here

Are these buttons planted on the application title bar? Or are they simply placed in the UI?


Solution

  • You can use a ToolBar to do this. This is an example with icon-based buttons, but you can easily modify it into Text Buttons.

    ToolBar Tutorial

    1 - Add library compability

    dependencies {
        compile fileTree(dir: 'libs', include: ['*.jar'])
        compile 'com.android.support:appcompat-v7:21.0.3'
    }
    

    2 - Create a file name color.xml

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <color name="ColorPrimary">#FF5722</color>
        <color name="ColorPrimaryDark">#E64A19</color>
    </resources>
    

    3 - Modify your style.xml

    <resources>
    
        <!-- Base application theme. -->
        <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    
            <item name="colorPrimary">@color/ColorPrimary</item>
            <item name="colorPrimaryDark">@color/ColorPrimaryDark</item>
            <!-- Customize your theme here. -->
        </style>
    
    </resources>
    

    4 - Create a file name toolbar.xml

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

    5 - Include the ToolBar into your main_activity.xml

    <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">
    
        <include
            android:id="@+id/tool_bar"
            layout="@layout/tool_bar"
            ></include>
    
        <TextView
            android:layout_below="@+id/tool_bar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/TextDimTop"
            android:text="@string/hello_world" />
    
    </RelativeLayout>
    

    6 - Put it inside your MainActivity class

    package com.example.hp1.materialtoolbar;
    
    import android.support.v4.widget.DrawerLayout;
    import android.support.v7.app.ActionBarActivity;
    import android.os.Bundle;
    import android.support.v7.app.ActionBarDrawerToggle;
    import android.support.v7.widget.LinearLayoutManager;
    import android.support.v7.widget.RecyclerView;
    import android.support.v7.widget.Toolbar;
    import android.view.Menu;
    import android.view.MenuItem;
    import android.view.MotionEvent;
    import android.view.View;
    import android.widget.Toast;
    
    
    public class MainActivity extends ActionBarActivity { /* When using Appcombat support library
                                                             you need to extend Main Activity to
                                                             ActionBarActivity.
                                                          */
    
    
        private Toolbar toolbar;                              // Declaring the Toolbar Object
    
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            toolbar = (Toolbar) findViewById(R.id.tool_bar); // Attaching the layout to the toolbar object
            setSupportActionBar(toolbar);                   // Setting toolbar as the ActionBar with setSupportActionBar() call
    
        }
    
    
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            // Inflate the menu; this adds items to the action bar if it is present.
            getMenuInflater().inflate(R.menu.menu_main, menu);
            return true;
        }
    
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
            // Handle action bar item clicks here. The action bar will
            // automatically handle clicks on the Home/Up button, so long
            // as you specify a parent activity in AndroidManifest.xml.
            int id = item.getItemId();
    
            //noinspection SimplifiableIfStatement
            if (id == R.id.action_settings) {
                return true;
            }
    
            return super.onOptionsItemSelected(item);
        }
    }
    

    7 - And finally, add your "Button Items" to the menu_main.xml

    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"
        tools:context=".MainActivity">
        <item
            android:id="@+id/action_settings"
            android:orderInCategory="100"
            android:title="@string/action_settings"
            app:showAsAction="never" />
        <item
            android:id="@+id/action_search"
            android:orderInCategory="200"
            android:title="Search"
            android:icon="@drawable/ic_search"
            app:showAsAction="ifRoom"
            ></item>
        <item
            android:id="@+id/action_user"
            android:orderInCategory="300"
            android:title="User"
            android:icon="@drawable/ic_user"
            app:showAsAction="ifRoom"></item>
    
    </menu>