http://stackoverflow.com/questions/12555106/android-layout-with-4-squares-and-a-button-inside-each-square



up vote3down voteaccepted

Do you want to create layout look like this screenshot ?

This is layout for my apps named Call & Sms Blocker.

Code for this layout :

  1. main_screen.xml

     <?xml version="1.0" encoding="utf-8"?>
  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:background="@drawable/bgimage2" >

   <TextView
     android:id="@+id/textView1"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_alignParentTop="true"
     android:layout_centerHorizontal="true"
     android:layout_marginTop="29dp"
     android:text="Call & SMS Blocker" 
     android:textAppearance="?android:attr/textAppearanceLarge"
     android:textSize="40dp"
     android:textStyle="bold" /> 

  <Button 
   android:id="@+id/blocked_sms"
   android:layout_width="162dp" 
   android:layout_height="162dp"
   android:layout_marginLeft="50dp"
   android:layout_marginTop="120dp"
   android:background="@drawable/buttoneffects" 
   android:focusable="true" 
   android:textColor="#000000" 
   android:textStyle="bold" /> 

 <ImageButton
  android:id="@+id/imagebutton1" 
  style="?android:attr/buttonStyleSmall" 
  android:layout_width="50dp" 
  android:layout_height="50dp"
  android:layout_alignTop="@+id/blocked_sms" 
  android:layout_centerHorizontal="true" 
  android:layout_marginTop="136dp" 
  android:background="@drawable/buttoneffectpower" /> 

  <Button 
     android:id="@+id/blocked_calls"
     android:layout_width="162dp" 
     android:layout_height="162dp" 
     android:layout_alignBaseline="@+id/blocked_sms"
     android:layout_alignBottom="@+id/blocked_sms"
     android:layout_alignParentRight="true" 
     android:layout_marginRight="50dp"
     android:background="@drawable/buttoneffectssecond" 
     android:focusable="true" android:text="Blocked Calls"
     android:textColor="#000000" 
     android:textStyle="bold" /> 

  <Button 
     android:id="@+id/settings" 
     android:layout_width="162dp" 
     android:layout_height="162dp" 
     android:layout_alignLeft="@+id/blocked_calls"
     android:layout_below="@+id/imagebutton1" 
     android:layout_marginRight="50dp"
     android:background="@drawable/buttoneffectfourth" 
     android:focusable="true" android:text="Settings" 
     android:textColor="#000000" android:textStyle="bold" /> 

 <Button 
  android:id="@+id/blacklist" 
  android:layout_width="162dp" 
  android:layout_height="162dp" 
  android:layout_alignBaseline="@+id/settings"
   android:layout_alignBottom="@+id/settings" 
  android:layout_marginLeft="50dp" 
   android:layout_toLeftOf="@+id/imagebutton1"
  android:background="@drawable/buttoneffectthird" 
  android:focusable="true" 
  android:text="Blacklist" 
  android:textColor="#000000" 
  android:textStyle="bold" /> 

  <Button 
    android:id="@+id/help" 
    android:layout_width="150dp" 
    android:layout_height="70dp" 
    android:layout_alignLeft="@+id/blocked_sms"
 android:layout_alignParentBottom="true" 
 android:layout_marginBottom="69dp"
 android:background="@drawable/buttoneffectsimple" 
 android:focusable="true" 
 android:text="Help" 
 android:textColor="#000000" 
 android:textStyle="bold" /> 

   <Button 
  android:id="@+id/block_last_number" 
  android:layout_width="330dp" 
  android:layout_height="70dp" 
  android:layout_above="@+id/help" 
  android:layout_alignLeft="@+id/help" 
  android:layout_alignRight="@+id/settings" 
  android:layout_marginBottom="27dp"
  android:background="@drawable/buttoneffectsimple" 
  android:focusable="true" 
  android:text="Block Last Number" 
  android:textColor="#000000" 
  android:textStyle="bold" /> 

   <Button 
 android:id="@+id/aboutus" 
 android:layout_width="150dp" 
 android:layout_height="70dp" 
 android:layout_alignBaseline="@+id/help" 
 android:layout_alignBottom="@+id/help"
 android:layout_alignRight="@+id/block_last_number"
 android:background="@drawable/buttoneffectsimple" 
 android:focusable="true" 
 android:text="About Us" 
 android:textColor="#000000" 
 android:textStyle="bold" /> 

</RelativeLayout>

Code for button effects (xml files layout):

    <Selector>
        <item android:drawable="@drawable/blockedsms"><shape>
        <solid android:color="#fff" />

        <stroke android:width="1px" android:color="#444" />

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

        <gradient android:angle="270" android:endColor="#10000000"
           android:startColor="#10FFFFFF" />

        <corners android:bottomRightRadius="50dp" />
    </shape></item>

       </selector>

Now in other xml button effects layout, you have to change

      <corners android:bottomLeftRadius 
      <corners android:topRightRadius
      <corners android:topLeftRadius

      and so on......

Hope! This will help. Cheers !!!

share|improve this answer
   
Not an answer, and you could at least provide some text, instead of just answering a question with another question. –  Darwind Sep 23 '12 at 19:15
   
Sorry for that but I just want to confirm, is requirement matches this screenshot or not ? If yes then I'll provide whole code about this layout. –  Manish Dubey Sep 24 '12 at 4:58
   
@Manish Android yes this would be nice if you can give code example. Thx –  mbrc Sep 24 '12 at 5:20
   
can you send a code example? thank you –  mbrc Sep 24 '12 at 14:40
   
thank you. can you paste the <RelativeLayout> code? –  mbrc Sep 25 '12 at 8:01
show 5 more comments

up vote3down vote

Since the border part seems to be answered by the comment to your question, here is an answer to the layout part:

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

    <TableRow
        android:id="@+id/TableRow01"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1" >

        <Button
            android:id="@+id/Button02"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="20dp"
            android:layout_weight="1"
            android:text="Button" />

        <Button
            android:id="@+id/Button01"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="20dp"
            android:layout_weight="1"
            android:text="Button" />
    </TableRow>

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1" >

        <Button
            android:id="@+id/button2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="20dp"
            android:layout_weight="1"
            android:text="Button" />

        <Button
            android:id="@+id/button1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="20dp"
            android:layout_weight="1"
            android:text="Button" />
    </TableRow>

</TableLayout>

This layout will be independent of the size of the screen and whether it's in landscape or portrait mode. Define your own margins around the buttons ;-)

To use the border from the comment just add:

android:background="@drawable/back"

to the buttons. back is the name of the shape you created.

이 게시물을...