Custom button looks different on lower API in Android - android

hello i tried solution posted on Stack overflow but not working please help on this problem.Am using custom Button which is in drawable folder
button_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_not_pressed" android:state_pressed="false" android:state_selected="false"/>
<item android:drawable="#drawable/button_pressed" android:state_pressed="true"/>
</selector>
button_pressed.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke android:width="1dp" android:color="#009688"/>
<corners android:radius="1dp"/>
<gradient android:startColor="#color/header" android:centerColor="#color/header"
android:endColor="#color/header" android:angle="270"/>
</shape>
button_not_pressed.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke android:width="0.4dp" android:color="#color/header"/>
<corners android:radius="0dp"/>
</shape>
but on lower API screen look like this
Above API 17 it look's like this
This is the actual design i done for Button

Add this in both drawable:
<solid android:color="#android:color/transparent" />

I encountered such problem in 15 api.
Add into shape
<solid android:color="#android:color/transparent"/>
or what color you need.
It helped me.

Related

How to have bottom line programmatically just like in default edittext with gradientdrawable in android

It will draw a bottom underline and i want to simply achieve below xml code by using gradientdrawable, I am trying to have custom edit text class which used in xml and set some property like bottom line color or others.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="-6dp"
android:right="-6dp"
android:top="-6dp">
<shape>
<stroke
android:width="1dp"
android:color="#000" />
</shape>
</item>
</layer-list>
First create gradient file
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:angle="180" android:startColor="#7c0000" android:endColor="#ff9a9a"/>
</shape>
and than add it here :
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/white"/>
</shape>
</item>
<item android:drawable="#drawable/gradient" android:gravity="bottom" android:height="2dp"/>
</layer-list>

how to add line above tabs android tablayout

need help
I have searched for my requirement but didn't found so posting my own question.
I need to show line above tabs not below as all solution is for adding the line below the tabs text.
should I use custom tabs or android supports this scenario without making custom ??
links I have viewed are as follows
https://www.google.com.pk/search?q=fabric+documentation&rlz=1C1CHBD_enPK741PK753&oq=fabric+documentation+&aqs=chrome..69i57.5669j0j7&sourceid=chrome&ie=UTF-8#safe=active&q=how+to+adding+line+above+tabs+android
no code is posted as I want to know what should be used .. ur suggestion would be helpful .. thanks
Try this create a background in res/drawable folder and set app:tabBackground="#drawable/selector"
make your like this Tablayout
<android.support.design.widget.TabLayout
android:id="#+id/detail_tabs"
android:layout_width="match_parent"
app:tabSelectedTextColor="#color/colorPrimary"
app:tabIndicatorHeight="0dp"
android:layout_height="wrap_content"
app:tabMode="scrollable"
app:tabBackground="#drawable/selector" />
Here selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:state_pressed="false">
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="3dp" android:left="-5dp" android:right="-5dp" android:bottom="-5dp">
<shape android:shape="rectangle">
<solid android:color="#color/colorWhite"/>
<stroke android:color="#color/colorPrimary" android:width="2dp"/>
</shape>
</item>
</layer-list>
</item>
<item android:state_selected="true" android:state_pressed="true">
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="3dp" android:left="-5dp" android:right="-5dp" android:bottom="-5dp">
<shape android:shape="rectangle">
<solid android:color="#color/colorWhite"/>
<stroke android:color="#color/colorPrimary" android:width="2dp"/>
</shape>
</item>
</layer-list>
</item>
</selector>
Hope it will works if not then add comment.
app:tabIndicatorGravity="top"
Its very simple now to show the indicator at the top with this.

Creating this shape (Attached picture) in Android XML?

I know this question is very brief but how can I create this shape in XML for an Android Studio project?
It seems like I can create a rectangle and then remove a semi circle portion from it but achieving that effect in XML seems very difficult. Has anyone done this before?
Create such background with pure xml drawables is always tricky, but possible.
I've created button you need in xml. Add this files to your drawable folder:
circle.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<!-- inset - moves circle to the left-->
<inset android:insetLeft="-150dp">
<shape android:shape="ring"
android:thicknessRatio="7"
android:innerRadius="0dp"
android:useLevel="false"
>
<stroke android:width="2dp" android:color="#000000"/>
<solid android:color="#ffffff"/>
</shape>
</inset>
</item>
</selector>
custom_button_default.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#00ff00"/>
<stroke
android:color="#000000"
android:width="2dp"/>
</shape>
</item>
<item android:drawable="#drawable/circle" />
</layer-list>
custom_button_pressed.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#dddddd"/>
<stroke
android:color="#000000"
android:width="2dp"/>
</shape>
</item>
<item android:drawable="#drawable/circle" />
</layer-list>
custom_button_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/custom_button_pressed" />
<item android:drawable="#drawable/custom_button_default"/>
</selector>
Set custom_button_selector drawable as a background of your view in layout:
<Button
android:layout_width="150dp"
android:layout_height="100dp"
android:id="#+id/button"
android:background="#drawable/custom_button_selector"
/>
You probably will have to adjust circle insetLeft value and button width, height in layout. Would be better to have this variables defined in values/dimens.xml.
Default state:
Pressed state:
I've tested it on Nexus 5 and Nexus 7 - button background looks the same.
Hi you ca use convert online tools http://www.online-convert.com/ after convert svg to xml android file this site http://inloop.github.io/svg2android/

Possible to show ?android:attr/selectableItemBackground on short touches?

When using the selectableItemBackground attribute for "touch ripple effects", it seems that normal touches are too fast for the "touch ripple" to appear. I have to touch a bit longer and everything works as it should. Is it possible to force this effect some how, even on short touches?
I should suggest to you that create a custom ripple effect.
Selector for Pre API 21
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="rectangle">
<solid android:color="#color/colorAccent" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/transparent" />
</shape>
</item>
</selector>
Ripple Effect for API 21+ Devices
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/colorAccent">
<item
android:id="#android:id/mask"
android:drawable="#android:color/white" />
</ripple>
For More: Click Here

Shape with selector as color doesn't works

I want to create a shape with selector as solid color.
On Android 5.0+, this code works perfectly, but on 4.X, it doesn't works.
shape.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/my_selector"/>
<size android:height="40dp" android:width="40dp"/>
<corners android:radius="10dp" />
</shape>
my_selector.xml
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:color="#color/color_1"
android:state_checked="false"/>
<item
android:color="#color/color_2"
android:state_checked="true"/>
</selector>
This drawable is applied to CheckBox background.
you should change order to write state like this and use your shape in item:
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<shape android:shape="rectangle" >
<solid android:color="#color/my_selector"/>
<size android:height="40dp" android:width="40dp"/>
<corners android:radius="10dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle" >
<solid android:color="#color/my_deselec"/>
<size android:height="40dp" android:width="40dp"/>
<corners android:radius="10dp" />
</shape>
</item>
</selector>
Use in this manner
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>.......</shape>
</item>

Categories

Resources