Android Style Demo Example

Android Style Demo Example

In this chapter, we will be considering an example with which you can understand the creation of the Style for each of the individual components. Let’s initiate with the creation of an Android application. For this, you just need to follow the given steps one by one.

Also Read: Android Broadcast Receiver

Step 1: Start with Android Studio IDE. In here, create a new application by the name myapplication. Save this Android application under the com.example.w3school.myapplication package. This step has already been explained in the earlier chapter of Hello World Example.

Step 2: Locate main activity java file which is named as MainActivity.java. You can find this file by following the src/com.example.myapplication/ path. Open the file and modify its content with the given coding section. The modifications are subjected to the inclusion of the definitions of the click event listeners and handlers for the button used in the interface. This file also contains all the fundamental lifecycle callback methods.

[post_middile_section_ad]

package com.example.w3school.myapplication;
import android.content.Intent;
import android.net.Uri;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends ActionBarActivity
{
   Button b1;   
   @Override
   protected void onCreate(Bundle savedInstanceState)
   {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      b1=(Button)findViewById(R.id.button);
      b1.setOnClickListener(new View.OnClickListener()
      {
         @Override
         public void onClick(View v)
         {
            Toast.makeText(MainActivity.this,”YOUR   MESSAGE”,Toast.LENGTH_LONG).show();
         }
      });
   }
}

Step 3: Now, it’s time to define your style in the global style file. You can locate this global style file at res/values/style.xml. Here, you will be defining the custom attributes for the button included in the layout. The file having additional style is named as CustomButtonStyle. The content of the file is given below.

<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>
   </style>

   <style name=”CustomButtonStyle”>
      <item name=”android:layout_width”>100dp</item>
      <item name=”android:layout_height”>38dp</item>
      <item name=”android:capitalize”>characters</item>
      <item name=”android:typeface”>monospace</item>
      <item name=”android:shadowDx”>1.2</item>
      <item name=”android:shadowDy”>1.2</item>
      <item name=”android:shadowRadius”>2</item>
      <item name=”android:textColor”>#000000</item>
      <item name=”android:gravity” >center</item>
      <item name=”android:layout_margin” >3dp</item>
      <item name=”android:textSize” >5pt</item>
      <item name=”android:background”>#70ff106d</item>
      <item name=”android:shadowColor” >#70ff106d</item>
   </style>
</resources>

Step 4: Add a few of the required UI controls in the res/layout/activity_main.xml file. You will also be making use of the defined style.

<?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”
   android:paddingLeft=”@dimen/activity_horizontal_margin”
   android:paddingRight=”@dimen/activity_horizontal_margin”
   android:paddingTop=”@dimen/activity_vertical_margin”
   android:paddingBottom=”@dimen/activity_vertical_margin” tools:context=”.MainActivity”>

   <TextView
      android:id=”@+id/textView1″
      android:layout_width=”wrap_content”
      android:layout_height=”wrap_content”
      android:text=”Custom Button Style “
      android:layout_alignParentTop=”true”
      android:layout_centerHorizontal=”true”
      android:textSize=”30dp” />

   <TextView
      android:id=”@+id/textView2″
      android:layout_width=”wrap_content”
      android:layout_height=”wrap_content”
      android:text=”W3School”
      android:textColor=”#ff87ff09″
      android:textSize=”30dp”
      android:layout_below=”@+id/textView1″
      android:layout_centerHorizontal=”true” />

   <ImageButton
      android:layout_width=”wrap_content”
      android:layout_height=”wrap_content”
      android:id=”@+id/imageButton”
      android:src=”@drawable/abc”
      android:layout_below=”@+id/textView2″
      android:layout_centerHorizontal=”true” /> 

   <Button
      android:layout_width=”wrap_content”
      android:layout_height=”wrap_content”
      style=”@style/CustomButtonStyle”
      android:text=”New Button”
      android:id=”@+id/button”
      android:layout_below=”@+id/imageButton”
      android:layout_alignLeft=”@+id/imageButton”
      android:layout_alignStart=”@+id/imageButton”
      android:layout_alignRight=”@+id/textView2″
      android:layout_alignEnd=”@+id/textView2″ />
</RelativeLayout>

[post_middile_section_ad]

Step 5: You will also be required to define 2 new constants in the res/values/strings.xml file which are shown in the following coding section.

<?xml version=”1.0″ encoding=”utf-8″?>
<resources>
   <string name=”app_name”>myapplication</string>
</resources>

Step 6: Leave the default content of AndroidManifest.xml file untouched. Take a look at the default content of the file.

<?xml version=”1.0″ encoding=”utf-8″?>
<manifest xmlns:android=”http://schemas.android.com/apk/res/android”
   package=”com.example.guidemo”>      
   <application
      android:allowBackup=”true”
      android:icon=”@drawable/ic_launcher”
      android:label=”@string/app_name”
      android:theme=”@style/AppTheme” >      
      <activity
         android:name=”com.example.w3school.myapplication”
         android:label=”@string/app_name” >
         <intent-filter>
            <action android:name=”android.intent.action.MAIN” />
            <category android:name=”android.intent.category.LAUNCHER” />
         </intent-filter>      
      </activity>      
   </application>
</manifest>

Step 7: The final step is to verify all the changes and run your myapplication application. We are assuming that you have already created your AVD during the environment setup process. Now, to run this application on the software, you need to open one of the activity files from your project. After this, go to the toolbar and look for the Run button. Click on it and the Studio will start the installation of the application on the AVD. If there’s nothing wrong with your setup and the newly created application then the app will work absolutely fine. The final output will then be displayed on the Emulator window. The button on the screen is linked to a toast message. So, whenever you click on it, the toast message will appear on the screen.