• Home
  • WordPress
  • web Hosting
    • Free hosting
    • Cheap Hosting
    • comparison cloud , vps, shared, wordpress
    • managed wordpress hosting
    • managed cloud hosting
  • page Speed
  • Deals
  • Services
  • About

RAaz Kumar .com

wordpress tutorials seo hosting etc


Material Design

 

 

Material Design:
This is a design with some supporting views and their properties introduced in Android 5.0 – Lollipop.

As part of Material design, we work with

1) ToolBar
2) FloatingActionButton
3) SnackBar
4) TextInputLayout
5) Recycler View
6) CardView
|
|
|
|
|

Steps to implement Material Design:

To work with Material design,

1) Set up the theme and set it to Application in Manifest. To setup this one, we have different parts of the app with its property names.

Diagram

colorPrimaryDark – This is darkest primary color of the app mainly applies to notification bar background.

colorPrimary – This is the primary color of the app. This color will be applied as toolbar background.

textColorPrimary – This is the primary color of text. This applies to toolbar title.

windowBackground – This is the default background color of the app.

navigationBarColor – This color defines the background color of footer navigation bar.

Create a theme in styles.xml as mentioned below
<style name=”AppTheme” parent=”Theme.AppCompat.Light.DarkActionBar”>
<item name=”colorPrimary”>@color/colorPrimary</item>
<item name=”colorPrimaryDark”>@color/colorPrimaryDark</item>
<item name=”colorAccent”>@color/colorAccent</item>
<item name=”windowNoTitle”>true</item>
<item name=”windowActionBar”>false</item>
</style>

Set the theme in <application> in Androidmanifest.xml as mentioned below

<application
………
………
………
android:theme=”@style/AppTheme”/>

 

2) Take CoordnatorLayout as parent layout in XML to support Material Design efficiently
3) Take AppBarLayout as the direct child to CoordnatorLayout
4) Take ToolBar as direct child to AppBarLayout and set some properties like background, theme…
5) Close AppBarLayout and take one ViewGroup bottom to AppBarLayout to set the screen content. Set marginTop of this ViewGroup as height of Actionbar

<?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:id=”@+id/coordinatorLayout”
android:layout_height=”match_parent”
tools:context=”nareshit.com.materialdesign9am.MainActivity”>

<android.support.design.widget.AppBarLayout
android:layout_width=”match_parent”
android:layout_height=”wrap_content”>

<android.support.v7.widget.Toolbar
android:id=”@+id/toolbar”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:popupTheme=”@style/ThemeOverlay.AppCompat.Light”
android:theme=”@style/ThemeOverlay.AppCompat.Dark.ActionBar” />
</android.support.design.widget.AppBarLayout>

<LinearLayout
android:id=”@+id/linearLayout”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:layout_marginTop=”?actionBarSize”
android:orientation=”vertical”>

// ALl the contents of the screen go here

</LinearLayout>

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

 

Toolbar:
Toolbar is the replacement for default actionbar. This is used to set as Actionbar to support backward version compatibility. In the above xml, we have created a toolbar. To set it as actionbar,

In Activity,

1)Identify Toolbar
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
2) Set as support actionbar
setSupportActionBar(toolbar);

Now, the toolbar gets all the properties of Actionbar.

Note: While using Toolbar as Actionbar, ensure that the default actionbar is disabled in theme applied for particular activity or application.

 

FloatingActionButton:
This is a rounded button with one icon inside. It has different sizes like normal, mini. We set the size of fab by using fabType. This is a normal button. We have used this in the above xml.

In Activity,

1)Identify FloatingActionButton
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.floatingActionButton);
2)Set onClickListener
fab.setOnClickListener(new View.OnClickListener(){
public void onClick(View v){
// Code to perform on fab click
}
});

 

Snackbar:
This is like a Toast message with some action. Action is represented using a button in Snackbar. It requires object of parent layout of XML to show.

Ex: Identify parent layout first

CoordinatorLayout coordinatorLayout = (CoordinatorLayout) findViewById(R.id.coordinatorLayout);

Create Snackbar

final Snackbar snackbar = Snackbar.make(coordinatorLayout, “Some text”, Snackbar.LENGTH_LONG);
snackbar.setAction(“DISMISS”, new View.OnClickListener() {
@Override
public void onClick(View v) {
snackbar.dismiss();
}
});
snackbar.show();

 

TextInputLayout:
Sometimes, we design EditTexts with only hints. Whenever user starts typing, the hint disappears. It can cause some confusion. To avoid this, we have a view called TextInputLayout in Material design. Every edittext is enclosed with TextInputLayout here.

Ex:

<android.support.design.widget.TextInputLayout
android:layout_width=”match_parent”
android:layout_height=”wrap_content”>

<EditText
android:id=”@+id/textName”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:hint=”Enter Name” />
</android.support.design.widget.TextInputLayout>

 

 

 

 

 

 

Related topics:

  1. Creating XML
  2. Handling Views
  3. Getting Text from Views
  4. migrating to androidx (The library & dependency matching)
  5. ListView

tutorials

  • Vivek Bindra Videos Transcription (business strategy)
  • git commands
  • new relic php agent install in 3 steps
  • new relic mysql install integration - 2 ways fix problems
  • new relic installation linux (infrastructure agent , php, mysql , nginx)
  • xampp tutorials 2021 installation errors fix wordpress phpmyadmin mysql apache
  • Redis performance metrics & tuning for nginx apache ubuntu & debian
  • Devops course Syllabus topics PDF AWS, Azure, cisco, redhat
  • CCNA Syllabus pdf (CCNA / CCNP vs devops vs mcsa /MCSE)
  • how to create a website free of cost on google
  • what is vpn vs proxy vs tor, http vs https, http2, tcp vs udp, kali linux sql source code injection
  • nginx server tutorials (installation, configuration, performance tuning, security)
  • MySQL Tutorial (create,connect database, update tables, export etc) Documentation & TIPS
  • AUdio Editing Background Noise removal (Audacity, Adobe Premiere Addition, Camtasia Filmora Windows Obs)
  • Android Studio tutorials syllabus Topics Course details #AndroidApplicationDevelopment
    • Intent
    • SharedPreferences
    • Location
    • Libraries
    • Webservices
    • Creating Activity class
    • Creating XML
    • Registering Activity in AndroidManifest.xml:
    • Steps for creating an Android application:
    • Handling button clicks
    • Identifying Views
    • Getting Text from Views
    • intent with Data
    • Database with Cursor Adapter
    • Resources Handling in Android
    • Intent with Result Data
    • Broad cast Receiver
    • Fragment
    • Handling Button click by using On Click Listener:
    • Material Design
    • RecyclerView
    • JSON
    • Rename Android Package [with images & video 2020]
    • migrating to androidx (The library & dependency matching)
    • adsense on webview , adsense & admob policies & implementation
    • Fragments Runtime
    • JSON parsing
    • Handling Views
    • RelativeLayout
    • ActionBar
    • ListView
    • Custom List View
    • Dialogs
    • AlarmManager
    • Notifications
    • Vibration
    • WebView
    • Options Menu
    • SQLiteDatabase
    • Bluetooth
    • WiFi
    • Google Maps
    • Handling Activity Back Button
    • AsyncTask
    • Runtime Permissions
    • Logging
    • Activity Lifecycle
    • Toast
    • Service
  • [INTRO] Ethical hacking / cyber Security / Penetration testing Tutorial -{updates frequently}
  • redis install ubuntu 20.04 with wordpress php redis mysql configuration
  • ubuntu tutorials installation download issues etc
  • Php tutorials
  • HTML & CSS Tutorials
  • Core Java Tutorial Free online
  • Linux sysadmin tutorials linux system administrator
  • apache server tutorial (install,config, performance tuning, security, error handling)

 

 

wordpress Pagespeed optimization

Digitalocean free $100 Credit

Cloudways Review pricing promo codes

Siteground cpu limits Pricing

Shared Hosting

Managed wordpress Hosting

Managed Hosting Cloud server

VPS Hosting

Cloud Hosting – Unmanaged

Google cloud Pricing

Aws Pricing

Azure pricing

nginx server tutorials

apache server tutorials

linux sysadmin tutorials

mysql Commands list pdf

LEMP Install Ubuntu

Mysql Performance Tuning

Nginx Performance tuning

Linux Performance tuning

Php -fpm performance tuning

Redis Performance tuning

linux server security

nginx security best practices

wordpress security plugins

 

 

wordpress

 

Top 5  WP Google Analytics Plugins

WP Backup Plugins

Wp Comment Plugins

Top wordpress Security Plugins

WP Seo Plugins

WP Caching Plugins

Best Adsense Plugins for WordPress

Wp social Sharing Plugins

autoshare social media plugins

WP speed Optimization Plugins

Speedup WordPress google Score

More Wp tuts

Server Admin Cloud

 

Installing Nginx LEMP On ubuntu

Installing apache Lamp ubuntu

nginx fastcgi cache enable

php – fpm install  & Configuration

Opcache install & Configure

php -fpm pool manager explained

Mysql Install & Configuration

Redis Object cache install & configure

 

Nginx as Reverse Proxy and Load balancer

Load Balance / auto scaling in google cloud

Linux Commands PDF

Mysql Commands Pdf

Letsencrypt tutorial

mysqldump export & import 

Pagespeed Module install & configure

nginx.conf best file

mysql.conf best file

upgrade ubuntu

© 2023 - All Rights Reserved Disclaimer & Privacy Policy