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.
Related
I created a class that extends EditText and forces them into a square shape with a border. I cannot click on nor edit the text in any of these. When I change the 4 SquareCell views back to EditText views, I am able to edit them (but obviously lose the square format). Why can't I edit SquareCell views?
SquareCell class
package com.example.autogrid
import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.util.AttributeSet
import androidx.appcompat.widget.AppCompatEditText
class SquareCell #JvmOverloads constructor(
context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : androidx.appcompat.widget.AppCompatEditText(context, attrs, defStyleAttr) {
private var squareSize = 0f
private val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
color = Color.BLACK
style = Paint.Style.STROKE
strokeWidth = 5f
}
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
//find smaller dimension between width and height and set layout size to it
val smallerDim = Math.min(
MeasureSpec.getSize(widthMeasureSpec),
MeasureSpec.getSize(heightMeasureSpec)
)
super.onMeasure(
MeasureSpec.makeMeasureSpec(smallerDim, MeasureSpec.EXACTLY),
MeasureSpec.makeMeasureSpec(smallerDim, MeasureSpec.EXACTLY)
)
squareSize = smallerDim.toFloat()
}
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
//add border
canvas.drawRect(0f, 0f, squareSize, squareSize, paint)
}
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<com.example.autogrid.SquareCell
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Edit Text 00"/>
<com.example.autogrid.SquareCell
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Edit Text 01"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<com.example.autogrid.SquareCell
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Edit Text 10"/>
<com.example.autogrid.SquareCell
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Edit Text 11"/>
</LinearLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Result with SquareCells (not editable):
Result when I use EditTexts (editable but not squares):
Actually, you don't need to use that library you can archive these things throw a custom shape, and set that background to editText.
Here is the shape code for reference
<?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="1dp"android:color="#F0F0F0" />
</shape>
I've been looking into an Android problem for some time. I have not found anything on the internet to advance this probelm...
I'm looking to make 3 buttons in a circle that would be one inside the other (See image)
The final objective is that I can insert an image in each of the buttons and that when I click on one, the latter rotates around the central point.
But for the moment I am already blocking the creation of the 3 buttons.
I tested this :
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadiusRatio="20"
android:shape="ring"
android:thicknessRatio="0"
android:useLevel="false">
<solid android:color="#android:color/holo_green_dark"/>
</shape>
But :
1. The click is always on the last button which make sence...
2. I don't know how i can add a image here
I have also try to draw the 3 circles in Paint and then use them as background Button with different height.
It works, but the shape of the button is still a rectangle. So it is not optimized.
Does anyone have a solution?
I know it is possible because i've seen that in different apps.
I just don't know how to realize that...
Thanks in advance
EDIT :
I would like something like that.
X "independant" rings where i can rotate each one separatly.
EDIT 2 : area click
The button appear as a circle --> OK
But the shape of the area click is still a square.
In my case I need precision, i can't afford to apply listener of button 1 when the user click of button 2.
Not sur if i am understandble... Please say if not.
EDIT - Reworked Code For Shape
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="100dp" />
<stroke
android:width="3dp"
android:color="#808080" />
<solid android:color="#color/colorPrimaryDark" />
</shape>
Set this as background of your button and add Manual Height & width to button. Your button will show up.
EDIT
Use Framelayout to overlay your buttons over each other. Change the sizes of button as per your liking. Animated the buttons (rotation) when a button gets clicked.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
tools:context=".MainActivity">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginLeft="24dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="24dp"
android:layout_marginRight="24dp"
android:layout_marginBottom="24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Button
android:id="#+id/button"
android:layout_width="180dp"
android:layout_height="180dp"
android:layout_gravity="center"
android:background="#drawable/oval_green"
android:text="Button" />
<Button
android:id="#+id/button1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:background="#drawable/oval_blue"
android:text="Button" />
</FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Buttons are under FrameLayout. Now attach code to them and test. both buttons are working fine. I hope this put you in the right path.
EDIT - With ImageView
Ensure to cut the Images in proper portions.
Your layout.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
tools:context=".MainActivity">
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginLeft="24dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="24dp"
android:layout_marginRight="24dp"
android:layout_marginBottom="24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/ivLarge"
android:layout_width="250dp"
android:layout_height="250dp"
android:focusableInTouchMode="false"
android:scaleType="fitXY"
app:srcCompat="#drawable/large" />
<ImageView
android:id="#+id/ivMedium"
android:layout_width="180dp"
android:layout_height="180dp"
android:layout_gravity="center"
android:focusableInTouchMode="false"
android:scaleType="fitXY"
app:srcCompat="#drawable/medium" />
<ImageView
android:id="#+id/ivSmall"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:focusableInTouchMode="false"
android:scaleType="fitXY"
app:srcCompat="#drawable/small" />
</FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Your MainActivity.java
package com.auvitronics.testing;
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Bitmap;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity
{
public static final String TAG = "TransparentButton";
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final ImageView ivLarge = findViewById(R.id.ivLarge);
final ImageView ivMedium = findViewById(R.id.ivMedium);
ImageView ivSmall = findViewById(R.id.ivSmall);
ivLarge.setDrawingCacheEnabled(true);
ivMedium.setDrawingCacheEnabled(true);
ivSmall.setDrawingCacheEnabled(true);
ivLarge.setOnTouchListener(new View.OnTouchListener()
{
#Override
public boolean onTouch(View view, MotionEvent event)
{
Bitmap bitmap = Bitmap.createBitmap(view.getDrawingCache());
int pixel = bitmap.getPixel((int) event.getX(),(int) event.getY());
if (pixel == Color.TRANSPARENT)
{
System.out.println("Large Transparent Color");
return false;
}else {
view.setRotation(view.getRotation() + 90);
System.out.println("Large Colored Area");
return true;
}
}
});
ivMedium.setOnTouchListener(new View.OnTouchListener()
{
#Override
public boolean onTouch(View view, MotionEvent event)
{
Bitmap bitmap = Bitmap.createBitmap(view.getDrawingCache());
int pixel = bitmap.getPixel((int) event.getX(),(int) event.getY());
if (pixel == Color.TRANSPARENT)
{
System.out.println("Medium Transparent Color");
return false;
}else {
view.setRotation(view.getRotation() - 90);
System.out.println("Medium Colored Area");
return true;
}
}
});
ivSmall.setOnTouchListener(new View.OnTouchListener()
{
#Override
public boolean onTouch(View view, MotionEvent event)
{
Bitmap bitmap = Bitmap.createBitmap(view.getDrawingCache());
int pixel = bitmap.getPixel((int) event.getX(),(int) event.getY());
if (pixel == Color.TRANSPARENT)
{
System.out.println("Small Transparent Color");
return false;
}else {
view.setRotation(view.getRotation() + 45);
System.out.println("Small Colored Area");
return true;
}
}
});
}
}
And the Result is
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 activity_choose_number1.xml
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_choose_number1" />
This is content_choose_number1.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.abc.abc.ChooseNumber1"
tools:showIn="#layout/activity_choose_number1">
<ListView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:id="#+id/listViewNumberList"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp" />
</LinearLayout>
This is secnumsinglechoice.xml
<?xml version="1.0" encoding="utf-8"?>
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:textAppearance="?android:attr/textAppearanceListItemSmall"
android:checkMark="#null"
android:drawableStart="?android:attr/listChoiceIndicatorSingle"
tools:targetApi="ice_cream_sandwich"
android:textSize="25dp"
android:linksClickable="false"
android:checked="false"
android:paddingTop="20dp"
android:paddingBottom="20dp" />
The secnumsinglechoice.xml is copy paste of android.R.layout.simple_list_item_single_choice and made some changes.
Now what I need is to center align the checkbox and text of secnumusingchoice.xml. I also need the checkbox to be left side of text in each item of list view
Things I tried
1) If I do drawableLeft, it creates space between text and checkbox, but doesn't make both to be centered
2) If I add android:textAlignment="center" then still it center aligns the text but not the check box .
3) I tried here center text and checkmark of CheckedTextView but I would like to try here with more code.
Please help. Thanks.
Is that what you want
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#android:color/white"
android:gravity="center">
<CheckBox
android:id="#+id/ckb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true" />
<TextView
android:id="#+id/tvEduName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="ABC"
android:textSize="17sp" />
</LinearLayout>
Result
To get everything to center correctly, we'll subclass CheckedTextView, and override its onDraw() method to first measure the combined Drawable and text widths and paddings, and then translate the Canvas accordingly before calling the super method to actually do the draw.
import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.widget.CheckedTextView;
import android.text.Layout;
public class CenteredCheckedTextView extends CheckedTextView {
public CenteredCheckedTextView(Context context) {
this(context, null);
}
public CenteredCheckedTextView(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
protected void onDraw(Canvas canvas) {
if (getCompoundDrawables()[0] == null) {
super.onDraw(canvas);
}
else {
// Left drawable and paddings width
final float dw = getCompoundDrawables()[0].getIntrinsicWidth() +
getPaddingLeft() + getCompoundDrawablePadding();
// Text width
final float tw = getMaxLineMeasure();
canvas.save();
canvas.translate((getWidth() - (dw + tw)) / 2f, 0f);
super.onDraw(canvas);
canvas.restore();
}
}
private float getMaxLineMeasure() {
final Layout layout = getLayout();
final int lines = getLineCount();
float m = 0, max = 0;
for (int i = 0; i < lines; ++i) {
m = getPaint().measureText(getText(),
layout.getLineStart(i),
layout.getLineEnd(i));
if (m > max) {
max = m;
}
}
return max;
}
}
CheckedTextView has a checkMarkGravity attribute that determines on which end it places the checkMark Drawable, but it's not public, for some odd reason, so we'll just use the drawableLeft. For example:
<com.mycompany.myapp.CenteredCheckedTextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:textSize="25dp"
android:drawableLeft="?android:attr/listChoiceIndicatorSingle" />
You might need to slightly fiddle with the translation and/or width values in the custom class to get everything to line up with what looks centered to you, depending on what kind of transparent, intrinsic padding the Drawable has.
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>