Rohan Chavan
Reputation: 177
Android how to design tabs
I would like the screen to look like the image displayed below. I have tried to implement this design using a table layout, but this does not look correct. Please suggest any other techniques.
Upvotes: 0
Views: 57
Answers (1)
esQmo_
Reputation: 1709
Try something like below. Just adjust the margin. Should look like what you need. You can also wrap all inside a ScrollView.
<RelativeLayout
android:id="@id/layout_main"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:background="@color/c_main_back_ground_color">
<RelativeLayout
android:id="@id/lt1"
android:layout_width="163.0dip"
android:layout_height="230.0dip"
android:layout_marginEnd="5.0dip"
android:layout_marginLeft="12.0dip"
android:layout_marginRight="5.0dip"
android:layout_marginStart="12.0dip"
android:layout_marginTop="12.0dip"
android:background="@drawable/your_image"
android:clickable="false"
android:elevation="6dp">
<View
android:id="@+id/view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="?android:selectableItemBackground"
android:duplicateParentState="true" />
<ImageView
android:id="@+id/im1"
android:layout_width="130dip"
android:layout_height="130dip"
android:layout_alignParentEnd="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:adjustViewBounds="false"
android:background="@color/your_bg"
android:clickable="true"
android:contentDescription="@string/your_string"
android:cropToPadding="false" />
<TextView
android:id="@+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="14dp"
android:gravity="center_vertical|center_horizontal|center"
android:text="@string/account"
android:textColor="@color/your_color"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:id="@+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="@+id/lt1"
android:paddingBottom="2dip"
android:paddingEnd="2dip"
android:paddingLeft="2dip"
android:paddingRight="2dip"
android:paddingStart="2dip"
android:text="@string/your_string"
android:textAlignment="center"
android:textColor="@color/black"
android:textSize="12sp" />
</RelativeLayout>
<RelativeLayout
android:id="@id/lt2"
android:layout_width="163.0dip"
android:layout_height="235.0dip"
android:layout_marginEnd="12.0dip"
android:layout_marginLeft="5.0dip"
android:layout_marginRight="12.0dip"
android:layout_marginStart="5.0dip"
android:layout_marginTop="12.0dip"
android:layout_toEndOf="@id/lt1"
android:layout_toRightOf="@id/lt1"
android:background="@drawable/your_image"
android:clickable="false"
android:focusable="false">
<View
android:id="@+id/view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="?android:selectableItemBackground"
android:duplicateParentState="true" />
<ImageView
android:id="@+id/im2"
android:layout_width="130dip"
android:layout_height="130dip"
android:layout_alignParentEnd="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="false"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:clickable="true"/>
<TextView
android:id="@+id/tv3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="@+id/lt2"
android:elevation="7dp"
android:paddingBottom="2dip"
android:paddingEnd="2dip"
android:paddingLeft="2dip"
android:paddingRight="2dip"
android:paddingStart="2dip"
android:text="@string/your_string"
android:textAlignment="center"
android:textColor="@color/black"
android:textSize="12sp" />
<TextView
android:id="@+id/tv4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="14dp"
android:gravity="center_vertical|center_horizontal|center"
android:text="@string/your_string"
android:textAlignment="center"
android:textColor="@color/black"
android:textSize="18sp"
android:textStyle="bold" />
</RelativeLayout>
<RelativeLayout
android:id="@id/lt3"
android:layout_width="163.0dip"
android:layout_height="235.0dip"
android:layout_below="@id/lt1"
android:layout_marginBottom="10dip"
android:layout_marginEnd="5.0dip"
android:layout_marginLeft="12.0dip"
android:layout_marginRight="5.0dip"
android:layout_marginStart="12.0dip"
android:layout_marginTop="10.0dip"
android:background="@drawable/your_image"
android:clickable="false"
android:elevation="5dp">
<View
android:id="@+id/view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="your_bg"
android:duplicateParentState="true" />
<TextView
android:id="@+id/tv5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="14dp"
android:gravity="center_vertical|center_horizontal|center"
android:text="@string/your_string"
android:textColor="@android:color/black"
android:textSize="18sp"
android:textStyle="bold" />
<ImageView
android:id="@+id/im3"
android:layout_width="130dip"
android:layout_height="130dip"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:contentDescription="@string/services"
app:srcCompat="@drawable/services" />
<TextView
android:id="@+id/tv6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="@+id/im3"
android:paddingBottom="2dip"
android:paddingEnd="2dip"
android:paddingLeft="2dip"
android:paddingRight="2dip"
android:paddingStart="2dip"
android:text="@string/your_string"
android:textAlignment="center"
android:textColor="@color/black"
android:textSize="12sp" />
</RelativeLayout>
<RelativeLayout
android:id="@id/lt4"
android:layout_width="163.0dip"
android:layout_height="235.0dip"
android:layout_below="@id/lt2"
android:layout_marginBottom="10dip"
android:layout_marginEnd="12.0dip"
android:layout_marginLeft="5.0dip"
android:layout_marginRight="12.0dip"
android:layout_marginStart="5.0dip"
android:layout_marginTop="10.0dip"
android:layout_toEndOf="@id/lt3"
android:layout_toRightOf="@id/lt3"
android:background="@drawable/your_bg">
<View
android:id="@+id/view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="?android:selectableItemBackground"
android:duplicateParentState="true" />
<TextView
android:id="@+id/tv7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="31dp"
android:text="@string/other_detail"
android:textColor="@color/black"
android:textSize="12sp" />
<ImageView
android:id="@+id/im4"
android:layout_width="130dip"
android:layout_height="130dip"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:contentDescription="@string/your_string"/>
<TextView
android:id="@+id/tv8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="14dp"
android:clickable="true"
android:gravity="center_vertical|center_horizontal|center"
android:text="@string/your_string"
android:textColor="@color/black"
android:textSize="18sp"
android:textStyle="bold" />
</RelativeLayout>
</RelativeLayout>
Upvotes: 1