Android: Создание Circular TextView?

Ответ 1

Я также искал решение этой проблемы, и, как легко и комфортно, я нашел, нужно было преобразовать форму прямоугольного TextView в цируляр. С помощью этого метода будет идеально:

• Создайте новый XML файл в выпадающей папке с именем "circle.xml" (например) и заполните его следующим кодом:

  <shape xmlns:android="http://schemas.android.com/apk/res/android"
      android:shape="oval">
  
      <solid android:color="#9FE554" />
  
      <size
          android:height="60dp"
          android:width="60dp" />
  
  </shape>
  

С помощью этого файла вы создадите новую форму TextView. В этом случае я создал круг зеленого. Если вы хотите добавить границу, вам нужно добавить следующий код в предыдущий файл:

    <stroke
        android:width="2dp"
        android:color="#FFFFFF" />

2. Создайте еще один XML файл ( "rounded_textview.xml" ) в папке с возможностью рисования со следующим кодом:

   <?xml version="1.0" encoding="utf-8"?>
   <selector xmlns:android="http://schemas.android.com/apk/res/android">
       <item android:drawable="@drawable/circle" />
   </selector>
   

Этот файл будет использоваться для изменения способа отображения TextView в eligamos.

3. Наконец, в свойствах TextView мы хотим изменить раздел пути, мы направились к "фону" и выберите второй созданный XML файл ( "rounded_textview.xml" ).

   <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="H"
       android:textSize="30sp"
       android:background="@drawable/rounded_textview"
       android:textColor="@android:color/white"
       android:gravity="center"
       android:id="@+id/mark" />
   

С помощью этих шагов вместо того, чтобы TextView TextView rectagular имеет круговую форму. Просто измените форму, а не функциональность TextView. Результатом будет следующее:

Также я должен сказать, что эти шаги могут быть применены к любому другому компоненту, имеющему опцию "background" в свойствах.

Удача!!

Ответ 2

Типичное решение состоит в том, чтобы определить форму и использовать ее в качестве фона, но, поскольку количество цифр меняется, это уже не идеальный круг, он выглядит как прямоangularьник с круглыми краями или овал. Поэтому я разработал это решение, оно прекрасно работает. Надеюсь, это кому-нибудь поможет.

Вот код пользовательского TextView

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

}
}

Затем в своем XML добавьте отступы и убедитесь, что его гравитация находится в центре.

<com.app.tot.customtextview.CircularTextView
        android:id="@+id/circularTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="11"
        android:gravity="center"
        android:padding="3dp"/>

И вы можете установить ширину обводки

circularTextView.setStrokeWidth(1);
circularTextView.setStrokeColor("#ffffff");
circularTextView.setSolidColor("#000000");

Ответ 3

Создайте файл texview_design.xml и заполните его следующим кодом. Поместите его в res/drawable.

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

        <solid android:color="#98AFC7" />

        <stroke
            android:width="2dp"
            android:color="#98AFC7" />

        <corners
            android:bottomLeftRadius="20dp"
            android:bottomRightRadius="20dp"
            android:topLeftRadius="20dp"
            android:topRightRadius="20dp" />

    </shape>

Затем в основном файле XML просто добавьте следующую строку для каждого TextView:

  android:background="@drawable/texview_design"

Второй способ (не рекомендуется):  Загрузите этот круг и поместите его в свою папку drawable, а затем создайте фон TextView's. а затем установите для параметра gravity значение center.

Затем он будет выглядеть следующим образом:

Ответ 4

Это прямоangularьник, который не дает овальному фону формы становиться круглым.
Создание квадратного вида исправит все.

Я обнаружил, что это решение является чистым и работает с различными размерами текста и длиной текста.

public class EqualWidthHeightTextView extends TextView {

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

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

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

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int r = Math.max(getMeasuredWidth(),getMeasuredHeight());
        setMeasuredDimension(r, r);

    }
}

Usage

<com.commons.custom.ui.EqualWidthHeightTextView
    android:id="@+id/cluster_count"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="10+"
    android:background="@drawable/oval_light_blue_bg"
    android:textColor="@color/white" />

oval_light_blue_bg.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"<br>
       android:shape="oval">
   <solid android:color="@color/light_blue"/>
   <stroke android:color="@color/white" android:width="1dp" />
</shape>

Ответ 5

1.Создайте xml circle_text_bg.xml в папке res/drawable с кодом ниже

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
     <solid android:color="#fff" />

    <stroke
        android:width="1dp"
        android:color="#98AFC7" />
    <corners
         android:bottomLeftRadius="50dp"
         android:bottomRightRadius="50dp"
         android:topLeftRadius="50dp"
         android:topRightRadius="50dp" />
    <size
         android:height="20dp"
         android:width="20dp" />
</shape>

2. Используйте circle_text_bg в качестве фона для просмотра текста. NB. Чтобы получить идеальный круг, высота и ширина вашего текстового обзора должны быть одинаковыми.Предварительный просмотр того, как должно выглядеть ваше текстовое представление с текстом 1, 2, 3 на этом фоне

Ответ 6

Это мое действительно работающее решение

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    >
    <!-- The fill color -->
    <solid android:color="#ffff" />
    <!-- Just to add a border -->
    <stroke
        android:color="#8000"
        android:width="2dp"
    />
</shape>

Убедитесь, что ваша ширина и высота TextView совпадают (одинаковы в dp), если вы хотите идеальный (нерастянутый) круг.

Убедитесь, что текст вставляется в круг, либо сокращая свой текст, либо увеличивая круг, либо уменьшая размер текста или уменьшайте ваши отступы, если они есть. ИЛИ сочетание вышеуказанных предложений.

[EDIT]

Для того, что я вижу на ваших снимках, вы хотите добавить слишком много текста в строку, для чистых кругов.
Учтите, что текст должен иметь аспект квадрат, поэтому вы можете его обернуть (используйте \n) или просто поместите числа внутри кругов и поместите вышеприведенные записи или uder соответствующий круг.

Ответ 7

Вы можете попробовать это в round_tv.xml в выпадающей папке:

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

    <stroke android:color="#22ff55" android:width="3dip"/>

    <corners
        android:bottomLeftRadius="30dp"
        android:bottomRightRadius="30dp"
        android:topLeftRadius="30dp"
        android:topRightRadius="30dp" />

    <size
        android:height="60dp"
        android:width="60dp" />

</shape>

Примените этот текст в текстовом виде как:

<TextView
    android:id="@+id/tv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/round_tv"
    android:gravity="center_vertical|center_horizontal"
    android:text="ddd"
    android:textColor="#000"
    android:textSize="20sp" />

Вывод:

Надеюсь, что это поможет.

Изменить: если ваш текст слишком длинный, предпочтительнее овальная форма.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">

    <stroke android:color="#55ff55" android:width="3dip"/>

    <corners
        android:bottomLeftRadius="30dp"
        android:bottomRightRadius="30dp"
        android:topLeftRadius="30dp"
        android:topRightRadius="30dp" />

    <size
        android:height="60dp"
        android:width="60dp" />

</shape>

Вывод:

Если вам по-прежнему нужен правильный круг, то я думаю, вам нужно будет динамически устанавливать его высоту после установки в нем текста, новая высота должна быть такой же, как и его новая ширина, чтобы создать правильный круг.

Ответ 8

используйте это в своем чертеже

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval">


    <solid android:color="#55ff55"/>


    <size android:height="60dp"
        android:width="60dp"/>

</shape>

Задайте фон для текстового представления как

Ответ 9

Большая часть ответа здесь кажется взломанной для формы, которую можно отнести, в то время как андроид сам по себе поддерживает это с функциональностью фигур. Это то, что отлично сработало для меня. Вы можете сделать это двумя способами.

Используя фиксированную высоту и ширину, это останется неизменным независимо от текста, который вы положили, как показано ниже.

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

<solid android:color="@color/alpha_white" />

    <size android:width="25dp" android:height="25dp"/>

<stroke android:color="@color/color_primary" android:width="1dp"/>

</shape>

Использование Padding, которое корректирует фигуру независимо от текста в textview, как показано ниже

<solid android:color="@color/alpha_white" />

<padding
    android:bottom="@dimen/semi_standard_margin"
    android:left="@dimen/semi_standard_margin"
    android:right="@dimen/semi_standard_margin"
    android:top="@dimen/semi_standard_margin" />

<stroke android:color="@color/color_primary" android:width="2dp"/>

semi_standard_margin = 4dp

Ответ 10

Я использую:/drawable/circulo.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <solid android:angle="270"
        android:color="@color/your_color" />

</shape>

И затем я использую его в своем TextView как:

android:background="@drawable/circulo"

нет необходимости его усложнять.

Ответ 11

Попробуйте выполнить приведенный ниже файл. Создайте файл с именем "circle" в вашей папке res/drawable и скопируйте ниже код:

   <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >

    <solid android:color="#FFFFFF" />

    <stroke
        android:width="1dp"
        android:color="#4a6176" />

    <padding
        android:left="10dp"
        android:right="10dp"
        android:top="10dp"
        android:bottom="10dp"
         />

    <corners android:radius="10dp" />

</shape>

Примените его в TextView, как показано ниже:

<TextView
        android:id="@+id/tvSummary1"
        android:layout_width="270dp"
        android:layout_height="60dp"
        android:text="Hello World" 
        android:gravity="left|center_vertical"
        android:background="@drawable/round_bg">

    </TextView>