I am trying to draw border in one side only to ImageButton object,
like in CSS: border-left: 2px solid black;.
Is there any way to do that with style only? (Without inserting a blank view between them)
Thank you!
EDIT:
I used the <selector> tag with the ImageButton.
After alot of searching, I found way to do that.
Create xml file that containce the border style (border_style.xml):
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle">
<!-- The border color -->
<solid android:color="#000" />
</shape>
</item>
<item android:left="1dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle">
<!-- The fill color-->
</shape>
</item>
</layer-list>
then in the selector, you write like that:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<!-- Press Event -->
</item>
<item android:state_focused="true">
<!-- Focuse Event -->
</item>
<item android:drawable="#drawable/border_style.xml" />
</selector>
You do not able to do like css. You need to create a xml and put the xml in android drable folder and send the image-button background
And rectangle drawable back.xml (put into res/drawable folder):
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<solid android:color="#ffffff" />
<stroke android:width="1dip" android:color="#4fa5d5"/>
</shape>
Related
I have a num keypad that I have created using buttons and have hide my android soft keyboard.
This is how my every button looks like for different numbers
<Button
android:id="#+id/seven"
android:text="7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
style="#style/CustomStyle"
android:background="#drawable/gridlayout_border"
/>
Notice that I am using CustomStyle whose code looks like this with the filename button_style.xml
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="CustomStyle">
<item name="android:textSize">24dp </item>
<item name="android:textColor">#fdfdfd</item>
<item name="android:textStyle">bold </item>
<item name="android:padding">20dp</item>
</style>
</resources>
Also, I am using gridlayout_border as a background
gridlayout_border.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:left="-10dp" android:right="0dp" android:top="-10dp"
>
<shape android:shape="rectangle">
<!--apply button background transparent, full opacity-->
<solid android:color="#00ffffff"/>
<stroke android:color="#ffffff" android:width="2dp"/>
</shape>
</item>
</layer-list>
Since, I have used up the style and background tag in button. How can I now apply one more style/color when my button is being pressed on num keypad?
Thanks in advance
You can use selector to determine different states of a view. Something like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true">
<!-- Write your focused state code-->
</item>
<item android:state_pressed="true">
<!-- Write your pressed state code-->
</item>
<item>
<layer-list>
<item android:left="-10dp" android:right="0dp" android:top="-10dp"
>
<shape android:shape="rectangle">
<!--apply button background transparent, full opacity-->
<solid android:color="#00ffffff"/>
<stroke android:width="2dp" android:color="#ffffff"/>
</shape>
</item>
</layer-list>
</item>
</selector>
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 want to make a button for my shape like this one
Is there a way to do this with xml ?
Like setting some points, in my case I have 5..
What you need is to create a shape xml file in your project's drawable-xxx folder and then use this shape as background for a button.
Here is the shape file called arrow_shape.xml:
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- Colored rectangle-->
<item>
<shape android:shape="rectangle">
<size
android:width="100dp"
android:height="40dp" />
<solid android:color="#5EB888" />
<corners android:radius="0dp"/>
</shape>
</item>
<!-- This rectangle for the top arrow edge -->
<!-- Its color should be the same as the layout's background -->
<item
android:top="-40dp"
android:bottom="65dp"
android:right="-30dp">
<rotate
android:fromDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
<!-- This rectangle for the lower arrow edge -->
<!-- Its color should be the same as the layout's background -->
<item
android:top="65dp"
android:bottom="-40dp"
android:right="-30dp">
<rotate
android:fromDegrees="-45">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
</layer-list>
Then use it as button's background, for example
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/arrow_shape"/>
Here is the screenshot:
More info on Layer-List you can find here.
EDIT:
Keep in mind though that I used certain values for the shape's width and height. If you change those you might need to change the values of the top, bottom and right attributes. So, in that case consider using different values in your project's values directory.
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:width="50dp" android:height="10dp" android:right="6dp">
<shape>
<solid android:color="#android:color/holo_green_dark"/>
<corners
android:bottomLeftRadius="2dp"
android:topLeftRadius="2dp"/>
</shape>
</item>
<item android:width="7dp" android:height="7dp"
android:left="50dp">
<rotate android:fromDegrees="45"
android:pivotX="0"
android:pivotY="0">
<shape>
<solid android:color="#android:color/holo_green_dark"/>
</shape>
</rotate>
</item>
</layer-list>
With the Material Components library you can just use the standard MaterialButton defining the shapeAppearanceOverlay attribute:
Something like:
<com.google.android.material.button.MaterialButton
app:shapeAppearanceOverlay="#style/ShapeAppearanceOverlay.Button.Triangle"
... />
And in your style define:
<style name="ShapeAppearanceOverlay.Button.Triangle" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSizeTopLeft">0dp</item>
<item name="cornerSizeBottomLeft">0dp</item>
<item name="cornerFamilyTopRight">cut</item>
<item name="cornerFamilyBottomRight">cut</item>
<item name="cornerSizeTopRight">50%</item>
<item name="cornerSizeBottomRight">50%</item>
</style>
I'm trying to style the divider for ListView. What I want is just 2 simple horizontal lines.
list.xml
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/ListView" >
</ListView>
styles.xml
<style name="ListView" parent="android:style/Widget.ListView">
<item name="android:divider">#drawable/divider</item>
<!-- 5dp: just to make sure there's enough space -->
<item name="android:dividerHeight">5dp</item>
</style>
divider.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#00ffff" />
<size android:height="1dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#ff0000" />
<size android:height="1dp" />
</shape>
</item>
</layer-list>
The result is a horizontal line with height of 5dp(should be 2, isn't it?) and color of red(color of second item). The first item with color #00ffff does not show up at all.
Can someone please suggest the code for 2 simple horizontal lines?
I'd better answer my own question...
It seems styles.xml - style - item takes the color of the last item in layer-list as background for the entire divider. This last item is on top of other layers, and that is why other items in the layer-list don't show up.
The key is padding.
styles.xml
<style name="ListView" parent="android:style/Widget.ListView">
<item name="android:divider">#drawable/divider</item>
<item name="android:dividerHeight">10dp</item>
</style>
divider.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#0000ff" />
<padding android:top="5dp"/>
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#ff0000" />
</shape>
</item>
</layer-list>
So in my case I just need to change 10dp/5dp to 2dp/1dp to get 2 thin horizontal lines.
How can I apply stroke to a button's only two sides that is LEFT border and RIGHT border? in android.
I have apply the following code but it's not working
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- This is the main color -->
<item>
<shape>
<solid android:color="#EEEEEE" />
</shape>
</item>
<!-- This is the line -->
<item android:right="1dp">
<shape>
<solid android:color="#333333" />
</shape>
</item>
<item android:left="1dp">
<shape >
<solid android:color="#333333"/>
</shape>
</item>
</layer-list>
You were on the right track. This will do the trick:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#EEEEEE" />
</shape>
</item>
<!-- This is the line -->
<item android:right="1dp" android:left="1dp">
<shape>
<solid android:color="#333333" />
</shape>
</item>
</layer-list>
And use this as the background for your button. Just tested it - works just fine.
I would suggest using a 9-patch drawable that looks like this:
It has the required black border, 1px on each side of the 0x333 color and the rest is filled with 0xeee. 9-patches scale with the size of the view that they are applied to. So you can use it as a background or src