Adding Icons to Tab while Actionbar is active - android-tabs

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 :)

Related

Tabbar stopped showing any modifications made to the Tabbar file in Xamarin->Laoyuts

new here. I need help figuring out why my xamarin project is not reading any of the changes I make to the Tabbar.xml file. Everything was working fine until I decided to add a splash screen style. It could have been something else but that is the only major change I have done to my project, unless I deleted something i wasn't supposed to. Regardless I will be showing those changes as well. I was thinking of just making a custom renderer to avoid this headache, but not I really am curious why this is occurring. Also the unselected tint color has defaulted to white. I can try to change that on the Tabbar.xml side but it does not update. Only the selectedTabcolor changes but because I set that in the <TabbedPage></TabbedPage> itself. All I want is to have the Text color of the unselected tabs to default the grey that the tab icons seem to defult to, that's how it used to be, and set the selectedTabcolor and TabIndicatorColor to the same color which is #008000.
MainActivity
[Activity(Label = "Weather App", Icon = "#mipmap/icon", Theme = "#style/MainTheme", ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize)]
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
{
protected override void OnCreate(Bundle savedInstanceState)
{
TabLayoutResource = Resource.Layout.Tabbar;
ToolbarResource = Resource.Layout.Toolbar;
base.SetTheme(Resource.Style.MainTheme);
base.OnCreate(savedInstanceState);
CrossCurrentActivity.Current.Init(this, savedInstanceState);
Rg.Plugins.Popup.Popup.Init(this);
Xamarin.Essentials.Platform.Init(this, savedInstanceState);
global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
LoadApplication(new App());
}
public override void OnRequestPermissionsResult(int requestCode, string[] permissions, [GeneratedEnum] Android.Content.PM.Permission[] grantResults)
{
Xamarin.Essentials.Platform.OnRequestPermissionsResult(requestCode, permissions, grantResults);
base.OnRequestPermissionsResult(requestCode, permissions, grantResults);
}
}
SplashScreen
[Activity(Label = "Weather App", Icon = "#mipmap/icon", Theme ="#style/SplashTheme", MainLauncher = true)]
public class SplashActivity : AppCompatActivity
{
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
var intent = new Intent(this, typeof(MainActivity));
StartActivity(intent);
Finish();
}
}
Styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MainTheme" parent="MainTheme.Base">
<item name="colorPrimary">#efefef</item>
<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">#008000</item>
<!-- colorAccent is used as the default value for colorControlActivated
which is used to tint widgets -->
<item name="colorAccent">#019501</item>
</style>
<!-- SPLASH SCREEN -->
<style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">#drawable/splash_screen</item>
</style>
</resources>
Tabbar.xml
<android.support.design.widget.TabLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabTextColor="#android:color/black"
app:tabIndicatorHeight="2dp"
app:tabIndicatorColor="#008000"
/>
EDIT: As request here is an image of how my tabbar looks like:
I also removed the SelectedTabColor from the <TabbedPage> itself and added on those changes to the Tabbar.xml and this is the result. I can't get the text color, nor the indicator color nor the selected color to change through the Tabbar. I believe my Tabbar.xaml page is just not being read.
You could define the text color in your Tabbar.xml in the Resources/layout/Tabbar.xml of the androd project.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.TabLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabTextColor="#android:color/black" //unselect text color
app:tabIndicatorHeight="2dp"
app:tabSelectedTextColor="#008000"
app:tabIndicatorColor="#008000"
/>
and if you set the UnselectedTabColor or SelectedTabColor in your tabbedpage.xaml,It will overrides the settings in the Tabbar.xml.It has nothing to do with the startup page you added.
If your project has migrated to AndroidX,you could install Xamarin.AndroidX.AppCompat.Resources and Xamarin.Android.Support.Design nugets separately.

CustomRenderer not applying

The BackgroundColor property on Xamarin.Forms.Buttons started coloring the entire area assigned to the button instead of just the button, so I started delving into the Custom Renderers in Android to see if I could fix it. The following is the class I created, the .xaml where I use a custom button, and the renderer (it's just supposed to color the button green as a test):
using Xamarin.Forms;
namespace wcsmobile
{
public class wcsButton : Button
{
}
}
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:wcsmobile;assembly=wcsmobile"
x:Class="wcsmobile.Transfer"
Title="Transfer">
<ContentPage.Content>
<StackLayout HorizontalOptions="FillAndExpand">
<local:wcsButton Text="OK" HorizontalOptions="Center"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
[assembly: ExportRenderer(typeof(wcsButton), typeof(ButtonRenderer))]
namespace wcsmobile.Droid
{
class wcsButtonRenderer : ButtonRenderer
{
public wcsButtonRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
{
base.OnElementChanged(e);
if (Control != null)
{
Control.SetBackgroundColor(global::Android.Graphics.Color.LightGreen);
}
}
}
}
There is no error, but the button stays gray, not green. Putting a breakpoint at the "base.OnElementChanged(e)" doesn't do anything; the breakpoint never gets hit. Both projects are using Xamarin.Forms version 3.1.0.583944.
Anyone with a clue as to why the Custom Renderer doesn't seem to be applying would be very helpful. (Or even an idea as to why BackgroundColor seemed to stop working in the first place).
As you mentioned "both projects" the answer seems obvious: the renderer from project A isn't applied to project B. You have the choice to move it to appropriate project OR move it to a shared project https://learn.microsoft.com/en-us/xamarin/cross-platform/app-fundamentals/shared-projects?tabs=vswin

How to create an ActionDrawer with a single action

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.

Menu Options not working in tablet

The menu options created are working perfectly fine in phone(both as overflow menu or left click device button).
But in tablet it only works on ones which have the overflow menu(the 3 dots).
When I click on the device left button nothing shows up. Not sure whats the problem
Layout:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/menu_settings"
android:title="#string/settings_menu"
app:showAsAction="never" />
<item
android:id="#+id/menu_signout"
android:title="#string/settings_sign_out"
app:showAsAction="never" />
</menu>
Code:
#Override
public boolean onCreateOptionsMenu(Menu menu) {
super.onCreateOptionsMenu(menu);
getMenuInflater().inflate(R.menu.overflow_menu, menu);
settings = menu.findItem(R.id.menu_settings);
signOut = menu.findItem(R.id.menu_signout);
return true;
}

Controlling showAsAction of MenuItem under AppCompat v21 and using a Toolbar

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.

Resources