I am trying adopt the v21 AppCompat libraries and leverage the better control of the ActionBar using a Toolbar as described here and here. But no matter how I modify the menu XML, I can only get the menu items to show up in the overflow area. I would like to see the MenuItem represented as an icon on the Toolbar/ActionBar.
My menu declaration looks like this (note the showAsAction line):
<menu
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:res-auto="http:/>/schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity" >
<item android:id="#+id/action_add"
android:icon="#android:drawable/ic_menu_add"
android:title="#string/action_add"
android:orderInCategory="2"
res-auto:showAsAction="always" />
</menu>
I have also tried this (with a slightly different showAsAction line):
<menu
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:res-auto="http:/>/schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity" >
<item android:id="#+id/action_add"
android:icon="#android:drawable/ic_menu_add"
android:title="#string/action_add"
android:orderInCategory="2"
android:showAsAction="always" />
</menu>
But the only way I have successfully been able to get the icon to show up on the Toolbar/ActionBar is to force it in code.
#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);
// Try to manually force the item onto the bar instead of allowing it in the overflow
// for some reason, android is not picking up the setting in the menu declaration
// using android:showAsAction="always" (even when using the auto-res namespace)
MenuItem addItem = menu.findItem(R.id.action_add);
MenuCompat.setShowAsAction(addItem, MenuItem.SHOW_AS_ACTION_ALWAYS);
return true;
}
I am using the android.support.v4.view.MenuCompat static methods to achieve this. But I believe I should be able to do this declaratively in the XML. I have tried using both "always" and "ifRoom" but for no effect. I can only assume that the XML attribute is not being picked up.
I guess it is really something simple or related to the fact that I am using the new Toolbar to function as the holder of the menu. The Toolbar layout is very simple:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
and the usage seems quite standard:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
Any help would be appreciated. And I am happy to share more of the project content if it helps to get to the bottom of it.
Related
I want to add a logout option to the tool bar, which has the image view. due to fixed size in tool bar menu, i gone for a custom menu by specifying
app:actionLayout="#layout/custom_menu"
i specified this in my , and did a custom menu in custom_menu.xml.
now when i click the item, i want to perform some task, lets call something like a toast message for testing.
but when i click the in my tool bar, nothing responses.
what am i doing wrong here?
MyJavaActivity.java
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.logout, 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();
//noinspection SimplifiableIfStatement
if (id == R.id.logOut) {
Toast.makeText(UserActivity.this, "logout clicked", Toast.LENGTH_LONG).show();
return true;
}
return super.onOptionsItemSelected(item);
}
logout.xml (menu for items)
<?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/logOut"
android:title="logout"
app:actionLayout="#layout/custom_menu"
app:showAsAction="ifRoom">
</item>
</menu>
custom_menu.xml (customizing my menu for toolbar)
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:layout_gravity="center">
<ImageView
android:id="#+id/logout"
android:layout_width="#dimen/menu_item_icon_size"
android:layout_height="#dimen/menu_item_icon_size"
android:layout_gravity="center"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:src="#drawable/ic_logout"
android:clickable="true"
android:elevation="5dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Actually Our custom menu item isn’t automatically given the same padding as a normal menu item. So the area that receives touch events is greatly reduced. I was just hunting around to click in the right area. We can fix this by adding a FrameLayout to our custom view.
make sure you have FrameLayout height and width is greater than the custom icon height and width.
this was the change i did in my custom_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="#dimen/menu_item_size"
android:layout_height="#dimen/menu_item_size">
<FrameLayout
android:layout_width="52dp"
android:layout_height="52dp"
android:layout_gravity="center">
<ImageView
android:id="#+id/logout"
android:layout_width="#dimen/menu_item_icon_size"
android:layout_height="#dimen/menu_item_icon_size"
android:layout_gravity="center"
android:elevation="5dp"
android:src="#drawable/ic_logout" />
</FrameLayout>
</FrameLayout>
here is the result.
Summary
I need to have 3 Tabs right below the App's Toolbar, preferably without a line separating the Tabs and the Toolbar. But they are shown in front of the bar, hiding it nearly completely.
Context
I´m working on an Android App, with a DrawerLayout/NavigationView opening up from the side, where you can navigate between pages, with one of them containing a few Tabs at the top, right below the Toolbar.
I've tried putting the TabLayout into the page, but the tabs always end up behind or in front of the Toolbar.
Putting the TabLayout into the AppBarLayout where the Toolbar is didn't seem to work as well, the tabs were correctly shown below the Toolbar, but that Tab's content was shown inside the Toolbar as well.
Toolbar and FragmentContainer in main.xml
<android.support.design.widget.AppBarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.AppBarLayout>
<androidx.appcompat.widget.LinearLayoutCompat
android:id="#+id/main_fragment_container"
android:layout_height="match_parent"
android:layout_width="match_parent"/>
Sample TabLayout in page1.xml
<androidx.constraintlayout.widget.ConstraintLayout
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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.tabs.TabLayout
android:id="#+id/home_content_tab_layout"
android:layout_gravity="top"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:showIn="#layout/app_bar_main">
<com.google.android.material.tabs.TabItem
android:text="News"/>
<com.google.android.material.tabs.TabItem
android:text="NoNews"/>
<com.google.android.material.tabs.TabItem
android:text="Dreams"/>
</com.google.android.material.tabs.TabLayout>
</androidx.constraintlayout.widget.ConstraintLayout >
Kept looking around for a solution to my problem and stumbled upon this answer to a similar question.
I moved the Toolbar, Tablayout ( its visibility set to "gone") and the Fragment Container into its own xml called app_bar_main.
Then I included it in my Main Layout:
<include
layout="#layout/app_bar_main"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
The Fragment which is supposed to show the Tabs implements the following overrides:
public override void OnViewCreated(View view, Bundle savedInstanceState)
{
viewPager = view.FindViewById<ViewPager>(Resource.Id.home_content_pager);
viewPager.Adapter = new HomeAdapter(ChildFragmentManager);
tabLayout = Activity.FindViewById<TabLayout>(Resource.Id.tablayout);
tabLayout.Visibility = ViewStates.Visible;
tabLayout.SetupWithViewPager(viewPager);
base.OnViewCreated(view, savedInstanceState);
}
public override void OnDestroyView()
{
tabLayout.Visibility = ViewStates.Gone;
base.OnDestroyView();
}
The OnDestroyView override sets the TabLayout's Visibility to Gone, so all the other Fragments are not displaying the Tabs.
This way, the Tablayout exists across all of the Fragments, and can be displayed and filled with the chosen Tabs and be hidden when not needed.
I'm using com.google.android.material and the AndroidX NuGet Packages and am fairly new to Xamarin.Android, but I hope this helps someone with a similar problem.
as pointed out in the google guidelines: https://www.google.com/design/spec-wear/components/action-drawer.html#action-drawer-usage
at 'Single Action', an ActionDrawer should not be expandable.
My question is, how to achieve that behaviour?
I've tried an WearableActionDrawer and WearableDrawerView..
I've also tried the method lockDrawerClosed() but the drawer still opens on click.
Thanks for your help! :)
Edit:
Ok, I found the solution to stop the drawer from opening. I'm using the WearableActionDrawer now and calling lockDrawerClosed(). But now I'm not sure how to change the peek_view properly.
I made a custom view - LinearLayout - which is containing an ImageView. I'm using this view for mWearableActiondrawer.setPeekView(myView). But the problem is, that the view will not be shown properly. It just shows me an empty ActionDrawer at the bottom.
But the clicklistener is working..
Here is my code:
// Bottom Action Drawer
mWearableActionDrawer = (WearableActionDrawer) findViewById(R.id.bottom_action_drawer);
mWearableActionDrawer.lockDrawerClosed();
LayoutInflater layoutInflater =
(LayoutInflater) this.getSystemService(LAYOUT_INFLATER_SERVICE);
LinearLayout view =
(LinearLayout) layoutInflater.inflate(R.layout.action_drawer_peek_view, null);
mWearableActionDrawer.setPeekContent(view);
view.setOnClickListener(new View.OnClickListener() {
#Override public void onClick(View v) {
Toast.makeText(getApplicationContext(), "Hello", Toast.LENGTH_SHORT).show();
}
});
Layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/action_drawer_peek_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/wearable_primary"
android:orientation="vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:padding="10dp"
android:src="#drawable/fill_1_copy"
/>
</LinearLayout>
Any thoughts of what I'm doing wrong here? Thanks!
I don't see any error as compared to this sample code. It stated that if you only have a single action for your Action Drawer, you can use a (custom) View to peek on top of the content by calling mWearableActionDrawer.setPeekContent(View). Just make sure you set a click listener to handle user clicking on your View.
You may also try using mWearableDrawerLayout.peekDrawer(Gravity.BOTTOM);. Check again your implementation based on this documentation which shows how to initialize the contents of your drawers.
I'm trying to get a "simple" UI done, but I'm stuck at where I want to put icons in my bottom tabs. So far I got the following code:
`public class MainActivity extends ActionBarActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
FragmentTabHost mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
mTabHost.setup(this, getSupportFragmentManager(), android.R.id.tabcontent);
mTabHost.addTab(
mTabHost.newTabSpec("tab1").setIndicator("AddStuff", getResources().getDrawable(R.drawable.ic_add_white_24dp)),
FragmentTabAdd.class, null);
mTabHost.addTab(
mTabHost.newTabSpec("tab2").setIndicator("Favorites", getResources().getDrawable(R.drawable.ic_add_white_24dp)),
FragmentTabSelectFavorites.class, null);
mTabHost.addTab(
mTabHost.newTabSpec("tab3").setIndicator("Messages", getResources().getDrawable(R.drawable.ic_add_white_24dp)),
FragmentTabMessages.class, null);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}`
and I got the following as my .xml for each tab:
<?xml version="1.0" encoding="utf-8"?>
<selector android:layout_width="match_parent"
android:layout_height="match_parent" xmlns:android="http://schemas.android.com/apk/res/android">
<!-- When selected, use black -->
<item android:drawable="#drawable/ic_add_black_24dp"
android:state_selected="true" />
<!-- When not selected, use white-->
<item android:drawable="#drawable/ic_add_white_24dp" />
</selector>
I worked through several different tutorials, but none had an Actionbar and a Tabbar with icons. I'm happy for any tipps and suggestions.
Thank you in advance!
I found the answer myself after several hours of trying different things.
The way to add Icons to the bottom tab bar is to insert "null" here:
mTabHost.addTab(
mTabHost.newTabSpec("tab1").setIndicator("AddStuff", getResources().getDrawable(R.drawable.ic_add_white_24dp)),
FragmentTabAdd.class, null);
null has to be written where "AddStuff" is now.
I even colored the background with an image:
mTabHost.setBackground(getResources().getDrawable(R.drawable.tab_background));
Maybe this will help someone else save some time :)
I Want to Create a List View with a Custom layout which will contain A image and text
But all the tutorials i find all extend List Activity but i cant extend List Activity because i need to add buttons and other things to the layout.
I need to use the ListView using a custom item layout
any ideas on how to do it?
You are not bound to use ListActivity in order to have a ListView in your layout. All the samples using ListActivity are there because people are lazy ;)
So just use a regular Activity and then you simply have to add the ListView to the layout you are setting as content view. This could look something like this:
<?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="match_parent">
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="0"
android:layout_weight="1" />
<Button
android:id="#+id/somethingButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Do something" />
<Button
android:id="#+id/elseButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Do something else" />
</LinearLayout>
Then in like any other Activity in your OnCreate method you do:
SetContentView(Resource.Layout.myLayout); // myLayout.axml
var listView = FindViewById<ListView>(Resource.Id.listView);
listView.Adapter = new MyAdapter(context, itemsSource);
var somethingButton = FindViewById<Button>(Resource.Id.somethingButton);
var elseButton = FindViewById<Button>(Resource.Id.elseButton);
... more code ...
ListView is just a layout just like any other, so there is nothing magic about it. MyAdapter in this sample is ofcourse something you implement, which takes your data and presents it in the desired image and text layout.
For more information about ListView and Adapter please refer to the excellent documentation which Xamarin provides.