Android Layout Design by Example (Social Networks Sign-In Buttons)

sign-in-buttonsLearning by example is my best way to learn new stuff. Here we will see a good example of designing Android “sing-in with social networks” screen which covers many designing “tips & tricks” that you will definitely need when designing your real-life app.

 

 

 

 

 

Objectives:

  • How to set screen “activity” background?
  • How to position a layout in the middle of a screen?
  • How to make a transparent background?
  • How to change buttons background with gradient colors?
  • How to add image to a button whose background already set with gradient colors?

Environment & Tools:

  • Android Developer Tools (ADT) (or Eclipse + ADT plugin)
  • Android AVD Emulator

( 1 ) Create Android Application

  • File >> New >> Android Application
  • App Name: Social Network Sign-In
  • Enter Project Name: android-social-signin
  • Pakcage: com.hmkcode.android.signin
  • Keep other defualt selections, go Next  till you reach Finish

( 2 ) Set the Screen Background

android-sn-signin-1

  • Add the “balloon” image into res/drawable-hidp
  • In the res/layout/activity_main.xml set the background of the main “root” <RelativeLayout>
  • res/layout/activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" 

    android:background=" @drawable/balloon_bg">

</RelativeLayout>

( 3 ) Adding a LinearLayout with Three Buttons

android-sn-signin-2

  • In the res/layout/activity_main.xml add a new <LinearLayout> & three <Button> within it.
  • res/layout/activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" 

    android:background="@drawable/balloon_bg">

    <LinearLayout 
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        >

        <Button 
               android:id="@+id/btnGplus"
               android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
               android:layout_margin="4dp"
               android:text="Sign in with Google+"
           />
        <Button 
               android:id="@+id/btnFb"
               android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
               android:layout_margin="4dp"
               android:text="Sign in with Google+"
           />
        <Button 
               android:id="@+id/btnTwitter"
               android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
               android:layout_margin="4dp"
               android:text="Sign in with Google+"
           />
        </LinearLayout>

</RelativeLayout>

( 4 ) Positioning Buttons in the Center

android-sn-signin-3

  • Now we want to position the three buttons in the center of the screen. Since all the three buttons are within one <LinearLayout> we will center the layout in the middle of the screen.
  • This can be achieved by android:layout_centerInParent=”true” property.
  • res/layout/activity_main.xml
....
 <LinearLayout 
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:padding="10dp"
        >
....

( 5 ) Making Transparent Background

android-sn-signin-4

  • We will use shape drawable resource to set the background of the <LinearLayout> “that contains the three buttons”
  • Shape drawable is an XML file that defines a geometric shape, including colors and gradients.

in res/drawable-hdpi create a new xml file and name it linearlayout_bg.xml

  • res/drawable-hdpi/linearlayout_bg.xml
  • Shape: rectangle
  • Color: #99000000 (black). The first two digits “99″ is to set the alpha for transparency
  • Corners: 8px (corner curves )
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
   <solid android:color="#99000000" ></solid>
   <corners android:radius="8px"></corners>  
</shape>
  • res/layout/activity_main.xml
......
   <LinearLayout 
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/linearlayout_bg"
        android:padding="10dp"
        >
...........

( 6 ) Coloring Social Networks Buttons

android-sn-signin-5

  • Create three “shape drawable” XML files under res/drawable-hpdi
    • button_fb_gb.xml (for Facebook)
    • button_gplus_gb.xml (for Google+)
    • button_twitter_gb.xml (for Twitter)
  • Each XML file is defining the geometric shape, color and gradient for each button in two different states “press and normal states”
  • All XML files have the below structure. The only difference is the color hex number for each button.
  • res/drawable-hpdi/button_fb_gb.xml Color1=#449def | Color2=#2f6699
  • res/drawable-hpdi/button_gplus_gb.xml  Color1=#ef4444 | Color2=#992f2f
  • res/drawable-hpdi/button_twitter_gb.xml Color1=#74b7e0 | Color2=#4b9ed1
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#[Color1]" />
            <stroke
                android:width="1dp"
                android:color="#[Color2]" />
            <corners
                android:radius="1dp" />

        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#[Color1]"
                android:endColor="#[Color2]"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#[Color2]" />
            <corners
                android:radius="1dp" />

        </shape>
    </item>
</selector>

Set the background of each button to the corresponding XML shape file.

  • res/layout/activity_main.xml
 <LinearLayout ......>
        <Button 
                .......
            android:background="@drawable/button_gplus_bg"
               android:text="Sign in with Google+"
           />
        <Button 
               .......
            android:background="@drawable/button_fb_bg"
               android:text="Sign in with Facebook"
           />
        <Button 
             .......
               android:background="@drawable/button_twitter_bg"
               android:text="Sign in with Twitter"
           />
        </LinearLayout>

 ( 7 ) Style Buttons Text

android-sn-signin-6

  • Define text style in strings.xml
  • res/values/strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">Social Network Sign-In</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</string>

    <style name="ButtonText">
       <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">#ffffff</item>
        <item name="android:gravity">center</item>
        <item name="android:layout_margin">3dp</item>
        <item name="android:textStyle">normal</item>
        <item name="android:textSize">20sp</item>
        <item name="android:shadowColor">#000000</item>
        <item name="android:shadowDx">1</item>
        <item name="android:shadowDy">1</item>
        <item name="android:shadowRadius">2</item>
    </style>

</resources>
  • res/layout/activity_main.xml
<LinearLayout ......>
        <Button 
                .......
            android:background="@drawable/button_gplus_bg"
            style="@style/ButtonText"
               android:text="Sign in with Google+"
           />
        <Button 
               .......
            android:background="@drawable/button_fb_bg"
             style="@style/ButtonText"
               android:text="Sign in with Facebook"
           />
        <Button 
             .......
               android:background="@drawable/button_twitter_bg"
               style="@style/ButtonText"
               android:text="Sign in with Twitter"
           />
        </LinearLayout>

 ( 8 ) Adding Social Networks Icons

android-sn-signin-7

  • Add the social networks icons “images” to /res/drawable-hdpi
    • icon_fb.png
    • icon_gplus.png
    • icon_twitter.png

We need to set the icons to the buttons background, but we already set the background with drawable shapes. Fortunately, Android SDK provides <layer-list> which enables us to have more than one drawable item for a single view layered on top of each other.

The <layer-list> will be defined in a separate file placed under /res/drawable-hdpi. It contains two items “layers” one for the icon and one for the drawable shape “background”  which we already set for each buttons.

  • /res/drawable-hdpi/layers_fb_button_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@drawable/button_fb_bg"
        android:id="@+id/t_bg" />
    <item 
        android:top="0dp" android:left="0dp">
        <bitmap android:src="@drawable/icon_fb"
          android:gravity="left" />
    </item>
</layer-list>

Googe+ & Twitter layers are similar to the previous “facebook” layer.

We need to re-set the background of each button to point the new “drawable” layer-list files instead of the drawable shape. Also, we need to make more space to the left of each button for the icons.

<LinearLayout ......>
        <Button 
                .......
            android:background="@drawable/layers_gplus_button_bg"
            android:paddingTop="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingLeft="30dp"
               android:text="Sign in with Google+"
           />
        <Button 
               .......
            android:background="@drawable/layers_fb_button_bg"
            android:paddingTop="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingLeft="30dp"
               android:text="Sign in with Facebook"
           />
        <Button 
             .......
               android:background="@drawable/layers_twitter_button_bg"
               android:paddingTop="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingLeft="30dp"
               android:text="Sign in with Twitter"
           />
        </LinearLayout>

Source Code @ GitHub