Remove Action bar Icon with custom view and show home up button - android

I am able to add custom view in actionbar. My application is supporting from version 2.3 so I had used ActionbarActivity. Now my query is to remove app icon from the actionbar and only to have home up icon i.e back image.
I had tried lots of option that I found while searching. But its not working with custom view.
edit
ActionBar actionBar = getSupportActionBar();
LayoutParams lp = new LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT, Gravity.RIGHT
| Gravity.CENTER_VERTICAL);
View customNav = LayoutInflater.from(this).inflate(
R.layout.custom_action_view, null); // layout which contains
actionBar.setCustomView(customNav, lp);
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setDisplayShowHomeEnabled(true);
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setBackgroundDrawable(new ColorDrawable(Color
.parseColor("#a40404")));
Help me out with this issue. Thanks in advance.

The up button is tied to home icon. That's why it's called "home as up" setDisplayHomeAsUpEnabled(true).
So you can't show up arrow with disabled "home" icon.
But you can make a View that looks like it in your custom View.
For example:
<LinearLayout
android:id="#android:id/home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal"
android:background="?attr/actionBarItemBackground"
android:paddingRight="5dp">
<!-- this will show tha up arrow -->
<ImageView
android:id="#+id/up"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="?attr/homeAsUpIndicator"/>
<!-- place here any View that will be clickable along with "up" arrow (in this example, it's an icon) -->
<ImageView
android:id="#+id/home_icon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginTop="#dimen/action_bar_icon_vertical_padding"
android:layout_marginBottom="#dimen/action_bar_icon_vertical_padding"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/app_icon"/>
</LinearLayout>
Where
android:src="?attr/homeAsUpIndicator"
Will set the up arrow based on your theme.
android:background="?attr/actionBarItemBackground"
Will set the blue selection background for pressed state
Now set an OnClickListener to a layout with arrow
View customNav = LayoutInflater.from(this).inflate(
R.layout.custom_action_view, null);
customNav.findViewById(android.R.id.home).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick() {
// up button clicked
}
});
actionBar.setCustomView(customNav, lp);

To remove Actonbar Icon:
Just add actionBar.setDisplayUseLogoEnabled(false); this line in oncreate() method:
To enable back button:
you need to extends SherlockActivity and insert this code in oncreate() method:
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
Handle back button action using this code:
#Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
// do your action here when click on back button showing on action bar
onBackPressed();
}
}

Related

Drawer menu icon disappears after applying a custom view to ActionBar

I have a drawer menu icon before adding a custom action bar view, in this custom view, it's a just a imageView:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/bell_icon"
android:layout_gravity="right"
android:layout_marginRight="#dimen/double_spacer"
android:id="#+id/ic_notif"/>
</LinearLayout>
and in the fragment that will have this custom view applied, I have the following lines:
#Override
public void onStart() {
super.onStart();
ActionBar actionBar = getActivity().getActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
LayoutInflater mInflater = LayoutInflater.from(getActivity());
View customView = mInflater.inflate(R.layout.action_bar_custom_layout, null);
setHasOptionsMenu(true);
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM|ActionBar.DISPLAY_SHOW_HOME|ActionBar.DISPLAY_SHOW_TITLE);
actionBar.setDisplayShowHomeEnabled(true);
actionBar.setDisplayShowTitleEnabled(true);
actionBar.setTitle(R.string.plan_member_services);
actionBar.setCustomView(customView);
actionBar.setDisplayShowCustomEnabled(true);
ImageView img_notification = customView.findViewById(R.id.ic_notification);
img_notif.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
System.out.println("*** icon clicked ***");
}
});
if(isShowIcon){
img_notifi.setVisibility(View.VISIBLE);
}else{
img_notifi.setVisibility(View.GONE);
}
...
With above code, I am able to see the icon of the action bar defined in "AndroidMenifest.xml":
<application
android:name=".MyApp"
android:allowBackup="true"
android:allowClearUserData="false"
android:fullBackupContent="#xml/backup"
android:icon="#drawable/ic_launcher"
android:label="#string/app_name"
android:theme="#style/MyActionBarTheme">
and also I'm able to see the title, but the menu icon for the drawer menu is gone! What have I missed?
I found when I put those codes in the activity instead of the fragment, the drawer menu icon appears when the fragment loaded.

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 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 ?

How to centre text in Sherlock Action Bar with icon and sliding menu

I am trying to implement an Action Bar on an Android Activity which implements Jeremy Feinstein's sliding menu and actionbarSherlock. The issue I am facing is to centre align the title text in the Action Bar. My action bar has a menu icon named "icon_sliding_menu" on the left of the text to activate the left menu sliding action.
I have used this example to write attached below. However, when I add the line "getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);" to try to customize my view, my title just goes away, and I don't see any text at all.
ActionBar when the line mentioned above is not in the code:
ActionBar when the line mentioned above is written in the code:
How can I align the text to centre? I am attaching my code below.
actionbar.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center" >
<TextView
android:id="#+id/action_bar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textSize="18sp" />
</LinearLayout>
HomeActivity.java
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_home);
final View actionBarLayout = LayoutInflater.from(this).inflate(
R.layout.actionbar, null);
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getSupportActionBar().setDisplayShowCustomEnabled(true);
getSupportActionBar().setCustomView(actionBarLayout);
getSupportActionBar().setTitle("Home");
getSupportActionBar().setHomeButtonEnabled(true);
initSlidingMenu();
}
private void initSlidingMenu() {
slidingMenu = new SlidingMenu(this);
slidingMenu.setMode(SlidingMenu.LEFT_RIGHT);
slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
slidingMenu.setAboveOffset(50);
slidingMenu.setBehindOffset(150);
slidingMenu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);
slidingMenu.setOnOpenListener(new OnOpenListener() {
#Override
public void onOpen() {
getSupportActionBar().setTitle("Menu");
}
});
slidingMenu.setOnCloseListener(new OnCloseListener() {
#Override
public void onClose() {
getSupportActionBar().setTitle("Home");
}
});
slidingMenu.setSecondaryOnOpenListner(new OnOpenListener() {
#Override
public void onOpen() {
getSupportActionBar().setTitle("Current Trip");
}
});
// Add left menu
mTransaction = this.getSupportFragmentManager().beginTransaction();
slidingMenu.setMenu(R.layout.left_menu);
mTransaction.commit();
// Add right menu
mTransaction = this.getSupportFragmentManager().beginTransaction();
slidingMenu.setSecondaryMenu(R.layout.right_menu);
mTransaction.commit();
}
#Override
protected void onResume() {
super.onResume();
getSupportActionBar().setIcon(R.drawable.icon_sliding_menu);
}
You can do it using titleTextStyle attribute of ActionBar.
In your styles.xml, in the App theme, set actionBarTabSyle to a custom style as,
<item name="titleTextStyle">#style/TitleTextStyle</item>
And heres the CustomActionBarTabs,
<!-- action bar tab styles -->
<style name="TitleTextStyle" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/actionbar_text</item>
<item name="android:gravity">center</item> //center the title
</style>
Using this you can set various styles to the Title Text like color etc. Remember this will only center the text for the space provided to the Title within the ActionBar. In case this doen't help much you can always create your own custom view and add it to ActionBar as,
getSupportActionBar().setCustomView(R.layout.action_bar);
In case you want to create your own layout, follow these 2 simple steps:
Java Code
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getSupportActionBar().setCustomView(R.layout.actionbar);
Where R.layout.actionbar is the following XML.
XML
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="YOUR ACTIVITY TITLE"
android:textColor="#ffffff"
android:textSize="24sp" />
</LinearLayout>
Source.

Categories

Resources