Android Studio - Ruined seekbar - android

I have a problem with my seekBar. When I am implementing to Android Studio, seebars look good and works perfectly.
Here is a photo.
View in Android Studio
When I run app in real device seekBars is ruined out, but I do not know why ?
Here is a photo of problem.
View in app on real device
Any idea ? of course here is a code ...
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="5"
android:orientation="vertical">
<SeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/seekBarIsVisibleFps"
android:thumb="#drawable/thumb"
android:progressDrawable="#drawable/progressline"
android:max="1"
android:layout_weight="1"
android:progress="1"/>
... ... ...
Here is a code from thumb
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#c60026" />
<size
android:width="16dp"
android:height="16dp" />
</shape>
... and here is a progressline
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape android:shape="line">
<stroke
android:width="12dp"
android:color="#878787" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape android:shape="line">
<stroke
android:width="12dp"
android:color="#5e5e5e" />
</shape>
</clip>
</item>
</layer-list>

Related

Android Custom Button Ripple/pulse Effect

I have created a custom circular button using the following :
<Button
android:id ="#+id/StartButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Start"
android:background="#drawable/button_bg_round"
android:padding="15dp"
android:textSize="30sp"
android:textStyle="bold"
android:textColor="#ffffff"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
Here button_bg_round is defined as below :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<stroke android:color="#ffffff" android:width="5dp" />
<solid android:color="#3aeaee"/>
<size android:width="200dp" android:height="200dp"/>
</shape>
</item>
</selector>
Now, I want to add a circular ripple/pulse effect/animation when the button is clicked. I tried to look for a possible solution on google and SO but couldn't find any related to such a button. Any help would be much appreciated.

You can make you drawable like this:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#color/colorAccent"
tools:targetApi="lollipop"> <!-- ripple effect color -->
<item android:id="#android:id/background">
<shape android:shape="oval">
<stroke android:color="#ffffff" android:width="5dp" />
<solid android:color="#3aeaee"/>
<size android:width="200dp" android:height="200dp"/>
</shape>
</item>
</ripple>
where android:color inside ripple is the color of the effect.

Android: Check box selector not working properly

I am developing an application in which i am using check box and applied selector on that. My code of check box is as follows :
<CheckBox
android:id="#+id/checkBox"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="0.5"
android:button="#drawable/custom_checkbox"
android:clickable="false"
android:focusable="false"
android:gravity="center" />
custom_checkbox.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/checkbox_checked" android:state_checked="true"/>
<item android:drawable="#drawable/checkbox_checked" android:state_pressed="true"/>
<item android:drawable="#drawable/checkbox_unchecked"/>
</selector>
checkbox_checked
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/green_tic"/>
<item>
<shape android:shape="rectangle" >
<corners android:radius="#dimen/corner_radius_for_ask_option"/>
<size
android:height="20dp"
android:width="20dp" />
</shape>
</item>
</layer-list>
checkbox_unchecked
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<stroke
android:width="2px"
android:color="#color/color_light_grey" />
<corners android:radius="#dimen/corner_radius_for_ask_option" />
<size
android:height="20dp"
android:width="20dp" />
</shape>
</item>
</layer-list>
The above code is working fine on Note 3 and same kind of phone. It looks like :
But on samsung s2 it looks like :

Try adding a transparent solid to your shapes:
<shape android:shape="rectangle" >
<corners android:radius="#dimen/corner_radius_for_ask_option"/>
<size
android:height="20dp"
android:width="20dp" />
<solid android:color="#android:color/transparent"/>
</shape>
Same for the other drawable XML.

Ripple effect on shape drawable

Trying to do something really simple here and have looked up a bunch of SO resource, but to no avail. I am trying to get the ripple effect on a button which uses a drawable background of type of shape drawable. The relevant files:
background_button:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="1px"
android:color="#80ffffff" />
<solid android:color="#android:color/transparent" />
</shape>
ripple.xml within the drawable-v21 folder:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?attr/colorControlHighlight">
<item android:drawable="#drawable/background_button"/>
</ripple>
Button.xml:
<Button
android:id="#+id/login_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_weight="1"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:background="#drawable/ripple"
/>
What is wrong here.
Thanks!

My advice would be not to use <ripple tag. I have 2 reasons: it is not that easy to do exactly what you want and you have to 2 different .xml files for every background. I don't like to have drawable-v21 folder.
My solution is to wrap your Button with FrameLayout and use android:foreground attribute. This way you can have whatever background you want and you can keep the ripple effect.
<FrameLayout
android:id="#+id/login_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_weight="1"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:foreground="?attr/selectableItemBackground">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/background_button"/>
</FrameLayout>
Notice that I moved all the attributes and the id to FrameLayout. You should set onClickListener to FrameLayout instead of the Button.
Btw, ?attr/selectableItemBackground is great. Use it as much as possible. It replaces blue Holo color with gray for old devices from Android 4.0 to 4.3.

Try this.
ripple_effect.xml
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#2797e0"
tools:targetApi="lollipop">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#2797e0" />
</shape>
</item>
button.xml
<Button
android:id="#+id/login_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_weight="1"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:background="#drawable/ripple_effect"/>
build.gradle
compile 'com.android.support:appcompat-v7:23.1.1'

More simple solution - to use this drawable-xml as value of property "android:background" of the Button:
drawable/bkg_ripple.xml:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?attr/colorControlHighlight">
<item android:drawable="?attr/colorPrimary"/>
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#000000" />
</shape>
</item>
</ripple>
button.xml:
<Button
android:id="#+id/mybutton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
...
android:background="#drawable/bkg_ripple"
/>

I had the similar task. Let me explain how i solve it. It outputs circle imageViews with shadow and ripple effect not goes beyond circle boundaries.
<ImageView
android:id="#+id/iv_undo"
android:layout_width="#dimen/iv_width_altmenu"
android:layout_height="#dimen/iv_height_altmenu"
android:src="#drawable/undo"
android:elevation="#dimen/elevation_buttons"
android:foreground="#drawable/ripple_effect"
android:background="#drawable/buttons_inactive_coloring"
/>
The following provides ripple effect:
android:foreground="#drawable/ripple_effect"
The following provides circle imageView.
android:background="#drawable/buttons_inactive_coloring"
The following provides shadow:
android:foreground="#drawable/ripple_effect"
Another problem you may be probably face is ripple effect goes out of circle boundaries. In order to solve, use following file(ripple_effect.xml)
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#color/button_active"
tools:targetApi="lollipop">
<item android:id="#android:id/mask">
<shape android:shape="oval">
<solid android:color="#color/button_active" />
</shape>
</item>
</ripple>
If you do not use the following :
<item android:id="#android:id/mask">
<shape android:shape="oval">
<solid android:color="#color/button_active" />
</shape>
</item>
ripple effect goes beyond circle boundaries and this does not looks nice. Be careful and takes it easy.

That works for me
drawable/rect.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:id="#+id/listview_background_shape">
<stroke android:width="1dp" android:color="#FF4C71F5" />
<padding android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp" />
<corners android:radius="5dp" />
<solid android:color="#00000000" />
</shape>
and for ripple drawable/rip.xml:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#f816a463"
tools:targetApi="lollipop">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#f816a463" />
</shape>
</item>
</ripple>
and for your button
<Button
android:id="#+id/nm"
android:layout_width="80dp"
android:layout_height="40dp"
android:layout_weight="1"
android:background="#drawable/rect"
android:enabled="true"
android:text="#string/vnm"
android:textColor="#color/colorpr"
android:textStyle="bold"
android:foreground="#drawable/rip"/>
Hope this helps!

This work for me..
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#color/smooth_white"
tools:targetApi="lollipop">
<item android:drawable="#drawable/button_green_background" />
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#color/smooth_white" />
</shape>
</item>
</ripple>
The point is section
<item android:drawable="#drawable/button_green_background" />

Try this:
card_back.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners android:radius="20dp" />
<solid android:color="?attr/cardBGColor" />
<stroke android:width="1dp" android:color="?attr/borderColor"/>
</shape>
</item>
</selector>
card_ripple.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#bbb">
<item android:drawable="#drawable/card_back" />
</ripple>
And setup it this way: android:background="#drawable/card_ripple"

Quick solution
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#color/blue"
tools:targetApi="lollipop">
<item
android:id="#android:id/mask"
tools:targetApi="lollipop">
<shape android:shape="rectangle">
<solid android:color="#color/blue" />
<corners android:radius="5dp" />
</shape>
</item>
<item android:id="#android:id/background">
<shape android:shape="rectangle">
<stroke
android:width="0.1dp"
android:color="#312D2D" />
<solid android:color="#FFF" />
<corners android:radius="50dp" />
<padding
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp" />
</shape>
</item>
</ripple>

This will help
<com.abcd.ripplebutton.widget.RippleButton
android:id="#+id/Summit"
android:layout_width="260dp"
android:layout_height="50dp"
android:text="Login"
android:textColor="#color/white"
android:textStyle="bold"
app:buttonColor="#color/Button"
app:rippleColor="#color/white" />
For more See this

For me only this work
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#cccccc">
<item android:id="#android:id/background">
<shape android:shape="rectangle">
<solid android:color="#android:color/white" />
</shape>
</item>
</ripple>
And in layout
<?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:clickable="true"
android:background="#drawable/ripple_white"/>
Yes, it should be clickable

layer-list drawable not drawn correctly

I am trying to create a simple layer-list drawable for my Android app. When I set the drawable as src of an ImageView it is not drawn correctly:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="20dp">
<shape android:shape="oval">
<solid android:color="#color/dark_gray" />
</shape>
</item>
<item android:left="20dp">
<shape android:shape="oval">
<solid android:color="#color/dark_gray" />
</shape>
</item>
</layer-list>
Just two ovals with a little offset to each other. Nothing special (just a test) but it does not work.
It seems that android:left|right|bottom|top is the problem. If I use only of of these commands the drawable is drawn correctly. If two or more are used the ImageView stays empty.
Works:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="20dp">
<shape android:shape="oval">
<solid android:color="#color/dark_gray" />
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#color/dark_gray" />
</shape>
</item>
</layer-list>
Does NOT work (like the first example):
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="..." >
<item android:top="20dp" android:left="20dp">
<shape android:shape="oval">
<solid android:color="#color/dark_gray" />
</shape>
</item>
</layer-list>
What is wrong here?
EDIT: # Rod_Algonquin
I use a quite simple layout to test the drawable:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:background="#aaa" >
<ImageView
android:id="#+id/image_logo"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/testDrawable" >
</ImageView>
</LinearLayout>
It seems that the number of android:left|right|bottom|top arguments is not the source of the problem but the concrete value being used.
This drawable works fine and:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="2dp">
<shape android:shape="oval">
<solid android:color="#0f0" />
</shape>
</item>
</layer-list>
This one does not draw anything (the ImageView is just transparent):
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="1dp">
<shape android:shape="oval">
<solid android:color="#0f0" />
</shape>
</item>
</layer-list>
The only difference here is the value of android:top. 1dp does not work. 2dp works without any problem.
Any idea?

The problem is that you are using the layer-list drawable as an image resource of the ImageView. android:src will only accept an image not a drawable thus giving you nothing in there.
solution:
Instead of putting it in the android:src put it in the background where you can freely use the drawable.
<ImageView
android:id="#+id/image_logo"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#drawable/testDrawable" >
</ImageView>

Selector has different behavior on Android SDK 2.1 and 4.2.2

I have a layout with a GridView.
Each item in the Gridview is a LinearLayout that implements the Checkable interface.
All works OK. But it only show correctly in SDK 4.2.2
SDK 4.2.2
SDK 2.1
The black background should not be shown.
GridView code
<GridView
android:id="#+id/gvBirds"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:verticalSpacing="4dp"
android:layout_margin="32dp"
android:scrollbars="vertical"
android:numColumns="auto_fit"
android:listSelector="#color/transparent">
</GridView>
GridView item code
<?xml version="1.0" encoding="utf-8"?>
<pt.rogerioamaral.ByMAP.CheckableLinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridItemLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical"
android:background="#drawable/grid_item_selector">
<TextView
android:id="#+id/lbBirdName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="nome grande"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#color/main_gradient_end"
android:drawableTop="#drawable/falcao_small"
android:background="#drawable/main_grid_background"
android:layout_margin="5dp"/>
</pt.rogerioamaral.ByMAP.CheckableLinearLayout>
Selector code
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true" android:state_checked="true">
<shape android:shape="rectangle">
<solid android:color="#color/main_gradient_end"/>
<corners android:radius="20dp"/>
</shape>
</item>
<item android:state_checked="true">
<shape android:shape="rectangle">
<stroke android:color="#color/main_gradient_end"
android:width="3dp"/>
<corners android:radius="20dp"/>
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="rectangle">
<solid android:color="#color/main_gradient_end"/>
<corners android:radius="20dp"/>
</shape>
</item>
<item android:drawable="#color/transparent"/>
</selector>
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="main_gradient_start">#454444</color>
<color name="main_gradient_end">#BAB8B9</color>
<color name="transparent">#00000000</color>
</resources>
What I have to do to have the same behavior in both situations?

In your GridView XML android:listSelector(int) is actually the selected item. It doesn't error because your #color/transparent is (int)0x00000000.
I'm pretty sure the difference in the background is due to a change in the default background color between the SDKs.
Hopefully these two changes will fix it. (note the first is just for clarity)
<GridView
android:id="#+id/gvBirds"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:verticalSpacing="4dp"
android:layout_margin="32dp"
android:scrollbars="vertical"
android:numColumns="auto_fit"
android:listSelector="0"> <!-- selects the first item in the list, changed for clarity -->
</GridView>
<item android:state_checked="true">
<shape android:shape="rectangle">
<stroke android:color="#color/main_gradient_end"
android:background="#color/transparent"
android:width="3dp"/> <!-- added to set background color to transparent -->
<corners android:radius="20dp"/>
</shape>
</item>

Need to add <solid> atributte with color="#color/transparent" on state_checked="true"
<item android:state_checked="true">
<shape android:shape="rectangle">
<solid android:color="#color/transparent"/>
<stroke android:color="#color/main_gradient_end"
android:width="3dp"/>
<corners android:radius="20dp"/>
</shape>
</item>

Categories

Resources