I would like to display a count inside a red circle that displays the news entries for that item. Like email count, know?
Is there anyway that i can do it or the best way is to create a new TextView and implement it?
Thank in advance.
Use a TextView with a background image like so:
<TextView
android:id="#+id/count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/mybackground"/>
The background image is preferably a 9-patch drawable (http://developer.android.com/tools/help/draw9patch.html) or it could be 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="#FF0000"/>
<corners android:radius="4dp"/>
</shape>
This one would draw a red rectangle with rounded corners but you can create any shape you like (http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape)
If you don't want the text to be centered (like at the right bottom corner) you have two options:
Option 1
Make the TextView larger than it would be when just wrapping around the text (which is the default). So either use match_parent for android:layout_width and android:layout_height or set an absolute size (in dp). Also use the gravity parameter to position it at the right bottom corner:
<TextView
android:id="#+id/count"
android:layout_width="100dp"
android:layout_height="100dp"
android:gravity="right|bottom"
android:background="#drawable/mybackground"/>
Option 2
Use padding to move the text in the direction you need it to move:
<TextView
android:id="#+id/count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingLeft="10dp"
android:background="#drawable/mybackground"/>
Using two views on top of each other is of course possible too but inefficient. You'd need at least an extra ViewGroup (e.g. FrameLayout) around the TextView (for the counter) and the ImageView (for the background) to make sure they are positioned above each other, meaning you'd replace one TextView by three other views. Also you'd still have to set the size of the enclosing ViewGroup to something bigger than the TextView so there's nothing gained with that solution.
Related
I am trying to create a complete circular Layout so that if i put any content inside that layout. That content should be inside the circle. How is that possible ? I tried the following way. But the shape is not circular all the time. Sometime it becomes oval depending on the space. How to keep the layout circular all the time and content should come inside it ?
<LinearLayout
android:id="#+id/zodiac_Layout"
android:layout_width="100dp"
android:layout_height="100dp"
android:orientation="vertical"
android:background="#drawable/circular_background">
<ImageView
android:id="#+id/zodiac_img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="2dp"
android:adjustViewBounds="true"
android:src="#drawable/sunrise" />
<TextView
android:id="#+id/zodiac_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="5dp"
android:text="#string/na"
android:textColor="#fff"
android:textSize="#dimen/nakshatra_text_size" />
</LinearLayout>
This is the circular_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#50514F"/>
<size android:width="5dp"
android:height="5dp"/>
</shape>
What if I make the ImageView match_parent. It comes out of the circle shape of the Layout. I want the content to be cropped along the circular shape of the layout.
Due to what we have chatted in the comments. Now I know what you real want is the Circular crop to your ImageView and also a TextView. So after a dedicated work I have decided to form the solution that will result to an output that is shown in the image below:.Dont worry about the textView you can position it anywhere. Even on top of the image! And change its size! First you will have to know there is no default implementation on this meaning there is no default View class that provides Circular cropped Views in android. So here are the two alternatives for solving this trick using XML ONLY!
FIRST ALTERNATIVE ( BEST OPTION )
We are going to use a FrameLayout which is a layout that add Views on top of each other. That means if you put the first then the second will be on top of the first etc.
Requirements
To fit an image well in a circular view then it should be SQUARE(this is just logical) so you we will need to set width and height equal values.
We will need a circular shape with stroke (The idea is to put it on top of a well calculated view sizes!)
Inside your drawable folder make a file called circular_image_crop.xml. And paste the code (dont worry will describe it later!) do not forget to read the comments in it:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#00ffffff"/>
<!--The above colour is completely transparent!-->
<stroke android:width="20dp" android:color="#ec407a" />
<size android:width="140dp" android:height="140dp"/>
</shape>
After making that drawable file we will have to make our FrameLayout (This frame layout is not a root view of any view just copy it inside any view you want to show this layout) Go on and paste the code below (we will explain it later!) again read the comments in it:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ec407a">
<!-- This is our framelayout! Notice our background color is the same as the one in the stroke of our drawable. Also this is your image view notice the it has width and height similar (square) do use match parent or wrap content just define a square and views will be position by adjust view bounds true-->
<ImageView
android:id="#+id/image_view_user_profile_image"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp"
android:adjustViewBounds="true"
android:contentDescription="#string/your_image_description"
android:src="#drawable/your_image" />
<!-- Ooh here we have another image! This is an image just for displaying our drawable and crop our image (how?? dont worry!) -->
<ImageView
android:layout_width="140dp"
android:layout_height="140dp"
android:layout_gravity="center_horizontal"
android:contentDescription="#string/also_your_image_description_if_any"
android:src="#drawable/circular_image_crop" />
<!--This text view we almost forget here it is!-->
<TextView
android:id="#+id/your_text_view_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="8dp"
android:layout_marginTop="125dp"
android:gravity="center"
android:text="John Nanai Noni"
android:textColor="#ffffff"
android:textSize="16sp"
android:textStyle="bold" />
</FrameLayout>
How it works and customizations!???
The good thing is that we used our Frame Layout and position our real View at the centre horizontal(square image). The we made our drawable which is a circular and also have a circular hole(space) at the centre which matches the height and with our picture. Lastly we add our textview and put on top of all those but at the bottom (it should not obscure out image right?). So the way that we can understand this is viewing the following image as an outline to whats needed.(dont think its complicated):So from there we can see how it went on the image at the middle the Circular crop and etcThe next stage:From there we can apply the same background colour to our whole layout (FrameLayout) to hide the Circular things and leave our own visible space. And yes we have finished our layout! What about customization.
Customization
For colours you can put your own colour anywhere in the FrameLayout background well as well as the stroke of the drawable. But never change the <solid> colour it should always be completely transparent always.For customization of the radius of the circular crop lets dig into its mathematics formula to figure out the coverage of the image!Mathematics
Let your width or height(the image is square remember) of your image be x dps. Then the values in your drawable are
stroke= 0.2071 * x
size(height and width)=stroke + x
You can 2 or 3 dps for elimination of truncation errors!
Actually the mathematics behind is based on the formula below. The formula works if your interested how comment below:
SECOND ALTERNATIVE
Another alternative which I think is good for someone who DOES NOT care about the space between the circular view is by making the ImageView inside the CardView and making the corner radius half the size of the CardView for example this code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="280dp"
android:layout_height="280dp"
android:layout_gravity="center_horizontal"
android:layout_margin="30dp"
app:cardCornerRadius="140dp"
app:cardElevation="12dp">
<ImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:src="#drawable/login_back_ground" />
</android.support.v7.widget.CardView>
This is an output I get In android Studio. Also I cant guarantee how is this is going to look like in various devices especially old ones!
CONCLUSIONBoth methods are good and useful. Understanding both can even lead to more customizations like making using the first alternative with the second to bring about customizations like adding elevations of circular image. But the first method fits number of daily uses and it also bring equal experiences to all android devices. I hope this will even help future users who might have the same problem.
I am using a shape in order to make my button look round and have a background (from the layouts folder):
main layout:
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/registerButton"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="#layout/circle_button"/>
circle_button.xml:
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:layout_width="wrap_content"
android:layout_height ="wrap_content"
android:id = "#+id/circle_background">
<solid android:background = "#drawable/start_record_icon"></solid>
</shape>
problem is, I want to change the background of the shape to a given icon (also a drawable) according to some variables in the activity. If I define a background in the XML, how can I change it dynamically? (I could create 3 different layouts of shapes with different backgrounds but that seems stupid)
Thanks in advance!
Edit: So what I'm getting now is something like this (if I change the color of the solid in the shape to white, because otherwise the icon doesn't show at all and I see nothing. Buttons in the right bottom corner):
So I have a few problems, actually: one is that I cannot set the size of the buttons (if I try to set in the <Button>, it becomes square; if I try in the shape or in the solid it does nothing), second is that I cannot apply the icons or change them.
You can do this using an ImageView, by calling setBackgroundResource(int resource) with your business logic.
ImageView imageView = (ImageView) findViewById(R.id.registerButton);
if (isCircle()) {
imageView.setBackgroundResource(R.drawable.circle_button);
}
else {
// TODO use different XML drawable
}
Within your layout XML, you should then specify equal width and height, and use the src attribute to set your icon.
<ImageView
android:layout_width="72dp"
android:layout_height="72dp"
android:src="#drawable/my_icon" />
I am trying to add gradient to an imageview on both top and bottom side of the image. I dont want to add a textview on top of image view. How do I implement it?
It appears that your simple and clean solution would be to wrap ImageView with FrameLayout and use foreground property as follows:
Layout
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:foreground="#drawable/gradient">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/male"/>
</FrameLayout>
And gradient just in case
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#33000000"
android:centerColor="#android:color/transparent"
android:endColor="#33000000"
android:angle="90"/>
</shape>
Produces this:
A FrameLayout is relatively simple structure which will not add complexity to your view hierarchy, as opposed to RelativeLayout for example, which will cause extra measurements.
If you absolutely have to avoid adding any extra wrapper views, then your next option would be creating a CustomView, extending from ImageView and overriding onDraw() method and manually covering your existing canvas with pixels from gradient bitmap.
I have been struggling with this for several days now and I ran out of ideas.
In my listview, each row can have a vertical bar flushed left with a different color depending on status. That "bar" has no other purpose than visual representation of status and is not clickable.
I implemented the vertical bar using an ImageView with background set to a drawable which has the desired color. The problem is that the vertical bar doesn't stretch, it's only 1 pixel high even though I specified fill_parent.
The row layout is like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/id1"
android:scaleType="fitXY"
android:layout_width="5dp"
android:layout_height="fill_parent"
android:background="#drawable/d1" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/id1">
...
(leaving content of the second relative layout out on purpose for simplicity)
My drawable d1 looks 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="#color/c1" />
<corners android:topRightRadius="5dip" android:bottomLeftRadius="5dip" />
</shape>
So,
Why isn't the ImageView stretching vertically?
Is there a better way to implement
this than using an ImageView? (I
tried a simple View with a
background color but it doesn't show
up at all)
Any help greatly appreciated. Thanks
First off, you may as well be using a horizontal LinearLayout here instead of a RelativeLayout (since you only have two children anyways, you're not really saving any layout complexity the way you're using it).
Changing to a LinearLayout may fix this, but I suspect you may be running into a specific issue when it comes to matching heights on inflated RelativeLayouts as rows; see the comments on the answer to this SO question and this SO question.
I've setup a LinearLayout with the following drawable background:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="10dp" />
<solid android:color="#CCFFFFFF"/>
</shape>
The problem I'm having is within the LinearLayout I have another LinearLayout element that sits at the bottom of it's parent. Since that doesn't have rounded corners its corners extend past the parents bottom left and right corners.
The drawable background on the Child LinearLayout looks like this:
<?xml version="1.0" encoding="utf-8"?>
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/pedometer_stats_background"
android:tileMode="repeat"
/>
The issue looks like this: http://kttns.org/hn2zm on the device the non-clipping is more apparent.
What is the best method to accomplish the clipping?
2018 Update
A lot has changed in the last 7 years.
The best way to handle this type of layout these days is to use CardView which has built in support for rounded corners and many other newer UI features as well.
Apply the cardCornerRadius property to set the corners to round.
<android.support.v7.widget.CardView
.......
app:cardCornerRadius="16dp">
</android.support.v7.widget.CardView>
Original
I needed iPhone-style rounded layouts, with a grey background behind them. (sigh - always copying the iPhone)
I was frustrated I couldn't find a way to mask a layout. Most of the answers here say to use a background image, but this is not what I needed.
Edit: Previous answer suggested using a FrameLayout and setting the android:foreground drawable. This introduced some strange padding into the view. I have updated my answer to use simpler RelativeLayout technique.
The trick is to use a RelativeLayout; place your layout inside it.
Below your layout, add another ImageView, setting its background to a suitable masking image frame. This will draw that on top of your other layout.
In my case, I made a 9Patch file which was a grey background, with a transparent rounded rectangle cut out of it.
This creates the perfect mask for your underlying layout.
XML code is below - this is a normal layout XML file:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content" android:layout_width="fill_parent">
<!-- this can be any layout that you want to mask -->
<LinearLayout android:id="#+id/mainLayout"
android:layout_height="wrap_content"
android:layout_width="fill_parent" android:orientation="vertical"
android:background="#android:color/white">
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content" android:layout_gravity="center"
android:text="Random text..." />
</LinearLayout>
<!-- FRAME TO MASK UNDERLYING VIEW -->
<ImageView android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:background="#drawable/grey_frame"
android:layout_alignTop="#+id/mainLayout"
android:layout_alignBottom="#+id/mainLayout" />
</RelativeLayout>
Note the ImageView at the bottom, aligned top & bottom to the main layout, with the masking image set:
android:background="#drawable/grey_frame"
This references my 9Patch file - and masks the underlying layout by being drawn in the foreground.
Here is an example showing the grey rounded corners over a standard layout.
hth
API level 21 (Lollipop) added View.setClipToOutline. From Android documentation on Defining Shadows and Clipping Views:
To clip a view to the shape of a drawable, set the drawable as the background of the view ... and call the View.setClipToOutline() method.
I tested this by setting a parent View's background to a GradientDrawable with a corner radius, and child Views are correctly cropped to match the same rounded corners of the parent.
What your describing sounds like this:
<LinearLayout android:shape="rounded">
<LinearLayout android:background="#drawable/pedometer_stats_background">
</LinearLayout>
</LinearLayout>
And the inner layout is pushing outside the rounded corners because it isn't rounded. You'll have to round the corners of your bitmap. If you have a repeating bitmap you'll want to look at defining a nine-patch drawable. Round your corners then define the portion of the graphic that can expand.
http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape
It'd be nice if we could just add a bitmap to the shape drawable and have that be applied as a skin over whatever shape we're drawing. And, I bet if you know what your doing you could create a Shape subclass that draws a bitmap, but that's not included in Android out of the box unfortunately.