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 ^^
Related
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 want to make drawable like below,
I am able to make the Rectangle and Triange shape in two different xml files. But i want to joint them to make the drawable like this.
Use layer-list to make this custom shape drawable.
/res/drawable/custom_shape.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Transparent Rectangle -->
<item>
<shape android:shape="rectangle">
<size
android:width="300dp"
android:height="60dp" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
<!-- Colored Rectangle -->
<item
android:bottom="20dp">
<shape android:shape="rectangle">
<size
android:width="300dp"
android:height="60dp" />
<solid android:color="#9A8585" />
</shape>
</item>
<!-- Bottom Triangle -->
<item
android:left="80dp"
android:right="120dp"
android:top="0dp"
android:bottom="30dp">
<rotate android:fromDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#9A8585" />
</shape>
</rotate>
</item>
<!-- Top Border -->
<item
android:bottom="75dp">
<shape android:shape="rectangle">
<solid android:color="#EFC1B3" />
</shape>
</item>
</layer-list>
USE:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/custom_shape"/>
OUTPUT:
Hope this will help~
Use <layer-list/> for that.
Here is an example for instance.
in Drawable folder of resin project directory,
make xml file and name it as layerlist.xml and paste it below code as your requirement.
you can also add your shape drawable instead of drawable in the <item/> tag in the example. and use this xml as a background of ImageView.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap android:src="#drawable/android_red"
android:gravity="center" />
</item>
<item android:top="10dp" android:left="10dp">
<bitmap android:src="#drawable/android_green"
android:gravity="center" />
</item>
<item android:top="20dp" android:left="20dp">
<bitmap android:src="#drawable/android_blue"
android:gravity="center" />
</item>
</layer-list>
Here is the result of the use of <layer-list/>.
I hope it helps you...
I expect that you need it for a a Tabular navigator or a ViewPager. My suggestion is that
1)Use the rectangle as your background for all the cases.
2)Create the same triangle drawable but with the background color (White or transparent) for the unselected item.
3)Create a view with the triangle background for all the items
4)Manually setVisibility of the triangle view according to the selection state
I am trying to achieve the effect which is shown in this following image:
In this image there is an edittext with round corner and internal shadow at top. I tried a lot but not success in getting shadow inside edittext.
I searched on this topic but all examples show shadow outside edittext border. I have no idea how can I achieve this.
The button and background image is already done, The only thing which is left is edittext shadow. If someone has already done this or know how to do this please share with me. Any help whould be appreciated.
Got like this
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:centerY="0.2"
android:startColor="#FFBDBDBD"
android:centerColor="#65FFFFFF"
android:endColor="#00FFFFFF"
android:angle="270"
/>
<stroke
android:width="1dp"
android:color="#C3C3C3" />
<corners
android:radius="25dp" />
</shape>
Just create an xml file in your drawable folder name as round_corner.xml.And add this following code.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<corners
android:radius="3dp"
/>
<solid
android:color="#android:color/white"/>
</shape>
At Last you add this xml in background property of your Edittext as follows:-
<EditText
android:id="#+id/ed1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/round_corner"
/>
Done..Definitely it works..
1.) Create rounded_edittext.xml file in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="15dp">
<solid android:color="#FFFFFF"/>
<corners
android:bottomRightRadius="5dp"
android:bottomLeftRadius="5dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp"/>
<stroke android:width="1dip" android:color="#FF0000" />
</shape>
2.) Put below code in styles.xml file placed in values folder
<style name="largeEdittextText">
<item name="android:textAppearance">#android:style/TextAppearance.Large.Inverse</item>
<item name="android:textSize">15dp</item>
<item name="android:singleLine">true</item>
<item name="android:paddingTop">8dp</item>
<item name="android:paddingBottom">8dp</item>
<item name="android:paddingLeft">5dp</item>
<item name="android:background">#FFB90F</item>
<item name="android:textColor">#android:color/black</item>
</style>
3.) Apply both on edittext in layout file
<EditText
android:id="#+id/userName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:gravity="center_horizontal"
android:hint="#string/login_userHint"
android:text="admin"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:singleLine="true"
android:textAppearance="#style/largeEdittextText"
android:background="#drawable/rounded_edittext">
</EditText>
if you want to make the border of EditText Round and curve, then just paste this code in Drawable/mystyle.xml (create this xml file) .
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:thickness="0dp"
android:shape="rectangle">
<stroke android:width="1dp"
android:color="#c8c8c8"/>
<corners android:radius="11dp" />
</shape>
Now in your EditText link this file as
android:background="#+drawable/mystyle"
Shadow property in Button view gives shadow to text. How can I give shadow to right and bottom border of a Button?As shown below:
You can try it. I use it in my project. I give shadow to right and bottom border of a Button.
Button xml
<Button
android:id="#+id/buttonSignIn"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:background="#drawable/button_dropshadow"
android:textColor="000000"
android:text="Sign In" />
In drawable file add button_dropshadow.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item android:left="5dp" android:top="5dp">
<shape>
<corners android:radius="3dp" />
<solid android:color="#000000" />
</shape>
</item>
<item android:bottom="2dp" android:right="2dp">
<shape>
<gradient android:angle="270"
android:endColor="#ffffff" android:startColor="#ffffff" />
<stroke android:width="1dp" android:color="#000000" />
<corners android:radius="4dp" />
<padding android:bottom="10dp" android:left="10dp"
android:right="10dp" android:top="10dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
Thank you.
Try making your own button 9-patch image with selector:
btn_normal.9.png:
btn_pressed.9.png:
btn_focused.9.png:
btn_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:drawable="#drawable/btn_focused" />
<item android:state_focused="true" android:drawable="#drawable/btn_focused" />
<item android:state_pressed="true" android:drawable="#drawable/btn_pressed" />
<item android:drawable="#drawable/btn_normal" />
</selector>
and add android:background="#drawable/btn_selector" in button's attributes.
Here is a blob post that I found and could help. It will only work in a RelativeLayout. Create a View component with the same size as your button and place it immediately below:
<Button
android:id="+#id\my_button"
android:layout_below="#id/some_layout_item"
android:layout_width="100dp"
android:layout_height="5dp"
>
</Button>
<View
android:layout_below="#id/my_button"
android:layout_width="100dp"
android:layout_height="5dp"
android:background="#drawable/drop_shadow"
>
</View>
Create the shadow as a drawable (drop_shadow.xml):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android”>
<gradient
android:startColor="#color/cream_dark"
android:endColor="#color/cream"
android:angle="270"
>
</gradient>
</shape>
My button's background is set like this
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:startColor="#android:color/holo_green_dark"
android:endColor="#android:color/holo_green_light"
android:angle="90">
</gradient>
<stroke
android:width="1px"
android:color="#android:color/darker_gray" />
</shape>
The effect of the shadow can be done by adding a second shape under the original button shape, changing its color to a darker one either black or grey. But the shadow should be of the same shape as that of the button.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#android:color/darker_gray"/>
</shape>
To overlap different items we have to use a “layer-list” resource and include the previous shapes. The shadow should appear in first place and then the original button with some displacement. In this example, we are creating the shadow at the bottom of the button and an offset of 4px.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/shadow"/>
<item
android:drawable="#drawable/button"
android:bottom="4px"
android:right="4px"
/>
</layer-list>
Now set the background of the button as the layerlist drawable. This should do it partially.
I have two questions:
1) how do I change the color of the seek bar (path) from yellow (the default color) to white. What I mean to say is, while I slide the thumb , it turns the line traversed from grey to yellow. I want track/line to either remain grey or white..Basically I want just the thumb to move with no color change in the seek bar.
2)
How to change the thumb of seekbar from rectangle to circle/sphere/round shape.
any pointers will be appreciated.
I want to complete the answer from above for the people who are new to the system,
the missing xmls ( background_fill , progress_fill and progress could look like that for a gradient red
progress.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#android:id/background"
android:drawable="#drawable/background_fill" />
<item android:id="#android:id/progress">
<clip android:drawable="#drawable/progress_fill" />
</item>
</layer-list>
background_fill.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#FF555555"
android:centerColor="#FF555555"
android:endColor="#FF555555"
android:angle="90" />
<corners android:radius="5px" />
<stroke
android:width="2dp"
android:color="#50999999" />
<stroke
android:width="1dp"
android:color="#70555555" />
</shape>
progress_fill.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#FF470000"
android:centerColor="#FFB80000"
android:endColor="#FFFF4400"
android:angle="180" />
<corners android:radius="5px" />
<stroke
android:width="2dp"
android:color="#50999999" />
<stroke
android:width="1dp"
android:color="#70555555" />
</shape>
i did not complete the implementing for android:thumb, so the thumb will be still the original one
Therefore we just have to delete this line again from our layout xml where we define the seekbar
android:thumb="#drawable/thumb"
You should set SeekBar XML properties:
<SeekBar
....
android:progressDrawable="#drawable/progress"
android:thumb="#drawable/thumb"
....
/>
Where progress is something like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background"
android:drawable="#drawable/background_fill" />
<item android:id="#android:id/progress">
<clip android:drawable="#drawable/progress_fill" />
</item>
</layer-list>
and thumb is
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/thumb_fill" />
</selector>
Since SeekBar uses colorAccent by default, you can create a new style with your custom color as colorAccent then use theme attribute to apply it to the SeekBar.
<SeekBar>
.
.
android:theme="#style/MySeekBarTheme"
.
</SeekBar>
in the #style:
<style name="MySeekBarTheme" parent="Widget.AppCompat.SeekBar" >
<item name="colorAccent">#ffff00</item>
</style>
seekBar.getProgressDrawable().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
seekBar.getThumb().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
You can just add tint from API level 21.
Add these properties to seekbar element:
android:progressTint="#android:color/white"
android:thumbTint="#android:color/white"
Final result:
<SeekBar
android:id="#+id/is"
android:layout_width="match_parent"
android:max="100"
android:progressTint="#android:color/white"
android:thumbTint="#android:color/white"/>
1. Create a drawable XML:
Name it : progress_drawable
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke android:width="1dp" android:color="#fff"/>
</shape>
2. Assign it to Seekbar
<SeekBar
android:id="#+id/slider_1"
android:progressDrawable="#drawable/progress_drawable"
android:layout_width="180dp"
android:layout_height="32dp"
android:layout_gravity="center"
android:rotation="270" />
Just change the accent color of your style
<style name="TickMarkSeekBar" parent="Theme.KefTheme">
<item name="tickMark">#drawable/tickmark</item>
<item name="thumbTint">#android:color/white</item>
<item name="colorAccent">#android:color/white</item>
</style>