Awesome Animation start page with awesome timeline Profile view

Hey in this post we learn about how to add .GIF images to android application and create awesome looking sign in page and a awesome looking profile page with timeline view…

Here is a video of how its look like

Creating New Project

1. Create a new project in Android Studio from File ⇒ New Project and select Basic Activity from templates.or you can chose your existing project.

2. Add this dependency to your app/build.gradle. And Sync the project.

{
    dataBinding {
        enabled = true
    }
}
 
dependencies {
    //...
 
    implementation 'com.android.support:design:27.1.1'
    //this one is for using .gif images as imageview
    implementation 'pl.droidsonroids.gif:android-gif-drawable:1.2.+'
    //this is for timeline view
    implementation 'com.github.vipulasri:timelineview:1.0.3'android 
}

3. Go to appsrcmainresvalues and open style.xml file and changeTheme.AppCompat.Light.DarkActionbar toTheme.AppCompat.Light.NoActionBar.

3. Now we first design the front page where we put a .gif file as a logo so it look more awesome. and also add some buttons.

Note:Download the draweble images from here if you dont use them you can create your own.Download: Drawable Images

3.1 Open activity_main.xml file and past this code.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:background="#050F1A"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <pl.droidsonroids.gif.GifTextView
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:layout_gravity="center"
            android:background="@drawable/giphy"
            />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center">
            <Button
                android:layout_width="130dp"
                android:layout_margin="10dp"
                android:text="Sign In"
                android:id="@+id/signin"
                android:textColor="@android:color/white"
                android:background="@drawable/button_signin_background"
                android:layout_height="wrap_content" />
            <Button
                android:layout_width="130dp"
                android:layout_height="wrap_content"
                android:text="Love Match"
                android:id="@+id/love"
                android:textColor="@android:color/white"
                android:layout_margin="10dp"
                android:background="@drawable/button_love_background"/>
        </LinearLayout>

    </LinearLayout>


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="200sp"
        android:gravity="center"
        android:background="@drawable/bottom_style"
        android:layout_alignParentBottom="true">
        <Button
            android:id="@+id/tour"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="90dp"
            android:background="@android:color/transparent"
            android:text="Take A Tour"
            android:gravity="center"
            android:textStyle="bold"
            android:textColor="@android:color/white"/>



    </RelativeLayout>

</RelativeLayout>

4. Now create a new activity right click on your package name and click new and click activity and chose empty activity and name it as Profile.

5. Now we can link this activity in MainActivity so open your MainActivity.java file and past this code.

package com.monstertechno.uidesignnew;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity{

    Button signin, love, tour_match;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(1);
        getWindow().setFlags(1024,1024);
        setContentView(R.layout.activity_main);

        signin = (Button) findViewById(R.id.signin);
        love = (Button) findViewById(R.id.love);
        tour_match = (Button) findViewById(R.id.tour);

        signin.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View view) {
                Intent intent = new Intent(MainActivity.this, Profile.class);
                startActivity(intent);
            }
        });

        love.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this,"You Click on Love Match Button",Toast.LENGTH_SHORT).show();
            }
        });

        tour_match.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this,"You Click on Take Tour Button",Toast.LENGTH_SHORT).show();
            }
        });
    }
}

6. Now we will create one more activity in layout resorce folder. And name it as app_bar_layout.xml. After creating this add this code to this layour xml file.

<android.support.design.widget.CoordinatorLayout
    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="match_parent"
    android:background="#383153"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="280dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp"
            android:fitsSystemWindows="true">

            <ImageView
                android:id="@+id/header"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/cover"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/gradient"/>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:gravity="center">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Caroline Brown"
                    android:textColor="#fff"
                    android:textSize="25sp"
                    android:textStyle="bold"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Photographer, selfie expert"
                    android:textColor="#c9c9c9"
                    android:textSize="16sp"

                    />
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:layout_marginTop="5dp"
                    android:gravity="center">
                    <ImageView
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:src="@drawable/ic_location_on_black_24dp"
                        android:layout_margin="10dp"/>
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="New York"
                        android:textColor="#fff"
                        android:textSize="18sp"
                        android:textStyle="italic"/>
                </LinearLayout>
            </LinearLayout>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Profile"
                    android:textSize="18sp"
                    android:textStyle="bold"
                    android:textColor="@android:color/white"
                    android:textAlignment="center"/>
            </android.support.v7.widget.Toolbar>

        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView 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"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#383153"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="120dp"
                android:gravity="center_vertical"
                android:orientation="horizontal">

                <com.vipul.hp_hp.timelineview.TimelineView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:paddingLeft="25dp"
                    app:line="@color/colorLine"
                    app:line_size="1dp"
                    app:marker="@drawable/about_timeline"
                    app:marker_size="25dp" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:paddingLeft="20dp"
                        android:text="About Me"
                        android:textColor="#fff"
                        android:textSize="20dp" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:paddingEnd="10dp"
                        android:paddingLeft="20dp"
                        android:text="I am a very simple and a cute girl love to take selfie and wish to convert it in my profession, I really like to hangout with people."
                        android:textColor="#c7c6c6"
                        android:textSize="16dp" />
                </LinearLayout>
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="240dp"
                android:gravity="center_vertical"
                android:orientation="horizontal">

                <com.vipul.hp_hp.timelineview.TimelineView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:paddingLeft="25dp"
                    app:line="@color/colorLine"
                    app:line_size="1dp"
                    app:marker="@drawable/photos_timeline"
                    app:marker_size="25dp" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:paddingLeft="20dp"
                        android:text="Photos"
                        android:textColor="#fff"
                        android:textSize="20dp" />
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:paddingLeft="20dp"
                        android:orientation="vertical"
                        android:layout_gravity="center"
                        >
                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:orientation="horizontal"
                            >
                            <ImageView
                                android:layout_width="50dp"
                                android:layout_height="75dp"
                                android:layout_margin="5dp"
                                android:src="@drawable/image1"/>
                            <ImageView
                                android:layout_width="50dp"
                                android:layout_height="75dp"
                                android:layout_margin="5dp"
                                android:src="@drawable/image2"/>
                            <ImageView
                                android:layout_width="50dp"
                                android:layout_height="75dp"
                                android:layout_margin="5dp"
                                android:src="@drawable/image3"/>
                            <ImageView
                                android:layout_width="50dp"
                                android:layout_height="75dp"
                                android:layout_margin="5dp"
                                android:src="@drawable/image4"/>
                        </LinearLayout>
                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:orientation="horizontal"
                            >
                            <ImageView
                                android:layout_width="50dp"
                                android:layout_height="75dp"
                                android:layout_margin="5dp"
                                android:src="@drawable/image5"/>
                            <ImageView
                                android:layout_width="50dp"
                                android:layout_height="75dp"
                                android:layout_margin="5dp"
                                android:src="@drawable/image6"/>
                            <ImageView
                                android:layout_width="50dp"
                                android:layout_height="75dp"
                                android:layout_margin="5dp"
                                android:src="@drawable/image7"/>
                            <ImageView
                                android:layout_width="50dp"
                                android:layout_height="75dp"
                                android:layout_margin="5dp"
                                android:src="@drawable/image8"/>
                        </LinearLayout>

                    </LinearLayout>
                </LinearLayout>
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:gravity="center_vertical"
                android:orientation="horizontal">

                <com.vipul.hp_hp.timelineview.TimelineView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:paddingLeft="25dp"
                    app:line="@color/colorLine"
                    app:line_size="1dp"
                    app:marker="@drawable/location_timeline"
                    app:marker_size="25dp" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:paddingLeft="20dp"
                        android:text="Location"
                        android:textColor="#fff"
                        android:textSize="20dp" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:paddingEnd="10dp"
                        android:paddingLeft="20dp"
                        android:text="Lives in New York, From Paris· Also Lived in Canada."
                        android:textColor="#c7c6c6"
                        android:textSize="16dp" />
                </LinearLayout>
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:gravity="center_vertical"
                android:orientation="horizontal">

                <com.vipul.hp_hp.timelineview.TimelineView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:paddingLeft="25dp"
                    app:line="@color/colorLine"
                    app:line_size="1dp"
                    app:marker="@drawable/contact_timeline"
                    app:marker_size="25dp" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:paddingLeft="20dp"
                        android:text="Contact Me"
                        android:textColor="#fff"
                        android:textSize="20dp" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:paddingEnd="10dp"
                        android:paddingLeft="20dp"
                        android:text="Email: exampleui@monstertechno.com\nPhone: +1 020202022"
                        android:textColor="#c7c6c6"
                        android:textSize="16dp" />
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

6.1 Now open activity_profile.xml file and past this code.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
    android:fitsSystemWindows="true"
    tools:context=".Profile">

    <include
        layout="@layout/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


</android.support.design.widget.CoordinatorLayout>

7. Now open Profile.java file and past this code it will add the back button to your activity profile.

package com.monstertechno.uidesignnew;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;

public class Profile extends AppCompatActivity{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_profile);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setDisplayShowHomeEnabled(true);


    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == android.R.id.home) {
            // finish the activity
            onBackPressed();
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

}

Thats it now you can run your app and see how its look like thanks for your time. Hope you like this post. 

If you got any problem you can ask me in the comment section I will help you…

Download the full source code from here-> Source code download

Posts created 40

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top