I am trying to replace the action bar in a Xamarin android project with a custom toolbar. I want my toolbar to display a logo on the left, and then my menu icons on the right.
I followed this tutorial from Microsoft closely Replacing the Action Bar
But my menu icons no longer display (when I was using ActionBar, my menu icons displayed just fine). There is however a 3 dot overflow icon, but when clicking it nothing happens. Here is a screenshot of the built app with my custom toolbar:
I have tried:
I thought my image view was blocking the menu icons, so I removed it
but my menu icons do not show.
Changing what MainActivty extends, I have tried Activity, and AppCompactActivity
I thought my OnCreateOptionsMenu may not be getting called, So I tried: toolbar.InflateMenu(Resource.Menu.actionbar);
I am stuck and not sure what is wrong here, I would appreciate any help!
Here is my Code:
Toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<Toolbar xmlns:android ="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?android:attr/actionBarSize"
android:background="#4F703A"
android:theme="#android:style/ThemeOverlay.Material.Dark.ActionBar">
<RelativeLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="?android:attr/actionBarSize"
android:src="#drawable/logo_app"/>
</RelativeLayout>
</Toolbar>
MainActivity.cs (omitted some irrelevant code)
public class MainActivity : Activity
{
[System.Obsolete]
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
Xamarin.Essentials.Platform.Init(this, savedInstanceState);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.activity_main);
//Activate customer toolbar
var toolbar = FindViewById<Toolbar>(Resource.Id.toolbar);
SetActionBar(toolbar);
ActionBar.Title = "";
}
My menu items (actionbar.xml)
<?xml version="1.0" encoding="utf-8" ?>
<!--For all properties see: https://aka.ms/android-menu-resource-->
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="#+id/action_search"
app:showAsAction="always"
android:text="Search"
android:icon="#android:drawable/ic_menu_search"/>
<item android:id="#+id/action_addnew"
app:showAsAction="always"
android:text="Search"
android:icon="#android:drawable/ic_menu_add"/>
</menu>
style.xml
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<style name="MyTheme" parent="#android:style/Theme.Material.Light.DarkActionBar">
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="android:colorPrimary">#5A8622</item>
</style>
</resources>
activity_main.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/frameLayoutParent"
android:background="#4F703A">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"/>
<android.support.v4.widget.SwipeRefreshLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:fillViewport="true"
android:id="#+id/swipeLayout"
android:paddingTop="?android:attr/actionBarSize">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/headerLinearLayout">
<TextView
android:text="Thumbnail"
android:id="#+id/headerThumb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".01"
android:gravity="center_horizontal"
android:textSize="16sp"/>
<TextView
android:text="Address Line"
android:id="#+id/headerAddressLine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".01"
android:gravity="center_horizontal"
android:textSize="16sp"/>
<TextView
android:text="City"
android:id="#+id/headerCity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".01"
android:gravity="center_horizontal"
android:textSize="16sp"/>
<TextView
android:text="State"
android:id="#+id/headerState"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".01"
android:gravity="center_horizontal"
android:textSize="16sp"/>
<TextView
android:text="Zip Code"
android:id="#+id/headerZipCode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".01"
android:gravity="center_horizontal"
android:textSize="16sp"/>
</LinearLayout>
<ListView
android:paddingTop="5dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/myListView"/>
</LinearLayout>
</android.support.v4.widget.SwipeRefreshLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/editSearch"
android:hint="Search"
android:textColor="#000"
android:editable="true"
android:paddingTop="?android:attr/actionBarSize"/>
</FrameLayout>
A TitleView Sounds like the best option for what you're trying to do. Instead of those long processes you could just do this
<NavigationPage.TitleView>
<StackLayout Orientation="Horizontal">
<Image Source="Logo.png"/>
<label Text="Company Name"/>
</StackLayout>
</NavigationPage.TitleView>
My Issue was in my menu xml file, xmlns:app for the showAsAction attributes
app:showAsAction="always"
is needed for the v7 support toolbar, but is not used for the new lollipop toolbar. So it should look like this:
android:showAsAction="ifRoom"
After I fixed this, I couldn't click my menu items. I figured out my layout was displaying over top, so I needed to add
android:layout_marginTop="?android:attr/actionBarSize"
To the layout below my custom toolbar!
Related
Xamarin.Android how to turn on scrolling is simple for TextView, I've already poked everything and it just doesn't scroll
<TextView
android:text=""
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_width="354.0dp"
android:layout_height="261.0dp"
android:minWidth="25px"
android:minHeight="25px"
android:id="#+id/SamChatLabel"
android:layout_marginLeft="18.0dp"
android:textSize="20dp"
android:textColor="#ff000000"
android:layout_marginTop="96.0dp"
android:scrollbars="vertical"
android:verticalScrollbarPosition="right"
android:isScrollContainer="true"
android:overScrollMode="ifContentScrolls"
android:fadeScrollbars="false"
android:scrollbarSize="5dp"
android:clickable="true"
android:contextClickable="true"
android:enabled="true"
android:nestedScrollingEnabled="true" />
I made a demo and it works well. If you want add a scrollbar you can add the code android:scrollbars="vertical" into the TextView.
<?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="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/tv"
android:layout_width="200dp"
android:background="#ff0000"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:maxHeight="40dp"
android:text="add a long text to test"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
I want to put a LinearLayout inside a View (which represents a rectangle), to put more elements inside this Layout. Unfortunately, this doesn't work somehow, it just doesn't recognize the LinearLayout nor other elements when I put them inside the View.
I use Xamarin.Android (only Android, not iOS) in Visual Studio Community 2019.
Here is the XML Code. The #drawable/rounded is just an .xml file which makes the view a rectangle with round corners.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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"
android:background="#ff74a8a7"
android:orientation="vertical">
<!--Header-->
<TextView
android:text="MyTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="40sp"
android:gravity="center"
android:id="#+id/txtTitle"
android:textColor="#ff2f5858"
android:textStyle="bold" />
<!--View-->
<View
android:layout_width="300dp"
android:layout_height="450dp"
android:layout_marginTop="50dp"
android:layout_gravity="center"
android:background="#drawable/rounded"
android:backgroundTint="#ff38817a" >
<!--Here should the next LinearLayout go, e.g.: (does not work!-->
<LinearLayout>
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--Elements inside this LinearLayout, e.g. a text and a button-->
</LinearLayout>
</View>
</LinearLayout>
Help would be appreciated on how to solve this problem!
This part of your layout won't work:
<View
android:layout_width="300dp"
android:layout_height="450dp"
android:layout_marginTop="50dp"
android:layout_gravity="center"
android:background="#drawable/rounded"
android:backgroundTint="#ff38817a" >
<!--Here should the next LinearLayout go, e.g.: (does not work!-->
<LinearLayout>
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--Elements inside this LinearLayout, e.g. a text and a button-->
</LinearLayout>
</View>
A View is not a ViewGroup and can per design not have any children. You could use FrameLayout, LinearLayout, RelativeLayout, ConstraintLayout or any other layout to host multiple children.
You could just remove the outer view and you should be able to see your LinearLayout.
I am working whit Xamarin pcl. Now has the Android project an auto rendered layout for Toolbar and Tabbar. I am customizing the toolbar.axml to have a icon in the center of it. Everything is going wel untill a page got a back button (navigation page attribute I guess) end the icon shifts to the right because its not anymore the only one in the toolbar. Is there an easy fix to give the icon a fixed position? The back-button, I think, is not declared in an axml but generated through the function of Xamarin.Forms new NavigationPage().
My axml looks now like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#72B1A2"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"
>
<ImageView
android:id="#id/image"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:layout_gravity="center"
android:baselineAlignBottom="true"
android:scaleType="fitCenter"
android:src="#drawable/ictzaak_FC"
/>
</android.support.v7.widget.Toolbar>
I already look into the use of android:layout_gravity="center" and android:layout_gravity="center_horizontal" and android:center_horizontal or something but it didn't fix it
How it looks:
Startup screen without the return button
With return button and out of center
You can try to nest the Image in a RelativeLayout. And in this you can center your Image. Like this:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#72B1A2"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#id/image"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:layout_centerInParent="true"
android:baselineAlignBottom="true"
android:scaleType="fitCenter"
android:src="#drawable/ictzaak_FC"
/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
Image set in center using LinearLayout.
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:gravity="center"
android:layout_height="match_parent">
<ImageView
android:id="#id/image"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:padding="5dp"
android:scaleType="fitCenter"
android:src="#drawable/ic_img"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
I am searching how to change the background color of the clicked gridview item when it is clicked and then go back to normal color
I want that when I click, the background color of my gridview item is Orange and then after a short time, the background is white again.
Here is what I have found but "Device" is not known.
e.View.SetBackgroundColor(Color.White);
Device.StartTimer(TimeSpan.FromSeconds(0.25), () =>
{
e.View.SetBackgroundColor(Color.Orange);
return false;
});
I tried this :
1) Define Colors by creating colors.xml in values
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="pressed_color">#972234</color>
<color name="default_color">#000000</color>
</resources>
2) Create bg_key.xml in drawable
<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_selected="true"
android:drawable="#color/pressed_color"/>
<item
android:state_pressed="true"
android:drawable="#color/pressed_color"/>
<item
android:drawable="#color/default_color" />
</selector>
3) Set android:listSelector and listSelector to GridView
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnWidth="90dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"
android:listSelector="#drawable/bg_key"
android:background="#color/default_color"
/>
And it is working on my side menu but not on my gridview... My grid view is composed by an ImageView and a TextView is it the problem?
Also, what should I change (for my side menu) to change the Font color and not the background color?
You can't use the Device-Class because it is only available in Xamarin.Forms and not native Xamarin.
But you can use the System.Timers.Timer class to change the color back after some time:
var t = new System.Timers.Timer();
t.Interval = 250; // In miliseconds
t.Elapsed += (sender, args) =>
{
// Change color back on the UI-Thread
RunOnUiThread(() =>
{
e.View.SetBackgroundColor(Color.Orange);
});
};
t.Start();
Important: The Elapsed-Event is NOT invoked on the UI-Thread. So to change something on the UI (just like your background color) you need to do this on the UI-Thread.
Device.StartTimer is used in Xamarin.Forms to start a recurring timer using the device clock capabilities. It's not available in native.
I prefer you can just make a custom style.
Try this :
1) Define Colors by creating colors.xml in values
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="pressed_color">#972234</color>
<color name="default_color">#000000</color>
</resources>
2) Create bg_key.xml in drawable
<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_selected="true"
android:drawable="#color/pressed_color"/>
<item
android:state_pressed="true"
android:drawable="#color/pressed_color"/>
<item
android:drawable="#color/default_color" />
</selector>
3) Set android:listSelector and listSelector to GridView
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnWidth="90dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"
android:listSelector="#drawable/bg_key"
android:background="#color/default_color"
/>
Here is my code :
Main.axml :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#EBEAEF">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:paddingLeft="5dp"
android:background="#282059"
android:title="test"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark" />
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<!-- The Main Content View -->
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/logoBackgroud"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/icon_background" />
<GridView
android:id="#+id/grid_view_image_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnWidth="350dp"
android:layout_margin="10dp"
android:gravity="center"
android:numColumns="auto_fit" />
</RelativeLayout>
gridview.axml :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#EBEAEF">
<RelativeLayout
android:layout_height="90dp"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_margin="25dp"
android:listSelector="#drawable/bg_key"
android:background="#F4F4F6">
<!-- Letter yellow color = #FAB322 -->
<TextView
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_width="95dp"
android:layout_height="fill_parent"
android:textSize="66sp"
android:textColor="#0071CF"
android:background="#color/white"
android:layout_centerVertical="true"
android:layout_gravity="left"
android:gravity="center_vertical|center_horizontal"
android:text="A"
android:paddingBottom="5dp"
android:id="#+id/textViewLetter" />
<TextView
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:paddingLeft="15dp"
android:layout_toRightOf="#+id/textViewLetter"
android:layout_centerVertical="true"
android:layout_marginRight="35dp"
android:textSize="22sp"
android:gravity="center_vertical"
android:background="#F4F4F6"
android:textColor="#262057"
android:textStyle="bold"
android:listSelector="#drawable/bg_key"
android:id="#+id/textViewFileName" />
<ImageView
android:layout_width="35dp"
android:layout_height="wrap_content"
android:paddingTop="5dp"
android:layout_alignParentRight="true"
android:id="#+id/imageViewIcon" />
</RelativeLayout>
</LinearLayout>
I'm using a RelativeLayout to display my UI.
I want to have a title on the top left and I want an image on the top right.
Both items need to have a small spacing above and to the side (either left or right).
For my title, this works great, but I can't seem to be able to both align my image to the right and also set a right margin.
This is the axml code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/dialogContainer"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFF"
android:paddingBottom="25dip">
<TextView
android:id="#+id/dialogTitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:layout_marginTop="10dip"
android:textColor="#158849"
android:textSize="25dip" />
<ImageView
android:id="#+id/dialogLoading"
android:layout_width="26dip"
android:layout_height="26dip"
android:background="#drawable/LoadingAnimation"
android:layout_marginTop="10dip"
android:layout_alignParentRight="true"
android:layout_marginRight="25dip" /> <!--this doesn't work, there is no spacing-->
<TextView
android:id="#+id/dialogMessage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000"
android:textSize="18dip"
android:layout_marginTop="15dp"
android:layout_marginLeft="12dip"
android:layout_marginRight="15dip"
android:layout_below="#+id/dialogTitle" />
</RelativeLayout>
Other things that might be of help:
this project should be buildable against Android 2.3
I'm not directly assigning this layout to an activity.
Instead, this is used as a view for a custom dialog.
use the relative layout's layout_toLeftOf propperty:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/dialogContainer"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFF"
android:paddingBottom="25dip">
<TextView
android:id="#+id/dialogTitle"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:layout_marginTop="10dip"
android:textColor="#158849"
android:textSize="25dip"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/dialogTitle"
android:layout_width="wrap_content" />
<ImageView
android:id="#+id/dialogTitle"
android:layout_width="26dip"
android:layout_height="26dip"
android:background="#drawable/LoadingAnimation"
android:layout_alignParentRight="true"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:layout_alignParentTop="true" />
<!--this doesn't work, there is no spacing-->
</RelativeLayout>
updated my answer