Showing posts with label elevation. Show all posts
Showing posts with label elevation. Show all posts

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>


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: