I want to put a circle background on a textview. The circle becomes oval when its rendered.
My layout XML:
<TextView
android:id="#+id/amount_key"
android:layout_weight="1"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_marginRight="2dp"
android:gravity="center"
android:background="#drawable/circle"
android:layout_marginLeft="20dp"
android:text="3\ndays"
android:padding="20dp"
android:textColor="#ffffff"
android:textStyle="bold"
android:textSize="25dp" />
</LinearLayout>
My circle background:
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#79bfea"/>
</shape>
Change your textView's layout_height and layout_width to wrap_content
Add size tag inside shape tag as follows
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">>
<solid android:color="#79bfea" />
<size android:height="25dp"
android:width="25dp"/>
</shape>
If it is still oval, try increasing the width and height in size tag. It worked for me!
You can create your own Drawable which will constrain the radius to the min value between its width and height.
package com.example.android;
import android.graphics.Canvas;
import android.graphics.ColorFilter;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
public class ColorCircleDrawable extends Drawable {
private final Paint mPaint;
private int mRadius = 0;
public ColorCircleDrawable(final int color) {
this.mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
this.mPaint.setColor(color);
}
#Override
public void draw(final Canvas canvas) {
final Rect bounds = getBounds();
canvas.drawCircle(bounds.centerX(), bounds.centerY(), mRadius, mPaint);
}
#Override
protected void onBoundsChange(final Rect bounds) {
super.onBoundsChange(bounds);
mRadius = Math.min(bounds.width(), bounds.height()) / 2;
}
#Override
public void setAlpha(final int alpha) {
mPaint.setAlpha(alpha);
}
#Override
public void setColorFilter(final ColorFilter cf) {
mPaint.setColorFilter(cf);
}
#Override
public int getOpacity() {
return PixelFormat.TRANSLUCENT;
}
}
then apply to your textView:
textView.setBackground(new ColorCircleDrawable(Color.RED));
To get this
I used two LinearLayout inside each other and set parent gravity to CENTER
<LinearLayout
android:layout_width="80dp"
android:layout_height="50dp"
android:baselineAligned="false"
android:gravity="center"
android:orientation="vertical">
<LinearLayout
android:layout_width="45dp"
android:layout_height="45dp"
android:gravity="center"
android:background="#drawable/oval"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Text"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
and this is oval.xml inside drawable folder
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#393939" />
<size
android:width="40dp"
android:height="40dp" />
</shape>
without inner LinearLayout you'll get this
which it's code is
<LinearLayout
android:layout_width="80dp"
android:layout_height="50dp"
android:baselineAligned="false"
android:gravity="center"
android:background="#drawable/oval"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Text"
android:textSize="12sp" />
</LinearLayout>
I extended TextView class to set width as height
public class TextViewSquareShaped extends TextView {
public TextViewSquareShaped(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(attrs);
}
public TextViewSquareShaped(Context context, AttributeSet attrs) {
super(context, attrs);
init(attrs);
}
public TextViewSquareShaped(Context context) {
super(context);
init(null);
}
private void init(AttributeSet attrs) {
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
setMeasuredDimension(width, width);
Log.v("measure", "width:" + width + " height:" + width);
}
}
And then combined with above Sudhasri's answer, I can show exact circular text view.
So no need to give fixed height and weight.
Since you are using match_parent for width and height and setting drawable in background, so it will be oval. To achieve circle you can give same dimensions for width and height. NA dif want full screen then you can width from java code using WindowManager and set the same value in both width and height.
try ring instead of oval
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring" >
<solid android:color="#79bfea" />
</shape>
Related
I've create a custom TextView because I want:
its height to match certain constraints (top to top and bottom to bottom of another TextView)
its width matching that height so the oval shape xml set as background of the TextView shows a circle.
Here's the code of the custom View:
public class SquareTextView extends AppCompatTextView {
public static final String TAG = "SquareTextView";
int squareDim = 0;
public SquareTextView(Context context) {
super(context);
}
public SquareTextView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public SquareTextView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
#Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int h = this.getMeasuredHeight();
int w = this.getMeasuredWidth();
squareDim = Math.max(w, h);
setMeasuredDimension(squareDim, squareDim);
}
}
layout xml:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tv_registration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="16dp"
android:text="WW-WWW"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_aircraft_type"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MMMMMMMMM"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
app:layout_constraintStart_toStartOf="#+id/tv_registration"
app:layout_constraintTop_toBottomOf="#+id/tv_registration" />
<com.mydomain.SquareTextView
android:id="#+id/tv_counter"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginEnd="24dp"
android:background="#drawable/shape_circle"
android:gravity="center"
android:text="0"
android:textAlignment="center"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/tv_registration"
app:layout_constraintBottom_toTopOf="#+id/cv_ops_restrictions"/>
</android.support.constraint.ConstraintLayout>
</ScrollView>
shape_circle.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
<size android:width="50dp"
android:height="50dp"/>
<solid android:color="#android:color/white"/>
</shape>
Problem is that I want the text centered in the circle. Any pointers on how to achieve this or on what I'm doing wrong? at the moment it looks like this:
I'd like to recommend that you don't use a custom TextView subclass at all here. You're already working inside ConstraintLayout, which supports aspect ratios for its children. That means you can replace <com.mydomain.SquareTextView> with <TextView> and add this attribute to get a perfect square view:
app:layout_constraintDimensionRatio="1:1"
When we type an input value by using EditText, I want a horizontal line to be placed below my input like phone book application in all mobile phones.
Enter Phone : ___________
I want my input to be placed on this line. How can I do this by using EditText ?
Try this
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:layout_marginTop="2dp">
<EditText
android:id="#+id/Prac"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Practice"
android:inputType="text"
android:textSize="12sp" />
</android.support.design.widget.TextInputLayout>
You have to set width of EditText from match_parent to wrap_content line below code
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
You have to set width to either match_parent or to fixed width like 100dp
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
As everyone answer said set width and height to wrap_content this is the right answer but still their is another way to achieve this lets have a look.
First create a drawable file (myline.xml) which create the line.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="1dp"
android:left="-2dp"
android:right="-2dp"
android:top="-2dp">
<shape android:shape="rectangle">
<stroke
// You can change width according to your need
android:width="1dp"
android:color="#000000" />
</shape>
</item>
Now in your layout.xml use myline.xml in edit text background.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Enter Phone: "
android:textColor="#000"
android:textSize="18dp" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/myline"
android:textColor="#000"
android:textSize="18dp" />
</LinearLayout>
And its done see the output in screenshot below.
You can Try with CustomEditText Like Below code:
package com.cj.myapplication;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.widget.EditText;
/**
* Created by E069099 on 7/20/2017.
*/
public class CustomEdiTextWithLine extends EditText {
private Rect rect;
private Paint paint;
public CustomEdiTextWithLine(Context context, AttributeSet attrs) {
super(context, attrs);
rect = new Rect();
paint = new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.GREEN);
paint.setStrokeWidth(2F);
paint.setStrokeCap(Paint.Cap.ROUND);
paint.setTextSize(20);
}
#Override
protected void onDraw(Canvas canvas) {
//start at the vertical center of the textview
float top = (getHeight() + getPaddingTop() - getPaddingBottom())/2;
//start at the left margin
float left = getPaddingLeft();
//we draw all the way to the right
float right = getWidth() -getPaddingRight();
//we want the line to be 2 pixel thick
float bottom = getHeight()- getPaddingBottom();
canvas.drawLine(0,bottom,right,bottom,paint);
super.onDraw(canvas);
}
}
one method is,
make backgroundtint is black colour and set hint like below code
<EditText
android:layout_width="200dp"
android:layout_height="wrap_content"
android:backgroundTint="#000000"
android:hint=" " />
other method is,
add a view with black background below the editText and background of the editText is make it null.
I have created a drawable circular shape. I am using this as a background to my linear layout. It is working fine. But the problem is, I want to create 6 circles with different colors. So can i use only one drawable shape and change its color for different circles?
This is my drawable circular shape
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
>
<solid
android:color="#color/colorPrimary"
/>
<size
android:width="30dp"
android:height="30dp"/>
</shape>
I want to create this layout using drawable circular shape with different colors.
layout:
You can by setting the same drawable (the one you provided) to all the buttons, then in your code:
Example:
Drawable mDrawable = ContextCompat.getDrawable(context, R.drawable.yourDrawable);
mDrawable.setColorFilter(new PorterDuffColorFilter(yourColorInt,PorterDuff.Mode.MULTIPLY));
final int sdk = android.os.Build.VERSION.SDK_INT;
if(sdk < android.os.Build.VERSION_CODES.JELLY_BEAN) {
yourButton.setBackgroundDrawable(mDrawable);
} else {
yourButton.setBackground(mDrawable);
}
Do this for each of your buttons, but remember to replace yourColorInt with the color you want for the button you're applying it to.
Although #AbAppletic answer is good, I want to add another way to solve the problem. You can define a circle view in java and then use this view multiple times in your xml layouts and change their color as you wish.
The Circle View :
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
public class Circle extends View {
Paint p;
int color ;
public Circle(Context context) {
this(context, null);
}
public Circle(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public Circle(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
// real work here
TypedArray a = context.getTheme().obtainStyledAttributes(
attrs,
R.styleable.Circle,
0, 0
);
try {
color = a.getColor(R.styleable.Circle_circleColor, 0xff000000);
} finally {
// release the TypedArray so that it can be reused.
a.recycle();
}
init();
}
public void init()
{
p = new Paint();
p.setColor(color);
}
#Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
if(canvas!=null)
{
canvas.drawCircle(getHeight()/2, getWidth()/2,getWidth()/2,p );
}
}
}
Add these lines in attrs.xml:
<declare-styleable name="Circle">
<attr name="circleRadius" format="integer"/>
<attr name="circleColor" format="color" />
</declare-styleable>
And then you can use this view in your layout multiple times, also you can change their background:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout 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">
<TableRow android:gravity="center">
<com.afranet.broadbandportal.view.Circle xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/cv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:background="#color/colorPrimary"
app:circleColor="#color/color1" />
<com.afranet.broadbandportal.view.Circle xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/cv2"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_margin="5dp"
android:background="#color/colorPrimary"
app:circleColor="#color/color2" />
</TableRow>
<TableRow android:gravity="center">
<com.afranet.broadbandportal.view.Circle xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/cv3"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_margin="5dp"
android:background="#color/colorPrimary"
app:circleColor="#color/color3" />
<com.afranet.broadbandportal.view.Circle xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/cv4"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_margin="5dp"
android:background="#color/colorPrimary"
app:circleColor="#color/color4" />
</TableRow>
<TableRow android:gravity="center">
<com.afranet.broadbandportal.view.Circle xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/cv5"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_margin="5dp"
android:background="#color/colorPrimary"
app:circleColor="#color/color5" />
<com.afranet.broadbandportal.view.Circle xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/cv6"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_margin="5dp"
android:background="#color/colorPrimary"
app:circleColor="#color/color6" />
</TableRow>
Here is the screenshot:
You can use now backgroundTint tag for changing drawable shape color (API level 21)
android:backgroundTint="#color/yellow_color"
Keep the same shape and apply different app:backgroundTint
android:background="#drawable/shape"
app:backgroundTint="#color/blue"
Note the app:(custom namespace) for more informations Android Layout - when to use app: vs android:?
I have the following fragment. No matter what I do but the image is not visible in the Image View-: For testing I put the button on fragment but that is refelected but image is not visible
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.transenigma.iskconapp.DynamicImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="#drawable/img2"
android:id="#+id/myAboutImg" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="8dp"
tools:text="Text"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button"
android:layout_gravity="center_horizontal|bottom" />
<!--</android.support.v7.widget.CardView>-->
</FrameLayout>
I have made the following class that extends ImageView-:
package com.transenigma.iskconapp;
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;
public class DynamicImageView extends ImageView {
public DynamicImageView(final Context context, final AttributeSet attrs) {
super(context, attrs);
}
#Override
protected void onMeasure(final int widthMeasureSpec, final int heightMeasureSpec) {
final Drawable d = this.getDrawable();
if (d != null) {
// ceil not round - avoid thin vertical gaps along the left/right edges
final int width = MeasureSpec.getSize(widthMeasureSpec);
final int height = (int) Math.ceil(width * (float) d.getIntrinsicHeight() / d.getIntrinsicWidth());
this.setMeasuredDimension(width, height);
} else {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
}
What did you want to do in your DynamicImageView?
You can try to delete the method onMeasure,and see the difference between them.
Maybe the mistake is in your onMeasure.
I have an image and I want to put it to full the screen fitting by width but cropping the top of the image, like this:
The red area is the image and the red one is the phone screen/parent layout. Of course, preserving aspect ratio. Is it possible in XML instead of programatically?
Ok for that You should Do This Steps:--
1). Make Linear Layout
2). apply the image as background
3). set the view at top to crop the background of layout.
i think you got what i am talking.
for example this is the xml:--
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#android:color/white">//background color of your screen
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="put the resource id of the image you want to crop"
android:orientation="vertical" >
<View
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="#android:color/white" // background color of your screen
/>
</LinearLayout>
</LinearLayout>
Please tell me if there is any issue implementing it..
thanks enjoy,...
use
android:src="#drawable/img"
android:scaleType="fitEnd"
instead of
android:background
fitEnd retains aspect ratio as is written here
Finally I solved my problem using a custom view:
public class ResizableImageView extends ImageView {
public ResizableImageView(Context context) {
super(context);
}
public ResizableImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public ResizableImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
Drawable drawable = getDrawable();
if (drawable != null) {
int width = MeasureSpec.getSize(widthMeasureSpec);
int diw = drawable.getIntrinsicWidth();
if (diw > 0) {
int height = width * drawable.getIntrinsicHeight() / diw;
setMeasuredDimension(width, height);
return;
}
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
And, the XML file:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:layout_margin="0dp"
android:padding="0dp"
tools:context=".SplashActivity" >
<com.xxx.widgets.ResizableImageView
android:id="#+id/imageSplash"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_margin="0dp"
android:padding="0dp"
android:src="#drawable/img_splash"
tools:ignore="ContentDescription" />
</RelativeLayout>