Showing posts with label Material Design. Show all posts
Showing posts with label Material Design. Show all posts

Monday, 8 August 2016

Customize theme's colors


Last example show how to Apply Material Theme (with default color) to Activity. The video show how to further custom the theme colors.


Edit values/styles.xml to modify style of "AppTheme2", adding various color defination.
<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="AppTheme2" parent="android:Theme.Material">
<item name="android:colorPrimary">@android:color/holo_orange_light</item>
<item name="android:colorPrimaryDark">@android:color/holo_orange_dark</item>
<item name="android:textColorPrimary">@android:color/holo_blue_bright</item>
<item name="android:windowBackground">@android:color/darker_gray</item>
<item name="android:navigationBarColor">@android:color/holo_green_dark</item>
</style>


</resources>


Make sure "@style/AppTheme2" is used in AndroidManifest.xml.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.blogspot.android_er.androidmultiwindow">

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme2">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>

</manifest>


Reference:
Using the Material Theme

Thursday, 28 July 2016

Apply Material Theme to Activity


This video show how to apply Android provided Material Theme to your Activity.


- Edit values/styles.xml to add a new style inherits from Android provided Material Theme: android:Theme.Material, android:Theme.Material.Light or android:Theme.Material.Light.DarkActionBar.

- Edit AndroidManifest.xml to use the new style.

- You have to change your MainActivity extends Activity. Otherwise the following error will happen:
You need to use a Theme.AppCompat theme (or descendant) with this activity.

The video also show how it display on Multi-Window Mode.


Next:
- Customize theme's colors

Friday, 8 July 2016

elevation effect of overlapped view


This example show how elevation effect of overlapped view.


package com.blogspot.android_er.androidzelevation;

import android.os.Build;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ImageView;
import android.widget.SeekBar;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

SeekBar seekBarZ1, seekBarZ2;
ImageView image1;
TextView text2;

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

seekBarZ1 = (SeekBar)findViewById(R.id.z1);
seekBarZ2 = (SeekBar)findViewById(R.id.z2);
image1 = (ImageView)findViewById(R.id.image1);
text2 = (TextView)findViewById(R.id.text2);

seekBarZ1.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
image1.setZ(i);
}
}

@Override
public void onStartTrackingTouch(SeekBar seekBar) {}

@Override
public void onStopTrackingTouch(SeekBar seekBar) {}
});

seekBarZ2.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
text2.setZ(i);
text2.setText("elevation: " + String.valueOf(i) + "px");
}
}

@Override
public void onStartTrackingTouch(SeekBar seekBar) {}

@Override
public void onStopTrackingTouch(SeekBar seekBar) {}
});
}
}


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:padding="16dp"
android:orientation="vertical"
tools:context="com.blogspot.android_er.androidzelevation.MainActivity">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:layout_gravity="center_horizontal"
android:autoLink="web"
android:text="http://android-er.blogspot.com/"
android:textStyle="bold"/>

<SeekBar
android:id="@+id/z1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:progress="10"
android:max="50"/>
<SeekBar
android:id="@+id/z2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:progress="5"
android:max="50"/>

<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/image1"
android:layout_width="200dp"
android:layout_height="200dp"
android:elevation="10px"
android:background="#90F0F0F0"
android:src="@mipmap/ic_launcher"/>
<TextView
android:id="@+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="5px"
android:textSize="40dp"
android:background="#90F0F0F0"
android:text="elevation: 5px"/>
</FrameLayout>

</LinearLayout>


Tuesday, 5 July 2016

Change elevation at run-time, by calling setZ()

This example show how to change elevation of ImageView programmatically, by calling setZ().


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:padding="16dp"
android:orientation="vertical"
tools:context="com.blogspot.android_er.androidzelevation.MainActivity">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:layout_gravity="center_horizontal"
android:autoLink="web"
android:text="http://android-er.blogspot.com/"
android:textStyle="bold"/>

<SeekBar
android:id="@+id/z"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:progress="20"
android:max="100"/>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="20dp"
android:background="@android:color/background_dark"
android:src="@mipmap/ic_launcher"/>
</LinearLayout>

</LinearLayout>



package com.blogspot.android_er.androidzelevation;

import android.os.Build;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ImageView;
import android.widget.SeekBar;

public class MainActivity extends AppCompatActivity {

SeekBar seekBarZ;
ImageView image;

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

seekBarZ = (SeekBar)findViewById(R.id.z);
image = (ImageView)findViewById(R.id.image);

seekBarZ.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
image.setZ(i);
}
}

@Override
public void onStartTrackingTouch(SeekBar seekBar) {

}

@Override
public void onStopTrackingTouch(SeekBar seekBar) {

}
});
}
}


more:
elevation effect of overlapped view

Example of applying android:elevation on ImageView

Example to apply android:elevation on ImageView.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:padding="16dp"
android:orientation="vertical"
tools:context="com.blogspot.android_er.androidzelevation.MainActivity">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:layout_gravity="center_horizontal"
android:autoLink="web"
android:text="http://android-er.blogspot.com/"
android:textStyle="bold"/>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:elevation="20dp"
android:src="@mipmap/ic_launcher"/>
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="20dp"
android:background="@android:color/background_dark"
android:src="@mipmap/ic_launcher"/>
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="20dp"
android:background="#FF0000"
android:src="@mipmap/ic_launcher"/>
</LinearLayout>

</LinearLayout>


Running on ASUS Zenfone 2 running Android 5.0


How it shown on Emulator running Android API 23 and API 19, and also Android Studio Design View:


Tuesday, 14 June 2016

BottomSheetDialog example


The former post show a example of "Implement BottomSheet of Android Design Support Library". This post show a BottomSheetDialog example.


To use Design Support Library in your app, you have to "Add Android Design Support Library to Android Studio Project", currently version 'com.android.support:design:23.4.0'.


Create a file layout/bottomsheetdialog_layout.xml, to define the layout of the BottomSheetDialog.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="300dp"
android:orientation="vertical">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Bottom Sheet Dialog Example"
android:textSize="26dp"
android:textStyle="bold"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"/>

</LinearLayout>
</LinearLayout>

layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:padding="16dp"
android:orientation="vertical"
tools:context="com.blogspot.android_er.androidbottomsheetdialog.MainActivity">

<LinearLayout
android:id="@+id/backgroundlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:autoLink="web"
android:text="http://android-er.blogspot.com/"
android:textStyle="bold" />
<TextView
android:id="@+id/textSDK"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/prompt1"
android:textSize="28dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/prompt2"
android:textSize="28dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>


MainActivity.java
package com.blogspot.android_er.androidbottomsheetdialog;

import android.content.DialogInterface;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomSheetBehavior;
import android.support.design.widget.BottomSheetDialog;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

LinearLayout backgroundLayout;
View bottomSheetView;
TextView textPrompt1, textPrompt2;
TextView textSDK;

BottomSheetDialog bottomSheetDialog;
BottomSheetBehavior bottomSheetBehavior;

int sdk_int = Build.VERSION.SDK_INT;

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

textSDK = (TextView)findViewById(R.id.textSDK);
textSDK.setText("Running SDK_INT: " + sdk_int);

textPrompt1 = (TextView)findViewById(R.id.prompt1);
textPrompt2 = (TextView)findViewById(R.id.prompt2);
backgroundLayout = (LinearLayout)findViewById(R.id.backgroundlayout);

bottomSheetView = getLayoutInflater().inflate(R.layout.bottomsheetdialog_layout, null);
bottomSheetDialog = new BottomSheetDialog(MainActivity.this);
bottomSheetDialog.setContentView(bottomSheetView);
bottomSheetBehavior = BottomSheetBehavior.from((View) bottomSheetView.getParent());
bottomSheetBehavior.setBottomSheetCallback(bottomSheetCallback);

bottomSheetDialog.setOnShowListener(new DialogInterface.OnShowListener() {
@Override
public void onShow(DialogInterface dialog) {
textPrompt1.setText("OnShow");
}
});

bottomSheetDialog.setOnDismissListener(new DialogInterface.OnDismissListener() {
@Override
public void onDismiss(DialogInterface dialog) {
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
textPrompt1.setText("OnDismiss");
}
});

backgroundLayout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
bottomSheetDialog.show();
}
});

}

BottomSheetBehavior.BottomSheetCallback bottomSheetCallback =
new BottomSheetBehavior.BottomSheetCallback(){
@Override
public void onStateChanged(@NonNull View bottomSheet, int newState) {
switch (newState){
case BottomSheetBehavior.STATE_COLLAPSED:
textPrompt2.setText("COLLAPSED");
break;
case BottomSheetBehavior.STATE_DRAGGING:
textPrompt2.setText("DRAGGING");
break;
case BottomSheetBehavior.STATE_EXPANDED:
textPrompt2.setText("EXPANDED");
break;
case BottomSheetBehavior.STATE_HIDDEN:
textPrompt2.setText("HIDDEN");
bottomSheetDialog.dismiss();
break;
case BottomSheetBehavior.STATE_SETTLING:
textPrompt2.setText("SETTLING");
break;
default:
textPrompt2.setText("unknown...");
}
}

@Override
public void onSlide(@NonNull View bottomSheet, float slideOffset) {

}
};
}




~ More example of using Android Design Support Library, Snackbar, FloatingActionButton.

Friday, 10 June 2016

Sets the height of collapsed bottom sheet, by calling setPeekHeight() method


In lasp example of BottomSheet, I implement a OnClickListener of background to expand and collapse the bottom sheet. Without this, user cannot expand the bottom sheet if collapsed, because bottom sheet have height of 0 by default. If you want you can set the height of collapsed bottom sheet, by calling setPeekHeight() method.

This video show how:


MainActivity.java
package com.blogspot.android_er.androidbottomsheet;

import android.os.Build;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomSheetBehavior;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

LinearLayout backgroundLayout;
View bottomSheet;
private BottomSheetBehavior bottomSheetBehavior;
TextView textPrompt;
TextView textSDK;

/*
Build.VERSION.SDK_INT:
The user-visible SDK version of the framework;
its possible values are defined in Build.VERSION_CODES.
https://developer.android.com/reference/android/os/Build.VERSION_CODES.html
*/
int sdk_int = Build.VERSION.SDK_INT;

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

textSDK = (TextView)findViewById(R.id.textSDK);
textSDK.setText("Running SDK_INT: " + sdk_int);

textPrompt = (TextView)findViewById(R.id.prompt);
backgroundLayout = (LinearLayout)findViewById(R.id.backgroundlayout);

bottomSheet = findViewById(R.id.bottomsheet);
bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);
bottomSheetBehavior.setBottomSheetCallback(bottomSheetCallback);

bottomSheetBehavior.setPeekHeight(150);

/*
backgroundLayout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
switch (bottomSheetBehavior.getState()){
case BottomSheetBehavior.STATE_COLLAPSED:
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
break;
case BottomSheetBehavior.STATE_EXPANDED:
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
break;
}
}
});
*/

}

BottomSheetBehavior.BottomSheetCallback bottomSheetCallback =
new BottomSheetBehavior.BottomSheetCallback(){
@Override
public void onStateChanged(@NonNull View bottomSheet, int newState) {
switch (newState){
case BottomSheetBehavior.STATE_COLLAPSED:
textPrompt.setText("COLLAPSED");
break;
case BottomSheetBehavior.STATE_DRAGGING:
textPrompt.setText("DRAGGING");
break;
case BottomSheetBehavior.STATE_EXPANDED:
textPrompt.setText("EXPANDED");
break;
case BottomSheetBehavior.STATE_HIDDEN:
textPrompt.setText("HIDDEN");
break;
case BottomSheetBehavior.STATE_SETTLING:
textPrompt.setText("SETTLING");
break;
default:
textPrompt.setText("unknown...");
}
}

@Override
public void onSlide(@NonNull View bottomSheet, float slideOffset) {

}
};
}



Wednesday, 8 June 2016

Implement BottomSheet of Android Design Support Library

BottomSheet run on API 19

BottomSheet run on API 23
With the help from the Android Design Support Library, you can implement a number of important material design components to all developers and to all Android 2.1 or higher devices.

This example show how to implement Bottom Sheets with help of Android Design Support Library.




To use Design Support Library in your app, you have to "Add Android Design Support Library to Android Studio Project", currently version 'com.android.support:design:23.4.0'.


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: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"
tools:context="com.blogspot.android_er.androidbottomsheet.MainActivity">

<LinearLayout
android:id="@+id/backgroundlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:autoLink="web"
android:text="http://android-er.blogspot.com/"
android:textStyle="bold" />
<TextView
android:id="@+id/textSDK"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/prompt"
android:textSize="28dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>

<android.support.v4.widget.NestedScrollView
android:id="@+id/bottomsheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="true"
android:background="@android:color/darker_gray"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Bottom Sheet Example"
android:textSize="26dp"
android:textStyle="bold"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"/>
</LinearLayout>

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


MainActivity.java
package com.blogspot.android_er.androidbottomsheet;

import android.os.Build;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomSheetBehavior;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

LinearLayout backgroundLayout;
View bottomSheet;
private BottomSheetBehavior bottomSheetBehavior;
TextView textPrompt;
TextView textSDK;

/*
Build.VERSION.SDK_INT:
The user-visible SDK version of the framework;
its possible values are defined in Build.VERSION_CODES.
https://developer.android.com/reference/android/os/Build.VERSION_CODES.html
*/
int sdk_int = Build.VERSION.SDK_INT;

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

textSDK = (TextView)findViewById(R.id.textSDK);
textSDK.setText("Running SDK_INT: " + sdk_int);

textPrompt = (TextView)findViewById(R.id.prompt);
backgroundLayout = (LinearLayout)findViewById(R.id.backgroundlayout);

bottomSheet = findViewById(R.id.bottomsheet);
bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);
bottomSheetBehavior.setBottomSheetCallback(bottomSheetCallback);

backgroundLayout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
switch (bottomSheetBehavior.getState()){
case BottomSheetBehavior.STATE_COLLAPSED:
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
break;
case BottomSheetBehavior.STATE_EXPANDED:
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
break;
}
}
});

}

BottomSheetBehavior.BottomSheetCallback bottomSheetCallback =
new BottomSheetBehavior.BottomSheetCallback(){
@Override
public void onStateChanged(@NonNull View bottomSheet, int newState) {
switch (newState){
case BottomSheetBehavior.STATE_COLLAPSED:
textPrompt.setText("COLLAPSED");
break;
case BottomSheetBehavior.STATE_DRAGGING:
textPrompt.setText("DRAGGING");
break;
case BottomSheetBehavior.STATE_EXPANDED:
textPrompt.setText("EXPANDED");
break;
case BottomSheetBehavior.STATE_HIDDEN:
textPrompt.setText("HIDDEN");
break;
case BottomSheetBehavior.STATE_SETTLING:
textPrompt.setText("SETTLING");
break;
default:
textPrompt.setText("unknown...");
}
}

@Override
public void onSlide(@NonNull View bottomSheet, float slideOffset) {

}
};
}


(reference: http://android-developers.blogspot.hk/2016/02/android-support-library-232.html)

Next:
Sets the height of collapsed bottom sheet, by calling setPeekHeight() method
BottomSheetDialog example

~ More example of using Android Design Support Library, Snackbar, FloatingActionButton.