How to customize the layout
How to set up FrameLayout, I need to make a screen like this:
and I did this:
So now I want to know How can i achieve above Layout
-
How
show icon on top
like in the above screen ( Path ) -
How
place text above circles
, like in the above screen (Dark Text:
remember life ) (Light Text:
Instantly .... ) -
How to place buttons under the circles , for example, on the screen above ( Register and Login )
Here is mine XML
in which I am using FrameLayout
, see below:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.indianic.viewflipperdemo"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<com.indianic.viewflipperdemo.widget.ViewFlow
android:id="@+id/viewflow"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
app:sidebuffer="3" >
</com.indianic.viewflipperdemo.widget.ViewFlow>
<com.indianic.viewflipperdemo.widget.CircleFlowIndicator
android:id="@+id/viewflowindic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:padding="10dip"
android:layout_marginBottom="10dip"
app:inactiveType="stroke" />
</FrameLayout>
source to share
Finally I achieved my goal, I used both the Layouts
[ Relative Layout
and Linear Layout
] before organize widgets
, see full XML :
circle_layout.xml: -
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.indianic.viewflipperdemo"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<com.indianic.viewflipperdemo.widget.ViewFlow
android:id="@+id/viewflow"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
app:sidebuffer="3" >
</com.indianic.viewflipperdemo.widget.ViewFlow>
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:src="@drawable/ic_launcher" />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/textView2"
android:layout_centerHorizontal="true"
android:text="Remember Life"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="bold" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/viewflowindic"
android:layout_centerHorizontal="true"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:padding="5dp"
android:text="Instantly search memories of friends, season, birthdays, and more"
android:textAppearance="?android:attr/textAppearanceSmall" />
<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:orientation="horizontal"
android:paddingBottom="10dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="10dp" >
<Button
android:id="@+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="left|center"
android:layout_weight="1"
android:text="Register"
android:textColor="#000000" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_weight="1"
android:text="Login"
android:textColor="#000000" />
</LinearLayout>
<com.indianic.viewflipperdemo.widget.CircleFlowIndicator
android:id="@+id/viewflowindic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/linearLayout1"
android:layout_centerHorizontal="true"
android:padding="20dp"
app:inactiveType="stroke" />
</RelativeLayout>
And look at this awesome screenshot
:
source to share
Use RelativeLayout instead of FrameLayout. You will be more free with the positions of the elements.
Something like this you can do it
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.indianic.viewflipperdemo"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<com.indianic.viewflipperdemo.widget.ViewFlow
android:id="@+id/viewflow"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:sidebuffer="3" />
<View
android:id="@+id/center"
android:layout_width="1dp"
android:layout_height="0dp"
android:layout_centerHorizontal="true" />
<Button
android:id="@+id/button_register"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toLeftOf="@+id/center"
android:padding="10dp"/>
<Button
android:id="@+id/button_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toRightOf="@+id/center"
android:padding="10dp"/>
<com.indianic.viewflipperdemo.widget.ViewFlow
android:id="@+id/viewflowindic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/button_register"
android:layout_gravity="bottom|center_horizontal"
android:padding="10dip"
android:layout_marginBottom="10dip"
app:inactiveType="stroke" />
<TextView
android:id="@+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/viewflowindic"
android:layout_centerHorizontal="true"
android:text="description"/>
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/description"
android:layout_centerHorizontal="true"
android:text="title"/>
</RelativeLayout>
btw use match_parent instead of fill_parent.
source to share
Use RelativeLayout to organize your views. For implementation of pager view indicator try this link
https://github.com/JakeWharton/Android-ViewPagerIndicator
Example
<?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">
//You can put an image view or text view to show your app name
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Path"
android:id="@+id/title"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="74dp"/>
**// Try view pager indicator here.**
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:weightSum="2"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:id="@+id/">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Register"
android:layout_weight="1"
android:id="@+id/button"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
android:layout_weight="1"
android:id="@+id/button2"/>
</LinearLayout>
</RelativeLayout>
source to share