Gradient Background in Android

In this instructional exercise we will figure out how to make moving angle foundation. To truly comprehend the making of enlivened angle foundation we will make an application. This application will contains the login screen and vivified foundation same like as you may have seen in login screen of Instagram.

Stage 1) Creating New Project 

Make another venture in Android Studio from File ⇒ New Project Fill the required data like task name and bundle name of the undertaking. When it prompts you to choose the default movement, select Empty Activity and continue.

Stage 2) Defining strings,colors and styles 

2.1 Add the underneath string esteems to the strings.xml situated in res ⇒ values ⇒ strings.xml.

<resources>
<string name="app_name">Gradient Background</string>
<string name="text_logo">Gradient</string>
<string name="text_hint_email">Email</string>
<string name="text_hint_password">Password</string>
<string name="text_login">Login</string>
</resources>

2.2 Add the color values to the colors.xml  res ⇒ values ⇒ colors.xml.

2.3 Add below style values to the styles.xml  res ⇒ values ⇒ styles.xml.

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- 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:windowTranslucentStatus">true</item>
    </style>

</resources>

Stage 3) Adding slope drawable 

Before making design we need to compose custom slope drawable for format's experience. We will make 4 drawable asset records in drawable organizer by right tap on drawable ⇒ New ⇒ Drawable asset document name it same as name of the accompanying drawable xml documents.

Add the beneath code to the drawable_purple_gradient.xml. This record will produce a purple shading inclination foundation.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="90"
        android:endColor="@color/colorPurple"
        android:startColor="@color/colorPurple" />
</shape>

<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="@color/drawable_purple_background">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="@dimen/margin_12"
        android:orientation="vertical" >

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="wrap_content"
                android:layout_height="@dimen/login_tab_layout_height"
                android:layout_gravity="center"
                app:tabSelectedTextColor="@color/color_text_main"
                app:tabTextColor="@color/colorSecondary_Background"
                app:tabBackground="@color/colorPrimary_background"
                app:tabMode="fixed"
                app:tabGravity="fill"
                app:tabIndicatorColor="@android:color/transparent"
                app:tabPaddingStart="0dp"
                app:tabPaddingEnd="0dp"/>
        </android.support.design.widget.AppBarLayout>

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

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