I want to use a background for my buttons. But when I use a png it slows down the app. Therefore I want to use a xml shape but I do not know how to make the corner cut (like on the picture).
By now I have the following shape which is just a rectangle:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/blue_semi_transparent"/>
<padding android:bottom="10dp" android:right="10dp" android:top="10dp" android:left="10dp"/>
<margin android:bottom="10dp" android:right="10dp" android:top="10dp" android:left="10dp"/>
</shape>
How can I draw the bottom right corner?
You can try this,
skewed_background.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="#3F8EEB" />
</shape>
</item>
<item>
<rotate
android:fromDegrees="110"
android:pivotX="90%"
android:pivotY="90%"
>
<shape android:shape="rectangle" >
<solid android:color="#FFF" />
</shape>
</rotate>
</item>
</layer-list>
sample_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp"
android:orientation="vertical" >
<View
android:layout_width="200dp"
android:layout_height="50dp"
android:background="#drawable/triangle1"/>
</LinearLayout>
If you want to modify the skewed area you just need to change the value of fromDegrees, pivotX and pivotY value in the second item in skewed_background.xml.
This is exactly what you looking for
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg"
android:paddingRight="15dp"
android:textColor="#ffffff"
android:layout_centerInParent="true"
android:text="Button" />
</RelativeLayout>
bg.xml
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<size
android:width="100dp"
android:height="40dp" />
<solid android:color="#13a89e" />
</shape>
</item>
<item
android:right="100dp"
android:left="100dp"
android:top="-100dp"
android:bottom="-100dp">
<rotate
android:fromDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
<item
android:right="-100dp"
android:left="100dp"
android:top="-100dp"
android:bottom="-100dp">
<rotate
android:fromDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
</layer-list>
OUTPUT
This will give you your desired result
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/colorPrimary"/>
<item android:top="-20dp"
android:bottom="-50dp"
android:left="350dp"
android:right="-120dp">
<rotate
android:fromDegrees="10"
android:pivotX="50%"
android:pivotY="0%">
<shape
android:shape="rectangle">
<solid
android:color="?android:colorBackground"/>
</shape>
</rotate>
</item>
</layer-list>
Related
I want the seekbar thickness variable. Progressed part of the seekbar should be more thick than the rest of the part. Here is what i want:
Can you give me any suggession? Sorry for the image quality :P
Try this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<SeekBar
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:progressDrawable="#drawable/test"
android:thumb="#drawable/ic_send" />
</LinearLayout>
android:progressDrawable="#drawable/test"
<?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:gravity="center_vertical|fill_horizontal">
<shape android:shape="rectangle"
android:tint="#color/colorAccent">
<corners android:radius="10dp"/>
<size android:height="10dp" />
<solid android:color="#color/colorAccent" />
</shape>
</item>
<item android:id="#android:id/progress"
android:gravity="center_vertical|fill_horizontal">
<scale android:scaleWidth="100%">
<selector>
<item android:state_enabled="false"
android:drawable="#android:color/transparent" />
<item>
<shape android:shape="rectangle"
android:tint="#color/colorPrimary">
<corners android:radius="8dp"/>
<size android:height="30dp" />
<solid android:color="#color/colorAccent" />
</shape>
</item>
</selector>
</scale>
</item>
</layer-list>
OUTPUT
NOTE
You van change corners radius and android:thumb as per your requirement
I am trying shadow text view like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="top|center"
android:background="#drawable/gradient">
<TextView
android:layout_width="300dp"
android:layout_height="50dp"
android:text="#string/ph"
style="#style/TextBox"
android:textSize="16sp"/>
</LinearLayout>
gradient.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<gradient
android:endColor="#FFFFFF"
android:startColor="#FFFFFF"
android:type="linear"
android:centerColor="#E3F2FD"
android:angle="90">
</gradient>
</shape>
</item>
This code can't get my design. Is it possible to textview like my picture?
Here i tried to create same shadow as your requirement which will look like this. I know the shadow color is not blur as u want
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#drawable/shadow"
android:orientation="vertical"
android:paddingBottom="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rectangle_shape"
android:padding="10dp"
android:text="Phone Number" />
</LinearLayout>
drawable/shadow.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#220000ff" />
<corners android:radius="20dp" />
</shape>
drawable/rectangle_shape.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FFFFFF" />
<corners android:radius="20dp" />
</shape>
make xml backround_with_shadow and paste this code-
<?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="#87ceeb" />
<corners android:radius="5dp"/>
</shape>
</item>
and set xml as background of layout
<item android:right="1dp" android:left="1dp" android:bottom="2dp">
<shape
android:shape="rectangle">
<solid android:color="#android:color/white"/>
<corners android:radius="5dp"/>
</shape>
</item>
</layer-list>
How to implement this shape of Departments header using shape and xml without 9-patch ?
I mean rectangle with arrow on the left.
My code snippet:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="1px"
android:left="#dimen/edittext_border"
android:right="#dimen/edittext_border"
android:top="#dimen/edittext_border">
<shape android:shape="rectangle">
<stroke
android:width="#dimen/edittext_border_width"
android:color="#color/menu_divider" />
<solid android:color="#color/background" />
<corners android:radius="4dp" />
</shape>
</item>
</layer-list>
if you are looking for someting like this, try the following code..
Make a xml arrow_shape in your drawable folder.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate android:fromDegrees="45" android:toDegrees="45"
android:pivotX="-40%" android:pivotY="87%" >
<shape android:shape="rectangle" >
<stroke android:color="#c6802a" android:width="10dp"/>
<solid android:color="#c6802a" />
</shape>
</rotate>
</item>
</layer-list>
Make a xml rectangle_shape in your drawable folder.
<?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="#B2E3FA" />
</shape>
</item>
In your main xml file
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="center"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.example.stpl.myapplication.MainActivity">
<RelativeLayout
android:id="#+id/arrow"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#drawable/arrow_shape"
android:rotation="270" />
<RelativeLayout
android:id="#+id/rectangle"
android:layout_width="150dp"
android:layout_height="50dp"
android:background="#drawable/rectangle_shape"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:android="http://schemas.android.com/tools" />
</LinearLayout>
A solution with a gradient:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:width="2dp" android:height="2dp"
android:top="4dp" android:left="3dp">
<rotate android:fromDegrees="45"
android:pivotX="0"
android:pivotY="0">
<shape>
<solid android:color="#D83945"/>
</shape>
</rotate>
</item>
<item android:width="50dp" android:height="11dp" android:left="3dp">
<shape>
<gradient
android:startColor="#D83945"
android:endColor="#F9700C"
/>
<corners
android:radius="2dp"
/>
</shape>
</item>
</layer-list>
The final result is:
I want to draw a vertical dotted line in xml, using shape.
I used this example:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<size
android:height="400dp"
android:width="4dp"/>
<stroke
android:color="#000000"
android:dashWidth="100dp"
android:dashGap="10dp" />
</shape>
Then:
<View android:id="#+id/vertical_line"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/dotted_line"
android:layout_marginLeft="27dp"/>
But it doesn't work. How can I do it?
I tried a few things, I liked the drawable solutions and found that this worked.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:top="-8dp"
android:bottom="-8dp"
android:left="-8dp">
<shape>
<solid android:color="#android:color/transparent"/>
<stroke
android:width="4dp"
android:color="#df0000"
android:dashGap="4dp"
android:dashWidth="4dp"/>
</shape>
</item>
</layer-list>
The trick is the negative top bottom and left values as these are set outside of the object now, leaving a single dashed line.
Its used in the following view.
<View
android:layout_width="4dp"
android:layout_height="match_parent"
android:background="#drawable/dash_line_vertical"
android:layerType="software" />
Try this
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line" >
<size
android:height="400dp"
android:width="4dp" />
<stroke
android:dashGap="10dp"
android:dashWidth="100dp"
android:color="#000000" />
</shape>
Then use like this
<LinearLayout
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#drawable/dot_line"
android:orientation="vertical" >
</LinearLayout>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="90"
android:toDegrees="90" >
<shape android:shape="line" >
<stroke
android:color="#000000"
android:dashWidth="100dp"
android:dashGap="10dp"/>
</shape>
</rotate>
Here is my button_style.xml which i am including with my button. However, I still can't seem to get the border on the left. Can anyone help me here please?
ps - My background should be transparent
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<layer-list>
<item android:left="2dp">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#999999"/>
</shape>
</item>
</layer-list>
</selector>
Try this
<?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="#android:color/transparent" />
</shape>
</item>
<item
android:bottom="-2dp"
android:right="-2dp"
android:top="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:width="2dp"
android:color="#FFF" />
</shape>
</item>
</layer-list>
There is some inherit problem with the borders of the button. But I found the best way to do it. Let say if you want a border only on the left side of the button. In the MainActivity xml file where the button is placed do it like this -
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/newstyle"
android:orientation="vertical" >
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"
android:gravity="center_vertical"
android:paddingLeft="10sp"
android:text="Button"
android:textAllCaps="false"
android:textColor="#939393"
android:textSize="20sp" />
</LinearLayout>
For the newstyle.xml file which will be located in the drawable use this code -
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:bottom="0sp"
android:left="-2sp"
android:right="-2sp"
android:top="-2sp">
<shape android:shape="rectangle" >
<solid android:color="#ffffff" />
<stroke
android:width="1sp"
android:color="#d6d6d6" />
</shape>
</item>
</layer-list>
So the whole idea is -
Keep the background of the button as #null and keep the button in the linera layout. Give the background to the liner layout and voila its done..:)..
Try this
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<padding android:left="1dp" />
<solid android:color="#999999" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/transparent" />
</shape>
</item>
</layer-list>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<layer-list>
<item android:left="2dp"
android:right="0dp"
android:top="0dp"
android:bottom="0dp"
>
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#999999"/>
</shape>
</item>
</layer-list>
</selector>
try this it may work