2013-09-28 12 views
19

Voglio mettere uno sfondo circolare su una vista testo. Il cerchio diventa ovale quando è reso.Sfondo cerchio Android diventa ovale

mio 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> 

La mia priorità bassa del cerchio:

<shape 
    xmlns:android="http://schemas.android.com/apk/res/android" 
      android:shape="oval"> 

      <solid 
       android:color="#79bfea"/> 
</shape> 
+0

È necessario impostare layout_weight e layout_height al valore fisso credo. La soluzione di @ sudhasri di seguito non ha funzionato? –

+0

l'ho fatto, ho eseguito l'override su Misura estendendo TextView per impostare la larghezza come altezza anche –

risposta

26
  • Modifica l' layout_height e layout_width a wrap_content
  • tuoi textView Aggiungere modifica di formato all'interno del tag forma come segue
<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> 

Se è ancora ovale, provare ad aumentare la larghezza e altezza nel tag dimensione. Ha funzionato per me!

+0

Nel mio caso con 'layout_height' e' layout_width' su 'wrap_content' e la regolazione della rigth padding ha fatto il trucco. –

+0

@GueorguiObregon è il testo centrato? – Sudhasri

2

anello prova invece di ovale

<shape 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="ring" > 

    <solid android:color="#79bfea" /> 
</shape> 
+8

Questo in realtà non mostra nulla. –

1

Dal momento che si sta utilizzando match_parent per la larghezza e l'altezza e impostazione drawable in background, quindi w essere ovale Per ottenere il cerchio puoi dare le stesse dimensioni per larghezza e altezza. A differenza di schermo intero, è possibile modificare la larghezza dal codice java utilizzando WindowManager e impostare lo stesso valore sia in larghezza che in altezza.

3

ho esteso classe TextView per impostare larghezza altezza

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); 
} 

protected void onDraw(Canvas canvas) { 
    super.onDraw(canvas); 
} 

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); 
} 
} 

e poi combinati con sopra la risposta di Sudhasri, posso mostrare esattamente vista testo circolare.

Quindi non c'è bisogno di dare altezza e peso fissi.

1

per ottenere questo

enter image description here

ho usato due LinearLayout uno dentro l'altro e impostare la gravità genitore CENTRO

<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> 

e questo è oval.xml all'interno della cartella drawable

<?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> 

senza LinearLayout interno otterrai questo

enter image description here

che è il codice è

<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> 
10

È possibile creare il proprio Drawable che sarà limitare il raggio al valore minimo tra la sua larghezza e altezza.

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; 
    } 
} 

quindi applicare al vostro textView:

textView.setBackground(new ColorCircleDrawable(Color.RED)); 
+0

Per ottenere un anello al posto di un cerchio pieno, utilizzare paint.setStyle (Paint.Style.STROKE) e paint.setStrokeWidth (strokeWidth). –

+0

Assicurati di passare il colore in questo modo: int colorToUse = ContextCompat.getColor (getContext(), R.color.my_color); textView.setBackground (new ColorCircleDrawable (colorToUse)); invece di textView.setBackground (new ColorCircleDrawable (R.color.my_color)); – PedroHidalgo