I want to create a composite view with corners that looks like this:
How it this possible in Android?
If someone have the same problem, best way is use 9.png drawables. In xml it's not possible.
You can achieve that with using <vector in a custom drawable file, here invert_shape.xml:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="200dp"
android:height="200dp"
android:viewportWidth="400"
android:viewportHeight="400">
<path
android:pathData="M3.146,256.500 L3.146,73.449 C41.770,72.388 72.757,41.041 72.757,2.500 L271.500,2.500 L271.500,256.500 L3.146,256.500 Z"
android:fillColor="#eeffcc"
android:strokeColor="#000000"
android:strokeWidth="5"/>
</vector>
After that you need to set this drawable as android:background of your LinearLayout in your activity_main.xml like this:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/linear_layout"
android:background="#drawable/invert_shape"
android:layout_centerInParent="true"
android:orientation="horizontal" />
The result:
You may asked yourself how to achieve the android:path in your <vector, I used a simple solution for that. You can use programs like Photoshop or Illustrator and create your shape there in a layer. If you have done that, right click on your layer and select "Copy SVG". Now you copied the shape, paste it in your drawable (here invert_shape.xml) in Android Studio and you will get parameters like android:path and android:stroke of your photoshop shape. Get rid of the unnecessary paramteres and make sure you use the right attributes in the XML itself. Now, there's no end for your creativity. Cheers! :)
You can able to give the OneSide Corner with set the below frame as background to the layout.
<?xml version="1.0" encoding="UTF-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="1dip"
/>
<solid
android:color="#3D2A1D"/>
<corners
android:radius="20sp"
android:topRightRadius="0dp"
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"/>
</shape>
I am not sure with the -ve border radios.
Related
I need to draw outline stroke on text in MaterialTextView. I saw that it is not that easy to do in older questions.
(In this for example: How do you draw text with a border on a MapView in Android?).
Is something changed right now? If we need to set it programmatically, can anyone help me with Kotlin method for this and explain how to make it? I saw answers but I don't know where to create attrs.xml file I never used it before.
You could define a rectangle shape in the res/drawable folder, let's call it rect_border.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<stroke android:width="2dp"
color="#000" />
</shape>
And use it as android:background for your MaterialTextView:
<MaterialTextView
...
android:background="#drawable/rect_with_border" />
I'm working on a project in android studio and I'm trying to change the border to my button.
My default button when I just add it to my grid look like this:
After adding new XML file (called box_solid_border.XML) in the drawable file that looks like this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<stroke
android:width="4dp"
android:color="#000000" />
</shape>
the result is that it's creating the next shape that I can see:
and that exactly what I want to add to my button.
when I come back to my XML at the main file and add to my button the next line:
as you can see in line 226 I'm adding the background that I just created for this button to the button. and near the line, there is the exact border that I want.
but in the application, the button still stays the same as the default one with no border added to him.
Like this:
Does someone know the reason that the drawable file doesn't affect the button?
If I'm doing the same thing for a textView or something else its works perfectly fine, just the button looks like not affected by the drawable extension to him.
Thank you!
You need to add this attribute to your button:
app:backgroundTint="#null"
If it has both attributes android:background and app:backgroundTint(if you are using the default theme for your application, it has a default value), the color specified by app:backgroundTint will be cover on the shape of drawable.
For border to button try to edit box_solid_border.xml in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:color="#color/black"
android:width="5dp"/>
<corners
android:radius="8dp"/>
<solid
android:color="#color/colorAccent"/>
</shape>
In layout xml file
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/box_solid_border"
android:text="Button"
android:textColor="#fff"
android:textSize="30sp" />
i design my app in photoshop and i create most of my design but i cant create this shape:
but i only can create rectangle with code below
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size android:width="80dp" android:height="30dp" />
<solid
android:color="#color/blue"/>
</shape>
anyone can help me?
thanks for yr reply
Do you absolutely need it to be an android shape? Or could you simply use a png?
Check this out on how to make a custom button: http://developer.android.com/guide/topics/ui/controls/button.html
Or for the most flexibility add an imageview:
http://developer.android.com/reference/android/widget/ImageView.html
And then set an ontouch listener to it:
How to implement touch listener on image?
Hope this helps.
I want to show edit text box with two sides. so, for that i need to create a rectangle shape with two sides. PLease help some one.
create a drawable under drawable folder and add the belwow contents (border.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<solid android:color="#color/black" />
<stroke android:width="1dip" android:color="#color/white"/>
</shape>
Now set the Background of the EditText to this draw able like :
android:background="#drawable/border"
I think the best way to do this is to create a 9-patch in PhotoShop with required border sides... there are also several other ways... depends on your design.
What I'm trying to do will work better with an example image. As you can see below I have a grey background, ontop of that sits a container with some padding containing an image. The container also has a slight dropshadow to it.
What I want to know, is if there's so non-painstaking way of doing this in my layout.xml? In a normal HTML document this would've been easy. But since this is for a mobile app and for a number of screen resolutions and so on, it's proving a bit difficult.
Any advice?
Edit: I eventually settled using a 9patch image. Everyting went really smooth in the creation of it but when I actually use it in my app I see these dark stripes on the right and bottom of the image. The dropshadow seems to work, it's a very light dropshadow.. but those darn stripes??
You can provide a border to a view by writing an xml file (say editBorder.xml) in drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke
android:width="5dp"
android:color="#EBDDE2" />
<padding
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="4dp" />
<gradient
android:centerColor="#color/white"
android:endColor="#color/white"
android:startColor="#color/white" />
<corners android:radius="8dp" />
</shape>
and to provide this border, use statement in ImageView as android:background="#drawable/editBorder"
This should solve your problem. :)
This can be done with proper padding and 9 patch image. See this link, may be it can help you.
ImageView having two property android:background and android:src
http://developer.android.com/reference/android/widget/ImageView.html
Create a blank white frame with drop shadow(Photoshop recommended).
So just do this
<ImageView android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/image"
android:background="#drawable/whiteFrame"
android:padding="10dp" >
</ImageView>
I found this imageView . It's may good for you