Why are the gradients looking different in Android Studio preview and in an actual Android device? Here are the screenshots:
In Android Studio
In my Android phone
This is the drawable/btn_background.xml file:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<shape android:shape="rectangle">
<gradient
android:startColor="#eee"
android:endColor="#aaa"/>
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="rectangle">
<gradient
android:startColor="#aaa"
android:endColor="#eee"/>
</shape>
</item>
</selector>
This is the XML code for the two buttons:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="display"
android:text="#string/btn_txt"
android:textAllCaps="false"
android:background="#drawable/btn_background"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/btn_background"
android:scaleType="fitCenter"
android:src="#drawable/ic_fullscreen_black" />
Is it a bug or something?
I have got a solution to my problem. I have just added the android:angle property in the gradient drawable:
<item android:state_pressed="false">
<shape android:shape="rectangle">
<gradient
android:startColor="#eee"
android:endColor="#aaa"
android:angle="0"/>
</shape>
</item>
Without the android:angle property, Android Studio and Android phones were not agreeing with each other. So, defining the angle solved the issue.
Related
Seems like selector file for track attribute is not working properly for RTL.
LTR track and thumb.
RTL track and thumb. Here thumb is changed properly, but track images are still unchanged as it should display map icon on the right.
<androidx.appcompat.widget.SwitchCompat
android:background="#drawable/selector_switch_track"
android:elevation="6dp"
android:outlineProvider="background"
android:thumb="#drawable/selector_switch_thumb"
app:track="#drawable/selector_switch_track" />
selector_switch_track.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:autoMirrored="true">
<item android:state_checked="true">
<layer-list>
<item>
<shape android:shape="rectangle">
<solid android:color="#color/global_white" />
<corners android:radius="#dimen/margin_100dp" />
</shape>
</item>
<item android:drawable="#drawable/layer_switch_thumb_map_off" android:gravity="start" android:right="#dimen/margin_56dp" />
<item android:drawable="#drawable/layer_switch_thumb_list_off" android:gravity="end" android:left="#dimen/margin_56dp" />
</layer-list>
</item>
<item android:state_checked="false">
<layer-list>
<item>
<shape android:shape="rectangle">
<solid android:color="#color/global_white" />
<corners android:radius="#dimen/margin_100dp" />
</shape>
</item>
<item android:drawable="#drawable/layer_switch_thumb_map_off" android:gravity="start" android:right="#dimen/margin_56dp" />
<item android:drawable="#drawable/layer_switch_thumb_list_off" android:gravity="end" android:left="#dimen/margin_56dp" />
</layer-list>
</item>
</selector>
I solved this issue by creating seperate res dir drawable-ldrtl for RTL and put there same selector file but with switched start/end drawables.
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>
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/
I am trying to implement SwitchCompat from AppCompat but it looks different on different version devices.
On Lollipop & Froyo it looks good but on Gingerbread to KitKat it doesn't look like a switch.
Code:
<android.support.v7.widget.SwitchCompat
android:id="#+id/label_switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOff="No"
android:textOn="Yes"
android:checked="false" />
Can I make these switches look the same across all versions or at least make them look like a switch?
Min sdk of my application was GingerBread and I had the same problem, finally I found the solution. In order to make SwitchCompat consistent in all android versions I used two drawable at res/drawable folders, one for thumb and one for track. and assign them to SwitchCompat in java code not in xml. Here is the code you should use.
SwitchCopmat widget:
<android.support.v7.widget.SwitchCompat
android:id="#+id/label_switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
drawable for thumb, switch_compat_thumb.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="#dimen/switch_compat_thumb_margin"
android:left="#dimen/switch_compat_thumb_margin"
android:right="#dimen/switch_compat_thumb_margin"
android:top="#dimen/switch_compat_thumb_margin">
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<shape android:shape="oval">
<size
android:width="#dimen/switch_compat_thumb_size"
android:height="#dimen/switch_compat_thumb_size"/>
<solid android:color="#android:color/red"/>
</shape>
</item>
<item>
<shape android:shape="oval">
<size
android:width="#dimen/switch_compat_thumb_size"
android:height="#dimen/switch_compat_thumb_size"/>
<stroke
android:width="#dimen/switch_compat_thumb_stroke_width"
android:color="#android:color/red"/>
<solid android:color="#android:color/transparent" />
</shape>
</item>
</selector>
</item>
drawable for track, switch_compat_track.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="#dimen/switch_compat_track_radius"/>
<stroke
android:width="#dimen/switch_compat_track_stroke_width"
android:color="#android:color/red"/>
<solid android:color="#android:color/transparent" />
and then, after finding it in java, assign thumb and track to SwitchCompat in java code:
final SwitchCopmat switchCompat = (SwitchCopmat) findViewById(R.id.label_switch);
//add thumb and track drawable in java since it doesn't work on xml for gingerbread
switchCompat.setThumbDrawable(getResources().getDrawable(R.drawable.switch_compat_thumb));
switchCompat.setTrackDrawable(getResources().getDrawable(R.drawable.switch_compat_track));
I have a layout.xml like the following
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/green"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_marginBottom="2dp" >
<ImageButton
android:id="#+id/leftArrowImageButton"
android:background="#drawable/left_arrow_selector"
android:layout_width="120dp"
android:layout_height="50dp"
android:gravity="left"
android:src="#drawable/left_arrow">
</ImageButton>
</LinearLayout>
I have left_arrow_selector.xml like the following
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/white" android:state_selected="true"/>
<item android:drawable="#color/white" android:state_pressed="true"/>
<item android:drawable="#color/green">
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="2dp" android:color="#color/grey" />
</shape>
</item>
</selector>
Everything else is working fine but the stroke is not getting applied.
Please advice on this.
EDIT - Added Image...
The Image is there which i want to keep it same but i want to add stroke to the view. Please see how i added a grey stroke if i removed the selector.
I'd do like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/arrow_left_white" android:state_selected="true"/>
<item android:drawable="#drawable/arrow_left_white" android:state_pressed="true"/>
<item android:drawable="#drawable/arrow_left_green" />
</selector>
and add:
/res/drawable/arrow_left_white.xml (just to preserve the name in the selector)
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle">
<stroke android:width="2dp" android:color="#color/grey" />
<solid android:color="#color/azure">
</shape>
and
/res/drawable/arrow_left_green.xml (also just to preserve the name in the selector)
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle">
<stroke android:width="2dp" android:color="#color/black" />
<solid android:color="#color/brown">
</shape>
So, setting the selector as your background and the image as your src, you'll have a stateful ImageButton that turns (with the colors I choosed) from beaing a yellow left triangle on an azure background and having a grey border to the same yellow triangle on a brown backgrounf with a black border.
stroke for the border
solid for the fill
Reference: http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape
You can add some spice by rounding the corners and/or using gradients.
The problem is here:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="2dp" android:color="#color/black" />
</shape>
try this instead:
<shape android:shape="rectangle">
<stroke android:width="2dp" android:color="#color/black" />
</shape>
That happens when you copy&paste too much ^^