Android, How to replace up/back caret in the ActionBar? - android

Minimum SDK version that I'm supporting is 14. I have Action bar in my application and everything about it's functionality is okay.
My only problem is up or back caret which is gray color. I want to have it white color. Therefore, I designed similar caret with white color in different sizes.
so my question is how to replace gray/default caret with mine?
So what I did? Based on what this guy said, I added
<item name="android:homeAsUpIndicator">#drawable/ic_drawer_back</item>
into my app theme like this:
<style name="Theme.Example" parent="#android:style/Theme.Holo.Light">
...
<item name="android:actionBarStyle">#style/ActionBar.Solid.Example</item>
</style>
<style name="ActionBar.Solid.Example" parent="#android:style/Widget.Holo.Light.ActionBar.Solid">
...
<item name="android:homeAsUpIndicator">#drawable/ic_drawer_back</item>
</style>
Although I'm telling ic_drawer_back image should be loaded as caret but when I run the app default(gray) caret is still displaying.
Did you face this problem before? any suggestion would be appreciated. Thanks
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
R.drawable.ic_drawer, //nav menu toggle icon
R.string.app_name, // nav drawer open - description for accessibility
R.string.app_name // nav drawer close - description for accessibility
){
public void onDrawerClosed(View view) {
getActionBar().setTitle(mTitle);
// calling onPrepareOptionsMenu() to show action bar icons
invalidateOptionsMenu();
// display view for selected nav drawer item
displayView(selectedDrawerItem);
}
public void onDrawerOpened(View drawerView) {
getActionBar().setTitle(mDrawerTitle);
// calling onPrepareOptionsMenu() to hide action bar icons
invalidateOptionsMenu();
}
};
mDrawerLayout.setDrawerListener(mDrawerToggle);
#Override
public boolean onPrepareOptionsMenu(Menu menu) {
// if nav drawer is opened, hide the action items
// boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
// menu.findItem(R.id.action_settings).setVisible(!drawerOpen);
return super.onPrepareOptionsMenu(menu);
}
#Override
protected void onPostCreate(Bundle savedInstanceState) {
super.onPostCreate(savedInstanceState);
// Sync the toggle state after onRestoreInstanceState has occurred.
mDrawerToggle.syncState();
}
#Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
// Pass any configuration change to the drawer toggles
mDrawerToggle.onConfigurationChanged(newConfig);
}

Luckily I found where my problem was. I mistakenly had put
<item name="android:homeAsUpIndicator">#drawable/ic_drawer_back</item>
in ActionBar.Solid.Example instead of Theme.Example.
So it's working fine now.

Related

action bar icon keep showing back icon

i'm literally new in developing android apps. My project using navigation drawer between fragments. i tried to custom the drawer with tutorial http://www.tutecentral.com/android-custom-navigation-drawer/ and got an error. in my application, in action bar, it keeps showing back icon instead the default icon.
this is url for before-after image of actionbar : http://oi58.tinypic.com/2ahsbys.jpg
here is the code i'm confused of (pretty same with the tutorial, tell me if there's something i missed)
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
R.drawable.ic_drawer, R.string.navigation_drawer_open,
R.string.navigation_drawer_close) {
public void onDrawerClosed(View view) {
getSupportActionBar().setTitle(mTitle);
invalidateOptionsMenu(); // creates call to
// onPrepareOptionsMenu()
}
public void onDrawerOpened(View drawerView) {
getSupportActionBar().setTitle(mDrawerTitle);
invalidateOptionsMenu(); // creates call to
// onPrepareOptionsMenu()
}
};
if i delete setDisplayHomeAsUpEnabled, the back icon is gone but i can't click somewhere to display the drawer, i have to slide it. please refer me if someone has solved it. many thanks.
*i have changed the R.drawable.ic_drawer to other drawable icons but it had no effects.
Try setting a theme for your activity in manifest file and inside styles.xml set your drawable for homeAsUpIndicator for that theme
<style name="CustomTheme" parent="#style/Widget.AppCompat.ActionBar">
<item name="homeAsUpIndicator">#drawable/ic_drawer</item>
</style>

Android: custom icon not displayed in ActionBarDrawerToggle of DrawerLayout

I am trying to implement DrawerLayout. The drawer layout is working fine. But the icon displayed in Top Left corner is android.R.id.home. However I have mentioned my custom icon in ActionBarDrawerToggle as follows:
// Getting reference to the DrawerLayout
drawerLayout = (android.support.v4.widget.DrawerLayout) findViewById(R.id.drawer_layout);
drawerList = (ListView) findViewById(R.id.drawer_list);
// Getting reference to the ActionBarDrawerToggle
drawerToggle = new ActionBarDrawerToggle(this, drawerLayout,
**R.drawable.icon_top_menu**, R.string.drawer_open,
R.string.drawer_close) {
/** Called when drawer is closed */
public void onDrawerClosed(View view) {
super.onDrawerClosed(view);
}
/** Called when a drawer is opened */
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
}
};
// Setting DrawerToggle on DrawerLayout
drawerLayout.setDrawerListener(drawerToggle);
getActionBar().setIcon(R.drawable.icon_top_menu);
// enabling action bar app icon and behaving it as toggle button
getActionBar().setDisplayHomeAsUpEnabled(true);
getActionBar().setHomeButtonEnabled(true);
What's the problem?
You should check your onoptionsItem selected, should missing there...............
as shown below:
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
in place of '.action_settings' try 'icon_top_menu' your icon.......
you should use visibility true/false for the icon menu in each activity where you want to show your icon...and please describe your question properly what you want to do.
To
user1182217
okay i got your problem some what, hope this will help you.
as for icon id you are using "android.R.id.home" which is 'android id' by default,
in place of that use your icon id as R.id.home/ R.id.your_icon_id hope the only error as
per your problem description..........

Hide the icon in the ActionBar in Android

I am trying to hide the application logo from the ActionBar. In order to do that I am using the setDisplayHomeAsUpEnabled(boolean) method:
this.getActionBar().setDisplayHomeAsUpEnabled(true);
This works almost as intented, except for two things:
The icon is still visible when the application starts (and then disappear)
The navigation drawer icon is not visible on some devices (for example on the Samsung Galaxy Tab 3)
How can I fix this?
The icon is still visible when the application starts (and then disappear)
To avoid this you need to undisplay your logo from your style.xml as follows:
<style name="MyTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/mActionBar</item>
<item name="actionBarStyle">#style/mActionBar</item>
</style>
<style name="mActionBar" parent="#style/Widget.Holo.Light.ActionBar">
<item name="android:icon">#android:color/transparent</item>
<item name="icon">#android:color/transparent</item>
</style>
Because your app starts with loading your Theme and then after displays your UI by your Activity. Also, this will be a resource way, because your activities will not reload the UI like the home icon, etc. since they are first initialized thanks to the theme.
The navigation drawer icon is not visible on some devices
Make sure you have this following snippnet code:
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerToggle = new ActionBarDrawerToggle(
this, /* host Activity */
mDrawerLayout, /* DrawerLayout object */
R.drawable.ic_drawer, /* nav drawer icon to replace 'Up' caret */
R.string.drawer_open, /* "open drawer" description */
R.string.drawer_close /* "close drawer" description */
) {
/** Called when a drawer has settled in a completely closed state. */
public void onDrawerClosed(View view) {
super.onDrawerClosed(view);
getActionBar().setTitle(mTitle);
}
/** Called when a drawer has settled in a completely open state. */
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
getActionBar().setTitle(mDrawerTitle);
}
};
//...
getActionBar().setDisplayHomeAsUpEnabled(true);
getActionBar().setHomeButtonEnabled(true);
And check your icon, or (re)download it.
Hope this helps.
Try: getActionBar().setDisplayUseLogoEnabled(false);

How to add "menu" indicator next to Action Bar's app icon?

At least Gmail and Youtube Android apps use a side menu (navigation drawer?) that opens by swiping, or by clicking the app icon (home button):
Is the menu indicator / icon in the screenshot above a ready-made part of Android SDK? (Or a custom icon Google uses in their apps?) In any case, what's the easiest way to get your home button to look like that, i.e., like it opens a menu?
(targetSdkVersion 18; minSdkVersion 14)
Resolution
Finally got it working. What was missing for me was 1) the actual icon and 2) deferred call to syncState() on the ActionBarDrawerToggle.
To create similar implementation / look in your application you should use ActionBarDrawerToggle and set your custom icon as indicator next to ActionBar home button. For example :
import android.app.ActionBar;
import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.widget.DrawerLayout;
private void setUpDrawerToggle(){
ActionBar actionBar = getActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setHomeButtonEnabled(true);
// ActionBarDrawerToggle ties together the the proper interactions
// between the navigation drawer and the action bar app icon.
mDrawerToggle = new ActionBarDrawerToggle(
this, /* host Activity */
mDrawerLayout, /* DrawerLayout object */
R.drawable.ic_drawer, /* nav drawer image to replace 'Up' caret */
R.string.navigation_drawer_open, /* "open drawer" description for accessibility */
R.string.navigation_drawer_close /* "close drawer" description for accessibility */
) {
#Override
public void onDrawerClosed(View drawerView) {
invalidateOptionsMenu(); // calls onPrepareOptionsMenu()
}
#Override
public void onDrawerOpened(View drawerView) {
invalidateOptionsMenu(); // calls onPrepareOptionsMenu()
}
};
// Defer code dependent on restoration of previous instance state.
// NB: required for the drawer indicator to show up!
mDrawerLayout.post(new Runnable() {
#Override
public void run() {
mDrawerToggle.syncState();
}
});
mDrawerLayout.setDrawerListener(mDrawerToggle);
}
Where R.drawable.ic_drawer is actually the icon to use as indicator. You can find it in Android Asset Studio; see Navigation Drawer Indicator.
References
ActionBarDrawerToggle
Creating a Navigation Drawer
Android-Developer and HpTerm helped me in the right rirection, by
Pointing out this is indeed NavigationDrawer specific (which I was already using as in Google's example)
Telling where to find the ic_drawer.png icon (→ Android Asset Studio)
Now, unfortunately, creating ActionBarDrawerToggle like below seems not to be enough.
At least on my Nexus 7 (API 18) test device.
drawerToggle = new ActionBarDrawerToggle(this,
drawerLayout,
R.drawable.ic_navigation_drawer,
R.string.side_menu_open,
R.string.side_menu_closed) {
// ...
};
Partial solution (API level 18+)
I found one way to make the indicator show up though: setHomeAsUpIndicator(). The downside: that method was added in API level 18.
#Override
protected void onCreate(Bundle savedInstanceState) {
// ...
getActionBar().setDisplayHomeAsUpEnabled(true); // also required
if (Build.VERSION.SDK_INT >= 18) {
getActionBar().setHomeAsUpIndicator(
getResources().getDrawable(R.drawable.ic_navigation_drawer));
}
}
So now the question remains: how to make this work (in my case) for API levels 14 through 17?
I verified on a 4.1.2 (API 16) device that the ic_drawer icon does not show up. With setDisplayHomeAsUpEnabled(true) I get the normal "home" icon (small arrow pointing left) and without it, the space left to my app icon remains blank.
Final solution
Got it working using the edited version of Android-Developer's answer.
Quite curiously, what was missing from my ActionBarDrawerToggle initialisation code was this:
// Defer code dependent on restoration of previous instance state.
drawerLayout.post(new Runnable() {
#Override
public void run() {
mDrawerToggle.syncState();
}
});
With that included, calling setHomeAsUpIndicator() is not needed.
The keyword here is NavigationDrawer; there's a full working code example on the Android developer site.
READ THE END OF THE LINK GIVEN : Open and Close with the App Icon
The following code is copied from there
public class MainActivity extends Activity {
private DrawerLayout mDrawerLayout;
private ActionBarDrawerToggle mDrawerToggle;
...
public void onCreate(Bundle savedInstanceState) {
...
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerToggle = new ActionBarDrawerToggle(
this, /* host Activity */
mDrawerLayout, /* DrawerLayout object */
R.drawable.ic_drawer, /* nav drawer icon to replace 'Up' caret */
R.string.drawer_open, /* "open drawer" description */
R.string.drawer_close /* "close drawer" description */
) {
/** Called when a drawer has settled in a completely closed state. */
public void onDrawerClosed(View view) {
getActionBar().setTitle(mTitle);
}
/** Called when a drawer has settled in a completely open state. */
public void onDrawerOpened(View drawerView) {
getActionBar().setTitle(mDrawerTitle);
}
};
// Set the drawer toggle as the DrawerListener
mDrawerLayout.setDrawerListener(mDrawerToggle);
getActionBar().setDisplayHomeAsUpEnabled(true);
getActionBar().setHomeButtonEnabled(true);
}
#Override
protected void onPostCreate(Bundle savedInstanceState) {
super.onPostCreate(savedInstanceState);
// Sync the toggle state after onRestoreInstanceState has occurred.
mDrawerToggle.syncState();
}
#Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
mDrawerToggle.onConfigurationChanged(newConfig);
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
// Pass the event to ActionBarDrawerToggle, if it returns
// true, then it has handled the app icon touch event
if (mDrawerToggle.onOptionsItemSelected(item)) {
return true;
}
// Handle your other action bar items...
return super.onOptionsItemSelected(item);
}
...
}
Some files are available as download and the small 3 lines with the animation effect is fully exemplified.
You have to copy thoses files in the corresponding drawable folder. Depending on the theme you use, dark or light you have a different set of icons.
In my case I simply copied the drawer_shadow.9.png and ic_drawer.png in the drawable folder and followed the example and everything works just fine.
The icons are available in the link I provided, but they are NOT in the "Action Bar Icon Pack", they are in the sample app in the corresponding res/drawable folders.

Toggle DrawerLayout With Title Only (NO App Icon)?

I have an activity with a DrawerLayout. I can open the drawer two different ways...by swiping from the left area of the screen towards the right and by clicking the app title. I DO NOT have an app icon displayed, only a title. I've implemented this exactly as recommended by Google here: Creating a Navigation Drawer: Open and Close with the App Icon
Everything is functional as far as opening and closing the drawer itself. However, it does not display the standard DrawerLayout icon that is suppose to be used. Instead I get the regular up caret (looks like a less than sign).
As soon as I add the app icon back to the ActionBar it begins to work as expected. The Drawer layout icon displays and animates when the drawer is opened or closed. I've tried removing the app icon both in my styles XML file and programmatically.
Is there a way to get the DrawerLayout icon working WITHOUT the app icon???
UPDATE: I've found a work around, but it's a hack more so than a solution. I simply created a 1x1 pixel transparent PNG (blank.png) and set it as my app icon in my styles.xml file. Below is all relative code:
styles.xml
<style name="MyCustomTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/MyCustomActionBar</item>
<item name="android:icon">#drawable/blank</item>
</style>
<style name="MyCustomActionBar" parent="#android:style/Widget.Holo.ActionBar">
<item name="android:displayOptions">showHome|showTitle|homeAsUp</item>
</style>
MainActivity -> onCreate()
this.navDrawerToggle = new ActionBarDrawerToggle
(
this,
this.navDrawerLayout,
R.drawable.icon_nav_drawer,
R.string.nav_drawer_open,
R.string.nav_drawer_closed
)
{
public void onDrawerClosed(View view) {}
public void onDrawerOpened(View drawerView) {}
};
MainActivity -> onPostCreate()
super.onPostCreate(savedInstanceState);
this.navDrawerToggle.syncState();
MainActivity -> onResume()
this.navDrawer.setOnItemClickListener(new DrawerItemClickListener());
this.navDrawerLayout.setDrawerListener(this.navDrawerToggle);
MainActivity -> onPause()
this.navDrawer.setOnItemClickListener(null);
this.navDrawerLayout.setDrawerListener(null);
MainActivity -> onConfigurationChanged(Configuration newConfig)
super.onConfigurationChanged(newConfig);
navDrawerToggle.onConfigurationChanged(newConfig);
MainActivity -> onOptionsItemSelected(MenuItem item)
if (this.navDrawerToggle.onOptionsItemSelected(item)) {return true;}
else
{
// A bunch of item click handling happens here...
return true;
}
I was curious about this so I tried it with the sample for the DrawerLayout and it worked fine. Also, it seems like you have to use your own drawer icon drawable, it's recommended anyways. You can download the default assets from this site Creating a Navigation Drawer and put them in their respective drawable resource folder.
Here's what worked for me:
ActionBar actionBar = getActionBar();
// Let's get rid of the app icon here
actionBar.setIcon(null);
actionBar.setTitle("App Name");
// Setting these 3 options allows us to show the title as well as a "Home" elements
// "Home" elements include the Up and/or Drawer icon. The DISPLAY_HOME_AS_UP will enable
// and show the Drawer icon, we'll be "replacing" the "up" button with the drawer icon below
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_TITLE
| ActionBar.DISPLAY_SHOW_HOME
| ActionBar.DISPLAY_HOME_AS_UP);
// Get a reference of the DrawerLayout
DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
drawerLayout.setDrawerListener(drawerToggle);
// Setting ActionBarDrawerToggle will allow you to set the drawables for the drawer
// (this will also give you the nice/smooth animation) as well as allow you to do some
// other things depending on the events: onDrawerClosed & onDrawerOpened.
ActionBarDrawerToggle drawerToggle = new ActionBarDrawerToggle(
this, /* host Activity */
drawerLayout, /* DrawerLayout object */
R.drawable.ic_drawer, /* nav drawer image to replace 'Up' caret */
R.string.drawer_open, /* "open drawer" description for accessibility */
R.string.drawer_closed /* "close drawer" description for accessibility */
) {
public void onDrawerClosed(View view) {
actionBar.setTitle("Closed...");
invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
}
public void onDrawerOpened(View drawerView) {
actionBar.setTitle("Open...");
invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
}
};
// Set a listener to be notified of drawer events.
drawerLayout.setDrawerListener(drawerToggle);
UPDATE: It seems like the android:displayOptions on the ActionBar style are not being accounted for. Use actionBar.setDisplayOptions(int options) instead.
getActionBar().setIcon(android.R.color.transparent);
This worked for me..... ;)
After setting the drawer toggle you need to call the following method:
mDrawerToggle.syncState();
so your code would look like this:
mDrawerToggle = new ActionBarDrawerToggle(
this, /* host Activity */
mDrawerLayout, /* DrawerLayout object */
R.drawable.ic_drawer, /* nav drawer image to replace 'Up' caret */
R.string.drawer_open, /* "open drawer" description for accessibility */
R.string.drawer_close /* "close drawer" description for accessibility */
) {
public void onDrawerClosed(View view) {
actionBar.setTitle(mTitle);
invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
}
public void onDrawerOpened(View drawerView) {
actionBar.setTitle("Preview Mode");
invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
}
};
mDrawerToggle.syncState();
mDrawerLayout.setDrawerListener(mDrawerToggle);

Categories

Resources