programacion - Android: Dibuja un círculo con texto dentro

manual de programacion android pdf

Question

Necesito dibujar tres círculos en mi fragmento, los círculos difieren en tamaño, remito este link El resultado que obtuve es este

Este es mi código XML: ACTUALIZADO

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center" >
         <TextView
             android:id="@+id/large_volume"
             android:layout_width="185dp"
             android:layout_height="185dp"
             android:background="@drawable/circle"
             android:gravity="center"
             android:text="My name is NON"
             android:textColor="#FFFFFF"
             android:textSize="10dp" />

         <TextView
             android:id="@+id/medium_volume"
             android:layout_width="120dp"
             android:layout_height="120dp"
             android:layout_alignTop="@+id/large_volume"
             android:layout_toRightOf="@+id/large_volume"
             android:background="@drawable/circle"
             android:gravity="center"
             android:text="My name is NON"
             android:textColor="#FFFFFF"
             android:textSize="10dp" />

         <TextView
             android:id="@+id/TextView02"
             android:layout_width="90dp"
             android:layout_height="90dp"
             android:layout_below="@+id/medium_volume"
             android:layout_toRightOf="@+id/large_volume"
             android:background="@drawable/circle"
             android:gravity="center"
             android:layout_marginTop="-3dp"
             android:layout_marginLeft="-17dp"
             android:text="My name is NON"
             android:textColor="#FFFFFF"
             android:textSize="10dp" />

    </RelativeLayout>

Pero lo que necesito debe ser es así

Puedes ver que los círculos deben permanecer juntos, pero cuando uso la vista XML no puedo lograr esto. ¿Cómo puedo lograr esto, necesito onClickListeners en mi círculo? Es por eso que uso views

¿Esto se puede lograr a través del dibujo de Lienzo? He oído que el lienzo no se ve, así que esto me impedirá darles clic, corrígeme si estoy equivocado.

ACTUALIZAR:

Cumplo con mi necesidad a través del enfoque XML, ¿hay alguna manera de lograr esto a través del dibujo del lienzo? ¿Debería publicar otra pregunta para eso?

Answer 1

Prueba esto

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/num_txt"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:layout_marginTop="0dp"
                android:background="@drawable/bg_red"
                android:gravity="center"
                android:text="My name is NON"
                android:textColor="#FFFFFF"
                android:textSize="10dp" />

        </RelativeLayout>

    </RelativeLayout>

Guardar en bg_red.xml

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" 
        android:shape="oval">
        <corners android:radius="10dip"/>
        <stroke android:color="#FF0000" android:width="5dip"/>
        <solid android:color="#FF0000"/>
    </shape>

Código editado

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="match_parent" >
         <TextView
             android:id="@+id/num_txt"
             android:layout_width="185dp"
             android:layout_height="185dp"

             android:layout_alignParentTop="true"
             android:layout_marginTop="163dp"
             android:background="@drawable/bg_red"
             android:gravity="center"
             android:text="My name is NON"
             android:textColor="#FFFFFF"
             android:layout_marginLeft="10dp"
             android:textSize="10dp" />

         <TextView
             android:id="@+id/TextView02"
             android:layout_width="90dp"
             android:layout_height="90dp"
             android:layout_alignParentRight="true"
             android:layout_alignTop="@+id/TextView01"
             android:layout_marginRight="90dp"
             android:layout_marginTop="122dp"
             android:background="@drawable/bg_red"
             android:gravity="center"
             android:text="My name is NON"
             android:textColor="#FFFFFF"
             android:textSize="10dp" />

         <TextView
             android:id="@+id/TextView01"
             android:layout_width="120dp"
             android:layout_height="120dp"
             android:layout_alignTop="@+id/num_txt"
             android:layout_toRightOf="@+id/num_txt"
             android:background="@drawable/bg_red"
             android:gravity="center"
             android:text="My name is NON"
             android:textColor="#FFFFFF"
             android:textSize="10dp" />

    </RelativeLayout>

Uso de RestraintLayout para el recuento de distintivos.

    <android.support.constraint.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"
        android:background="@android:color/transparent"
        android:gravity="center">

        <ImageView
            android:id="@+id/tab_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:background="@android:color/transparent"
            android:scaleType="centerInside"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/ic_home"
            tools:layout_constraintBottom_creator="1"
            tools:layout_constraintLeft_creator="1"
            tools:layout_constraintRight_creator="1"
            tools:layout_constraintTop_creator="1" />

        <TextView
            android:id="@+id/tab_badge"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:background="@drawable/icon_badge"
            android:paddingBottom="1dp"
            android:paddingLeft="6dp"
            android:paddingRight="6dp"
            android:paddingTop="1dp"
            android:text="10"
            android:textAppearance="@style/TextAppearance.AppCompat.Small"
            android:textColor="@android:color/white"
            android:textSize="12dp"
            app:layout_constraintBottom_toBottomOf="@+id/tab_icon"
            tools:layout_constraintLeft_creator="1"
            android:layout_marginLeft="14dp"
            app:layout_constraintLeft_toLeftOf="@+id/tab_icon" />
    </android.support.constraint.ConstraintLayout>

Answer 2

Prueba esto

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.widget.TextView;

public class CircularTextView extends TextView
{
private float strokeWidth;
int strokeColor,solidColor;

public CircularTextView(Context context) {
    super(context);
}

public CircularTextView(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public CircularTextView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}


@Override
public void draw(Canvas canvas) {

    Paint circlePaint = new Paint();
    circlePaint.setColor(solidColor);
    circlePaint.setFlags(Paint.ANTI_ALIAS_FLAG);

    Paint strokePaint = new Paint();
    strokePaint.setColor(strokeColor);
    strokePaint.setFlags(Paint.ANTI_ALIAS_FLAG);

    int  h = this.getHeight();
    int  w = this.getWidth();

    int diameter = ((h > w) ? h : w);
    int radius = diameter/2;

    this.setHeight(diameter);
    this.setWidth(diameter);

    canvas.drawCircle(diameter / 2 , diameter / 2, radius, strokePaint);

    canvas.drawCircle(diameter / 2, diameter / 2, radius-strokeWidth, circlePaint);

    super.draw(canvas);
}

public void setStrokeWidth(int dp)
{
    float scale = getContext().getResources().getDisplayMetrics().density;
    strokeWidth = dp*scale;

}

public void setStrokeColor(String color)
{
    strokeColor = Color.parseColor(color);
}

public void setSolidColor(String color)
{
    solidColor = Color.parseColor(color);

}
}

https://.com/a/34685568/2809351

Answer 3

Pruebe este código para crear círculos dinámicamente con textview

RelativeLayout main_rel_layout = findViewById(R.id.main_rel_layout);
TextView textView = new TextView(this);
RelativeLayout relativeLayout = new RelativeLayout(this);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
params.addRule(RelativeLayout.CENTER_IN_PARENT);
textView.setText("Hello ");
textView.setTextSize(100);
textView.setLayoutParams(params);
textView.setGravity(Gravity.CENTER);

final FrameLayout frameLayout = new FrameLayout(this);
FloatingActionButton floatingActionButton = new FloatingActionButton(this);
floatingActionButton.setCustomSize(400);
frameLayout.addView(floatingActionButton);

relativeLayout.addView(frameLayout);
relativeLayout.addView(textView);
main_rel_layout.addView(relativeLayout);

Answer 4

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
         android:id="@+id/TextView02"
        android:layout_width="125dp"
        android:layout_height="125dp"
        android:layout_alignBottom="@+id/linearLayout1"
        android:layout_marginBottom="83dp"
        android:layout_toRightOf="@+id/linearLayout1"
        android:background="@drawable/circle"
        android:gravity="center"
        android:text="TextView"
        android:layout_marginRight="5dp"
        android:orientation="vertical" />




    <TextView
        android:id="@+id/textView1"
        android:layout_width="185dp"
        android:layout_height="185dp"
        android:layout_marginLeft="5dp"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:background="@drawable/circle"
        android:gravity="center"
 android:text="TextView" 
        android:orientation="vertical" />



    <TextView
        android:id="@+id/TextView01"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:layout_alignTop="@+id/linearLayout1"
        android:layout_marginTop="113dp"
        android:layout_toRightOf="@+id/linearLayout1"
        android:background="@drawable/circle"
        android:gravity="center"
 android:text="TextView" 
        android:orientation="vertical" />



</RelativeLayout>

puede establecer directamente backroud o drawable a la vista de texto. puedes usar drawablepadding, etc .....

o puede usar: android: drawableLeft = "@ drawable / ic_cab_done_holo_dark"

Answer 5

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    final TextView tv = (TextView) findViewById(R.id.tv);
    Button btn = (Button) findViewById(R.id.btn);
    GradientDrawable gd = new GradientDrawable();
    gd.setShape(GradientDrawable.OVAL);
    gd.setColor(Color.TRANSPARENT);
    gd.setStroke(5, Color.BLUE);
    gd.setSize(getTextViewHeight(tv),getTextViewHeight(tv));

    tv.setBackground(gd);
    btn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

            GradientDrawable gd = new GradientDrawable();
            gd.setShape(GradientDrawable.OVAL);
            gd.setColor(Color.TRANSPARENT);
            gd.setStroke(5, Color.BLUE);
            gd.setSize(tv.getHeight(),tv.getHeight());
            Log.d("DB121","Width "+tv.getHeight()+ "Height ="+tv.getHeight());
            tv.setBackground(gd);
        }
    });
}
public static int getTextViewHeight(TextView textView) {
    WindowManager wm =
            (WindowManager) textView.getContext().getSystemService(Context.WINDOW_SERVICE);
    Display display = wm.getDefaultDisplay();

    int deviceWidth;

    if(android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB_MR2){
        Point size = new Point();
        display.getSize(size);
        deviceWidth = size.x;
    } else {
        deviceWidth = display.getWidth();
    }

    int widthMeasureSpec = View.MeasureSpec.makeMeasureSpec(deviceWidth, View.MeasureSpec.AT_MOST);
    int heightMeasureSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
    textView.measure(widthMeasureSpec, heightMeasureSpec);
    return textView.getMeasuredHeight();
}