I've defined custom bottomview to make custom tabbar shell in android project.
To make this, I created a new render and a new xml file to define the graphics.
But there is a problem, I have margin but the background under the bottom view is black and I don't know how I can edit this color.
This is my code:
public class MyShellBottomNavViewAppearanceTracker : IShellBottomNavViewAppearanceTracker
{
public void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
{
bottomView.SetBackgroundResource(Resource.Drawable.bottomBack);
if (bottomView.LayoutParameters is LinearLayout.LayoutParams layoutParams)
{
layoutParams.SetMargins(30, 0, 30, 0);
bottomView.LayoutParameters = layoutParams;
}
}
}
This is my xml of shell:
<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#fff555" />
<corners android:topLeftRadius="15dp"
android:topRightRadius="15dp"
android:bottomLeftRadius="15dp"
android:bottomRightRadius="15dp"
/>
<padding android:top="5dp" android:bottom="5dp"/>
</shape>
The result appears with background of view gray, shell with yellow color and Black in background but for the last one I don't know how I can edit (make gray as rest of view).
Screen about background tab bar is black and not gray as rest of the view
How can I specify the tab bar background (out of margin)?
You could try to get Parent of bottomView,then set its background color to gray.
public void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
{
bottomView.SetBackgroundResource(Resource.Drawable.bottombackground);
Android.Views.View view = (Android.Views.View)bottomView.Parent;
view.SetBackgroundColor(Android.Graphics.Color.Gray);
if (bottomView.LayoutParameters is LinearLayout.LayoutParams layoutParams)
{
layoutParams.SetMargins(30, 0, 30, 0);
bottomView.LayoutParameters = layoutParams;
}
}
Related
I am coding a social networking app using Xamarin in Visual Studio, its a portable project with an Android and iOS project.
When the MainPage class is navigated to it opens a URL and reads the page and saves it as a string. I need it to split at every "". I'm thinking I should use a for loop but I don't know what to do next. I would like each chunk to have its own layout box, I have yet to learn which layout to use and what each one is best for. In each box, it would have a label (content) and possibly an image (if the post comes with one, it would be a URL so it would open the URL and display that image)
Basically for each one I want to be able to edit the following
for(string chunk : data.split("<br/">){
<Layout?>
<label Text="*Content from the current chunk*"/>
if(*contains image*){
<image>*Open url and display the image*</image>
}
</Layout?>
}
This is also all inside of a scrollview so they all scroll together...
Parsing of chunk strings not shown.
MainPage.xaml:
<?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:StackOverflow1"
x:Class="StackOverflow1.MainPage"
Appearing="ContentPage_Appearing">
<ScrollView>
<StackLayout x:Name="mainStackLayout" />
</ScrollView>
</ContentPage>
MainPage.xaml.cs:
// ...
public partial class MainPage : ContentPage
{
private List<Chunk> chunks = new List<Chunk>();
// ...
private void ContentPage_Appearing(object sender, EventArgs e)
{
StackLayout childLayout;
foreach (Chunk chunk in chunks)
{
childLayout = new StackLayout();
Image image = new Image() { Source = chunk.url, HorizontalOptions = LayoutOptions.Start };
Label label = new Label() { Text = chunk.text, HorizontalOptions = LayoutOptions.Start };
childLayout.Children.Add(image);
childLayout.Children.Add(label);
mainStackLayout.Children.Add(childLayout);
}
}
}
// ...
So I'm a bit of a newb in Android. I've read a few tutorials but found it extensively complicated to understand. I was hoping someone can help me understand on how to implement Animations to views on the current context I'm working on (noob friendly).
Let's say this is my .axml file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/top_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:orientation="vertical" />
Now this is my activity (Not exactly but enough information to know what I want to do:
private LinearLayout _topContainer;
private IDictionary<string, FrameLayout> _framelayoutViewsDictionary = new Dictionary<string, FrameLayout>();
private LinearLayout.LayoutParams layoutParams;
protected override void OnCreate(Bundle bundle)
{
//SetContentView and other stuff...
layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.MatchParent, 1);
_topContainer = FindViewById<LinearLayout>(Resource.Id.top_container);
}
public void CreateFirstVideoPlayer
{
_framelayoutViewsDictionary.Add(Constants.Views.TOP_FRAMELAYOUT, new FrameLayout(this)
{
Id = 1,
LayoutParameters = layoutParams
});
var fragmentManager = FragmentManager.BeginTransaction();
fragmentManager.Add(_framelayoutViewsDictionary[Constants.Views.TOP_FRAMELAYOUT].Id, /*Create New MediaPlayer Here*/, Constants.FragmentTag.TOP_FRAGMENT);
fragmentManager.Commit();
_topContainer.AddView(_framelayoutViewsDictionary[Constants.Views.TOP_FRAMELAYOUT]);
}
public void CreateSecondVideoPlayer
{
_framelayoutViewsDictionary.Add(Constants.Views.BOTTOM_FRAMELAYOUT, new FrameLayout(this)
{
Id = 2,
LayoutParameters = layoutParams
});
var fragmentManager = FragmentManager.BeginTransaction();
fragmentManager.Add(_framelayoutViewsDictionary[Constants.Views.BOTTOM_FRAMELAYOUT].Id, /*Create New MediaPlayer Here*/, Constants.FragmentTag.BOTTOM_FRAGMENT);
fragmentManager.Commit();
_topContainer.AddView(_framelayoutViewsDictionary[Constants.Views.BOTTOM_FRAMELAYOUT]);
}
As you can see. I'm programmatically creating a new FrameLayout, adding a fragment on top. And then putting that FrameLayout on top view which is a LinearLayout. Now when I add the second FrameLayout. The first FrameLayout is halved and the second one is added. So now each FrameLayout is taking 50:50 space. So what I want to do is. When the second FrameLayout is added, I want the first FrameLayout to animate so it slowly moves upwards to the top half of the screen instead of instantly appearing on the top. And when I remove the second FrameLayout the first FrameLayout will slowly animate back to the centre of the screen.
Hope this all makes sense. If you need more info please comment!
Using the Support Libraries to perform a fragment slide in/out is as easy as setting the Fragment's custom animations to the built-in resource abc_slide_in_bottom and abc_slide_out_bottom animations.
Example:
SupportFragmentManager
.BeginTransaction()
.SetCustomAnimations(
Resource.Animation.abc_slide_in_bottom,
Resource.Animation.abc_slide_out_bottom,
Resource.Animation.abc_slide_in_bottom,
Resource.Animation.abc_slide_out_bottom)
.AddToBackStack(count.ToString())
.Add(Resource.Id.linearLayout1, new AFragmentSubClass(), count.ToString())
.Commit();
how can I change the style of the tab title? The most important thing is, that the titles not cutted off like at the screenshot. So I have to change the size of the titles.
I started creating a Custom Renderer for tabbedpage, but I don't know how to go on.
Xaml:
<custom:CustomTabbedPage...
Forms:
public class CustomTabbedPage : TabbedPage...
Forms.Droid
public class CustomTabbedPageRenderer : TabbedPageRenderer
The TabbedPage has NavigationPages with ContentPages.
If you need further information, let me know. Thank you.
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:TabbedPageWithNavigationPage;assembly=TabbedPageWithNavigationPage"
x:Class="TabbedPageWithNavigationPage.MainPage">
<NavigationPage Title="Start" Icon="start.png">
<x:Arguments>
<local:StartPage />
</x:Arguments>
</NavigationPage>
<NavigationPage Title="Symptom-Tagebuch" Icon="tagebuch.png">
<x:Arguments>
<local:TagebuchPage />
</x:Arguments>
</NavigationPage>
...
It seems that the default title style of NavigationPage behaviors different on different size of device. By my side on 7" KitKat emulator it looks so:
and on 5" KitKat emulator it looks so:
Or it could be the version problem which cause the behavior of this NavigationPage by my side so different from yours, I can't reproduce yout issue. Anyway, if you want to customize the layout of your NavigationPage, you can create a custom render for your android platform. For more information, you can refer to the official document Customizing Controls on Each Platform, and if you're looking for a demo, there are discussions on the official forum about customize the title font of NavigationPage you may also take a look: Discussion 1 and Discussion 2.
Another possible solution to your problem is that I think you can change the NavigationPage to ContentPage, and change your sub pages to content view, and by doing this, you can refer to Xamarin.Forms: Can I embed one ContentPage or ContentView into another ContentPage.
According to your description, maybe the first solution by creating your own custom render is more suitable for your scenario.
You can find the textview of title through TabLayout view children in CustomRendered and change font style
[assembly: ExportRenderer(typeof(MainPage), typeof(BottomTabbedPageRenderer))]
namespace Daddy.Droid
{
public class BottomTabbedPageRenderer : TabbedPageRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
{
base.OnElementChanged(e);
if (e.NewElement == null || e.OldElement != null)
return;
TabLayout tablayout = (TabLayout)ViewGroup.GetChildAt(1);
Android.Views.ViewGroup vgroup = (Android.Views.ViewGroup)tablayout.GetChildAt(0);
for (int i = 0; i < vgroup.ChildCount; i++)
{
Android.Views.ViewGroup vvgroup = (Android.Views.ViewGroup)vgroup.GetChildAt(i);
Typeface fontFace = Typeface.CreateFromAsset(this.Context.Assets, "IranSans.ttf");
for (int j = 0; j < vvgroup.ChildCount; j++)
{
Android.Views.View vView = (Android.Views.View)vvgroup.GetChildAt(j);
if (vView.GetType() == typeof(Android.Support.V7.Widget.AppCompatTextView) || vView.GetType() == typeof(Android.Widget.TextView))
{
//here change textview style
TextView txtView = (TextView)vView;
txtView.TextSize = 14f;
txtView.SetTypeface(fontFace, TypefaceStyle.Normal);
}
}
}
}
}
}
I writing application for Android and want to make animated splash screen
I did image splash screen like this
Styles.xml:
<resources>
<style name="Theme.Splash" parent="android:Theme">
<item name="android:windowBackground">#drawable/splash</item>
<item name="android:windowNoTitle">true</item>
</style>
</resources>
And SplashActivity:
[Activity(Theme = "#style/Theme.Splash", MainLauncher = true, NoHistory = true)]
public class SplashActivity : Activity
{
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
Thread.Sleep(10000);
StartActivity(typeof(Activity1));
}
}
But I have 4 .png images and i want to make animated splash screen. How I can do this?
Use Animation List - create xml in your drawable folder like this:
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true">
<item android:drawable="#drawable/image1" android:duration="200" />
<item android:drawable="#drawable/image2" android:duration="200" />
<item android:drawable="#drawable/image3" android:duration="200" />
</animation-list>
Then start the animation like this:
ImageView your_imageView = (ImageView) findViewById(R.id.rocket_image);
your_imageView.setBackgroundResource(R.drawable.your_animation_list);
AnimationDrawable your_animation = (AnimationDrawable) your_imageView.getBackground();
your_animation.start(); // Start the animation
You can use the FadeImageView class https://blog.xamarin.com/android-tricks-fadeimageview/ to fade from one image to another with a delay
Include the FadeImageView as the tutorial and set the animations with something like this:
using Android.Views.Animations;
AlphaAnimation fadeIn;
AlphaAnimation fadeOut;
fadeIn = new AlphaAnimation (0, 1) {Duration = 500};
fadeOut = new AlphaAnimation (1, 0) {Duration = 500};
Then set what to happen when the animation ends like calling a method that changes the image
EventHandler<Animation.AnimationEndEventArgs> callback = (s, e) => {
StartAnimation (fadeOut);
ChangePic ();
};
fadeIn.AnimationEnd += callback;
fadeimageview.SetImageBitmap(bitmap);
fadeimageview.StartAnimation (fadeIn);
Something simple for ChangePic:
private void ChangePic(){
if (bitmapList.Count >= 1)
{
fadeimageview.SetImageBitmap(bitmapList[bitmapList.Count - 1]);
bitmapList.RemoveAt[bitmapList.Count - 1];
fadeimageview.StartAnimation (fadeIn);
}
}
I am using this code to display an AlertDialog on a network error:
var builder = new AlertDialog.Builder(this);
builder.SetMessage(error);
builder.SetCancelable(false);
builder.SetPositiveButton("OK", delegate { });
builder.Show();
However, it looks like this:
Problems:
The current view is not displayed behind the alertdialog, it's just white.
It aligned to the top, not center
The theme or font color is wrong making the text hard to read.
I am using Theme.DeviceDefault.Light as theme for the activity:
[Activity (Label = "xxx", Theme = "#style/MyAppTheme", MainLauncher = true)]
...
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyAppTheme" parent="#android:style/Theme.DeviceDefault.Light">
</style>
</resources>
How to fix this? Have tried to insert MyAppTheme as second argument to AlertDialog.Builder(this, Resource.Style.MyAppTheme) but with no change in the UI.
Solved it. Used
var builder = new AlertDialog.Builder(this, Android.App.AlertDialog.ThemeHoloLight);
and it looks better. I also used Activity.ShowDialog() and placed my AlertDialog code inside
protected override Dialog OnCreateDialog(int id, Bundle args)
not sure that it did any difference.
Good blogpost: http://blog.ostebaronen.dk/2013/02/using-dialogs-in-mono-for-android.html