Headertab

Drop Down MenusCSS Drop Down MenuPure CSS Dropdown Menu

Wednesday, 8 June 2016

MaterialDesign splash screen with animation


Hello friends
If you want create beautiful splash screen with animation see this blog and enjoy.
Follow step by step instruction...

Step 1: Create a resource file in values folder by name theme.xml

theme.xml


<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
       
<item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowBackground">@null</item>
    </style>

     <style name="AppTheme.CenterAnimation">
        <item name="android:windowBackground">@drawable/logo</item>
    </style>


</resources>

Step 2: Create a drawable  file in drawable folder by name logo.xml and download any type of logo image.

logo.xml


<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
            android:opacity="opaque">

    <item android:drawable="?colorPrimary"/>
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/img_face"/>
    </item>
</layer-list>


Step 3: Go to style.xml and define the button style

style.xml


<resources>


    <style name="Button" parent="Theme.AppCompat">
        <item name="colorControlHighlight">@color/colorPrimary</item>
        <item name="colorButtonNormal">@color/teal</item>
    </style>
</resources>

color.xml


<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="teal">#009687</color>

</resources>

actvity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".actvities.ShowPdfActivity">

    <include
        android:id="@+id/tool"
        layout="@layout/toolbar" />

    <LinearLayout
        android:id="@+id/read_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/tool"
        android:orientation="vertical"
        android:visibility="visible">

        <ImageView
            android:id="@+id/iv_pdfview"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="@android:color/white"
            android:scaleType="fitCenter" />

    </LinearLayout>
</RelativeLayout>
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="?colorPrimary"
    android:orientation="vertical"
    >

    <LinearLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:orientation="vertical"
        android:paddingTop="144dp"
        tools:ignore="HardcodedText"
        >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="16dp"
            android:alpha="0"
            android:text="Welcome"
            android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
            android:textColor="@android:color/white"
            android:textSize="22sp"
            tools:alpha="1"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="8dp"
            android:alpha="0"
            android:gravity="center"
            android:text="samsetdev.blogspot"
            android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Subtitle.Inverse"
            android:textSize="20sp"
            tools:alpha="1"
            />

        <Button
            android:id="@+id/btn_choice1"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="48dp"
            android:scaleX="0"
            android:scaleY="0"
            android:text="Login"
            android:theme="@style/Button"
            />

        <Button
            android:id="@+id/btn_choice2"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp"
            android:scaleX="0"
            android:scaleY="0"
            android:text="Registration"
            android:theme="@style/Button"
            />

    </LinearLayout>

    <ImageView
        android:id="@+id/img_logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@drawable/img_face"
        tools:visibility="gone"
        />
</FrameLayout>



MainActvity.java



package com.samset.splashscreen;

import android.support.v4.view.ViewCompat;
import android.support.v4.view.ViewPropertyAnimatorCompat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.DecelerateInterpolator;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {
    public static final int STARTUP_DELAY = 300;
    public static final int ANIM_ITEM_DURATION = 1000;
    public static final int ITEM_DELAY = 300;
    private boolean animationStarted = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        setTheme(R.style.AppTheme);
        getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION);
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }


    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        if (!hasFocus || animationStarted) {
            return;
        }

        animate();

        super.onWindowFocusChanged(hasFocus);
    }

    private void animate() {
        ImageView logo = (ImageView) findViewById(R.id.img_logo);
        ViewGroup container = (ViewGroup) findViewById(R.id.container);

        ViewCompat.animate(logo)
                .translationY(-250)
                .setStartDelay(STARTUP_DELAY)
                .setDuration(ANIM_ITEM_DURATION).setInterpolator(new DecelerateInterpolator(1.2f)).start();

        for (int i = 0; i < container.getChildCount(); i++) {
            View v = container.getChildAt(i);
            ViewPropertyAnimatorCompat viewAnimator;

            if (!(v instanceof Button)) {
                viewAnimator = ViewCompat.animate(v)
                        .translationY(50).alpha(1)
                        .setStartDelay((ITEM_DELAY * i) + 500)
                        .setDuration(1000);
            } else {
                viewAnimator = ViewCompat.animate(v)
                        .scaleY(1).scaleX(1)
                        .setStartDelay((ITEM_DELAY * i) + 500)
                        .setDuration(500);
            }

            viewAnimator.setInterpolator(new DecelerateInterpolator()).start();
        }
    }
}


AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.samset.splashscreen">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity"  android:theme="@style/AppTheme.CenterAnimation">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Thank you

FullSourceCodeSplashScreenAnimation

Live Sample









No comments:

Post a Comment