2

I want to create 4 squares and in each square i want to create a small button. The square must be visible and must have a border.

I know how to create 4 buttons as a square but i don't know how to create a border around each square. But i want to to be size independent, now the buttons are very big...

my example

<?xml version="1.0" encoding="utf-8"?>
<ViewFlipper xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="fill_parent" android:layout_width="fill_parent">
    <RelativeLayout android:id="@+id/magaLoginLayout"
        android:layout_height="fill_parent" android:layout_width="fill_parent">
        <Button android:text="@+id/Button01" android:id="@+id/Button01"
            android:layout_width="160dip" android:layout_height="160dip" android:layout_marginTop="20dip"></Button>
        <Button android:text="@+id/Button03" android:layout_below="@+id/Button01" android:id="@+id/Button03"
            android:layout_alignLeft="@+id/Button01" android:layout_height="160dip" android:layout_width="160dip"></Button>
        <Button android:text="@+id/Button04" android:layout_below="@+id/Button01" android:id="@+id/Button04"
            android:layout_toRightOf="@+id/Button03" android:layout_height="160dip" android:layout_width="160dip"></Button>
        <Button android:text="@+id/Button02" android:id="@+id/Button02" android:layout_width="wrap_content"
            android:layout_toRightOf="@+id/Button01" android:layout_alignTop="@+id/Button01" android:layout_alignParentRight="true" android:layout_height="160dip"></Button>


</RelativeLayout>

enter image description here

1

2 Answers 2

6

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 !!!

8
  • Not an answer, and you could at least provide some text, instead of just answering a question with another question.
    – Darwind
    Commented Sep 23, 2012 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. Commented Sep 24, 2012 at 4:58
  • @Manish Android yes this would be nice if you can give code example. Thx
    – mbrc
    Commented Sep 24, 2012 at 5:20
  • and what about Failed to find style 'textViewStyle' in current theme Failed to find style 'buttonStyle' in current theme Failed to find style 'imageButtonStyle' in current theme
    – mbrc
    Commented Sep 25, 2012 at 8:02
  • You can delete this line : style="?android:attr/buttonStyleSmall" As it is used when I drag ImageButton fromlayout panel to my source code. It is style of that image button. Commented Sep 25, 2012 at 8:09
6

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.