I am trying to learn Android development and have stumbled across the following thing I cannot solve.
I have imported Bottom Bar Navigation via Gradle to my app and have managed to set it up according to instructions. Here is what my screen looks like now.
As you can see, I have three tabs at the bottom that I am trying to use for navigation. The problem however is, that even though I know how to detect which element has been clicked via following:
mBottomBar.setItemsFromMenu(R.menu.bottombar_menu, new OnMenuTabClickListener() {
#Override
public void onMenuTabSelected(#IdRes int menuItemId) {
if (menuItemId == R.id.bb_menu_favorites) {
// The user selected item number one.
}
}
#Override
public void onMenuTabReSelected(#IdRes int menuItemId) {
if (menuItemId == R.id.bb_menu_favorites) {
// The user reselected item number one, scroll your content to top.
}
}
});
I have no idea how to actually perform the navigation request - e.g. when user moves to different tab, I want to show my other screen instead of Hello World! that you can see at the moment.
I believe that for this I need to actually change my activity_main.xml file as currently it looks like this:
<?xml version="1.0" encoding="utf-8"?>
<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="com.example.robert.testproject.MainActivity">
<include layout="#layout/page_import"/>
</RelativeLayout>
This is where I have ended. As far as my understanding goes, I somehow need to use Intent (correct me if I am wrong) for the navigation purposes, but I am not quite sure how to handle this.
Any help in this matter - switching views, would be more than appreciated.
Use a Fragment for each bottom tab (3 Fragments for 3 views). Have a container layout(maybe a FrameLayout) in the Activity. Each Fragment will have different layouts. Replace the fragments based on what the user has tapped on the bottom bar.
I added a SwitchCompat to my Drawernavigation in Android.
First I set the item's actionlayout to my switchlayout.xml:
<android.support.v7.widget.SwitchCompat xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="right|center_vertical"
app:buttonTint="#color/colorPrimary"
app:switchPadding="16dp" />
Now I'm trying to change the Buttons checkedstate in my Code, I'm trying switchCopmatObj.toggle() and also tried switchCompatObj.setChecked(!switchCompatObj.isChecked())
But it only changes the Color of the Switch, but doesn't play the animation where the Switch moves from one side to the other. How do I play this animation from my code?
I faced the same issue. It seems that SwitchCompat is broken on this point. setChecked() calls the animator that should update the thumb drawable but the onAnimationEnd is never called.
Meanwhile after many tries faking the touch events send to the SwitchCompat, I found an ugly workaround : instead of calling setChecked(), I remove the item from the menu and add it again :
// Update toggle state
mDrawerView.getMenu().removeItem(R.id.drawer_menu_availability);
final SwitchCompat toggle = (SwitchCompat) LayoutInflater.from(this).inflate(R.layout.drawer_menu_item_availability, null);
toggle.setChecked(mAvailable);
toggle.setOnCheckedChangeListener((buttonView, isChecked) -> toggleAvailability());
final MenuItem added = mDrawerView.getMenu().add(R.id.drawer_menu_group_actions, R.id.drawer_menu_availability, Menu.FIRST, text);
added.setActionView(toggle);
This however forces you to :
have an id for the menu group where your menu item is located
use android:orderInCategory to order your menu items so that your item goes back to the same place when adding it back.
Hope this helps.
EDIT : This does not play the animation but at least the thumb is in the right place.
I followed the official Android site's tutorial on creating contextual action menus. Using the code below, when I long press on one of my ListView items, it does become selected, but it does not visually indicate that its been selected. I am using the Holo Light theme, and I expect the background color of every selected item in my ListView to change to a shade of blue.
Is this normal behavior?
I have tried testing listView.setChoiceMode(ListView.CHOICE_MODE_SINGLE); and not even a single row will highlight.
Using listView.setSelector(android.R.color.holo_blue_light); does appear to highlight the row which was last selected, but it does not highlight the other rows which are selected.
Have I done something wrong, or do I need to make the background change manually? If so, how?
I have also tried listView.setSelector(android.R.drawable.list_selector_background); which is a real selector that contains items for different states. Unfortunately, it still only applies to the most recently selected ListView item.
public class MyActivity extends ListActivity {
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// The list is generated here
ListView listView = getListView();
listView.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE_MODAL);
listView.setMultiChoiceModeListener(new MultiChoiceModeListener() {
// implements empty methods
}
}
}
Thanks!
In my opinion it should be possible the way do describe, but unfortunately it does not.
What I have found so far is that you have to use a XML resource which describes the way the background should look like when the 'state' of the item is 'activated'.
Create a file called 'list_item_background_activated.xml' in the 'res/drawable/' directory.
In it you define a root element of type selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:state_activated="true"
android:drawable="#android:color/darker_gray" />
</selector>
Now you should modify the related resource (the resource which defines how you ListItem looks like) to reference this drawable:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/list_item_background_activated" >
...
</RelativeLayout>
I just implemented Contextual Action Mode and had the same problem that you have/had. I too figured that the default behavior would be that each selected row would be highlighted in some way, but no.
The easiest way for me to get the desired effect was to change the list item resource I was using for my ListActivity.
I'm using an ArrayAdapter so the choice for me is made in the constructor of the adapter:
new ArrayAdapter<Exercise>(context, android.R.layout.simple_list_item_1);
The last parameter is the resource id for a layout file the adapter will use for instanciating new views (List items) in the listview.
I had chosen the one I figured to be the most basic one. By changing it to:
new ArrayAdapter<Exercise>(context, android.R.layout.simple_list_item_activated_1);
I got the desired effect, the rows selected in Contextual Action Mode are now staying highlighted.
There's also a couple of other resource id's defined in android.R.layout that you can chose from to get a similar but different result: http://developer.android.com/reference/android/R.layout.html , simple_list_item_activated_1 just did it for me.
Not sure if
// The list is generated here
hides an adapter and if so an array adapter but if it does, this should help.
Otherwise I figure you could use the predefined resources in another place or take the slightly longer way and define selectors as Brabbeldas suggests
In ActionMode, the ListView keeps track of the item checked state automatically when the user clicks on an item.
When you are using an adapter for your ListView, you set the background of an item based on the checked state:
#Override
public void bindView(final View view, final Context context, final Cursor cursor)
{
int pos = cursor.getPosition();
boolean selected = ((SessionsActivity)context).listView.isItemChecked(pos);
if(!selected)
view.setBackgroundResource(R.drawable.list_selector);
else
view.setBackgroundResource(R.drawable.list_selector_active);
...
AND, you also need to invalidate the ListView, after each item click:
private AbsListView.MultiChoiceModeListener multiChoiceModeListener = new AbsListView.MultiChoiceModeListener()
{
#Override
public void onItemCheckedStateChanged(ActionMode mode, int position,
long id, boolean checked)
{
// Here you can do something when items are selected/de-selected,
// such as update the title in the CAB
listView.invalidateViews();
}
I want to set some view over action bar that will display Tutorial text (Like click here and send email...). Is this possible? I ask because i know that action bar uses the top space on layout, and a fragment or activity uses remaining space.
My second question is how to display all action items on action bar. I use ActionBarSherlock library and i see that i have room for one more action item, but it's not displaying on action bar. I set in xml ifRoom option on item...
Thanks!!!
There are multiple ways to achieve a tutorial-like overlay. Probably the easiest one is to use specially prepared Dialog window with transparent background and without dim behind.
Using custom Dialog for tutorial overlay
First of all we have to prepare content for the Dialog. In this example there will be one TextView inside RelativeLayout which is the most useful layout here.
Content of info_overlay.xml file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#android:color/darker_gray"
android:padding="3dp"
android:text="TextView"
android:textColor="#android:color/white" />
</RelativeLayout>
Now, we can use this layout to create our Dialog:
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Dialog overlayInfo = new Dialog(MainActivity.this);
// Making sure there's no title.
overlayInfo.requestWindowFeature(Window.FEATURE_NO_TITLE);
// Making dialog content transparent.
overlayInfo.getWindow().setBackgroundDrawable(
new ColorDrawable(Color.TRANSPARENT));
// Removing window dim normally visible when dialog are shown.
overlayInfo.getWindow().clearFlags(
WindowManager.LayoutParams.FLAG_DIM_BEHIND);
// Setting position of content, relative to window.
WindowManager.LayoutParams params = overlayInfo.getWindow().getAttributes();
params.gravity = Gravity.TOP | Gravity.LEFT;
params.x = 100;
params.y = 20;
// If user taps anywhere on the screen, dialog will be cancelled.
overlayInfo.setCancelable(true);
// Setting the content using prepared XML layout file.
overlayInfo.setContentView(R.layout.info_overlay);
overlayInfo.show();
}
Result
Below is the screenshot of the above solution working. Note the TextView over ActionBar.
A few notes about solution
If you'll have a dedicated button to dismiss tutorial you can probably use setCancelable(false) to avoid accidental closing of tutorial.
This solution works with any theme with any action bar solution (either OS-provided, Android Support Library or ActionBar Sherlock)
Other solutions/helpers
Take a look at Showcase View library as it focuses on creating tutorial-like screens in easy way. I'm not sure however that it can easily overlay actionbars.
Is there a way to render a view on top of the action bar? I want to create a small tip box that will point the user to an item in the action bar. I know that a Toast with a set view will be rendered above the action bar. Does anyone know how to do this with a view?
I have attempted using FrameLayout with layout_gravity="top" and inflating a view and then adding it to the running activity's layout.
I appreciate you in advance.
Edit:
Here is an image of what I was thinking:
Edit:
Perhaps some more detail is needed. I am looking for a way, or to find out if it is even possible to add a view to the view hierarchy of the activity so that it is rendered last.
Similar to CSS, I want a higher z-index order for this particular view ( the blue floating box in the image), such that it would be rendered on top of the Action Bar region in the activity. The view is in no way associated with Action Bar, it is simply drawn on top of it.
I was trying to achieve something else but I needed a solution similar to this. I needed to draw an opaque layer covering the whole screen, even the action bar--sort of like a dialog. I did so this way:
ViewGroup vg = (ViewGroup)(getWindow().getDecorView().getRootView());
vg.addView(myNewView, params);
this can be used to draw anything anywhere on the screen.
UPDATE: You really shouldn't be using ActionBar anymore, you wouldn't have this issue in the first place if you were using Toolbar like Android recommends. Toolbar would go inside your activity xml like a regular view and you can can do whatever you want to it. And its fully backwards compatible.
https://developer.android.com/training/appbar/setting-up
After struggling with it myself quite some time, here's the solution (tested it - working good):
The general steps are:
Create a wrapper view
Detach the screen view children, place the wrapper, and attach the children
Inflate the content to the children
Controling the wrapper will help you control exactly the action bar and the content below it all together.
Now, using the wrapper, you can add "brothers" to the actionbar/main area. That brother is exactly what you described in your image.
Let's see some code.
First, create a method to help create a wrapper view. the wrapper will be placed between the entire screen and the content of your app. being a ViewGroup you can later on fully control it's content.
private ViewGroup setContentViewWithWrapper(int resContent) {
ViewGroup decorView = (ViewGroup) this.getWindow().getDecorView();
ViewGroup decorChild = (ViewGroup) decorView.getChildAt(0);
// Removing decorChild, we'll add it back soon
decorView.removeAllViews();
ViewGroup wrapperView = new FrameLayout(this);
// You should set some ID, if you'll want to reference this wrapper in that manner later
//
// The ID, such as "R.id.ACTIVITY_LAYOUT_WRAPPER" can be set at a resource file, such as:
// <resources xmlns:android="http://schemas.android.com/apk/res/android">
// <item type="id" name="ACTIVITY_LAYOUT_WRAPPER"/>
// </resources>
//
wrapperView.setId(R.id.ACTIVITY_LAYOUT_WRAPPER);
// Now we are rebuilding the DecorView, but this time we
// have our wrapper view to stand between the real content and the decor
decorView.addView(wrapperView, LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
wrapperView.addView(decorChild, decorChild.getLayoutParams());
LayoutInflater.from(this).inflate(getActivityLayout(),
(ViewGroup)((LinearLayout)wrapperView.getChildAt(0)).getChildAt(1), true);
return wrapperView;
}
Now, interfere with the regular Activity creation, and instead of using setContentView, use the method we've created.
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// DON'T CALL `setContentView`,
// we are replacing that line with this code:
ViewGroup wrapperView = setContentViewWithWrapper(R.layout.activity_layout);
// Now, because the wrapper view contains the entire screen (including the notification bar
// which is above the ActionBar) I think you'll find it useful to know the exact Y where the
// action bar is located.
// You can use something like that:
ViewGroup actionBar = (ViewGroup)((LinearLayout)wrapperView.getChildAt(0)).getChildAt(0);
int topOffset = actionBar.getTop();
// Now, if you'll want to add a view:
// 1. Create new view
// 2. Set padding top - use "topOffset"
// 3. Add the view to "wrapperView"
// 4. The view should be set at front. if not - try calling to "bringToFront()"
}
That's about it.
Notes
I've used Android's hierarchy-viewer to understand what's the right hierarchy. (didn't guess those 0 and 1 indexes)
If you are using some kind of a menu drawer in your activity, you might have to configure it a little bit different since drawers are already creating that wrapper for you
I've learned a lot by looking at this great library
EDIT: Refer to #CristopherOyarzúnAltamirano Answer for further support on newer Android versions
Good luck!
There is a much simpler way to achieve this. ActionBar holds its layout in the class ActionBarContainer which simply inherits from FrameLayout. So in order to display something over the ActionBar you need to grab a reference to the ActionBarContainer and add your own custom View into it. Here is the code
int abContainerViewID = getResources().getIdentifier("action_bar_container", "id", "android");
FrameLayout actionBarContainer = (FrameLayout)findViewById(abContainerViewID);
LayoutInflater myinflater = getLayoutInflater();
View customView = myinflater.inflate(R.layout.yourCustomeViewLayout, null);
actionBarContainer.addView(customView);
I found this workaround based on #Sean answer:
//This is for Jelly, ICS, Honeycomb
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB && Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN_MR2){
LayoutInflater.from(this).inflate(resContent, (ViewGroup)((LinearLayout)wrapperView.getChildAt(0)).getChildAt(1), true);}
//This is for KitKat and Jelly 4.3
else if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR2){
LayoutInflater.from(this).inflate(resContent, (ViewGroup) (((ViewGroup) wrapperView.getChildAt(0)).getChildAt(0)), true);}
//This is for Ginger
else{
LayoutInflater.from(this).inflate(resContent, (ViewGroup) ((LinearLayout)((FrameLayout) wrapperView.getChildAt(0)).getChildAt(0)).getChildAt(1), true);}
I found a much simpler way to do this.
I just applied android:translationZ="10dp" to the view which I need to be covering the action bar.
I chose 10dp but it can actually be anything you want as long as it is superior to the actionbar's elevation
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:translationZ="10dp"
android:src="#drawable/potatoe" />
Also, don't worry about Android studio's following warning :
"translationZ can't be used with API<21".
It will be ignored, but you don't really care because the toolbar shouldn't cover your view with APIs inferior to 21.
Try using ActionBar.setCustomView(). That's the only way to change the appearance of that area of the screen. You can't stick a View into the area "above" the ActionBar, because that area is basically controlled by the system. On the other hand, you can provide your own layout for it.
If you explain in more detail what you're trying to do, respondents might have some better design ideas.
https://github.com/michaelye/EasyDialogDemo
see the demo above,it may help you
dialog.setLocation(new location[])//point in screen
you could set the location[] yourself.
Use the android:actionLayout in your menu.xml file.
<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/menu_id"
android:title="#string/menu_string_to_show"
android:icon="#drawable/ic_menu_icon_name"
android:showAsAction="always"
android:actionLayout="#layout/action_button_foo" /></menu>
Then create your action_button_foo.xml layout:
<?xml version="1.0" encoding="utf-8"?><TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/menu_string_to_show"
android:drawableLeft="#drawable/ic_menu_icon_name"
android:background="#drawable/bg_btn_action_bar"
android:clickable="true" />
To handle click do the following:
#Overridepublic boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.my_menu, menu);
final MenuItem item = menu.findItem(R.id.menu_id);
item.getActionView().setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
onOptionsItemSelected(item);
}
});
return super.onCreateOptionsMenu(menu);}
That's if :)
(Reference: http://www.vogella.com/articles/AndroidActionBar/article.html)Custom Views in the ActionBar
You can also add a custom View to the ActionBar. For this you use the setCustomView method for the ActionView class. You also have to enable the display of custom views via the setDisplayOptions() method by passing in the ActionBar.DISPLAY_SHOW_CUSTOM flag.
For example you can define a layout file which contains a EditText element.
<?xml version="1.0" encoding="utf-8"?>
<EditText xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/searchfield"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:inputType="textFilter" >
This layout can be assigned to the ActionBar via the following code. The example code allow attaches a listener to the custom view.
package com.vogella.android.actionbar.customviews;
import android.app.ActionBar;
import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.TextView.OnEditorActionListener;
import android.widget.Toast;
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ActionBar actionBar = getActionBar();
// add the custom view to the action bar
actionBar.setCustomView(R.layout.actionbar_view);
EditText search = (EditText) actionBar.getCustomView().findViewById(R.id.searchfield);
search.setOnEditorActionListener(new OnEditorActionListener() {
#Override
public boolean onEditorAction(TextView v, int actionId,
KeyEvent event) {
Toast.makeText(MainActivity.this, "Search triggered",
Toast.LENGTH_LONG).show();
return false;
}
});
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM
| ActionBar.DISPLAY_SHOW_HOME);
}
}
The explanations here are all too long:
Wrap your main layout file into a top level ViewGroup (e.g. wrap a CoordinatorLayout into a FrameLayout), then inject or declare the view in the new top level layout out. The view will appear above the action bar.