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

Read More

Advertisement

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

Read More

Advertisement

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>

Read More

Advertisement

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

Read More

Advertisement

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:

Read More

Advertisement

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.

Read More

Advertisement