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

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

Related

How to have multi-layered kind of shadow/gradient in Android

I am trying to achieve this layout. The upper part is a bit dark and it decreases as we move down making it complete transparent. I tried a couple of gradient variations but didn't get the desired results. Does anybody have idea of how to achieve this. Is it gradient or shadow ?
Create a gradient file and use this code you can increase or decrease transparency as you want
layout-->new file-->layout resource file--> give any name
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient android:startColor="#B71A1A1A"
android:angle="270"
android:centerColor="#00FFFFFF"
android:endColor="#00FFFFFF"/>
</shape>
</item>
</selector>

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

Button with Nine-patch or Style?

I'm making an app with custom buttons, but I want to know is it better to use the nine-patch tool or define styles and colors in xml. My buttons change in height and width but they do not have images, just words, something like this:
Please check this link also. What should i use for better performance, nine-patch or drawable xml resource?. Both approaches have is own merits. Select one option as per your situation
no you don't need to use nine-patch just give the width,height,and text sizes in values folder.
Seems like a fairly simple shape, you might as well use a shape to create the background.
first create a button_shape.xml file in drawable resource directory:
<?xml version="1.0" encoding="UTF-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:width="1dp"
android:color="#505050"/>
<corners
android:radius="7dp" />
<padding
android:left="1dp"
android:right="1dp"
android:top="1dp"
android:bottom="1dp"/>
<solid android:color="#505050"/>
</shape>
Now, assign it to the backround of you Button.
android:background="#drawable/button_shape"
You will need to change some of the color values to fit your needs

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.

Preventing shapes scaling in a LayeredList without using Bitmap

Trying to use LayerDrawable (defined in XML as layer-list) to layer several shape drawables onto one another; to be used as a background for a layout.
The Android guide (for LayerList) says:
All drawable items are scaled to fit the size of the containing View,
by default. Thus, placing your images in a layer list at different
positions might increase the size of the View and some images scale as
appropriate. To avoid scaling items in the list, use a <bitmap>
element inside the <item> element to specify the drawable and define
the gravity to something that does not scale, such as "center".
I don't want my shapes to scale, but I'm unsure how to wrap them in bitmap tags correctly: it produces an error if I do it as follows:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap
android:src="#drawable/layer_one"
android:gravity="center" />
</item>
<item>
<bitmap
android:src="#drawable/layer_two"
android:gravity="center" />
</item>
<item>
<bitmap
android:src="#drawable/layer_three"
android:gravity="center" />
</item>
<item>
<bitmap
android:src="#drawable/layer_four"
android:gravity="center" />
</item>
</layer-list>
Complaining:
Binary XML file line #25: <bitmap> requires a valid src attribute
An example of one of the drawables, e.g. res/drawable/layer_one.xml:
<?xml version="1.0" encoding="utf-8"?>
<!-- res/drawable/layer_one.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#FFFFFF"/>
<corners
android:bottomRightRadius="15dp"
android:bottomLeftRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp" />
</shape>
The example used on the Android site uses images as drawables, not XML-defined shapes (not to say that my error is specific to these, and that I haven't made a silly mistake somewhere). Any clues appreciated, thanks.
Using drawable resources
This question's answer states that you cannot use an XML drawable as the src for a Bitmap. I've amended the title of the question, to now ask how you can prevent shapes from scaling (thereby resizing the container view) without using bitmap, or am I forced to use actual image resources?
Added an image of the desired outcome - the ability to have a background with a regular rectangle filled shape or whatever, and then layered on top of this, more shape drawables (here there are 3 ellipses). On the left is ideal, where top and left offsets are allowed, and on the right is fine, where all shapes just go to a default position:
Yes, (as per my previous answer) you cant use xml drawable for bitmaps. It is fine to build, but when you run the app, it crashes.
Regarding the statement use a <bitmap> element inside the <item> element means that you can define further shapes in your layer-list and that's what it is for. Though you can also define Bitmaps but then your bitmaps should have a src value referring to solid image (not xml).
What you can do is to insert the layer_one, layer_two and other layer's xml into your layer_list xml. For example:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
android:shape="rectangle" >
<solid android:color="#FFFFFF" />
<corners
android:bottomLeftRadius="15dp"
android:bottomRightRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp" />
</shape>
</item>
<!-- and so on with your other shapes -->
</layer-list>
Hope it should work :)

Categories

Resources