Custom Shapes with text in Android - android

I am new to android. I want to draw a custom shape in android. When someone chooses a date(via date picker) I want to display the result in a square box rather than the regular way.How do I achieve this?

You can use a textview to show the selected date. Since you seem to know the coding for that, I focus on the design you can apply for your textview.
By default, a textview has a rectangular shape with sharp edges and points, but you can achieve a rounded-corner textview using a style , like this one :
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:width="1dp"
android:color="#color/red"/>
<corners android:radius="7dp" />
<padding
android:left="1dp"
android:right="1dp"
android:top="1dp"
android:bottom="1dp"/>
<solid android:color="#color/white"/></shape>
The corners tag, is responsible for the rounded corners, you can tweak th radius to make more or less rounded.
Stroke tag, defines the width and color of the border for the textbox.
and Solid tag determines the bakcground color of the view.
In order to use this style, you should save it as an XML file and save it in drawable folder (normally drawable-hdpi will do). Then , in your tetxview or edittext you should set the background property as the following :
android:background="#drawable/thesavedxmlfile"

Related

How to set background color of an image, but within the border?

My goal is to display a circular image, and allow the user to set its foreground and background colors respectively, for example:
My attempt was to create an image asset with transparent background, then use ImageView::setColorFilter to change its foreground, and use ImageView::setBackgroundColor to set its background. The image asset looks like this:
My problem is that pixels outside of what we humans call 'border' are also transparent, so the result looks like this:
How do people usually deal with this issue? Although I was doing Android development, but any ideas or code snippets in any language are appreciated!
at the first, you must create a new drawable file and write below code for creating the circle with yellow color with blue border:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#cab816" />
<size android:width="50dp"
android:height="50dp"/>
<stroke android:width="2dp"
android:color="#color/darkBlue"/>
</shape>
and now you must set this drawable to the background of your imageview and set your image with src.
if your image covered all of this circle, use padding for decrease image size.

Gradient like this?

I'm not UI designer so I can't feel xml colors enough, I want to make gradient like this:
http://t1.uccdn.com/en/images/6/5/2/img_2256_ins_45517_600.jpg
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:startColor="#1f313d"
android:endColor="#2c3942"
android:angle="135"/>
</shape>
</item>
but... I think that 2 colors are not enough, how to make it similar gradieƱt to this image then? *last screen
How to create Gradient ??
Create Gradient is very easy
Right click on drawable folder and create xml file.
Create shape Tag
Inside shape tag create gradient tag
Gradient Properties........
android:startColor="put here your color"
android:endColor="put here your color"
android:centerColor="put your color here"
android:angle="45"
if you need gradient in
horizontal way put angle = "0"
vertical way put angle = "90"
corner horizontal way put angle = "45"
and opposite of corner horizontal way put angle = "135"
use this .......
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:startColor="#915d5b"
android:endColor="#418c47"
android:angle="45"></gradient>
</shape>
enjoy coding.......
Or you could simply use Gradient Generator tools at AngryTools, which is much easier and fun to use.

rounded view's corners android, NOT round background

I know how to give round borders using XML in Android. I thought it would be cool to make the radius of one corner of my textView excessively large. The problem is, the text keep spilling out. Can I make my textview have a TRULY round corner? (Not just the background). If this was CSS this would be so easy. I am new to Android.
So in terms of CSS, I want to set my overflow to hidden so to speak.
Please help me.
In short, no. All Views are rectangular and fit in bounding boxes.
The best way to achieve rounded corners is the way you mention; using a shape drawable with corner radius set as the background to your TextView.
Like ataulm said, all Views are rectangular.
Create a shape drawable allows you to create a background with rounded corners. You'd have to use padding to make sure the text doesn't clip in certain areas.
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ffffffff"/>
<stroke android:width="4dp"
android:color="#ff0000"/>
<padding android:left="4dp"
android:top="4dp"
android:right="4dp"
android:bottom="4dp"/>
<corners android:bottomRightRadius="7dp"
android:bottomLeftRadius="7dp"
android:topLeftRadius="7dp"
android:topRightRadius="7dp"/>
</shape>

How to control the gradient on a shape?

I have a screen with a label on top. This label is done with a TextView.
As a background I'd like to have a vertical gradient, starting with color1, changing to color2 and back to color1.
At the moment I have:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:width="1px" android:color="#000000" />
<gradient
android:startColor="#FFFFFFFF"
android:centerColor="#FF8800"
android:endColor="#FFFFFFFF"
android:type="linear"
android:angle="270"
/>
<corners android:radius="10dp"/>
</shape>
My problem is that the centerColor line is too thin. I want it to ocupy all the letters space.
I can't find any way to make the gradient to be faster.
I've already tried to use a layout-list but with no success.
Any idea?
This is a much more different track to follow but have you considered working with 9-patch image files? This will allow you to stretch the parts of the gradient that you wish to and make the centre line as big as needed by segmenting up the background properly.
Here are some great tutorials I have used to learn about them:
draw 9 patch tutorial
And from Google's own Android mouth:
Android 9 patch
All Drawable resources for Android

Android Rounded Edges for backgrounds

I was wondering if anyone knew how to make rounded background edges for only certain corners.
For example, in the lock screen of Android 2.2 there were the two slidingDrawers to unlock the phone and take a picture or something.
The slidingDrawers had a rounded corner with an icon within it. Anyone know how to make the corners of a background rounded?
There are lots of ways in achieving that.
You could use a 9patch drawable, and I'm guessing that's what they used.
You can also use a shape drawable, with proper corners.
Other than that, your question is too ambiguous. But this should provide enough for a good answer to your problem.
you can create a xml file inside the drawable folder with some code like this ,
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF"/>
<corners android:radius="5px"/>
<padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" />
</shape>
change the radius values for the amount of rounded edge you need. Apply this xml as the background of your textview or edittext or anything.

Categories

Resources