Thursday, 26 November 2015

Android Style & Themes

03:38

Styles and Themes:
style is a collection of properties that specify the look and format for a View or window. A style can specify properties such as height, padding, font color, font size, background color, and much more. A style is defined in an XML resource that is separate from the XML that specifies the layout.
Styles in Android share a similar philosophy to cascading stylesheets in web design—they allow you to separate the design from the content.
For example, by using a style, you can take this layout XML:
<TextView
   
android:layout_width="fill_parent"
   
android:layout_height="wrap_content"
   
android:textColor="#00FF00"
   
android:typeface="monospace"
   
android:text="@string/hello" />
And turn it into this:
<TextView
   
style="@style/CodeFont"
   
android:text="@string/hello" />
All of the attributes related to style have been removed from the layout XML and put into a style definition calledCodeFont, which is then applied with the style attribute. You'll see the definition for this style in the following section.
A theme is a style applied to an entire Activity or application, rather than an individual View (as in the example above). When a style is applied as a theme, every View in the Activity or application will apply each style property that it supports. For example, you can apply the same CodeFont style as a theme for an Activity and then all text inside that Activity will have green monospace font.

Defining Styles  :


To create a set of styles, save an XML file in the res/values/ directory of your project. The name of the XML file is arbitrary, but it must use the .xml extension and be saved in the res/values/ folder.
The root node of the XML file must be <resources>.
For each style you want to create, add a <style> element to the file with a name that uniquely identifies the style (this attribute is required). Then add an <item> element for each property of that style, with a name that declares the style property and a value to go with it (this attribute is required). The value for the <item> can be a keyword string, a hex color, a reference to another resource type, or other value depending on the style property. Here's an example file with a single style:
<?xml version="1.0" encoding="utf-8"?>
<resources>
   
<style name="CodeFont" parent="@android:style/TextAppearance.Medium">
       
<item name="android:layout_width">fill_parent</item>
       
<item name="android:layout_height">wrap_content</item>
       
<item name="android:textColor">#00FF00</item>
       
<item name="android:typeface">monospace</item>
   
</style>
</resources>
Each child of the <resources> element is converted into an application resource object at compile-time, which can be referenced by the value in the <style> element's name attribute. This example style can be referenced from an XML layout as @style/CodeFont


================================================================================================================================================
Style   &   theme  simple  Practical  example 1  for TextView  :
=======================================================================
(first see below directory list  start your code)


(1)First of all write code for MainActivity.java:

package checkbox.test.om.com.myapplication;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

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

    }


}

(2)write  code for   activity_main.xml file:

<?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=".MainActivity">



    <android.support.design.widget.AppBarLayout android:layout_height="wrap_content"

        android:layout_width="match_parent" android:theme="@style/AppTheme.AppBarOverlay">



        <android.support.v7.widget.Toolbar android:id="@+id/toolbar"

            android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"

            android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" />



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



    <include layout="@layout/content_main" />



    <android.support.design.widget.FloatingActionButton android:id="@+id/fab"

        android:layout_width="wrap_content" android:layout_height="wrap_content"

        android:layout_gravity="bottom|end" android:layout_margin="@dimen/fab_margin"

        android:src="@android:drawable/ic_dialog_email" />



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


(3)write code for  content_main.xml  file:

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    xmlns:app="http://schemas.android.com/apk/res-auto" 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"

    app:layout_behavior="@string/appbar_scrolling_view_behavior"

    tools:showIn="@layout/activity_main" tools:context=".MainActivity">



    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:textAppearance="?android:attr/textAppearanceLarge"

        android:text="Large Text"

        android:id="@+id/textView"

        style="@style/style1"

        android:layout_alignParentTop="true"

        android:layout_centerHorizontal="true"

        android:layout_marginTop="63dp" />



    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:textAppearance="?android:attr/textAppearanceLarge"

        android:text="Large Text"

        android:id="@+id/textView2"

        style="@style/style2"

        android:layout_below="@+id/textView"

        android:layout_centerHorizontal="true"

        android:layout_marginTop="40dp" />



    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:textAppearance="?android:attr/textAppearanceLarge"

        android:text="Large Text"

        android:id="@+id/textView3"

        style="@style/style3"

        android:layout_below="@+id/textView2"

        android:layout_alignLeft="@+id/textView2"

        android:layout_alignStart="@+id/textView2"

        android:layout_marginTop="46dp" />

</RelativeLayout>


(4)write code for styles.xml  file:
<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="AppTheme.NoActionBar">

        <item name="windowActionBar">false</item>

        <item name="windowNoTitle">true</item>

    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />



  <style  name="style1">

      <item name="android:textColor">#00FF00</item>

      <item name="android:typeface">serif</item>

      <item name="android:textSize">30sp</item>

  </style>

    <style name="style2" parent="style1">

        <item name="android:textColor">#0000FF</item>

        <item name="android:typeface">sans</item>

        <item name="android:background">#FF0000</item>

        <item name="android:padding">10dip</item>

    </style>

    <style name="style3" parent="style2">

        <item name="android:textColor">#00FF00</item>

        <item name="android:background">#000000</item>

        <item name="android:gravity">center</item>



    </style>



</resources>



output:



========================================================================
========================================================================
Style   &   theme  simple  Practical  example 2   for Button :
========================================================================

Step 1:
FIRST SEE DIRECTORY STRUCTURE & THEN PROCEED FURTHER:


First   of    all   write    this   is   code for    custom_button.xml   file which is  inside  directory path
res/drawable /custom_button.xml          :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <
item android:state_pressed="true" >
        <
shape>
            <
solid
               
android:color="#efb644" />
            <
stroke
               
android:width="1dp"
               
android:color="#FFFFFF" />
            <
corners
               
android:radius="3dp" />
            <
padding
               
android:left="10dp"
               
android:top="10dp"
               
android:right="10dp"
               
android:bottom="10dp" />
        </
shape>
    </
item>
    <
item>
        <
shape>
            <
gradient
               
android:startColor="#ef4444"
               
android:endColor="#992f2f"
                
android:angle="270" />
            <
stroke
               
android:width="1dp"
               
android:color="#FFFFFF" />
            <
corners
               
android:radius="3dp" />
            <
padding
               
android:left="10dp"
                
android:top="10dp"
               
android:right="10dp"
               
android:bottom="10dp" />
        </
shape>
    </
item>
</
selector>

step 2:
Now  write code for   style.xml   file  which is inside directory path   res/value/style.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>

    </style>

    <style name="AppTheme.NoActionBar">

        <item name="windowActionBar">false</item>

        <item name="windowNoTitle">true</item>

    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />



    

    <style name="CustomStyleButton" parent="@android:style/Widget.Button">

        <item name="android:textSize">16sp</item>

        <item name="android:textStyle">bold</item>

        <item name="android:textColor">#dedfdc</item>

        <item name="android:gravity">center</item>

        <item name="android:shadowColor">#000000</item>

        <item name="android:shadowDx">1</item>

        <item name="android:shadowDy">1</item>

        <item name="android:shadowRadius">0.6</item>

        <item  name="android:background">@drawable/custom_button</item>

        <item name="android:padding">10dip</item>

    </style>



    </resources>

(step 3):
now  write code for   activity_main.xml   file  which is inside directory path   res/layout/activity_main.xml   :

<?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=".MainActivity">



    <android.support.design.widget.AppBarLayout android:layout_height="wrap_content"

        android:layout_width="match_parent" android:theme="@style/AppTheme.AppBarOverlay">



        <android.support.v7.widget.Toolbar android:id="@+id/toolbar"

            android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"

            android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" />



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



    <include layout="@layout/content_main" />



    <android.support.design.widget.FloatingActionButton android:id="@+id/fab"

        android:layout_width="wrap_content" android:layout_height="wrap_content"

        android:layout_gravity="bottom|end" android:layout_margin="@dimen/fab_margin"

        android:src="@android:drawable/ic_dialog_email" />



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

step 4:
now write code for content_main.xml file  which is  inside under path  res/layout/content_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"

    xmlns:app="http://schemas.android.com/apk/res-auto" 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"

    app:layout_behavior="@string/appbar_scrolling_view_behavior"

    tools:showIn="@layout/activity_main" tools:context=".MainActivity">



    <TextView android:text="Hello World!" android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:id="@+id/textView" />



    <Button

        android:id="@+id/button1"

        style="@style/CustomStyleButton"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="Button"

        />

    

</RelativeLayout>

Step 5: write   code for   MainActivity.java  file  which is inside  java directory :

package com.samples.android.play.gcm.myapplication;



import android.os.Bundle;

import android.support.design.widget.FloatingActionButton;

import android.support.design.widget.Snackbar;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.Toolbar;

import android.view.View;

import android.view.Menu;

import android.view.MenuItem;



public class MainActivity extends AppCompatActivity {



    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

        setSupportActionBar(toolbar);



        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);

        fab.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View view) {

                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)

                        .setAction("Action", null).show();

            }

        });

    }



    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.

        getMenuInflater().inflate(R.menu.menu_main, menu);

        return 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 == R.id.action_settings) {

            return true;

        }



        return super.onOptionsItemSelected(item);

    }

}


 OUTPUT:


Written by

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.

0 comments:

Post a Comment

 

© 2013 ANDROID TRAINING AT VISSICOMP BY OM SIR. All rights resevered. Designed by Templateism

Back To Top