Blog do Éder

Início » Posts etiquetados como 'android'

Arquivo da tag: android

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.

Android: Linear Layout

Bom, continuando, iremos falar sobre o Linear Layout. Conforme a documentação oficial, o linear layout alinha seus componentes (children) em uma única direção, vertical ou horizontal. Para esta série de tutoriais sobre gerenciadores de layout, iremos utilizar o mesmo projeto no android studio, chamado TestaLayouts. Crie um projeto com tudo em branco, sem activity, pra não encher de coisas que nos confundem em um primeiro momento, iremos fazer do zero do nosso jeito.

Com o projeto TestaLayouts criado, então crie um arquivo de layout. Para isso, altere a visualização para Android, se ainda não estiver. Então, em cima da pasta ‘res’, clique com o botão direito, new/xml/layout xml file. Nomeie ele para teste_linear_layout.xml, deixando o linear layout selecionado, clique em finish.

Este arquivo deve ter o seguinte conteúdo:

<?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="@dimen/manual"
        android:layout_height="wrap_content"
        android:id="@+id/btn1"
        android:text="@string/btn1"
        android:layout_margin="@dimen/margem"
        android:padding="@dimen/padding" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn2"
        android:text="@string/btn2"
        android:layout_margin="@dimen/margem"
        android:padding="@dimen/padding" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btn3"
        android:text="@string/btn3"
        android:layout_margin="@dimen/margem"
        android:padding="@dimen/padding" />

    <Button
        android:layout_width="@dimen/manual"
        android:layout_height="@dimen/manual"
        android:id="@+id/btn4"
        android:text="@string/btn4"
        android:layout_margin="@dimen/margem"
        android:padding="@dimen/padding"
        android:layout_gravity="right" />

    <ImageView
        android:layout_width="@dimen/img"
        android:layout_height="@dimen/img"
        android:src="@drawable/lightbulb58"
        android:layout_gravity="center" />

</LinearLayout>

Bom, aqui coloquei 4 buttons e um imageview. Adicionar componentes diretamente no xml é um tanto quanto simples. Você escolhe o que quer, e escreve ali. Se for arastando mouse, é mais fácil ainda. Vamos atentar para alguns detalhes.

A segunda linha do arquivo, onde diz LinearLayout, obviamente, nos diz que o gerenciador de layout é o LinearLayout. Logo após, temos as propriedades android:layout_width=”match_parent”, android:layout_height=”match_parent” e android:orientation=”vertical”. As duas primeiras, dizem para o compilador que este arquivo vai usar tudo que o pai tem disponível de espaço. Como não há pai, então vai usar a tela inteira do dispositivo. A última propriedade, está setada para vertical. Por padrão, o Android Studio omite esta propriedade, mas eu já tive problemas com ela, então aprendi a declarar para não me incomodar. Você pode se perguntar: ‘mas se eu deitar a tela, não vai funcionar?’. Vai. Vertical quer dizer que os elementos (children) serão colocados de forma vertical, um abaixo do outro. Se quiser, podes alterar para ‘horizontal’ esta propriedade, e veja o resultado. Serão colocados um ao lado do outro. Lembre de diminuir a propriedade layout_width para caber na tela lado a lado.

Já no botão 1 (btn1), temos a propriedade android:layout_width com valor “@dimen/manual”. Como falei no post anterior, não é aconselhável, embora o AndroidStudio permita, colocar valores explícitos diretamente no arquivo de layout. Se você precisar alterar, fica muito trabalhoso, pois com o avanço do projeto, o aplicativo vai ficando grande, imagina em cada arquivo de layout ter q alterar uma margem, por exemplo. Colocar os valores em “@dimen/manual” é ‘menos feio’, digamos assim. Abaixo, temos o arquivo “@dimen/manual”:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="margem">5dp</dimen>
    <dimen name="padding">5dp</dimen>
    <dimen name="manual">200dp</dimen>
    <dimen name="img">90dp</dimen>
</resources>

Aproveitando, temos o arquivo res/values/strings, com o seguinte conteúdo:

<resources>
    <string name="app_name">Testa Layouts</string>
    <string name="btn1">Botão 1</string>
    <string name="btn2">Botão 2</string>
    <string name="btn3">Botão 3</string>
    <string name="btn4">Botão 4</string>
</resources>

O arquivo strings, como podemos ver, armazena as strings do nosso app. Isto é útil, quando queremos mudar uma mesma string que aparece em mais de um lugar, ou ainda, traduzir para outro idioma nosso aplicativo. Ainda sobre o arquivo de layout, na ImageView, temos a propriedade android:src, onde definimos que imagem queremos carregar na tela. As imagens por padrão, ficam dentro de res/drawable. Nosso layout ficará assim:

Linear layout no android

Linear layout no android

Lembre-se, tens que ter as imagens de algum lugar, eu peguei de um site de ícones mesmo, era só pra ilustrar.

Agora, criamos uma classe para usar este arquivo de layout. Na verdade, será uma activity. Clique com o botão direito em app/java/nome_do_seu_pacote, new/java class. O nome dela será TestaLinearLayout.java, com o seguinte conteúdo:


package com.example.ederpaulo.testalayouts;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;

/**
 * Created by eder.paulo on 05/01/2016.
 */
public class TestaLinearLayout extends Activity implements View.OnClickListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.teste_linear_layout);
    }

    @Override
    public void onClick(View v) {

    }
}

No código acima, nada de mais, apenas nos mostra o layout que criamos, só que agora direto no dispositivo. Ah, quando criamos uma classe java no Android Studio, e queremos ‘transformá-la’ em uma activity, temos que extender a classe Activity. Já aproveitei e implementei a OnClickListener, que usaremos nos próximos artigos.

Acho que é isso, se não tem nada de errado vai funcionar, dúvidas postem nos coments.

Até mais.

SnackBar no Android

Olá;

Recentemente, precisei mexer com a snackBar no android, então vou mostrar rapidamente o que consegui.

A SnackBar é mais um dos inúmeros componentes do material design do google. A SnackBar é interessante, e em alguns casos, pode substituir a mensagem do tipo Toast. Outro recurso interessante, é que podemos definir uma ação pra ela, com um botão e tudo mais.

Sem mais enrolação, vamos ao código. Crie um projeto no Android Studio, no meu caso, chama-se TestaSnackBar, criei o mesmo em branco, sem nenhuma activity, justamente para entendermos o que está acontecendo. O código fonte está disponível em aqui. E aqui, temos a documentação oficial deste componente.

Crie um arquivo de layout. Vá em File/New/Xml/Layout XML File. O nome dele pode ser main_activity, deixe o gerenciador de layout como LinearLayout, que já vem por padrão.

Neste arquivo, teremos o seguinte código:

<?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="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btn1"
        android:text="@string/msg_btn"

        />
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btn2"
        android:text="@string/msg_btn_action"

        />


</LinearLayout>

Repare os buttons, que temos a string respectiva, então crie ela em res/values/strings.xml. Este arquivo tem o seguinte conteúdo:

<resources>
    <string name="app_name">TestaSnackBar</string>
    <string name="msg_btn">Mostrar SnackBar</string>
    <string name="msg_btn_action">Snack com action</string>
</resources>

Feito isso, nosso layout ficará assim:

Captura de tela de 2016-01-04 21-24-03

Feito isso, agora iremos criar a classe MainActivity.java. O nome pouco importa, desde que referenciamos de forma correta no AndroidManifest.xml. A classe MainActivity.java terá o seguinte conteúdo:

package com.example.eder.testasnackbar;

import android.app.Activity;
import android.os.Bundle;
import android.support.design.widget.Snackbar;
import android.util.Log;
import android.view.View;
import android.widget.Button;

/**
 * Created by eder on 04/01/16.
 */
public class MainActivity extends Activity implements View.OnClickListener {

    Button botao1;
    Button botao2;
    Snackbar snackbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_activity);

        botao1 = (Button) findViewById(R.id.btn1);
        botao2 = (Button) findViewById(R.id.btn2);
        botao1.setOnClickListener(this);
        botao2.setOnClickListener(this);


    }


    @Override
    public void onClick(View v) {

        switch (v.getId()){
            case R.id.btn1:
                snackbar = Snackbar.make(v, "Arquivo deletado", Snackbar.LENGTH_SHORT);
                snackbar.show();
                break;
            case R.id.btn2:
                snackbar = Snackbar.make(v, "Arquivo deletado", Snackbar.LENGTH_SHORT)
                        .setAction("Desfazer", new View.OnClickListener() {
                            @Override
                            public void onClick(View view){
                                Log.i("log", "Desfeito");
                            }
                        });
                snackbar.show();
                break;
        }

    }
}

Como podemos observar, criamos um clickListener para os botões, reaproveitando muito código java. Para cada botão, cria-se uma snackBar totalmente diferente.
A Snack do btn1, apenas mostra uma notificação, algo como um substituto ao toast.
Já a segunda, além de mostrar a mensagem, temos um botão para fazer determinada ação, neste caso a de desfazer alguma ação.

Ah, o arquivo AndroidManifest.xml deve estar assim:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.eder.testasnackbar">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" android:screenOrientation="portrait">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>


    </application>

</manifest>

A imagem abaixo, mostra como ficaria somente a SnackBar:
Captura de tela de 2016-01-04 21-25-59

Já esta outra, mostra a mensagem na SnackBar com o botão de ação, repare no log atrás, no AndroidStudio:
Captura de tela de 2016-01-04 21-26-05

Esta mostra o log, que definimos na action da snackbar:
Captura de tela de 2016-01-04 21-26-07

É isto, agora fica por conta da sua imaginação.

Até mais;

Éder

 

Android: tipos de gerenciadores de layouts no Android

Quando comecei a desenvolver no android, tive algumas dúvidas relativas á qual gerenciador de layout usar para as activities. Antes disso, devemos entender dois atributos presentes em qualquer gerenciador de layout: android:layout_width e android:layout_height. Estes atributos, definem a largura e altura que o gerenciador de layout vai ocupar dentro da tela do aparelho. Os valores possíveis, podemos especificar em número, ou então, usamos outros 2 valores. São eles: wrap_content ou match_parent. O fill_parent, é a mesma coisa que o match_parent, mas só foi usado até o android 2.1.

O wrap_content, vai ajustar ao conteúdo dentro dele, ou seja, se houver pouco conteúdo, vai ocupar pouco espaço, se houver muito conteúdo, pode usar mais espaço.

Já o match_parent, como o nome sugere, vai usar toda a área restante do ‘pai’, ou seja, do viewgroup que ele está contido.

Se definirmos um valor fixo, então o tamanho vai se ajustar conforme a densidade da tela do dispositivo. Não é recomendado usar valores fixos, pois isso vai atrapalhar para a adaptação em dispositivos de telas com tamanhos diferentes. Mesmo assim, se é inevitável, não declare o valor diretamente no arquivo xml do layout, e sim, em ‘res/values/dimens.xml’, e então no xml do layout, apenas chame assim:

android:layout_width=’@dimen/valor_definido’

No próximo post, irei falar sobre cada gerenciador de layout disponível atualmente para desenvolver no android.

%d blogueiros gostam disto: