Develop Reference

Google logo is hide when add parallax effect between bottom sheet and mapView

I'm trying to add a parallel effect in between bottom sheet layout and map view.but google log in map view is hidden when expending the bottom sheet layout. [Google logo is hidden]
show google logo when bottom sheet collapse
I'm using below code:
layout
<android.support.design.widget.CoordinatorLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/Green"
tools:context=".ui.activities.ChooseLocationActivity">
<RelativeLayout
android:id="#+id/map_rlyt"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.koya.android.ui.widget.CollapseBehavior"
app:layout_anchor="#+id/bottom_sheet_layout">
<fragment
android:id="#+id/g_map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/category_activity_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/category_search_box"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/custom_edit_text_margin_top"
android:layout_marginLeft="#dimen/custom_edit_text_margin_left_right"
android:layout_marginRight="#dimen/custom_edit_text_margin_left_right"
android:background="#android:color/transparent">
<android.support.v7.widget.AppCompatImageView
android:id="#+id/ic_back_iv"
android:padding="#dimen/location_activity_back_button_padding"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="#mipmap/ic_back_black"/>
<EditText
android:id="#+id/editTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="#dimen/custom_edit_text_padding"
android:textColor="#color/black"
android:drawablePadding="8dp"
android:imeOptions="actionDone"
android:inputType="text"
android:maxLines="1"
android:drawableLeft="#mipmap/ic_search_gray"
android:textCursorDrawable="#drawable/edit_text_cursor_drawable"
android:drawableRight="#mipmap/ic_close_gray"
android:textSize="#dimen/custom_edit_text_text_size"
android:background="#drawable/drawable_custom_edittext"
/>
</LinearLayout>
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyle"
android:layout_centerInParent="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"/>
<Button
android:id="#+id/redo_search_in_map_area_button"
style="#style/CategoryChooseButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/category_search_box"
android:layout_centerInParent="true"
android:layout_marginTop="#dimen/fifteen_text_size"
android:animateLayoutChanges="true"
android:paddingEnd="#dimen/redo_search_button_padding"
android:paddingStart="#dimen/redo_search_button_padding"
android:text="#string/redo_search_in_map_area"
android:textAllCaps="false"
android:visibility="gone"
/>
</RelativeLayout>
<include
android:id="#+id/bottom_sheet_layout"
layout="#layout/bottom_sheet"/>
<Button
android:id="#+id/select_location_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="#string/use_selected_location"
android:visibility="gone"
tools:visibility="visible"
style="#style/CategoryChooseButtonStyle"/>
<include android:id="#+id/error_layout"
layout="#layout/error_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
/>
And Implement Coordinatorlayout.Behavior
public class CollapseBehavior<V extends ViewGroup> extends CoordinatorLayout.Behavior<V>{
public CollapseBehavior(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
public boolean onDependentViewChanged(CoordinatorLayout parent, V child, View dependency) {
if (isBottomSheet(dependency)) {
BottomSheetBehavior behavior = ((BottomSheetBehavior) ((CoordinatorLayout.LayoutParams) dependency.getLayoutParams()).getBehavior());
int peekHeight = behavior.getPeekHeight();
// The default peek height is -1, which
// gets resolved to a 16:9 ratio with the parent
final int actualPeek = peekHeight >= 0 ? peekHeight : (int) (((parent.getHeight() * 1.0) / (16.0)) * 9.0);
if (dependency.getTop() >= actualPeek) {
// Only perform translations when the
// view is between "hidden" and "collapsed" states
final int dy = dependency.getTop() - parent.getHeight();
ViewCompat.setTranslationY(child, dy/2);
return true;
}
}
return false;
}
private static boolean isBottomSheet(#NonNull
View view) {
final ViewGroup.LayoutParams lp = view.getLayoutParams();
if (lp instanceof CoordinatorLayout.LayoutParams) {
return ((CoordinatorLayout.LayoutParams) lp)
.getBehavior() instanceof BottomSheetBehavior;
}
return false;
}
}
I need this type of scrolling in my application -->
https://streamable.com/g0tf9
How to scroll google map when bottom sheet expend with parallax effect? I would appreciate it a lot!
Thanks in Advance.

need viewflipper also to be scrolled vertically in this layout

At the moment only my GridView is scrollable, but I need my ViewFlipper to be scrollable as well. I need help making ViewFlipper scroll vertically
Here is my layout at the moment:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_grids"
android:layout_width="match_parent"
android:overScrollMode="always"
android:layout_height="match_parent">
<ViewFlipper
android:layout_marginTop="56dp"
android:layout_width="match_parent"
android:layout_height="150dp"
android:autoStart="true"
android:id="#+id/vf1z"
android:flipInterval="3000">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:background="#drawable/front"
android:id="#+id/imageViewz"/>
</ViewFlipper>
<GridView
android:numColumns="3"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:id="#+id/grid"
android:layout_marginTop="208dp"/>
<include layout="#layout/search"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="#+id/include">
</include>
</RelativeLayout>

You can add all the elements in your layout in a ScrollView like this.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_grids"
android:layout_width="match_parent"
android:overScrollMode="always"
android:layout_height="match_parent">
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ViewFlipper
android:layout_marginTop="56dp"
android:layout_width="match_parent"
android:layout_height="150dp"
android:autoStart="true"
android:id="#+id/vf1z"
android:flipInterval="3000">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:background="#drawable/front"
android:id="#+id/imageViewz"
/>
</ViewFlipper>
<GridView
android:numColumns="3"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:id="#+id/grid"
android:layout_marginTop="208dp"
/>
</ScrollView>
<include layout="#layout/search"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="#+id/include">
</include>
</RelativeLayout>
Or if you only want your ViewFlipper to be scrollable you can just add the ViewFlipper in a ScrollView

You can use VerticalViewPager its custom implementation
/**
* Uses a combination of a PageTransformer and swapping X & Y coordinates
* of touch events to create the illusion of a vertically scrolling ViewPager.
*
* Requires API 11+
*
*/
public class VerticalViewPager extends ViewPager {
public VerticalViewPager(Context context) {
super(context);
init();
}
public VerticalViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
// The majority of the magic happens here
setPageTransformer(true, new VerticalPageTransformer());
// The easiest way to get rid of the overscroll drawing that happens on the left and right
setOverScrollMode(OVER_SCROLL_NEVER);
}
private class VerticalPageTransformer implements ViewPager.PageTransformer {
#Override
public void transformPage(View view, float position) {
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 1) { // [-1,1]
view.setAlpha(1);
// Counteract the default slide transition
view.setTranslationX(view.getWidth() * -position);
//set Y position to swipe in from top
float yPosition = position * view.getHeight();
view.setTranslationY(yPosition);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}
/**
* Swaps the X and Y coordinates of your touch event.
*/
private MotionEvent swapXY(MotionEvent ev) {
float width = getWidth();
float height = getHeight();
float newX = (ev.getY() / height) * width;
float newY = (ev.getX() / width) * height;
ev.setLocation(newX, newY);
return ev;
}
#Override
public boolean onInterceptTouchEvent(MotionEvent ev){
boolean intercepted = super.onInterceptTouchEvent(swapXY(ev));
swapXY(ev); // return touch coordinates to original reference frame for any child views
return intercepted;
}
#Override
public boolean onTouchEvent(MotionEvent ev) {
return super.onTouchEvent(swapXY(ev));
}
}
See previous answers given by #Brett
Android: Vertical ViewPager

how to fix VerticalViewPager with padding added?

I have this VerticalViewPager that works like charm:
import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
public class VerticalViewPager extends ViewPager {
public VerticalViewPager(Context context) {
super(context);
init();
}
public VerticalViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
// The majority of the magic happens here
setPageTransformer(true, new VerticalPageTransformer());
// The easiest way to get rid of the overscroll drawing that happens on the left and right
setOverScrollMode(OVER_SCROLL_NEVER);
}
private class VerticalPageTransformer implements ViewPager.PageTransformer {
#Override
public void transformPage(View view, float position) {
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 1) { // [-1,1]
view.setAlpha(1);
// Counteract the default slide transition
view.setTranslationX(view.getWidth() * -position);
//set Y position to swipe in from top
float yPosition = position * view.getHeight();
view.setTranslationY(yPosition);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}
/**
* Swaps the X and Y coordinates of your touch event.
*/
private MotionEvent swapXY(MotionEvent ev) {
float width = getWidth();
float height = getHeight();
float newX = (ev.getY() / height) * width;
float newY = (ev.getX() / width) * height;
ev.setLocation(newX, newY);
return ev;
}
#Override
public boolean onInterceptTouchEvent(MotionEvent ev){
boolean intercepted = super.onInterceptTouchEvent(swapXY(ev));
swapXY(ev); // return touch coordinates to original reference frame for any child views
return intercepted;
}
#Override
public boolean onTouchEvent(MotionEvent ev) {
return super.onTouchEvent(swapXY(ev));
}
}
the problem is when i add paddings for example :
android:paddingEnd 40dp
android:paddingLeft 40dp
android:paddingRight 40dp
android:paddingStart 40dp
the view gets into the bottom corner of the screen (basically gets off screen), i dont know how to modify the transformPage in the code to fix this pls help?
MY layout file as requested:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<me.myapplication_v1.VerticalViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/imageView"
android:layout_gravity="bottom"
android:clipToPadding="false"
android:overScrollMode="never"
android:paddingBottom="30dp"
android:paddingEnd="40dp"
android:paddingLeft="40dp"
android:paddingRight="40dp"
android:paddingStart="40dp">
</me.myapplication_v1.VerticalViewPager>
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_gravity="top|center"
android:layout_marginBottom="13dp"
android:layout_marginTop="14dp"
android:cropToPadding="false"
android:elevation="24dp"
android:src="#drawable/semiosign" />
<ImageButton
android:id="#+id/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:background="#0000"
android:paddingLeft="5dp"
android:paddingTop="5dp"
android:tint="#android:color/holo_red_light"
app:srcCompat="#drawable/ic_action_arrow_back" />
</RelativeLayout>
</FrameLayout>
are there maybe better verticalviewpager ?

How to fill remaining space in layout without overdraw another elements?

I created a new small example to explain my new problem. In the example I created a RelativeLayout that fills the whole screen. And 3 children :
Custom view (PView) created to draw proportional view that must fill all free space by width in portrait mode and free space by height in landscape mode without overlay on top and bottom of FrameLayout (pink)
FrameLayout with id top that must show above middle (red)
FrameLayout with id bottom that must show below middle (yellow)
But now in landscape mode middle item overdraw top and bottom. Have anyone idieas how to fix it ?
layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/top"
android:layout_width="100dp"
android:layout_height="24dp"
android:layout_above="#+id/middle"
android:layout_centerHorizontal="true"
android:background="#FFFF0000" />
<test.com.heighttest.PView
android:id="#+id/middle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:background="#FFFF00FF" />
<FrameLayout
android:id="#+id/bottom"
android:layout_width="100dp"
android:layout_height="24dp"
android:layout_below="#+id/middle"
android:layout_centerHorizontal="true"
android:background="#FFFFFF00" />
</RelativeLayout>
PView.java
package test.com.heighttest;
import android.content.Context;
import android.util.AttributeSet;
import android.widget.RelativeLayout;
/**
* Created by Anton Potekhin (Anton.Potekhin#gmail.com) on 26.09.16.
*/
public class PView extends RelativeLayout {
public static final int USE_FOR_SCALE_WIDTH = 0;
public static final int USE_FOR_SCALE_HEIGHT = 1;
public int getUseForScale() {
return useForScale;
}
public void setUseForScale(int useForScale) {
this.useForScale = useForScale;
}
private int useForScale = 0;
public float getAspectRatio() {
return aspectRatio;
}
public void setAspectRatio(float aspectRatio) {
this.aspectRatio = aspectRatio;
}
/**
* Aspect ratio to calculate size of view. Set 0 to not use aspect ratio (Works like RelativeLayout).
*/
private float aspectRatio = 0;
public PView(Context context) {
super(context);
}
public PView(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//Use aspect ratio only if it more than 0
if (aspectRatio > 0) {
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
if (useForScale == USE_FOR_SCALE_WIDTH) {
height = Math.round(width / aspectRatio);
} else {
width = Math.round(height * aspectRatio);
}
widthMeasureSpec = MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY);
heightMeasureSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY);
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
MainActivity.java
package test.com.heighttest;
import android.content.res.Configuration;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
private PView middleView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
com.facebook.stetho.Stetho.initializeWithDefaults(this);
setContentView(R.layout.activity_main);
middleView = (PView) findViewById(R.id.middle);
middleView.setAspectRatio(1.2f);
if (this.getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE) {
middleView.setUseForScale(PView.USE_FOR_SCALE_HEIGHT);
} else {
middleView.setUseForScale(PView.USE_FOR_SCALE_WIDTH);
}
}
}
Screenshot in portrait mode (Works correctly):
Screenshot in landscape mode (Works incorrect because middle overdraw top and bottom):
Screenshot what i want to get in landscape mode
Solution by #nidhi-pandya (with my fixes):
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<FrameLayout
android:id="#+id/top"
android:layout_width="100dp"
android:layout_height="24dp"
android:background="#FFFF0000" />
<test.com.heighttest.PView
android:id="#+id/middle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#FFFF00FF" />
<FrameLayout
android:id="#+id/bottom"
android:layout_width="100dp"
android:layout_height="24dp"
android:background="#FFFFFF00" />
</LinearLayout>
</RelativeLayout>

Add LinearLayout below Relativelayout and use its orientation to arrange your content vertically. Use alignparenttop, alignparentbottom and centerinparent attribute. It will give you the same output in both orientation.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<FrameLayout
android:id="#+id/top"
android:layout_width="80dp"
android:layout_height="50dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp"
android:background="#FFFF0000" />
<test.com.heighttest.PView
android:id="#+id/middle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:background="#FFFF00FF" />
<FrameLayout
android:id="#+id/bottom"
android:layout_width="80dp"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="15dp"
android:background="#FFFFFF00" />
</LinearLayout>
</RelativeLayout>

Android ViewPager with PageTransformer looses it's Z-index

I have a question regarding crossfading on a viewpager where I have objects that depends on their z-layer. I found this topic OnPageChangeListener alpha crossfading which provides the exact solution that I'm after except that the z-layers are ignored in the swiping, but only for the items on the left side, not the items on the right side.
First you can see the content on the left side, where the button is "cut" in half, next the transition, and, third, the item on the right side where the button is shown in its entirety. What I don't understand is why the button is only partly visible and what I need to do to make it fully visible?
content_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/sand">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:textSize="30dp"
android:text="Hello World!" />
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="350dp"
android:layout_below="#+id/title" />
</RelativeLayout>
content_main_item.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="350dp">
<ImageView
android:id="#+id/background_color"
android:layout_width="match_parent"
android:layout_height="300dp"
android:scaleType="center" />
<RelativeLayout
android:id="#+id/background_part"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/sand"
android:layout_gravity="center_horizontal|bottom">
</RelativeLayout>
<RelativeLayout
android:id="#+id/item_container"
android:layout_width="match_parent"
android:layout_height="350dp">
<ImageView
android:id="#+id/page_image"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerInParent="true"
android:src="#drawable/smaller" />
<TextView
android:id="#+id/page_header"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignBottom="#+id/page_image"
android:layout_marginBottom="45dp"
android:text="Header Blue"
android:lines="2"
android:textColor="#android:color/black"
android:textAllCaps="true"
android:textStyle="bold"
android:gravity="center"
android:textSize="20dp" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
>
<Button
android:id="#+id/page_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:text="Click me"
/>
</FrameLayout>
</RelativeLayout>
</FrameLayout>
My modified CustomPageTransformer:
public class CustomPageTransformer implements ViewPager.PageTransformer {
public static final float ALPHA_VALUE = 0.8f;
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
View backgroundImageView = view.findViewById(R.id.background_color);
View contentView1 = view.findViewById(R.id.item_container);
if (position < -1) {
// This page is way off-screen to the left
} else if (position <= 0) { // [-1,0]
// This page is moving out to the left
if (backgroundImageView != null) {
// Fade the image in
backgroundImageView.setAlpha(ALPHA_VALUE + position);
}
// But swipe the contentView
swipeContent(position, pageWidth, contentView1);
// Counteract the default swipe
view.setTranslationX(pageWidth * -position);
} else if (position <= 1) { // (0,1]
// This page is moving in from the right
// Counteract the default swipe
view.setTranslationX(pageWidth * -position);
swipeContent(position, pageWidth, contentView1);
if (backgroundImageView != null) {
// Fade the image out
backgroundImageView.setAlpha(ALPHA_VALUE - position);
}
} else {
// This page is way off-screen to the right
}
contentView1.bringToFront();
}
private void swipeContent(float position, int pageWidth, View view) {
if (view != null) {
view.setTranslationX(pageWidth * position);
}
}
}
The initialization of viewpager and transformer looks like this:
viewPager = (ViewPager) findViewById(R.id.viewPager);
viewPager.setPageTransformer(false, new CustomPageTransformer());
pagerAdapter = new ItemPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(pagerAdapter);
viewPager.setOffscreenPageLimit(1);
pagerAdapter.setItems(items);
You can find the full source code here.

After a lot of digging I changed the "contentView1" a little bit so I set the background on the viewpager and the contentView1´s background to transparent. I also set the level of ALPHA to 0.6f.
public static final float ALPHA_VALUE = 0.6f;
That made it a lot better.