I am working on android UX design. I am using RelativeLayout. I want to do the below screen in android.
I want to know how to show an icon at the top of the screen (red marked).
When i click that icon, i want to show the information about the app with a black background.
I am new to android and i don't know how to do this. Need some help to do.
That's an ActionBar (Toolbar) Menu icon:
You need to add a menu file inside res/menu, like: main.xml formed this way:
<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_main"
android:title="#string/action_main"
android:orderInCategory="100"
android:icon="#drawable/ic_launcher"
app:showAsAction="ifRoom" />
</menu>
Over "android:icon" goes the one you want, "android:title" the one you want when the user long press the icon.
EDIT Check the updated code with comments
To have listener (onClick actions) do this over the Activity:
#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
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
if(id == R.id.action_main){
Toast.makeText(getApplicationContext(), "Main action is selected!", Toast.LENGTH_SHORT).show();
// Toast only have a small duration to show something,
// even when you long press the item, the Title is also a
// Toast. You can literally do anything here. Show stuffs,
// hide it, open activities, close the app, etc
return true;
}
return super.onOptionsItemSelected(item);
}
add in menul
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#+id/phone"
android:title="#string/phone"
android:icon="#drawable/phone"
android:showAsAction="always"
/>
</menu
After that in java
#Override
public boolean onOptionsItemSelected(MenuItem item) {
super.onOptionsItemSelected(item);
switch(item.getItemId()){
case R.id.phone:
Toast.makeText(getBaseContext(), "You selected Phone", Toast.LENGTH_SHORT).show();
break;
}
return true;
Related
I have a settings icon on my Action Bar and I wanted to do something when the user taps on icon as shown in the picture below(e.g display toast), I just need the method that's all, Thanks in advance...Here is the code that created inflates the icon to my ActionBar
public override bool OnCreateOptionsMenu(IMenu menu)
{
MenuInflater.Inflate(Resource.Menu.settings, menu);
return true;
}
Xml code for the menu item
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="#+id/menu_item1"
android:icon="#drawable/settings"
app:showAsAction="always"/>
</menu>
Method to handle when that icon is clicked is greatly appreciated(Display Toast)
This inbuilt method works to display a toast when the settings icon is tapped
public override bool OnOptionsItemSelected(IMenuItem item)
{
Toast.MakeText(this, "You tapped on the Settings Icon", ToastLength.Long).Show();
return base.OnOptionsItemSelected(item);
}
My app for that moment has 3 buttons, which allow for switches LED and read data from humidity sensor by bluetooth (each one sends another command to arduino e.g. '0' - LED OFF, '1' - LED ON, '2' - READ DATA).
Today I wanted add sending any messages to arduino, so I insert EditTextBox to my layout and I decided that the button to send message to Arduino from this EditTextBox will be on the action bar with this icon send icon
menu -> main.xml
`<!-- language: lang-xml -->
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/action_send"
android:icon="#drawable/ic_send_black_48dp"
android:title="#string/action_send" // this string is empty ' '
android:orderInCategory="1"
app:showAsAction="always" />
<item
android:id="#+id/action_settings"
android:orderInCategory="2"
android:title="#string/action_settings"
app:showAsAction="never" />
</menu>`
MainActivity.java
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// COMPLETED (9) Within onCreateOptionsMenu, use getMenuInflater().inflate to inflate the menu
getMenuInflater().inflate(R.menu.main, menu);
// COMPLETED (10) Return true to display your menu
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.action_settings:
Context context = MainActivity.this;
String textToShow = "...";
Toast.makeText(context, textToShow, Toast.LENGTH_SHORT).show();
return true;
case R.id.action_send:
mConnectedThread.write(txtBluetooth.getText().toString());
return true;
default:
// If we got here, the user's action was not recognized.
// Invoke the superclass to handle it.
return super.onOptionsItemSelected(item);
}
}
How can you see, I set app:showAsAction="always" /> and despite this send icon missing on action bar and is sent to the overflow menu, as in the picture: app
So, how can i prevent this and make that send icon will appear on action bar no in overflow menu?
I want to get an item to only show text on the optionsMenu in the action bar.
Here is my code:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#+id/select_recipients_return_to_compose"
android:showAsAction="ifRoom|withText"
android:orderInCategory="100"
android:title="Finish"/>
</menu>
Things I've tried:
1) True on onCreateOptionsMenu:
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.create_broadcast_options_menu, menu);
optionsMenu = menu;
MenuItem menuItem = menu.getItem(0);
menuItem.setEnabled(false);
// check if our roles recipients are chcked and if
Cursor cursor3 = getCheckedRecipients();
// actually, just checked if they're ticked.
if (cursor3 == null || cursor3.getCount() == 0) {
menuItem.setVisible(false);
} else {
menuItem.setVisible(true);
menuItem.setEnabled(true);
}
return true;
}
2) Setting the text manually
Anything else?
Right now it will show my home icon as the icon but will respond to clicks and behavior I set on onOptionsItemSelected().
android:showAsAction="withText|always"
forces the menuItem to the be a action of your actionbar.
if you want it to be in the overflow use
android:showAsAction="withText|never"
When I'm on Android App and i click on menu button at mobile device, settings menu appear. How i can add new item Facebook like at this setting menu ?
Maybe this is what you are looking for?
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#+id/like"
android:title="#string/menu_facebook_like"
android:icon="#drawable/ic_menu_like"
android:showAsAction="ifRoom" />
</menu>
Then on your code:
#Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle menu item selection
switch (item.getItemId()) {
case android.R.id.like:
// Do what you want when "like" is pressed
return true;
default:
return super.onOptionsItemSelected(item);
}
}
Of course you have to find a "like" icon (ask to Google) and resize it for the ActionBar/Menu.
so I am trying to get my menu item, that is show on the action bar to behave like a checkable menu option. The firs part works, meaning it is checkable and when I press it, and set in code the setChecked(true) it works. But what does not work is the visual part. There is no change in how a menu item looks on the action bar in checked and unchecked states? I tried using invalidateOptionsMenu() but that does not do the job, and not only that, with that line in my code I can't get out of the checked state?!?
What happens is that invalidate OptionsMenu() seams to unset the checked state and I end up 'looping', or on every press of that menu item I keep going to the unchecked part of the code where it gets checked and with invalidate it gets unchecked I guess...
Here is the code from my XML file for menu:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/lenslist_menu_add"
android:showAsAction="always"
android:title="#string/add"/>
<item android:id="#+id/lenslist_menu_delete"
android:showAsAction="always"
android:checkable="true"
android:title="#string/delete"/>
</menu>
And here is the java code:
#Override
public boolean onOptionsItemSelected(MenuItem item) {
// TODO Auto-generated method stub
switch (item.getItemId()) {
case R.id.lenslist_menu_add:
return true;
case R.id.lenslist_menu_delete:
if (item.isChecked() == true) {
item.setChecked(false);
deleteMode = false;
lensAdapter.setDeleteMode(false);
} else {
item.setChecked(true);
deleteMode = true;
lensAdapter.setDeleteMode(true);
}
lensAdapter.notifyDataSetChanged();
return true;
}
return super.onOptionsItemSelected(item);
}
Thanks!
Checkable items appear only in submenus or context menus.
You are using them as main menu items, hence it will not work.
SOURCE: Download the API DEMOS, and open the file ApiDemos/res/menu/checkable.xml, you'll see it as a comment on line 13. I don't know why they don't mention this in the Developer Documentation
reference with comment.:
http://alvinalexander.com/java/jwarehouse/android-examples/platforms/android-2/samples/ApiDemos/res/menu/checkable.xml.shtml
Or just do it yourself
#Override
public boolean onPrepareOptionsMenu(Menu menu) {
menu.findItem(R.id.item1).setIcon(menu_checked?R.drawable.menu_ico_checked:R.drawable.menu_ico_unchecked);
return super.onPrepareOptionsMenu(menu);
}
and in onOptionsItemSelected do:
....
menu_checked=!menu_checked;
invalidateOptionsMenu();
The best solution is to set the actionLayout of the <Item> to a CheckBox. This solution gives you a native-looking checkbox (with material animations etc), with a font that matches the other items, and it works both as an action and in the submenu.
Create a new layout called action_checkbox.html:
<?xml version="1.0" encoding="utf-8"?>
<CheckBox xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingStart="8dp"
android:paddingEnd="8dp"
android:checked="false"
android:textAppearance="#android:style/TextAppearance.DeviceDefault.Widget.ActionBar.Menu"
android:id="#+id/action_item_checkbox"
/>
Set your <Item> like this. Note that you need the Checkable and Checked still in case it is shown in a sub-menu (in which case the actionLayout is ignored.
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" tools:context=".MainActivity">
<item android:id="#+id/menu_action_logging"
android:title="#string/action_logging"
android:orderInCategory="100"
android:showAsAction="always"
android:checkable="true"
android:checked="false"
android:actionLayout="#layout/action_checkbox"
/>
</menu>
In your code, when the menu is created we need to a) set the title of the checkbox to match the menu item title, b) restore the checked state of both the menu checkable, and our extra checkbox, and c) add an onClicked() listener for our extra checkbox. In this code I am persisting the state of the checkbox in a RetainedFragment.
// Set the check state of an actionbar item that has its actionLayout set to a layout
// containing a checkbox with the ID action_item_checkbox.
private void setActionBarCheckboxChecked(MenuItem it, boolean checked)
{
if (it == null)
return;
it.setChecked(checked);
// Since it is shown as an action, and not in the sub-menu we have to manually set the icon too.
CheckBox cb = (CheckBox)it.getActionView().findViewById(R.id.action_item_checkbox);
if (cb != null)
cb.setChecked(checked);
}
#Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater)
{
inflater.inflate(R.menu.menu_main, menu);
super.onCreateOptionsMenu(menu, inflater);
// Restore the check state e.g. if the device has been rotated.
final MenuItem logItem = menu.findItem(R.id.menu_action_logging);
setActionBarCheckboxChecked(logItem, mRetainedFragment.getLoggingEnabled());
CheckBox cb = (CheckBox)logItem.getActionView().findViewById(R.id.action_item_checkbox);
if (cb != null)
{
// Set the text to match the item.
cb.setText(logItem.getTitle());
// Add the onClickListener because the CheckBox doesn't automatically trigger onOptionsItemSelected.
cb.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
onOptionsItemSelected(logItem);
}
});
}
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.menu_action_logging:
// Toggle the checkbox.
setActionBarCheckboxChecked(item, !item.isChecked());
// Do whatever you want to do when the checkbox is changed.
mRetainedFragment.setLoggingEnabled(item.isChecked());
return true;
default:
break;
}
return false;
}