Develop Reference

Adding buttons on top of activity

I want to add some buttons on top of the activity layout (marked it in the picture) but could not find how to do this. What phrases should i search for?

The buttons that appear there (both text and icons) are items in what's called the Options Menu. Developer guides for creating options menus are here: https://developer.android.com/guide/topics/ui/menus.html#options-menu

As Ben P said, thats called Menu.
You need to create an XML with the options, and in the activity render the XML.
Example, lets call this menu_test.xml
<menu 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_download"
android:title="#string/download_information"
android:orderInCategory="100"
android:icon="#drawable/ic_file_download_white_24dp"
app:showAsAction="always" />
</menu>
As you can see on the guide, showAsAction will display the icon if have one, or the title if it hasnt. If you remove that line, its added to the three points button.
Now in the activity
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_test, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_download) {
//YOUR METHOD HERE
return true;
}
return super.onOptionsItemSelected(item);
}
Hope it helps.

You need to remove actionbar from activity. You can set NoActionBar theme for the activity. And in your layout xml, you can add toolbar which includes buttons like following code.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#131313"
android:minHeight="?attr/actionBarSize">
<LinearLayout
android:layout_width="wrap_content"
android:background="#00aaaaaa"
android:layout_gravity="right"
android:layout_height="match_parent">
<Button
android:text="Delete"
android:layout_width="wrap_content"
android:background="#000"
android:textColor="#fff"
android:layout_height="wrap_content"
android:textSize="16dp" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
And in onCreate() function, you can add following code:
Toolbar topToolBar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(topToolBar);
ActionBar actionBar = getSupportActionBar();;
actionBar.setDisplayHomeAsUpEnabled(true);

How to change overflow menu icon with imageview

I have an toolbar with overflow menu icon with menu items. I need to change the overflow icon to the circular imageview.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#color/white"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_image"
android:layout_width="38dp"
android:layout_height="30dp"
android:layout_gravity="right|end"
app:srcCompat="#android:drawable/sym_def_app_icon"/>
</android.support.v7.widget.Toolbar>
And the code looks like.
Toolbar toolbarTop = (Toolbar) findViewById(R.id.toolbar);
CircleImageView mciv = (CircleImageView) findViewById(R.id.profile_image);
setSupportActionBar(toolbarTop);
I have tried to change the overflow icon but most of SO mentioned about of using drawable. But i need to use the imageview. I have tried with the below
#Override
public boolean onOptionsItemSelected(MenuItem item) {
item.setActionView(mciv);
return super.onOptionsItemSelected(item);
}
But its not working. How to change overflow menu icon with imageview?

You can set click event of imageview and on click open menu.
imageView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
openOptionsMenu();
}
});
or you can manually create Popup menu, here is the example for popup menu

After collapse SearchView disappear from toolbar

I create small example to show my issue.
Main layout with SearchView in toolbar and 3 buttons:
1) Set text - expand search view and set query
2) Expand - expand search view
3) Collapse - collapse search view
activity_main.xml
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical"
tools:context="com.porn.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="368dp"
android:layout_height="wrap_content"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:contentInsetStartWithNavigation="0dp">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<Button
android:id="#+id/setTextBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Set text" />
<Button
android:id="#+id/expandBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Expand" />
<Button
android:id="#+id/collapseBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Collapse" />
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity {
private MenuItem toolbarSearchMenuItem;
private SearchView toolbarSearchView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//Toolbar
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
findViewById(R.id.expandBtn).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
toolbarSearchMenuItem.expandActionView();
}
});
findViewById(R.id.collapseBtn).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
toolbarSearchMenuItem.collapseActionView();
}
});
findViewById(R.id.setTextBtn).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
setToolbarSearchQuery("Text2");
}
});
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toobar, menu);
toolbarSearchMenuItem = menu.findItem(R.id.toolbar_action_search);
toolbarSearchView = (SearchView) menu.findItem(R.id.toolbar_action_search).getActionView();
init();
return true;
}
public void init() {
//In real app i get searchQuery from extra
//String searchQuery = getIntent().getStringExtra(INTENT_EXTRA_SEARCH_QUERY_KEY);
setToolbarSearchQuery("Text from intent");
}
private void setToolbarSearchQuery(String searchQuery) {
if (!searchQuery.equals("")) {
toolbarSearchMenuItem.expandActionView();
toolbarSearchView.setQuery(searchQuery, false);
toolbarSearchView.clearFocus();
} else {
toolbarSearchMenuItem.collapseActionView();
}
}
}
My problem appears when i call method init() from onCreateOptionsMenu (In real app i init SearchView with text from intent extra). If i call setToolbarSearchQuery method from init and after i click collapse button SearchView collapsed and search icon disappear.
But if i will not call init method and will call same method setToolbarSearchQuery with set text button it works correctly (SearchView is collapsed and search icon shown in toolbar).
How i can solve this problem? And why icon disappear after collapse?
I understood that it happens when i expand SearchView from onCreateOptionsMenu. But how i can correct init SearchView from intent extra?
Screenshot how it looks after collapse
Screenshot how it must looks after collapse

The "anton111111" answer works perfectly, but just for those who don't want to use delay, I recommend change search menu item showAsAction property as below:
android:showAsAction="always|collapseActionView"
instead of
android:showAsAction="ifRoom|collapseActionView"
See original answer here.

I found only one solution. Set text in init method delayed.
public void init() {
//setToolbarSearchQuery("Text from intent");
final Handler handler = new Handler();
handler.postDelayed(new Runnable() {
#Override
public void run() {
toolbarSearchMenuItem.expandActionView();
toolbarSearchView.setQuery("Text from intent", false);
}
}, 1000);
}
But i don't like this solution. It looks like trick.

How to align action bar title to centre without using custom view

I want to align the action bar title to centre without the help of custom view . I would appreciate any help.
Without using the custom view, modifying only default action bar title

You can align the title to the center when you use ActionBar, but you can use Toolbar to do this.
Toolbar is more useful and easier than ActionBar, you can use this layout to define the center title TextView for you activity:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="40dip">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/app_name" />
</android.support.v7.widget.Toolbar>
And use this code for a back button:
protected void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.setContentView(R.layout.activity_toolbar);
Toolbar toolbar = (Toolbar) findViewById(R.id.single_toolbar);
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
if(actionBar != null)
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
onBackPressed();
return true;
}
return super.onOptionsItemSelected(item);
}
You also need to override onCreateOptionsMenu method for the menu, and you can refer to this project : chrisbanes/cheesesquare.

Ok, You can try this:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" >
<TextView
android:textColor="#fff"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_gravity="center"
android:text="#string/app_name" />
</android.support.v7.widget.Toolbar>
And remember to add this line in your activity's java code:
getSupportActionBar.setTitle("");

It seems there is no way to do this without custom view. You can get the title view:
View decor = getWindow().getDecorView();
TextView title = (TextView) decor.findViewById(getResources().getIdentifier("action_bar_title", "id", "android"));
But changing of gravity or layout_gravity doesn't have an effect. The problem in the ActionBarView, which layout its children by itself so changing of layout params of its children also doesn't have an effect. To see this excecute following code:
ViewGroup actionBar = (ViewGroup) decor.findViewById(getResources().getIdentifier("action_bar", "id", "android"));
View v = actionBar.getChildAt(0);
ActionBar.LayoutParams p = new ActionBar.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
p.gravity= Gravity.CENTER;
v.setLayoutParams(p);
v.setBackgroundColor(Color.BLACK);

Contextual Action Mode not filtering touches

The contextual action mode, when overlayed on top of an android.support.v7.widget.Toolbar, does not appear to filter touches over its entire width, but lets touches "fall through" to (invisible) widgets on the Toolbar.
My Toolbar contains a custom widget (one of the declared benefits of Toolbar). I have the contextual action mode styled to overlay the toolbar, and it hides it entirely. However, when I touch where the (now obscured) custom widget was located, the touch passes through to it. I wonder if this is a bug/oversight, but I may not have grasped this right, or my expectations may be lofty. I assume that the touch would not pass through if there was something on the contextual action overlay in the location of the obscured custom component.
I am testing this on Kitkat.
Here is some sample code:
MainActivity.java
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.actionbar_toolbar);
setSupportActionBar(toolbar);
TextView barTextView = (TextView) toolbar.findViewById(R.id.textview_bar);
barTextView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "Bar TextView clicked", Toast.LENGTH_SHORT).show();
}
});
mActionModeCallback = new ActionModeCallback();
TextView mainTextView = (TextView) findViewById(R.id.textview_main);
mainTextView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "Main TextView clicked", Toast.LENGTH_SHORT).show();
if (mActionMode != null) {
return;
}
getSupportActionBar().startActionMode(mActionModeCallback);
}
});
}
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/actionbar_toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:background="?attr/colorPrimary"
app:theme="#style/ThemeOverlay.AppCompat.ActionBar">
<TextView
android:id="#+id/textview_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Bar"
android:textColor="#FF0000"/>
</android.support.v7.widget.Toolbar>
<TextView
android:id="#+id/textview_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="SomeTextToClick"/>
</LinearLayout>
styles.xml
<resources>
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<item name="windowActionModeOverlay">true</item>
</style>
</resources>
I also tried setting up the action mode with the following alternative, but the behavior was the same:
Toolbar toolbar = (Toolbar) MainActivity.this.findViewById(R.id.actionbar_toolbar);
mActionMode = toolbar.startActionMode(mActionModeCallback);
At this point I can only think of either explicitly disabling the custom component whenever the contextual action mode comes on, or somehow filling the contextual action bar with invisible junk to more seriously obscure the toolbar.
Some screenshots below.
Before clicking anything:
After clicking "SomeTextToClick" - contextual action mode is now on, and the text in the toolbar is obscured, but at this point I can click in the center of the contextual action bar, and the click gets handled by the listener on the "Bar" TextView in the toolbar:
Can anyone help ?