Currently, I am trying to create splash screen with this animation:
Progress Bar Effect
From the start, I thought of creating the progress bar, however, I can't make it and unable to find exact design. Thus, I was planning using animation method but most of the tutorial are fade in/our or move the item from left to right. Any idea how to create this kind of animation in splash screen (3 second)?
You can make this manually using handler to make the images appear after period of time.
At first you will create a layout containing these images and make them invisible, then in the handler show them one by one.
here's how to do it.
this is in layout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:id="#+id/img1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:src="#android:drawable/presence_online"
android:visibility="invisible" />
<ImageView
android:id="#+id/img2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:src="#android:drawable/presence_online"
android:visibility="invisible" />
<ImageView
android:id="#+id/img3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:src="#android:drawable/presence_online"
android:visibility="invisible" />
<ImageView
android:id="#+id/img4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:src="#android:drawable/presence_online"
android:visibility="invisible" />
</LinearLayout>
and this in java class:
final int TIME_OUT = 1000;
final ImageView imageView1 = (ImageView) findViewById(R.id.img1);
final ImageView imageView2 = (ImageView) findViewById(R.id.img2);
final ImageView imageView3 = (ImageView) findViewById(R.id.img3);
final ImageView imageView4 = (ImageView) findViewById(R.id.img4);
new Handler().postDelayed(new Runnable() {
// This method will be executed once the timer is over
#Override
public void run() {
imageView1.setVisibility(View.VISIBLE);
}
}, TIME_OUT);
new Handler().postDelayed(new Runnable() {
// This method will be executed once the timer is over
#Override
public void run() {
imageView2.setVisibility(View.VISIBLE);
}
}, TIME_OUT * 2);
new Handler().postDelayed(new Runnable() {
// This method will be executed once the timer is over
#Override
public void run() {
imageView3.setVisibility(View.VISIBLE);
}
}, TIME_OUT * 3);
new Handler().postDelayed(new Runnable() {
// This method will be executed once the timer is over
#Override
public void run() {
imageView4.setVisibility(View.VISIBLE);
}
}, TIME_OUT * 4);
you can change the TIME_OUT as it suits you and so the android:src.
i tried this and works well.
if there's anything not clear let me know.
For the ProgressBar effect as indicator of progress, please look at the reference here. Also take a look at thread of suggestions as well as the selected answer here - they show how to do a progress bar animation. You can also look at the selected answer here about making the progress bar to update smoothly. I hope this points you in the right direction.
Related
I'm trying to make an activity where i have a button and three imageview(imgv1,imgv2,imgv3). after i clicked the button, the first imagview(imgv1) will appear. and after 2secs, the second imageview(img2) will appear for 2secs and third imageview(imgv3) for 2secs.
here's a piece of code that i'm working for using handler.
final Button btn = (Button) findViewById(R.id.button);
btn.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
img1.setVisibility(View.VISIBLE);
final Handler handler = new Handler();
handler.postDelayed(new Runnable() {
#Override
public void run() {
img2.setVisibility(View.VISIBLE);
}
}, 2000);
}
});
now i can only run 2 imageviews and i don't know how to run the third image.
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/image1"
android:visibility="gone"
android:src="#drawable/wh1"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/image2"
android:visibility="gone"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:src="#drawable/wh2" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/image2"
android:visibility="gone"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:src="#drawable/wh2" />
in my xml file here i set my three imageview visibility gone, so they can only be visible when the button is clicked.
please help me if someone has any code example. i've seen many post about this in a single ImageView changing image resources, but this is different from that so please help me..
Declare intname count in your Activity. Then you could do something like that:
final Button btn = (Button) findViewById(R.id.button);
btn.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(final View v) {
count = 0;
final ImageView[] images = {(ImageView) findViewById(R.id.image1), (ImageView) findViewById(R.id.image2), (ImageView) findViewById(R.id.image3)};
v.postDelayed(new Runnable() {
#Override
public void run() {
images[count].setVisibility(View.VISIBLE);
switch (count){
case 0:
images[1].setVisibility(View.GONE);
images[2].setVisibility(View.GONE);
break;
case 1:
images[0].setVisibility(View.GONE);
images[2].setVisibility(View.GONE);
break;
case 2:
images[0].setVisibility(View.GONE);
images[1].setVisibility(View.GONE);
break;
}
count++;
if (count == 2)
v.removeCallbacks(this);
else
v.postDelayed(this, 2000);
}
}, 2000);
}
});
instead of setting visibility of 3 Image views you can use single imageView and change the content of imageView by using setImageResource() method or setImageBitmap() or setImageDrawable() method.
I am working on splash screen for my android app. The screen starts from my MainActivity.java, in which onCreate() method contains the following code. Also the same activity class is loading maps in its onResume() method and in it i m loading a new layout which is activity_main.xml. That xml has black screen and no background screen.
MainActivity.java
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.loading_screen);
progressBar = (ProgressBar) findViewById(R.id.progressBar1);
textView = (TextView) findViewById(R.id.textView1);
new Thread(new Runnable() {
public void run() {
while (progressStatus < 100) {
progressStatus += 1;
handler.post(new Runnable() {
public void run() {
progressBar.setProgress(progressStatus);
textView.setText(progressStatus + "/"
+ progressBar.getMax());
}
});
try {
Thread.sleep(200);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}).start();
compass = new CompassSensor(this, compassHandler);
}
my layout for loading_screen.xml is as follow.
loading_screen.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/splash_screen_loading" xmlns:android="http://schemas.android.com/apk/res/android">
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="25dp" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignTop="#+id/progressBar1"
android:layout_marginLeft="15dp"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
The problem i m facing is that only black screen shows during app loading. I tried to debug the problem but all my efforts were useless. Plz help.
You should not attempt this in onCreate, if you expect visual changes. Nothing is shown to user during onCreate. I am aware of Thread.sleep(200).
You may want to try doing it in your onResume, just after calling super.onResume. The way you described it, R.layout.loading_screen is not even supposed to be shown.
Also, if you're using AsyncTask to load maps, Developers lets you know how to publish progress. Take a look at this: AsyncTask. Maybe you could add this prior work (with progress on R.layout.loading_screen) to asynchronous task, too.
I am new to Android Programming, what I am trying to do in this Android Application is to create a xml page filled with buttons.
When I click the button, the button would change to light green color and when I click it again, it would change to light grey
The error: I am getting is when I click the button, it increases in size and overlaps with the other buttons, please help me out here, it is not user friendly in this case
attached below is the code:
lockerbooking.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:id="#+id/sisButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="16dp"
android:layout_marginTop="28dp"
android:text="#string/sis"
/>
<Button
android:id="#+id/solButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/soeButton"
android:layout_alignBottom="#+id/soeButton"
android:layout_alignParentRight="true"
android:text="#string/sol" />
<Button
android:id="#+id/soeButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/sisButton"
android:layout_alignBottom="#+id/sisButton"
android:layout_centerHorizontal="true"
android:text="#string/soe" />
</RelativeLayout>
Code:
makeBooking.java
public class makeBooking extends Activity {
Button sisButton;
Button solButton;
Button soeButton;
Button sobButton;
super.onCreate(savedInstanceState);
// Get the message from the intent
setContentView(R.layout.lockerbookpage);
Intent intent = getIntent();
// Initialize TextViews
sisButton = (Button) findViewById(R.id.sisButton);
solButton = (Button) findViewById(R.id.solButton);
soeButton = (Button) findViewById(R.id.soeButton);
sobButton = (Button) findViewById(R.id.sobButton);
}
public OnClickListener solButtonListener = new OnClickListener(){
boolean flag = true;
public void onClick(View arg0) {
// TODO Auto-generated method stub
if(flag){
solButton.setBackgroundColor(Color.GREEN);
}
else{
solButton.setBackgroundColor(Color.LTGRAY);
}
flag=!flag;
}
};
...The code goes on
Please help me out here, I am eager to learn
to avoid overlapping of buttons, use fixed width and height for buttons:
change this:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
to some this like this:
android:layout_width="100dp" //what ever size suits your layout
android:layout_height="50dp" //fixing this,will not overlap the buttons
I am new to animations on Android and I seem to be having a simple issue... I have a splash/loading screen, which I want to fade out when it's done, then show the app.
My layout looks something like this (the styles just set a background image):
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/homeParentContainer"
style="#style/LayoutWithBgStyle"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/homeSplashLayout"
style="#style/LayoutWithSplashStyle"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true" >
</LinearLayout>
<LinearLayout
android:id="#+id/homeMainLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:orientation="vertical"
android:visibility="gone" >
</LinearLayout>
</RelativeLayout>
Then I tried two different approaches to fading the splash screen out and setting the main screen visible:
final Animation fadeOut = AnimationUtils.loadAnimation(this, android.R.anim.fade_out);
final View splash = findViewById(R.id.homeMainLayout);
fadeOut.setAnimationListener(new AnimationAdapter()
{
#Override
public void onAnimationEnd(final Animation animation)
{
splash.setVisibility(View.GONE);
findViewById(R.id.homeMainLayout).setVisibility(View.VISIBLE);
}
/** And the other two methods */
});
splash.startAnimation(fadeOut);
Then I tried my own animation:
final AlphaAnimation fadeOut = new AlphaAnimation(1.0F, 0.0F);
fadeOut.setDuration(1000);
final View splash = findViewById(R.id.homeMainLayout);
fadeOut.setAnimationListener(new AnimationListener()
{
#Override
public void onAnimationEnd(final Animation animation)
{
splash.setVisibility(View.GONE);
findViewById(R.id.homeMainLayout).setVisibility(View.VISIBLE);
}
/** And the other two methods */
});
splash.startAnimation(fadeOut);
And I get to the startAnimation code, but the animation never seems to start, and I never get the onAnimationEnd() call. What have I forgotten to include to get the animation to actually run?
I have been a careless programmer.
final View splash = findViewById(R.id.homeMainLayout);
should actually read:
final View splash = findViewById(R.id.homeSplashLayout);
because fading out something that is invisible is not what I had intended.
I have a ViewFlipper that shows 2 imageview (red one when disconnected and the green other when connected), however, i have a strange result: sometimes the red image is showen when i'm connected, it switches like this : red-green-and returns red(even when i'm connected).
Here is the JAVA code:
public void onRegistrationDone(String localProfileUri, long expiryTime) {
updateStatus("Enregistré au serveur.");
Log.d("SUCCEED","Registration DONE");
final ViewFlipper flipper = (ViewFlipper)findViewById(R.id.flipper);
flipper.postDelayed(new Runnable() {
public void run() {
flipper.showNext();
}
},2000);}
The view is initiated with the red image, then, when connected(and after 2 seconds) the next image is normally showen.
What could be the problem?
Thank you very much.
EDIT: XML file (Handler)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/sipLabel"
android:textSize="20sp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<ImageView android:id="#+id/status" android:layout_below="#id/sipLabel"
android:layout_width="fill_parent" android:scaleType="center"
android:layout_height="fill_parent" android:layout_weight="0.35" android:gravity="center"
/>
</LinearLayout>
I would do that differently. If that is just a matter of displaying different image (red/green) I would use ImageView UI control to display that image. And for the delayed display update you may use Handler. Something like this:
public void onRegistrationDone(String localProfileUri, long expiryTime)
{
updateStatus("Enregistré au serveur.");
Log.d("SUCCEED","Registration DONE");
mRegistered = true;
mRegistrationUpdateHandler.removeCallbacks(handleUpdateStatus);
mRegistrationUpdateHandler.postDelayed(handleUpdateStatus, 2000);
}
public void onRegistrationLost()
{
mRegistered = false;
mRegistrationUpdateHandler.removeCallbacks(handleUpdateStatus);
mRegistrationUpdateHandler.postDelayed(handleUpdateStatus, 2000);
}
private Runnable handleUpdateStatus = new Runnable()
{
public void run()
{
ImageView statusImageDisplay = (ImageView)findViewById(R.id.statusImage);
if (mRegistered)
{
statusImageDisplay.setImageDrawable(getResources().getDrawable(R.drawable.imageGreen));
else
{
statusImageDisplay.setImageDrawable(getResources().getDrawable(R.drawable.imageRed));
}
}
};