Blog do Éder

Início » Posts etiquetados como 'margin'

Arquivo da tag: margin

Padding e margin

Padding e margin são coisas diferentes, mas que tem um efeito muito parecido. Para cada componente do android, podemos setar valores para padding e margin. Margin você define a margem externa do componente em relação à outros componentes, ou à borda do layout. Padding, é a distância da borda do componente para dentro, para seu conteúdo. O padding pode alterar o tamanho do componente, o margin não.

No mesmo projeto TestaLayouts, crie um novo arquivo de layout em res/layout/testa_margin_padding.xml. Podes deixar o linearlayout como gerenciador de layout, não fará diferença neste caso.

O conteúdo do arquivo deve ser esse:


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

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/botao1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/botao1margin"
android:layout_margin="@dimen/btnmargin"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/botao1padding"
android:padding="@dimen/btnpadding"/>

</LinearLayout>

No arquivo res/dimen, temos as seguintes dimensões:


<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="btnmargin">30dp</dimen>
<dimen name="btnpadding">40dp</dimen>
</resources>

A figura abaixo, nos mostra como ficou o layout:

marginepadding

Ah, o arquivo res/values/strings.xml vicará assim:


<resources>
<string name="botao1">Botão 1</string>
<string name="botao1margin">Botão com margin</string>
<string name="botao1padding">Botão 1 com padding</string>
</resources>

Mas se você desejar aplicar margem ou padding em apenas um dos lados, ou especificar valores diferentes para os lados do componente, temos propriedades como:

  • layout_marginBottom / paddingBottom: aplica o valor na parte inferior do componente;
  • layout_marginLeft / paddingLeft: aplica o valor à esquerda do componente;
  • layout_marginRight / paddingRight: aplica o valor à direita do componente;
  • layout_marginTop / paddingTop: aplica o valor na parte superior do componente;

Esta imagem ilustra o que seria a margin e padding: Margin X padding

Então é isso, até mais.

%d blogueiros gostam disto: