Android Design Layout

Question

I like the Android market apps design, very bright and catchy layout. How it has been done? i tried to put such green semi-circle bar on top with transparency on circle, but my listview is not going behind, where in market apps listview scrolls behind the green bar.

Many thanks in advance.

Rgds Balaji

• Adinia: So, what is your question now? I don't think somebody will write the whole code for you, so you'd better show us your code and ask a specific question about it.
• Balaji: My friend, I have asked how it has been done? native components or webview, if native component transparency at the top green how it achieved. Hope you are a Android expert who can help this android beginner :)

Answer 1

I don't know exactly you want this or not but it may help you.

xml layout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ListView
 android:id="@+id/list"
 android:layout_width="match_parent"
 android:layout_height="match_parent"/>
 <android.support.v7.widget.Toolbar
 android:id="@+id/my_awesome_toolbar"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:background="@color/transparent">
 </android.support.v7.widget.Toolbar>

in Manifest file

<activity
 android:name=".MainActivity"
 android:label="@string/app_name"
 android:theme="@style/Theme.AppCompat.NoActionBar" >

Color.xml

 <color name="transparent">#64000000</color>

Answer 2

As a way I can suggest something like this:

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<View 
 android:id="@+id/top_place_holder"
 android:layout_width="fill_parent"
 android:layout_height="100dip"
/>
<ListView 
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:layout_below="@id/top_place_holder"
/>
<View 
 android:id="@+id/your_top_panel"
 android:layout_width="fill_parent"
 android:layout_height="130dip"
 androis:background="@drawable/your_transparent_semi_circle_here"
/>

So it goes like this: @id/top_place_holder is used to take some space and push the ListView down a bit, so it won't take the whole screen.

@id/your_top_panel is a top panel (the one that will hold your transparent semi circle stuff). It must be a little bigger (in height) than place_holder since it'll cover it and a bit of it will be hovering over the list view, so it would look, like the list view is below.

To not make the actual list elements hide below the top panel - set a header view for your ListView (ListView.addHeaderView()) that will take some space and won't let the first row of data to hide below the top panel.

That above is, of course, a hack way. The best way is to layout components yourself programmatically, so you won't be needing any place_holders and your sizes wouldn't be so hardcoded.