Dando continuidade ao exemplo de utilização de estilos no Android, vou mostrar como modificar o visual de alguns componentes. Todos os elementos visuais que são selecionáveis ou clicáveis podem utilizar o recurso <selector> que permite modificar a aparência do componente, indicando quais imagens serão utilizadas para cada estado do componente. Essas imagens são definidas em um arquivo XML que deve ficar dentro da pasta res/drawable. Isso mesmo, a pasta drawable não armazena só imagens.
Vamos criar um selector que modificará as imagens de um RadioButton. Para isso, crie o arquivo res/layout/meuradiobutton.xml que deve ficar como abaixo:
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_window_focused="false"
android:state_checked="false"
android:drawable="@drawable/img_radio_desmarcado" />
<item
android:state_window_focused="true"
android:state_checked="true"
android:drawable="@drawable/img_radio_marcado" />
</selector>
No exemplo acima, dentro da tag <selector> definimos as imagens utilizadas quando o componente estiver marcado (checked) e desmarcado. Lembrando que as imagens "img_radio_marcado" e "img_radio_desmarcado" também devem estar dentro da pasta res/drawable.
Agora devemos aplicar o selector ao RadioButton. Para utilizar o selector, basta utilizar a propriedade android:button.
<RadioButton
android:checked="false"
android:button="@drawable/meuradiobutton"
android:layout_width="wrap_content"
android:layout_heighth="wrap_content"
android:id="@+id/radioButton1"
android:text="Fácil" />
Podemos observar o resultado na figura abaixo:
Um outra característica legal de modificar é a cor de seleção de Grid e Lista. A idéia é a mesma, criamos um selector e o associamos ao GridView ou ao ListView.
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<!--Imagem do item da lista clicado -->
<item
android:state_pressed="true"
android:drawable="@drawable/img_clicado" />
<!--Imagem do item da lista selecionado sem foco -->
<item
android:state_focused="false"
android:drawable="@drawable/img_selecionado" />
<!--Imagem do item da lista selecionado com foco -->
<item
android:state_window_focused="true"
android:drawable="@drawable/img_selecionado" />
<!--Imagem do item da lista não selecionado -->
<item
android:state_window_focused="false"
android:drawable="@android:color/transparent" />
</selector>
Para esse exemplo temos uma imagem para quando item da lista está selecionado (navegando com o direcional, se o telefone possuir) e outra pra quando o item for clicado. Para aplicar o selector à lista, altere a propriedade listSelector.
<ListView
android:id="@+id/listView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:listSelector="@drawable/meuselector"/>
O resultado é apresentado na figira abaixo.
Qualquer dúvida, deixem seus comentários.
4br4ç05,
nglauber
4 comentários:
Boa noite,
Fabulosa a sua matéria.
Confesso que estudo Android há quase 2 anos e ainda não tinha lido sobre nada do que consta a sua matéria.
A pergunta que eu lhe deixo é:
Por uma questão de padrão de Projecto devemos alterar a imagem dos Radio ?
Obrigado
Cumprimentos
Malainho
Oi César,
Obrigado pelo comentário.
Não é um padrão, é uma necessidade. Se você deseja personalizar o aspecto visual da sua aplicação, é uma boa ideia customizar os componentes para dar uma identidade à mesma.
4br4ç05,
nglauber
Boa noite,
Não sei se me expressei bem.
O que eu queria dizer é o seguinte.
Por exemplo, não devemos fazer um layout para um aplicativo que fuja aos padrões do Android. Isto é, não devemos fazer um layout para um aplicativo Android parecido com o layout de um aplicativo para ios.
Por isso fiz essa questão da alteração dos componentes.
Obrigado pela resposta
Cumprimentos
Malainho
Oi Cesar,
Sem sombra de dúvida. Aplicativos Android devem ter a cara do Android. Mas isso não que dizer que não possam haver algumas customizações.
Esse post tem um exemplo prático. O componente RadioButton, não existe no iOS, mas existe no Android. Eu apenas mudei o seu visual, mas preservei a funcionalidade.
4br4ç05,
nglauber
Postar um comentário