Android Tutorials 2022 - Two Screen App with Gradient Backgrounds

New Tutorial 2022

Android - Gradient Backgrounds - Two Screen App

Added May 2022

For this tutorial, we are going to learn how to add gradient colors to our app pages as the background colors.
The homepage (main.xml), has 3 gradient colors added. The first screen (first_screen.xml) has 2 gradient colors for its' background. And, we also added gradient 2 colors for our Button. This button, when clicked takes the user to screen one. This app has two screens in total.

We are going to create a new app for this tutorial, and name is - App Two Screens

Android Tutorial, Gradient Backgrounds

Creating Our New App

Open AIDE, Select New Project, from the left menu, or center menu hierachy of files; and do the following:

Select
Create an Android app, choose java xml programming language

Create an Android app, choose java xml programming language

choose NEW ANDROID APP(Gradle/Android SDK/java/xml) if your using the newest version of AIDE.

Choose HELLO WORLD example app template(java/xml);if your using an older version of AIDE,

For app name; type 'App Two Screens'

For app package name type: com.aac.exampletwoscreens"

Click Create

Your new app is now created for you - named 'App Two Screens'. For now, you will have the 'little green Android image' as your app icon.
Once you add your apps' icon image and run your app with the updated and new pages you create, and the apps' other, if required, images; you'll see the customized 'App Icon' instead of little green Android icon.
This app has a customized icon. You can Save it at Example Code section on this page.

Note: Not all tutorials have a customized icon or require new pages to be created.

AIDE automatically opens your new app in the editor for you.

Where Code is Coded

For our App Two Screen app, we must edit the main.xml(aka- homepage of your app), and edit the MainActivity.java aka our java class. Also, we must create two additional pages: first_screen.xml; and FirstScreen.java, create each in xml and java folders. Once created, add the code for each from Example Code section on this page, Save each page. Of Note: first_screen.xml has the xml layout code, whereas FirstScreen.java has the executable code methods.

Lastly, we must create the xml pages to hold the color code for each gradient drawable. Since we are adding gradients to main.xml, first_screen.xml, and our button at main.xml; we must create three separate drawable pages. Drawable pages as such are added to the res/drawable folder in this app project. You need to create the 'drawable' folder as well. This is easy to do.

You must create one 'drawable' folder and three separate xml pages, one for each gradient drawable we are adding. Create each of them, but first create the 'drawable' folder.
To create it goto res/drawable-hdpi;(as shown in this image), then you are at the proper folder to create it.

Also, in this image you see the drawable code for the drawable at main.xml. Three colors were used. For first_screen.xml drawable we used 2 colors, and for the button drawable, we used 2 colors. Looking at the app photo at top of page, you can see how 3 colors blend into the background.

You can use similar but complementing colors. For main.xml, we added opposite colors whereas on first_screen.xml, we used 2 shades of the same color. All different ways you can design your app page layouts using gradient drawables.

Android Tutorial, creating res drawable folder

Android Tutorial, creating res drawable folder

After you have crested the 'drawable' folder, open the drawable folder and create each xml page.

You can name these pages whatever you want, then code the name into your corresponding layout page, at the 'LinearLayout' for each app page. For each page, main.xml; first_screen.xml, add it at the 'android:background' attribute. And, we use the same code to add it to our button. This code is at the button element on main.xml.

No other pages require changes for this app. You can just copy paste the code for all the required pages from the Example Code section. Save each page.

Then copy paste the code for the drawables once you create each page: Save each page.

gradient_drawable3.xml
gradient_drawable2.xml
gradient_drawable_button.xml

Java Class

At our java class, MainActivity.java, we declare our button and add the code for our 'onclicklistener'. This code functions when the user clicks the button on the homepage, which then loads the first screen. Of note; the homepage/main screen of an app is typically main.xml, and any subsequent pages are known as app pages or screen one, screen two...as such.

Import Statements

We must also add 'import statements' at the top of java pages if required- MainActivity.java, FirstScreen.java. For this app, we must include the 'intent", and 'button' import statements at MainActivity.java, as we have included these methods in our java coding. We do not have to add additional 'import statements' to FirstScreen.java, because we have not included any additional executable code methods to it.

All other import statements are added for us when we created our app using the simple template. All imports are included at the Example Code section on this page.

All code for this tutorial is at the Example Code section on this page. Only copy and replace code for the pages mentioned that require updating.
At Example Code section on this page; any page notated as 'no edit required', means you dont have to copy and paste that page - added only for you to view it.

TIPS

Navigating The App Project Hierachy

To view A FILE do either: from right menu choose FILES or GOTO, this will show the apps files along the top of editor, dropdown, and left side menu. After editing a file, SAVE it, right side menu, choose SAVE.

Creating Pages

Check for the filename extensions of page your creating. If for example, your creating a new Java page, (java folder)you want to see pages already created in that folder that have the .java file extension. Click 'create new java class' to create your page.

For xml files, you must create these in the 'res/layout' folder of your app project. Click 'add new xml file', to create your page.

YOU MIGHT LIKE:
AAC App Hub

Additional Reading on Gradient Drawables at Android Developer website
EXAMPLE CODE - Code For This Tutorial.

JUST copy the code for this tutorial from the Example Code in this section.

Example Code:
Copy Paste the Code

build.gradle No Edit Required

apply plugin: 'com.android.application'

android {
    compileSdkVersion 21
    buildToolsVersion "21.1.0"

defaultConfig {
        applicationId "com.aac.exampletwoscreens"
        minSdkVersion 16
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
}
_____________

//has code for icon just change and Save

AndroidManifest.xml

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

</manifest>
___________

//just copy and replace all code
main.xml

</LinearLayout>

____________

//create this page at res/layout

first_screen.xml

</LinearLayout>
_____________

//copy and replace all code

MainActivity.java

package com.aac.exampletwoscreens;

import android.app.*;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.content.Intent;

public class MainActivity extends Activity 
{
	Button b1;

@Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);

setContentView(R.layout.main);

b1 = (Button) findViewById(R.id.Button1);
		b1.setOnClickListener(new View.OnClickListener()
			{
				@Override public void onClick(View view)
				{
					Intent intent = new Intent(MainActivity.this, FirstScreen.class);
					startActivity(intent);
				}});

}
}
_____________

//create this page then add this code

FirstScreen.java

package com.aac.exampletwoscreens;

import android.app.*;
import android.app.Application;
import android.view.View;
import android.os.Bundle;
import android.app.Activity;

public class FirstScreen extends Activity

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

__________

//create at drawable folder

gradient_drawable2.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<item>
		<shape>
			<gradient
				android:startColor="#ffe4e1"
				android:endColor="#b36865"
				android:angle="270" />
		</shape>
	</item>
</selector>
____________

//create this at drawable folder

gradient_drawable3.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<item>
		<shape>
			<gradient
				android:startColor="#b2ebf3"
				android:centerColor="#fff5ee"
				android:endColor="#ff3400"
				android:angle="270" />
		</shape>
	</item>
</selector>
____________

//create at drawable folder

gradient_drawable_button.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<item>
		<shape>
			<gradient
				android:startColor="#4dd0e1"
				android:endColor="#B2EBF2"
				android:angle="270" />
		</shape>
	</item>
</selector>

____________

//require app name only

strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

<string name="app_name">AppTwoScreens</string>
    <string name="first_screen">Title Goes Here</string>

</resources>
____________

App Image(s)

This is the app icon, just Save to your device, then copy paste to the res/drawable-hdpi of the app project, 'App Two Screens'.
SAVE IMAGE(S): Right Click and Save As
app_two_screens490.png
logo for gradient backgrounds example android tutorial

This free script provided by
JavaScript Kit