Android Case Studies : Kompas.com

I think there are already tons of tutorial for android and i think i wont add another tutorial because someone already created it and i think its worth reading. Right now I'm just gonna create case studies and find solution using tutorial that already been made out there.

So why Kompas.com ? okay i don't really have the specific answer but what I'm trying to create is a standard app for news or blog site. its like CMS for android, maybe not. Its just to make more easy to create other application with similar requirements.

This is the screenshot from Google play.

I will try to break it down and start to find solution on how to code it.


If you see the above screenshot, there's always sticky header on top and a scrollable content on every content they use. There's also slide-in menu if you click left button on header bar.

A lot of things we can learn from other developer masterpiece. I just hope I'm not that far from the masterpiece it self.

ANDROID CREATING FIXED HEADER AND FOOTER

Anyway, Lets just start it. Lets try to find how to create fixed header with scrollable content. The easy way to do it is just using Google. With only using keywords like "android create fixed header and footer" I've found a lot of tutorial to help me get Kompas layout. This what i found :




1. some of Stackoverflow with Q&A but i don't think it satisfied my needs
2. Tutorial from Javacodegeeks.com looks very promising and I will go with this one

Tutorial from Javacodegeeks.com is a very detailed and really help me to learn on creating fixed header with scrollable content. Next step should be on how to modified the result from the tutorial to make it look similar to Kompas.com.

Here are the result from following Javacodegeeks's tutorial that really needs some modified. At least we have a layout that can be modified. the code should be on the site just go to Javacodegeeks.com

As for now, I think I'm just gonna do the header and loses the footer first. Here are the result right now

and here's the code for this layout

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context=".MainActivity" >
    
      <!-- Header aligned to top -->

    <RelativeLayout
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        
        android:background="#FC9"
         >
    <LinearLayout 
        android:orientation="horizontal"
        android:layout_width = "fill_parent"
        android:layout_height = "wrap_content"
        android:background="@drawable/bordertopbottom"
        android:paddingTop="3dp"
        >
        <Button
            android:id="@+id/button1"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button"
            
            android:textSize="20sp"
             />
         <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
           
            android:text="@string/kompas"
            android:textColor="#000"
            android:textSize="20sp" />
        
        </LinearLayout>
       
        

    </RelativeLayout>
    
    <!-- Scrollable Item below header and above footer -->
  <ScrollView
    android:id="@+id/scrollableContents"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_above="@id/footer"
    android:background="#005"
    android:layout_below="@id/header" >

    <LinearLayout
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:gravity="center_horizontal"
      android:orientation="vertical" >

      <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 1"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

      <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 2"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

      <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 3"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

      <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 4"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

      <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 5"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

      <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 6"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

      <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 7"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

       <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 8"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

        <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 9"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

         <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 10"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

    </LinearLayout>

  </ScrollView>
   
</RelativeLayout>

There are few tutorial and few stackoverflow that backing this code. The keywords are "Gradient" and "border". Fortunate for me there are already simple solution for this and Stackoverflow give a simple answer

here on Android create border with gradient as bonus http://stackoverflow.com/questions/8323599/how-to-add-bottom-border-in-relativelayout


I will try to upgrade this code first to make it look more like Kompas.com.

ANDROID CREATING HEADER BUTTON USING IMAGE BUTTON

The button on the header, I'm still figuring out but maybe its just an ImageButton. Here are the result from what i made.

and this is one from Kompas app

I think we made a progress here but maybe not, at least is a step.

anyway here's the code for ImageButton. Just swap the button with these code and copy paste the image to res/drawable folder

ic_drawer1.png

layout xml

<ImageButton 
android:id="@+id/done" 
android:src="@drawable/ic_drawer1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" 
android:layout_gravity="top"
android:contentDescription="desc"
style="?android:attr/buttonStyleSmall"
/>

After learning few stuff. I noticed that slider menu or navigation menu that slide from left need more research than just copy paste from other tutorial. So this will be testing and trying few stuff before continuing Case Studies.

Slider Menu


[i will update this soon. There are few code testing first]