I am working with one project where we already customized actionbar for android in such a way:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:paddingRight="5dp"
android:paddingTop="5dip"
android:paddingBottom="5dip">
<ImageView
android:id="#+id/ImgSmallC"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="#drawable/smallC"
android:background="#drawable/back"
android:paddingRight="10dip"
android:paddingLeft="10dip"
android:layout_marginRight="25dp" />
<FrameLayout
android:id="#+id/LayoutProvider"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_toRightOf="#id/ImgSmallC">
<TextView
android:id="#+id/txtProvider"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:textSize="20dip"
android:textColor="#c6c6c6"
android:paddingRight="35dip"
android:paddingLeft="10dip"
android:background="#drawable/back"
android:text="Test"
android:layout_gravity="right"
android:gravity="center_vertical" />
<ImageView
android:id="#+id/imgArrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/dropdown"
android:layout_marginRight="5dp"
android:layout_gravity="center_vertical|right" />
</FrameLayout>
</RelativeLayout>
Here is defined image which is in the center and text which is merged with image , so they both looks like button. Also I implemented some logic in C# code, where we used this .axml file as a layout:
LayoutInflater inflater = (LayoutInflater)ActionBar.ThemedContext.GetSystemService(LayoutInflaterService);
View customActionBarView = inflater.Inflate(Resource.Layout.actionbar_custom_view_done, null);
How can I to do same with iOS project? As I understand iOS doesn't have .axml files , because they are specific android file. I tried to find documentation examples , how to write custom layout for iOS navigation bar, but unfortunately I didn't found anything. And I want to use that iOS layout same as I mentioned in C# code logic for android.
UINavigationController aka Navigation allows very little customisation in iOS
You can find the detailed documentation our website here: https://developer.xamarin.com/recipes/ios/content_controls/navigation_controller/
Related
I want to use Tabbed Page with bottom tabs. I want to make custom bottom bar in android and use it or inflate it in TabbedPageRenderer. Is this possible? Can anyone help me?
I want to use 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">
<FrameLayout android:id="#+id/bottomtab.navarea" android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="fill"
android:layout_weight="1" />
<android.support.design.widget.BottomNavigationView android:id="#+id/bottomtab.tabbar" android:theme="#style/Widget.Design.BottomNavigationView" android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
And then in my TabbedPageRenderer I want to use this layout for only the design of bottom bar.
Like you can access Toolbar and Tabbar from android. Similarly I want to access or create Bottombar.
I have such lottie anim
https://dropmefiles.com/uweF8
You can check it on Lottie preview web site
https://lottiefiles.com/preview
In preview this file is working well
But if you will try to add this anim to the project like this
<?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">
<com.airbnb.lottie.LottieAnimationView
android:id="#+id/animation_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:lottie_autoPlay="true"
app:lottie_loop="false"
app:lottie_rawRes="#raw/heart"
app:lottie_scale="1.2"
tools:background="#color/black_30_alpha"
tools:layout_height="200dp"
tools:layout_width="match_parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
So you will have such result
And you can see that the animation does not meet the end.
What am I doing wrong?
I have tried to add this line in the code
mAnimHeart.setMaxProgress(1f);
But the result is the same
This has been fixed in Lottie 3.0
https://github.com/airbnb/lottie-android/issues/1034
In official Lottie app last frame of this json file is same as yours. So it looks like something wrong with that file. Maybe Lottie team doesn't add support for some features on android. Or maybe it is just bug. You can open issue on thier github repository.
I have XF app which gives the user an option to change from Light to Dark theme with a button click. I am using the below code:
<ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Japanese.NavBackgroundRes">
<Style TargetType="NavigationPage">
<Setter Property="BarBackgroundColor" Value="{DynamicResource GridBackgroundColor}"/>
<Setter Property="BarTextColor" Value="{DynamicResource LabelTextColor}" />
</Style>
</ResourceDictionary>
This works perfectly on iOS but not in Android. The BarTextColor property works for both iOS and Android but the BarBackgroundColor only works on iOS. Anyone knows why that is? I am debugging on a physical device if that helps.
There is a concept in Android called the Material design.
Since Xamarin has adopted the Native Java Android Behavior in Xamarin.Android what happens is that the Android application picks the theme in its styles.xml file and uses that style to set the bar background colour.
But of course, there is a workaround. Whatever changes that you need to do on the Android side you will have to update it in the style file for it for eg:
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<style name="MyTheme" parent="MyTheme.Base">
</style>
<style name="DrawerArrowStyle" parent="#style/Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#FFFFFF</item>
</style>
<style name="MyTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="colorPrimary">#003399</item>
<item name="colorPrimaryDark">#003399</item>
<item name="colorControlHighlight">#003399</item>
<item name="colorAccent">#012348</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
</resources>
A change in colour here will directly reflect there, for eg ColorPrimary is your toolbar background colour (BarBackgroundColor).
UPDATE
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="#style/ToolbarTheme" >
</android.support.v7.widget.Toolbar>
Then get the toolbar something like this:
var toolbar=yourActivityContext.Window.DecorView.FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
toolbar.SetBackgroundColor(Android.Graphics.Color.Your_Color);
//In case of hex color
toolbar.SetBackgroundColor(Android.Graphics.Color.ParseColor("#ebebeb"));
Use BackgroundColor instead of BarBackgroundColor for android.
use both properties for android and iphone.
<NavigationPage BarBackgroundColor="#F05123" BackgroundColor="#F05123" BarTextColor="White" >
I am developing a Xamarin Forms application for Android and iOS. Is it possible to use the new FlowDirection property introduced in Xamarin.Forms 3.0 to make the master details view from right to left including the menu which is presented from left as opposed to be from right in RTL languages?
I tried setting the MasterDetail page property but still the menu is presented from left in Android and the menubar is still from left to right.
Any ideas?
New property link
https://github.com/xamarin/Xamarin.Forms/blob/master/Xamarin.Forms.Core/FlowDirection.cs
It seems to work out-of-the-box as expected on iOS but not on Android (extra actions required) with the next example:
<?xml version="1.0" encoding="UTF-8"?>
<MasterDetailPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="RTL.MasterDetailPage"
Padding="25"
FlowDirection="RightToLeft">
<MasterDetailPage.Master>
<ContentPage Title=" ">
<StackLayout>
<Button Text="Menu item" />
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<ContentPage>
<Label Text="My page"/>
</ContentPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
Here is the outcome:
As you see on Android the menu appear on the left and on iOS on the right. Should check if there an existing bug report, if not should create a new one to the Xamarin.Forms team.
Update:
According to this document we have to add android:supportsRtl="true" to the application node in the manifest and ensure to set minSdk to 17+, without it won't work.So here is the final outcome:
I am new to mvvmcross. In my xamarin android app, I want to change a buttons background image when the user clicks on it. I am not sure how this binding can be done. Can some one help me please.
You can bind any background image with DrawableId and DrawableName:
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
local:MvxBind="DrawableId TheIntOfTheResource; Click SomeCommand" />
In SomeCommand you can change the id of TheIntOfTheResource which you bind to, so the image gets changed.