I am trying to get a TextView with white background and rounded corners and text in the middle.
Something that looks like this:
So far I have this but it is not giving me the above effect.
<TextView
android:textColor="#000000"
android:background="#FFFFFF"
android:text="0" />
First of all, I would create a custom drawable resource for easy implementation of rounded corners.
(place this in res/drawable)
my_bg.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid
android:color="ffffff" />
<corners
android:radius="15dp"/>
<stroke
android:width="1dp"
android:color="#android:color/black" />
</shape>
More info on xml drawable resources can be found right here if you want to get into more advanced drawables (gradients, layer-list, animation, etc...)
Then change your TextView in xml layout file to match this:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:textColor="#000000"
<!--refer to your custom drawable from earlier-->
android:background="#drawable/my_bg"
<!--center text within TextView-->
android:gravity="center"
android:text="0" />
I hope this helps, Happy Coding!
Set the gravity
android:gravity="center"
http://developer.android.com/reference/android/widget/TextView.html#attr_android:gravity
You are missing the width and height attribute for TextView.
For the rounded corners use a Shape Drawable
http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape
Under res/drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
>
<solid android:color="#FFFFFF"/>
<corners android:radius="7dp" />
<stroke android:width="5px" />
</shape>
Then
<TextView
android:layout_width="100dp"
android:layout_height="50dp"
android:background="#drawable/background"
android:gravity="center"
android:text="0"
android:textColor="#000000" />
Snap
Related
I am using android studio, and I try to do some work on UI using some buttons.
I have created a background for some buttons, but when I apply this background on the buttons, the text inside the butons is not centered.
I think the marginof the button remains the same, whereas the applied background creates a smaller square than the marginn of the button. I don't know how to make the margin of the button fit the margin of the square coded in the background xml file.
Here the picture of the problem :
pic1
Here is the code of the background (bg_rectangle_grey.xml) :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:width="#dimen/_34sdp" android:height="#dimen/_34sdp">
<shape android:shape="rectangle">
<stroke android:width="1dp" android:color="#ff6c7780" />
<corners android:radius="3dp" />
</shape>
</item>
</layer-list>
And here is the code of the xml file with the button :
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="#dimen/_15sdp"
android:style="?android:attr/buttonBarStyle">
<Button
android:style="?android:attr/buttonBarButtonStyle"
android:background="#drawable/bg_rectangle_grey"
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="M" />
I have looked for answers on google but it was never exactly what I am looking for.
If anyone can help.
Thank you in advance
Just use gravity center in button
<Button
android:style="?android:attr/buttonBarButtonStyle"
android:background="#drawable/bg_rectangle_grey"
android:id="#+id/button4"
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="M" />
Please remove android:width="#dimen/_34sdp" android:height="#dimen/_34sdp" from below code and try again.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:width="#dimen/_34sdp" android:height="#dimen/_34sdp">
<shape android:shape="rectangle">
<stroke android:width="1dp" android:color="#ff6c7780" />
<corners android:radius="3dp" />
</shape>
</item>
</layer-list>
I want to put a large text over a round image with background image.
Like this:
Try this:
Create a xml file in drawable folder: circular_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#B72854" />
<padding
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp" />
<size
android:width="15dp"
android:height="15dp" />
</shape>
Then add this line in your TextView background:
<TextView
android:id="#+id/textview"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="FB"
android:textColor="#fff"
android:textSize="20sp"
android:background="#drawable/circular_bg"
android:gravity="center_vertical|center_horizontal"/>
It will help you. :)
Best way to used Button and set background drawable look.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#android:color/holo_red_dark" />
</shape>
After set this drawable button background and set text.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<Button
android:id="#+id/button"
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#drawable/button_background"
android:text="FB"
android:textColor="#android:color/white"
android:textSize="35sp" />
</LinearLayout>
You can do it in two ways,
if you are actually using a graphic image, use a relative layout and place the image view and textview as a child of it. And make sure you keep the textview with the centerInParent parameter.
if you do not need a graphic asset, you can create a custom drawable, and set that as a background to your textview.
The custom drawable can be something like this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="28dp" />
<solid android:color="#color/THEME_GREEN_DARK" />
</shape>
and then you can just add it as a background to your textview. also, change your radius as per the size of circle you need!
There are so many libs to do that
add this to build.gradle
repositories{
maven {
url 'http://dl.bintray.com/amulyakhare/maven'
}
}
dependencies {
compile 'com.amulyakhare:com.amulyakhare.textdrawable:1.0.1'
}
<ImageView android:layout_width="60dp"
android:layout_height="60dp"
android:id="#+id/image_view"/>
Note: Specify width/height for the ImageView and the drawable will auto-scale to fit the size.
TextDrawable drawable = TextDrawable.builder()
.buildRect("FB", Color.RED);
ImageView image = (ImageView) findViewById(R.id.image_view);
image.setImageDrawable(drawable);
Hope this helps. Thanks
circular_drawable.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="#ff1e8f" />
<size
android:width="120dp"
android:height="120dp" />
<corners
android:bottomLeftRadius="65dp"
android:bottomRightRadius="65dp"
android:topLeftRadius="65dp"
android:topRightRadius="65dp" />
</shape>
layout.xml
<TextView
android:layout_width="120dp"
android:layout_height="120dp"
android:background="#drawable/circular_drawable"
android:gravity="center"
android:textColor="#FFFFFF"
android:text="FB"
android:textSize="26sp"
android:layout_centerInParent="true"/>
How to show a textview with rounded corner rectangle as shown in the orginal image
in the above (original) picture, the button 2's left and right rounded corner are correctly shaped but in my code the left and right rounded corners are not shaped correctly
in the second picture I need to do more rounded as the 1st image. how can I do with following drawable?
drawable code (green_bg.xml)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#19D8C8" />
<corners android:radius="3dip" />
<stroke
android:width="10dp"
android:color="#19D8C8" />
</shape>
activity_main.xml
.......
<TextView
android:id="#+id/qmap_2"
android:layout_width="35dp"
android:layout_height="24dp"
android:layout_gravity="center_vertical"
android:gravity="center"
android:text="2"
android:textStyle="bold"
android:textColor="#color/no_color" />
......
create a file round.xml in drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#176d7a" />
<corners android:radius="50dp" />
</shape>
now set the background of textview like
<TextView
android:id="#+id/qmap_2"
android:layout_width="35dp"
android:layout_height="24dp"
android:layout_gravity="center_vertical"
android:gravity="center"
android:text="2"
android:textStyle="bold"
android:background="#drawable/round"
android:textColor="#color/no_color" />
it should work
Change the corner radius to a much higher value i.e 100dp
<corners android:radius="100dip" />
This is my first time am creating apps in eclipse. I have a TextView, I need to style it with borders. Something like we do in CSS border, but how will I do it in eclipse. I was searching on the Internet but can't really get to their point it was so confusing.
Here's the TextView code I want to style border too
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="18dp"
android:clickable="false"
android:linksClickable="false"
android:text="Send Vmail to:"
tools:ignore="HardCodedText"
android:textAllCaps="false"
android:textAppearance="?android:attr/textAppearanceMedium" />
Create an XML file like below in res/drawable. If there is no "drawable" folder, then create one.
Name the file a text_view_border.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#android:color/transparent" />
<stroke
android:width="2dp"
android:color="YOUR COLOR RESOURCE" />
</shape>
Then, in your layout files, to whichever textviews you want to give border style, apply that XML file as background
e.g
<TextView
android:background="#drawable/text_view_border" />
This will do it.
It's Very simple u can give border to any Layout or view directly eg: Linear layout or TextView ..etc
set attribute android:drawable="#drawable/myborder"
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="18dp"
android:clickable="false"
android:linksClickable="false"
android:text="Send Vmail to:"
tools:ignore="HardCodedText"
android:textAllCaps="false"
android:textAppearance="?android:attr/textAppearanceMedium"
android:background="#drawable/myborder" />
then create myborder.xml as:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:padding="10dp"
android:shape="rectangle" >
<!-- this one is ths color of the Border -->
<stroke android:width="3px" android:color="#FFFFFF" />
</shape>
put this file in res/drawable folder if not then create a drawable folder, and u are ready, to change color and width of border u can change it in xml: color="#color/mycolor" and width ="Npx" or ur choice. N=1,2,3...
in drwawable create a folder name as border_text.xml
Refer this in textview with background as this.
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#ffffff" />
<stroke android:width="1dip" android:color="#BDBDBD"/>
</shape>
<TextView
android:id="#+id/textView1"
android:background="#drawable/border_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"/>
Create a xml in drawable :
border_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="270"
android:endColor="#00FF00"
android:startColor="#FFFFFF" />
<corners android:radius="3dp" />
<stroke
android:width="5px"
android:color="#000000" />
</shape>
Use this xml as background in your TextView.
android:background="#drawable/border_bg"
You can also change color (using color code) and width of border.
Thank you.
I have a TextView defined in XML and i would like to set background color AND border to it.
Problem i have is that in XML i already use android:background for setting border resource, so i can't use it once again for background color.
Can someone please guide me to right direction?
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="#ffffff" />
<stroke android:width="1dip" android:color="#7F000000"/>
</shape>
TextView
<TextView
android:id="#+id/editor_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#drawable/title_border"
android:padding="5dp"
android:text="#string/editor_title"
android:textAppearance="?android:attr/textAppearanceMedium" />
You should create a XML drawable for this, which can then be set as your single background. Here is what you are wanting (a rectangle with a different color border - replace gradient with if you don't want that).
This will go in your 'drawable' folder:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:width="3dp" android:color="#color/blue_button_border" />
<gradient
android:startColor="#color/gradient_end"
android:endColor="#color/gradient_start"
android:angle="-90" />
</shape>
Via Java:
TextView c1 = new TextView(activity);
c1.setTextColor(getResources().getColor(R.color.solid_red));
c1.setText("My Text");
TextView test = (TextView) view.findViewById(R.id.textView2);
test.setBackgroundResource(R.color.holo_green_light);
Via XML:
<TextView
android:text="2"
android:textSize="200sp"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/textView2"
android:style="#style/textviewStyle"
android:background="#android:color/holo_green_light"
android:gravity="center"
android:textColor="#EEEEEE"
android:layout_alignParentRight="true" />
This is the API page about this topic: http://developer.android.com/guide/topics/resources/accessing-resources.html#ResourcesFromXml