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);
}
}
Related
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;
}
}
I have an android ProgressBar which is indeterminate so it is simply a revolving circle animation.
It starts off displaying fine, but after I set the visibility of its parent (overlayLayout) to either gone or invisible and then set it back to visible later on, the progress bar is unseen?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/overlayLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:gravity="center" >
<TextView
android:text=""
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="match_parent"
android:textAlignment="center"
android:layout_margin="10dp"
android:layout_height="wrap_content"
android:id="#+id/overlayLabelText" />
<ProgressBar
android:id="#+id/overlayProgressBar"
android:layout_below="#id/overlayLabelText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:foregroundGravity="center"
android:indeterminate="true" />
</RelativeLayout>
EDIT:
I'm unsure if the view is included but the progress bar is just not rendered or whether the ProgressBar view itself is completely excluded as I can't access the UI view hierarchy.
So far I have tried:
ProgressBar.Enabled = true;
ProgressBar.ForceLayout();
ProgressBar.Invalidate();
ProgressBar.SetProgress(0, true);
ProgressBar.Visibility = ViewStates.Visible;
But have had no breakthroughs yet.
EDIT 2:
Thankyou everyone for your help so far. I have switched to creating the layout programatically - this is my full code:
overlay = new RelativeLayout(mainActivity)
{
LayoutParameters = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.MatchParent)
};
overlay.SetBackgroundColor(Color.WhiteSmoke);
overlay.SetGravity(GravityFlags.Center);
description = new TextView(mainActivity)
{
LayoutParameters = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.WrapContent),
Gravity = GravityFlags.Center,
TextSize = 18,
Id = 1523112
};
description.Text = "Waiting for GPS";
description.SetBackgroundColor(Color.Aqua);
progressBar = new ProgressBar(mainActivity)
{
Indeterminate = true,
};
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.WrapContent);
lp.AddRule(LayoutRules.Below, description.Id);
progressBar.LayoutParameters = lp;
progressBar.SetBackgroundColor(Color.Red);
container.AddView(overlay);
overlay.AddView(description);
overlay.AddView(progressBar);
With the two hiding and showing methods:
private void OnGpsUpdate()
{
overlay.Visibility = ViewStates.Gone;
}
private void NoGPS()
{
description.Text = "Waiting for GPS";
overlay.Visibility = ViewStates.Visible;
}
When the layout is first rendered, before its hidden for the first time:
(I screenshotted at a bad time, but blue drawing shows where the circle is moving around its loading animation)
After its been hidden and shown again, the progressBar loading view is there but there's no loading circle anymore:
I am starting to think it may just be a problem with my android emulator? Nope, same problem when testing on my physical phone. Text view still shows fine, its just the progress bar doesnt show?
SOLUTION
I don't fully understand it, seeing as everything else seemed to work except the progressBar, but a solution came from wrapping my visibility calls in a RunOnUIThread() call.
Few points
Based on how the problem was described, there is a need for you to show the code snippet you used for hiding/showing the overlayLayout
Recommendations
If you're only concerned with how the progress bar should behave in terms of hiding/showing, there's no need for this snippet:
ProgressBar.Enabled = true;
ProgressBar.ForceLayout();
ProgressBar.Invalidate();
ProgressBar.SetProgress(0, true);
ProgressBar.Visibility = ViewStates.Visible;
You just need to control the root layout which has the id of overlayLayout
private RelativeLayout overlayLayout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_example);
// Instantiate the layout
overlayLayout = findViewById(R.id.overlayLayout);
// Do the logic how you inflate/show the layout
...
// Hide the overlay layout
overlayLayout.setVisibility(View.GONE);
// Show the overlay layout
overlayLayout.setVisibility(View.VISIBLE);
}
Decide on the visibility value, for this scenario, I'd recommend View.GONE rather than View.INVISIBLE
Read more on:
https://developer.android.com/reference/android/view/View.html#GONE
https://developer.android.com/reference/android/view/View.html#INVISIBLE
http://tips.androidgig.com/invisible-vs-gone-view-in-android/
The solution was to add a RunOnUIThread like so:
private void OnNewGPS()
{
mainActivity.RunOnUiThread(() =>
{
overlay.Visibility = ViewStates.Gone; });
}
private void NoGPS()
{
mainActivity.RunOnUiThread(() =>
{
overlay.Visibility = ViewStates.Visible;
});
}
Where mainActivity is a reference to the Activity the views are running in.
I wrote a demo based on your code. And to test it, I added a button to control the show and hide of the layout.
You may try this:
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.activity_main);
// Instantiate the layout
overlayLayout = FindViewById<LinearLayout>(Resource.Id.overlayLayout);
progressBar = FindViewById<ProgressBar>(Resource.Id.overlayProgressBar);
description = FindViewById<TextView>(Resource.Id.textView1);
description.Text = "Waiting for GPS";
description.SetBackgroundColor(Color.Aqua);
progressBar.SetBackgroundColor(Color.Red);
switchBtn = FindViewById<Button>(Resource.Id.switchButton);
switchBtn.Click += SwitchBtn_Click;
overlayLayout.Visibility = Android.Views.ViewStates.Visible;
isShown = true;
}
private void SwitchBtn_Click(object sender, System.EventArgs e)
{
if (isShown)
{
overlayLayout.Visibility = Android.Views.ViewStates.Gone;
isShown = false;
switchBtn.Text = "Show";
}
else {
overlayLayout.Visibility = Android.Views.ViewStates.Visible;
isShown = true;
switchBtn.Text = "Hide";
}
You can download the demo from this
to hide layout:
findViewById(R.id.overlayLayout).setVisibility(View.GONE);
to display it again :
findViewById(R.id.overlayLayout).setVisibility(View.VISIBLE);
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();
So I tried to change the image of imageButton when on press and release, it works. But the Button.Click function won't execute/trigger anymore after I implement the code, here's my code
ImageButton btnNewGame;
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
SetContentView(Resource.Layout.Main);
btnNewGame = FindViewById<ImageButton>(Resource.Id.btnNewGame);
btnNewGame.Click += BtnNewGame_Click;
btnNewGame.Touch += (object sender, View.TouchEventArgs e) =>
{
if (e.Event.Action == MotionEventActions.Down)
{
btnNewGame.SetImageResource(Resource.Drawable.Button_New_Game_Pressed);
}
else if (e.Event.Action == MotionEventActions.Up)
{
btnNewGame.SetImageResource(Android.Resource.Drawable.IcMenuGallery);
}
};
private void BtnNewGame_Click(object sender, EventArgs e)
{
Intent nextActivity = new Intent(this, typeof(NextPage));
StartActivity(nextActivity);
}
Can someone please tell me why?
Thank you!
You can accomplish that using selectors.
Create a XML file inside the Drawables directory.
imagebutton_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_enabled="false"
android:drawable="#drawable/ic_assignment_returned_black_24dp" />
<item
android:state_pressed="true"
android:state_enabled="true"
android:drawable="#drawable/ic_assignment_turned_in_black_24dp" />
<item
android:state_focused="true"
android:state_enabled="true"
android:drawable="#drawable/ic_assignment_returned_black_24dp" />
<item
android:state_enabled="true"
android:drawable="#drawable/ic_assignment_returned_black_24dp" />
</selector>
In this file you select the different states of the object, in your case the ImageButton.
I am defining 4 different states, you can define the ones you need and with different drawables each one, for simplicity I used the same drawable for 3 states (disabled, enabled and enabled + focused) and for pressed used a second drawable.
Now go to your Layout where the ImageButton is defined and set this as the background
<ImageButton
android:id="#+id/btnNewGame"
android:background="#drawable/imagebutton_selector"
android:layout_width="80dp"
android:layout_height="80dp" />
With this you are free to remove the OnTouch implementation on code and the Click event will continue working.
Hope this helps!
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