Como desenhar um retângulo arredondado na interface do usuário do Android?


141

Preciso desenhar um retângulo arredondado na interface do usuário do Android. Ter o mesmo retângulo arredondado TextViewe EditTexttambém seria útil.



pelo menos você deve colocar a foto .. porque se alguém está procurando a mesma pergunta, será fácil entender.
Himanshu Mori 19/03/19

Respostas:


215

No seu layout xml, faça o seguinte:

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

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

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

</shape>

Alterando o, android:radiusvocê pode alterar a quantidade de "raio" dos cantos.

<solid> é usado para definir a cor do drawable.

Você pode usar o substituir android:radiuscom android:bottomLeftRadius, android:bottomRightRadius, android:topLeftRadiuse android:topRightRadiuspara definir o raio para cada canto.


Eles não pediram um gradiente. Não sei por que essa resposta é aceita.
Jerry Destremps 6/08/19

Eu acho que foi aceito porque estava lá vários meses antes da maioria das outras respostas. Não desenvolvo o Android há anos, então não tenho idéia de como a resposta pode ser alterada ou atualizada agora para remover o gradiente, embora eu esteja supondo que a marca "sólida" usada na resposta abaixo de Noundla Sandeep provavelmente funcionaria. o truque.
Andreass

125

Eu acho que é exatamente isso que você precisa.

Aqui, arquivo drawable (xml) que cria um retângulo arredondado. round_rect_shape.xml

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

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

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

</shape>

Aqui arquivo de layout: my_layout.xml

<LinearLayout
    android:id="@+id/linearLayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/round_rect_shape"
    android:orientation="vertical"
    android:padding="5dp" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Something text"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#ff0000" />

    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <requestFocus />
    </EditText>
</LinearLayout>

-> No código acima, LinearLayout tendo o plano de fundo (esse é o papel principal a ser colocado para criar um retângulo arredondado). Assim, você pode colocar qualquer visualização como TextView, EditText ... nesse LinearLayout para ver o plano de fundo como um retângulo redondo para todos.


1
Existe uma maneira de abstrair isso? Quero poder usar android:background="@drawable/round_rect_shape"no meu styles.xml, mas usar cores de fundo diferentes, definindo outra propriedade. Existe alguma opção, exceto a criação de um drawable idêntico para cada cor?
karl

Você pode fazer qualquer forma arredondada dessa maneira!
Sabri Meviş

22

Em monodroid, você pode fazer isso para o retângulo arredondado, mantendo-o como uma classe pai editboxe outros recursos de layout podem ser adicionados.

 class CustomeView : TextView
    {
       public CustomeView (Context context, IAttributeSet ) : base (context, attrs)  
        {  
        }
       public CustomeView(Context context, IAttributeSet attrs, int defStyle) : base(context, attrs, defStyle)  
        {  
        }
       protected override void OnDraw(Android.Graphics.Canvas canvas)
       {
           base.OnDraw(canvas);
           Paint p = new Paint();
           p.Color = Color.White;
           canvas.DrawColor(Color.DarkOrange);

           Rect rect = new Rect(0,0,3,3);

           RectF rectF = new RectF(rect);


           canvas.DrawRoundRect( rectF, 1,1, p);



       }  
    }
}

4
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:padding="10dp"
  android:shape="rectangle">
    <solid android:color="@color/colorAccent" /> 
    <corners
      android:bottomLeftRadius="500dp"
      android:bottomRightRadius="500dp"
      android:topLeftRadius="500dp"
      android:topRightRadius="500dp" />
</shape>

Agora, em qual elemento você deseja usar essa forma, basta adicionar: android:background="@drawable/custom_round_ui_shape"

Crie um novo XML no drawable chamado "custom_round_ui_shape"


1

Use CardView para retângulo redondo. O CardView oferece mais funcionalidades, como cardCornerRadius, cardBackgroundColor, cardElevation e muito mais. O CardView torna a interface do usuário mais adequada do que o retângulo redondo personalizado personalizável.


1

Você pode apenas definir um novo plano de fundo xml na pasta drawables

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="enter_your_desired_color_here" />
<corners android:radius="enter_your_desired_radius_the_corners" />
</shape>  

Depois disso, inclua-o no TextView ou no EditText, definindo-o em segundo plano.

<TextView
 android:id="@+id/textView"
 android:layout_width="0dp"
 android:layout_height="80dp"
 android:background="YOUR_FILE_HERE"
 Android:layout_weight="1"
 android:gravity="center"
 android:text="TEXT_HERE"
 android:textSize="40sp" />

0

Clique com o botão direito do mouse na gaveta e crie um novo arquivo xml de layout em nome de, por exemplo, button_background.xml. copie e cole o seguinte código. Você pode alterá-lo de acordo com sua necessidade.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="14dp" />
<solid android:color="@color/colorButton" />
<padding
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp" />
<size
android:width="120dp"
android:height="40dp" />
</shape>

Agora você pode usá-lo.

<Button
android:background="@drawable/button_background"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

0
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/white" />
    <corners android:radius="4dp" />
</shape>

Forneça algumas explicações para sua resposta
executável
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.