How to make outlined speechbubble with layer-list? - android

I have some type of chat in my app and want to achieve, to have and outlined speech-bubble as background for my messages.
I´ve already created a shape, which looks like this, but i cant achieve, to have this real chat-speech-bubble-shape like this (i painted this with windows paint program).
So my question: Is there wa way to create this shape as outlined drawable xml file, and if so, can anyone help me? I´ve found just the shapes: line, oval, rectangle. Can we create with these such an speechbubble. Here´s the code for my xml drawable (without speechbubble-shape):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<stroke android:width="2dp" android:color="#color/colorPrimary"/>
<corners
android:radius="7dp">
</corners>
</shape>

Related

How to glow effect behind the edit text like in the image?

I am trying to get a glow effect like the background for edittext
I tried doing it but the background is not as much effective as the image
<?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="#68F30606"/>
<corners android:radius="10dp" />
</shape>
</item>
<item
android:left="1.7dp"
android:right="1.7dp"
android:top="1.7dp"
android:bottom="1.7dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white"/>
<corners android:radius="10dp" />
</shape>
</item>
</layer-list>
Can someone help me to solve this mystery?
Then you will need to use the old-technique(kind of) of 9-Patch Drawing. I used to do it too. Examples are scarce because they are big, but there is documentation.
Documentation: https://developer.android.com/studio/write/draw9patch.
Also, if this helps you can check this too: Outer glow in edittext
To use the 9-Patch images in Xml to this (remember this is after you have created the 9-Patch Images):
Reference the drawable with the name but don't include .9.png (auto-complete in eclipse will take care of this)
Make sure you only have 1 image under the main /drawable folder (not a version for each dpi folder)
The image must be specified using :background, not :src (this got me stuck for a while)
android:background="#drawable/splash_logo"
Make sure the image and layout that contains it are using:
android:layout_width="fill_parent"
android:layout_height="fill_parent"
Credit To: Creating & Using 9-patch images in Android
Also, check this website out, it contains a lot of useful examples that the documentation doesn't provide:
https://tekeye.uk/android/examples/ui/android-9-patch-image-files

How to draw a semi-oval shape using shape drawable in xml (Android)

I am struck at this problem of creating the UI in android. I need a xml-based solution to this problem. I don't want to use any SVG or PNG image to achieve the solution. Is there any way to achieve this of view in android.
You should be using a <layer-list> element of xml to draw such a UI.
Following code will be used to create oval shape:
<shape android:shape="oval"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#AAAAAA"></solid>
<size android:height="100dp"
android:width="60dp">
</size>
This leads to the following shape:
Once you know how to draw an oval shape using xml. Now next step for you is to learn how to use <layer-list> to achieve desired output. To learn using <layer-list> you can follow this tutorial.
By creating a new drawable file which will describe the look of the widget you want to draw,more or less.You can then set it as background for which widget you want to change the original look of. I would recommend starting with rectangle if you want to achieve the shape shown in your question. the drawable file will look something like this:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#000"/>
<corners android:radius="150dp"/> <!-- The value here should specify How much ovally you want shape be -->
</shape>
and then assigning the background of the widget to this drawable should do the trick, something like this:
<LinearLayout
android:background="#drawable/oval">
Hope this was helpful :D

Android Studio: Chat box layout

I want to edit a TextView widget in such way that it looks like a message box (see the picture)1. However, right now I only have a rectangle shape with rounded corners, but I want it to look exactly like the picture.
Code:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners android:radius="10dp"/>
<solid android:color="#FFFFFF"/>
</shape>
</item>
</selector>
use 9-patch image provided by android studio itself. because the edittext scale according to the text entered by user. 9-patch can scale the image properly. But you have to first create the image using photoshop or some other software. google it. you will find.
tutorial for 9 patch

Custom ImageView shape drawable in xml like this one in android

I want to create an ImageView like this one. I know it's a combination of a rectangle and a triangle shape,
but I really don't know how to implement it.
Is it possible in XML?. Does layer-list seem to help in this case?. I would like to have some example drawable xml codes
In XML you can create:
rectangle
oval
ring
line
gradient
and more
Image like this difficult or impossible create in XML, try use vector (.svg) files
Convert .PNG to .SVG
P.S. you can create image like this:
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#EC6118"/>
<corners android:bottomRightRadius="7dp"
android:bottomLeftRadius="0.1dip"
android:topLeftRadius="7dip"
android:topRightRadius="0.1dp"/>
</shape>
</item>
</selector>

How to create a rectangle shape with 2 sides in android

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.

Categories

Resources