Comment faire "bouton" personnalisé comme Facebook pour Android

Question

Je veux faire mon écran d'accueil pour mon application Android comme Facebook pour Android. Est-ce que quelqu'un sait comment faire cette mise en page? Je suis encore débutant pour Android Development.

Answer 1

Utilisez trois Agencement linéaire avec l'orientation horizontale et rendre leur mise en page de parent avec une orientation verticale, comme ceci:

<?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:baselineAligned="false" android:orientation="horizontal"> 
    <LinearLayout android:gravity="center" android:layout_width="wrap_content" 
    android:layout_height="wrap_content" android:orientation="vertical" android:layout_gravity="center_vertical" android:layout_weight="1"> 
     <LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_gravity="center" > 
     <LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content" 
      android:orientation="vertical"> 
      <ImageView android:background="@drawable/icon" 
       android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/> 
      <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" 
       android:text="caption"/> 
     </LinearLayout> 
      <LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content" 
      android:orientation="vertical" android:layout_marginLeft="20dip"> 
      <ImageView android:background="@drawable/icon" 
       android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/> 
      <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" 
       android:text="caption"/> 
     </LinearLayout> 
     <LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content" 
      android:orientation="vertical" android:layout_marginLeft="20dip"> 
      <ImageView android:background="@drawable/icon" 
       android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/> 
      <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" 
       android:text="caption"/> 
     </LinearLayout> 
     </LinearLayout> 
     <LinearLayout android:baselineAligned="false" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_gravity="center" > 
     <LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content" 
      android:orientation="vertical"> 
      <ImageView android:background="@drawable/icon" 
       android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/> 
      <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" 
       android:text="caption"/> 
     </LinearLayout> 
      <LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content" 
      android:orientation="vertical" android:layout_marginLeft="20dip"> 
      <ImageView android:background="@drawable/icon" 
       android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/> 
      <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" 
       android:text="caption"/> 
     </LinearLayout> 
      <LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content" 
      android:orientation="vertical" android:layout_marginLeft="20dip"> 
      <ImageView android:background="@drawable/icon" 
       android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/> 
      <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" 
       android:text="caption"/> 
     </LinearLayout> 
     </LinearLayout> 
     <LinearLayout android:baselineAligned="false" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_gravity="center" > 
     <LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content" 
      android:orientation="vertical"> 
      <ImageView android:background="@drawable/icon" 
       android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/> 
      <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" 
       android:text="caption"/> 
     </LinearLayout> 
      <LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content" 
      android:orientation="vertical" android:layout_marginLeft="20dip"> 
      <ImageView android:background="@drawable/icon" 
       android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/> 
      <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" 
       android:text="caption"/> 
     </LinearLayout> 
      <LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content" 
      android:orientation="vertical" android:layout_marginLeft="20dip"> 
      <ImageView android:background="@drawable/icon" 
       android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/> 
      <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" 
       android:text="caption"/> 
     </LinearLayout> 
     </LinearLayout> 
    </LinearLayout> 
</LinearLayout> 

ressemble à ceci:

Answer 2

Vous pouvez faire une table 3x3, mettre 3 boutons par rangée, et une image d'arrière-plan comme le bouton:

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

android:id="@+id/tableLayout1" 
android:layout_height="match_parent" 
android:layout_width="wrap_content"> 

<TableRow 
    android:id="@+id/tableRow1" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"> 
    <Button 
     android:text="Button" 
     android:id="@+id/button1" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:background="@drawable/icon1"></Button> 
    <Button 
     android:text="Button" 
     android:id="@+id/button2" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:background="@drawable/icon2"></Button> 
    <Button 
     android:text="Button" 
     android:id="@+id/button3" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:background="@drawable/icon3"></Button> 

</TableRow> 
<TableRow 
    android:id="@+id/tableRow2" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"> 

    <Button 
     android:text="Button" 
     android:id="@+id/button4" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:background="@drawable/icon4"></Button> 
    <Button 
     android:text="Button" 
     android:id="@+id/button5" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:background="@drawable/icon5"></Button> 
    <Button 
     android:text="Button" 
     android:id="@+id/button6" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:background="@drawable/icon6"></Button> 
</TableRow> 
<TableRow 
    android:id="@+id/tableRow3" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"> 

    <Button 
     android:text="Button" 
     android:id="@+id/button7" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:background="@drawable/icon7"></Button> 
    <Button 
     android:text="Button" 
     android:id="@+id/button8" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:background="@drawable/icon8"></Button> 
    <Button 
     android:text="Button" 
     android:id="@+id/button9" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:background="@drawable/icon9"></Button> 
</TableRow> 

Modifier le @ drawable/IconX à ce que l'image de fond que vous voulez/besoin.

Answer 3

Voici le code: home_icon_view.xml

<?xml version="1.0" encoding="UTF-8"?> 
<LinearLayout android:orientation="vertical" android:focusable="true" android:layout_width="90.0dip" android:layout_height="70.0dip" android:layout_margin="5.0dip" xmlns:android="http://schemas.android.com/apk/res/android"> 
<LinearLayout android:gravity="center" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1.0"> 
    <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:scaleType="center" /> 
</LinearLayout> 
<TextView android:textSize="14.0sp" android:textColor="@color/home_text_color" android:gravity="center_horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" /> 
</LinearLayout> 

Et home.xml

<LinearLayout android:orientation="vertical" android:id="@id/home_icons" android:paddingTop="5.0dip" android:paddingBottom="24.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1.0"> 
    <LinearLayout android:gravity="bottom|center" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content"> 
     <include android:id="@id/home_news_feed_icon" layout="@layout/home_icon_view" /> 
     <include android:id="@id/home_profile_icon" layout="@layout/home_icon_view" /> 
     <include android:id="@id/home_friends_icon" layout="@layout/home_icon_view" /> 
    </LinearLayout> 
    <LinearLayout android:gravity="bottom|center" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content"> 
     <include android:id="@id/home_messages_icon" layout="@layout/home_icon_view" /> 
     <include android:id="@id/home_places_icon" layout="@layout/home_icon_view" /> 
     <include android:id="@id/home_groups_icon" layout="@layout/home_icon_view" /> 
    </LinearLayout> 
    <LinearLayout android:gravity="bottom|center" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content"> 
     <include android:id="@id/home_events_icon" layout="@layout/home_icon_view" /> 
     <include android:id="@id/home_photos_icon" layout="@layout/home_icon_view" /> 
     <include android:id="@id/home_chat_icon" layout="@layout/home_icon_view" /> 
    </LinearLayout> 
</LinearLayout>