I like to design a layout like in the image below. What would be the best way to design this layout, so the icon will be centered in the box and if we load it in big screen the whole screen should fit those 8 boxes?
Here's an example on how you might do that layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_main"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<View
android:id="#+id/middle_separator"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_centerHorizontal="true" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_alignRight="#id/middle_separator"
android:orientation="vertical" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#000000" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Stuff"
android:textColor="#ffffff" />
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#220000" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Stuff"
android:textColor="#ffffff" />
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#440000" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Stuff"
android:textColor="#ffffff" />
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#660000" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Stuff"
android:textColor="#ffffff" />
</FrameLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/middle_separator"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:orientation="vertical" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#880000" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Stuff"
android:textColor="#ffffff" />
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#aa0000" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Stuff"
android:textColor="#ffffff" />
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#cc0000" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Stuff"
android:textColor="#ffffff" />
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#ee0000" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Stuff"
android:textColor="#ffffff" />
</FrameLayout>
</LinearLayout>
</RelativeLayout>
Related
Hi i had to make a layout with card with recyclerview so for that i set an image as a background to linear layout but now i'm unable to center crop that image
My problem is that i cannot use imageview because using that the height of card increases as well and i don't want that so please if someone can assit me..
my xml
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/primary_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="19dp"
android:layout_marginRight="19dp"
android:layout_marginTop="15dp"
app:cardCornerRadius="115dp">
<ImageView
android:id="#+id/background_image_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:visibility="gone" />
<LinearLayout
android:id="#+id/background_image"
android:layout_width="match_parent"
android:layout_height="210dp"
android:background="#drawable/club1"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_image"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="20dp"
android:src="#drawable/ellipse" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp">
<com.ct.listrtrial.Custom.CustomTextViewMedium
android:id="#+id/first_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="18dp"
android:padding="5dp"
android:text="John Doe"
android:textColor="#color/White"
android:textSize="15sp" />
<com.ct.listrtrial.Custom.CustomTextViewMedium
android:id="#+id/second_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="18dp"
android:padding="5dp"
android:text="checked in to"
android:textColor="#color/White"
android:textSize="10sp" />
<com.ct.listrtrial.Custom.CustomTextViewMedium
android:id="#+id/third_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="18dp"
android:padding="5dp"
android:text="W south"
android:textColor="#color/White"
android:textSize="15sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:orientation="horizontal">
<com.ct.listrtrial.Custom.CustomTextViewMedium
android:id="#+id/fourth_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="9dp"
android:text="beach mumbai"
android:textColor="#color/White"
android:textSize="15sp" />
<com.ct.listrtrial.Custom.CustomTextViewMedium
android:id="#+id/fifth_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/second_text"
android:layout_toRightOf="#+id/fourth_text"
android:text="30 mins ago."
android:textColor="#color/White"
android:textSize="10sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="85dp">
<com.ct.listrtrial.Custom.CustomTextViewMedium
android:id="#+id/sixth_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerInParent="true"
android:padding="10dp"
android:text="reply to abc............"
android:textColor="#color/White" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerInParent="true">
<ImageView
android:id="#+id/favourite_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/ic_favorite_border_black_24dp" />
<com.ct.listrtrial.Custom.CustomTextViewMedium
android:id="#+id/seventh_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="15dp"
android:text="40 likes"
android:textColor="#color/White" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
You can't center crop a background image of linear layout,
But you can achieve the same using these changes:
Replace you LinearLayout with RelativeLayout
Place a ImageView as a first child inside relative layout and use property for center crop.
<RelativeLayout
android:id="#+id/background_image"
android:layout_width="match_parent"
android:layout_height="210dp"
android:orientation="vertical">
<ImageView
android:scaleType="centerCrop"
android:src="#drawable/club1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
.....
......
</RelativeLayout>
If you Want to control The Image View Scale
you need to put it in ImageView As Src Not Background
You can use Frame layout To Achieve it
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/primary_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="19dp"
android:layout_marginRight="19dp"
android:layout_marginTop="15dp"
app:cardCornerRadius="115dp">
<ImageView
android:id="#+id/background_image_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:visibility="gone" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="210dp">
<ImageView
android:layout_width="match_parent"
android:src="#mipmap/ic_launcher"
android:layout_height="match_parent" />
<LinearLayout
android:id="#+id/background_image"
android:layout_width="match_parent"
android:layout_height="210dp"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/profile_image"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="20dp"
android:src="#drawable/playstore_icon" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp">
<TextView
android:id="#+id/first_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="18dp"
android:padding="5dp"
android:text="John Doe"
android:textSize="15sp" />
<TextView
android:id="#+id/second_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="18dp"
android:padding="5dp"
android:text="checked in to"
android:textSize="10sp" />
<TextView
android:id="#+id/third_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="18dp"
android:padding="5dp"
android:text="W south"
android:textSize="15sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:orientation="horizontal">
<TextView
android:id="#+id/fourth_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="9dp"
android:text="beach mumbai"
android:textSize="15sp" />
<TextView
android:id="#+id/fifth_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/second_text"
android:layout_toRightOf="#+id/fourth_text"
android:text="30 mins ago."
android:textSize="10sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="85dp">
<TextView
android:id="#+id/sixth_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerInParent="true"
android:padding="10dp"
android:text="reply to abc............"
android:textColor="#color/white" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerInParent="true">
<ImageView
android:id="#+id/favourite_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/ic_close" />
<TextView
android:id="#+id/seventh_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="15dp"
android:text="40 likes"
android:textColor="#color/white" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</FrameLayout>
</android.support.v7.widget.CardView>
CenterCrop logic is baked inside ImageView. The correct solution is to extract it into a Drawable which wraps another Drawable and centerCrops it.
If you use CoordinatorLayout, then just to put your ImageView with centerCrop parameter to top.
<CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:scaleType="centerCrop"
android:background="#drawable/background_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:elevation="0dp">
<include layout="#layout/header_main" />
<TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#android:color/white"
android:background="#drawable/white_border_background"
app:tabIndicatorHeight="3dp"/>
</AppBarLayout>
<ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</CoordinatorLayout>
I've got a fragment from which users select features their rooms have (fig.1 below) and these are stored in the back-end as boolean values i.e. true if set and false otherwise.
The XML for the fragment:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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"
<!-- none core xml formatting and views -->
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="20dp"
android:weightSum="1"
android:layout_gravity="center_horizontal"
android:background="#drawable/border_bottom_top"
android:id="#+id/details_amenities_layout">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:baselineAligned="false">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:paddingTop="5dp" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="38dp"
android:id="#+id/add_room_bic_imageview"
android:src="#mipmap/ic_bic"
android:padding="5dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/add_room_bic_amenity"
android:id="#+id/add_room_bic_label"
android:textSize="16sp"
android:gravity="center"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_below="#+id/add_room_bic_imageview" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:paddingTop="5dp" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="38dp"
android:id="#+id/add_room_entrance_imageview"
android:src="#mipmap/ic_entrance"
android:padding="5dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/add_room_entrance_amenity"
android:id="#+id/add_room_entrance_label"
android:textSize="16sp"
android:gravity="center"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:paddingTop="5dp" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="38dp"
android:id="#+id/add_room_toilet_imageview"
android:src="#mipmap/ic_toilet"
android:padding="5dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/add_room_toilet_amenity"
android:id="#+id/add_room_toilet_label"
android:textSize="16sp"
android:gravity="center"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:paddingTop="5dp" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="38dp"
android:id="#+id/add_room_kitchen_imageview"
android:src="#mipmap/ic_kitchen"
android:padding="5dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/add_room_kitchen_amenity"
android:id="#+id/add_room_kitchen_label"
android:textSize="16sp"
android:gravity="center"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:baselineAligned="false"
android:layout_marginTop="8dp" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:paddingTop="5dp" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="38dp"
android:id="#+id/add_room_parking_imageview"
android:src="#mipmap/ic_parking"
android:padding="5dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/add_room_parking_amenity"
android:id="#+id/add_room_parking_label"
android:textSize="16sp"
android:gravity="center"
android:layout_centerHorizontal="true"
android:layout_below="#+id/add_room_parking_imageview" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:paddingTop="5dp" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="38dp"
android:id="#+id/add_room_wifi_imageview"
android:src="#mipmap/ic_wi_fi"
android:padding="5dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/add_room_wifi_amenity"
android:id="#+id/add_room_wifi_label"
android:textSize="16sp"
android:gravity="center"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:paddingTop="5dp" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="38dp"
android:id="#+id/add_room_secure_imageview"
android:src="#mipmap/ic_secure"
android:padding="5dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/add_room_secure_amenity"
android:id="#+id/add_room_secure_label"
android:textSize="16sp"
android:gravity="center"
android:layout_below="#+id/add_room_secure_imageview"
android:layout_centerHorizontal="true" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:paddingTop="5dp" >
<ImageView
android:id="#+id/add_room_furnished_imageview"
android:src="#mipmap/ic_furnished"
style="#style/amenities_image_style"
android:layout_width="wrap_content"
android:layout_height="38dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/add_room_furnished_amenity"
android:id="#+id/add_room_furnished_label"
android:textSize="16sp"
android:gravity="center"
android:layout_below="#+id/add_room_furnished_imageview"
android:layout_centerHorizontal="true" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:baselineAligned="false"
android:layout_marginTop="5dp" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:paddingTop="5dp" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="38dp"
android:id="#+id/add_room_borehole_imageview"
android:src="#mipmap/ic_borehole"
android:padding="5dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/add_room_borehole_amenity"
android:id="#+id/add_room_borehole_label"
android:textSize="16sp"
android:gravity="center"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:paddingTop="5dp" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="38dp"
android:id="#+id/add_room_prezesa_imageview"
android:src="#mipmap/ic_zesa"
android:padding="5dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/add_room_zesa_amenity"
android:id="#+id/add_room_prezesa_label"
android:textSize="16sp"
android:gravity="center"
android:layout_alignParentBottom="true"
android:layout_alignEnd="#+id/add_room_prezesa_imageview"
android:layout_centerHorizontal="true" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:paddingTop="5dp" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="38dp"
android:id="#+id/add_room_wardrobe_imageview"
android:src="#mipmap/ic_wardrobe"
android:padding="5dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/add_room_wardrobe_amenity"
android:id="#+id/add_room_wardrobe_label"
android:textSize="16sp"
android:gravity="center"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:paddingTop="5dp" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="38dp"
android:id="#+id/add_room_prewater_imageview"
android:src="#mipmap/ic_prewater"
android:padding="5dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/add_room_water_amenity"
android:id="#+id/add_room_prewater_label"
android:textSize="16sp"
android:gravity="center"
android:layout_below="#+id/add_room_prewater_imageview"
android:layout_alignRight="#+id/add_room_prewater_imageview"
android:layout_alignEnd="#+id/add_room_prewater_imageview"
android:layout_centerHorizontal="true" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
<!-- none core views -->
<android.support.design.widget.FloatingActionButton android:id="#+id/add_room_step3_fab"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="end"
android:src="#mipmap/ic_done_white_48dp"
android:layout_marginBottom="#dimen/fab_margin" />
</LinearLayout>
</ScrollView>
Naturally the selected features differ thus the number of views is not constant obtained from the back-end. I am able to retrieve the set features and instantiate the correct views in Java i.e. if there are 5 set features comprising BIC, Wifi, Kitchen etc, I am able to determine these and set the necessary Image resources and Text.
Question now is how do I arrange the views obtained to replicate the layout above using Java code as I can only know the features set after querying the back-end. Desired end result has to look like the image below. Hope it makes sense.
I am working on the UI of my app.
The graphical layout I get in Eclipse while coding looks perfect and as that should be.
But when I launch the app either on an emulator or on a device, it gets distorted.
Every UI component, like Buttons, EditTexts and TextViews.
All the margins and paddings just get lost.
<LinearLayout
android:id="#+id/ll_grand_parent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:gravity="fill_horizontal"
android:orientation="vertical"
android:weightSum="10" >
<LinearLayout
android:id="#+id/ll_button_signin_create_account"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:layout_marginLeft="7dp"
android:layout_marginTop="29dp"
android:layout_weight="2"
android:orientation="horizontal"
android:visibility="visible"
>
<Button
android:id="#+id/button_common_singin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/transparent_button"
android:gravity="center"
android:text="Sign In"
android:textColor="#FFFFFF"
android:textSize="13sp" />
<Button
android:id="#+id/button_common_create_account"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/colored_button"
android:gravity="center"
android:text="Create Account"
android:textColor="#FFFFFF"
android:textSize="13sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/signin_main"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="5.24"
android:orientation="vertical"
android:visibility="gone" >
<LinearLayout
android:id="#+id/ll_parent_signin_email_password"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="20sp"
android:layout_weight=".8"
android:background="#drawable/border"
android:orientation="vertical"
android:visibility="visible" >
<LinearLayout
android:id="#+id/ll_signin_email"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="2"
android:orientation="horizontal"
android:visibility="visible"
android:weightSum="10" >
<TextView
android:id="#+id/textview_space_signin_email"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="2" />
<TextView
android:id="#+id/textview_signin_email"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="3"
android:gravity="center"
android:text="Email"
android:textColor="#FFFFFF" />
<EditText
android:id="#+id/edittext_signin_email"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="3"
android:background="#android:color/transparent"
android:gravity="center"
android:hint="john#hotmail.com"
android:textColorHint="#FFFFFF"
android:textSize="13dp" />
</LinearLayout>
<View
android:id="#+id/view_line_signin_email_password"
android:layout_width="fill_parent"
android:layout_height="1dip"
android:background="#FFFFFF" />
<LinearLayout
android:id="#+id/ll_signin_password"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="2"
android:orientation="horizontal"
android:visibility="visible"
android:weightSum="10" >
<TextView
android:id="#+id/textview_space_signin_password"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1" />
<TextView
android:id="#+id/textview_signin_password"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="3"
android:gravity="center"
android:text="Password"
android:textColor="#FFFFFF" />
<EditText
android:id="#+id/edittext_signin_password"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="4.49"
android:background="#android:color/transparent"
android:gravity="center"
android:hint="*********"
android:password="true"
android:textColorHint="#FFFFFF" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/ll_signin_logme_parent_button"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_marginTop="20dp"
android:layout_weight="1"
android:orientation="horizontal"
android:visibility="visible"
android:weightSum="10" >
<TextView
android:id="#+id/textview_space_signin_loginme_button_lhs"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1" />
<Button
android:id="#+id/button_signin_loginme"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="7"
android:background="#219AC7"
android:gravity="center"
android:text="Login Me"
android:textColor="#FFFFFF" />
<ImageView
android:id="#+id/textview_space_signin_logmebutton_rhs"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight=".7" />
</LinearLayout>
<RelativeLayout
android:id="#+id/relative_layout_signin_parent_forgetpassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginLeft="14dp"
android:layout_marginTop="9dp"
android:visibility="visible" >
<TextView
android:id="#+id/textview_signin_forget_password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="forget password"
android:textColor="#000000" />
</RelativeLayout>
<LinearLayout
android:id="#+id/ll_signin_orline_draw_parent"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:orientation="horizontal"
android:visibility="visible"
android:weightSum="10" >
<View
android:layout_width="fill_parent"
android:layout_height="1dip"
android:layout_gravity="center"
android:layout_weight="4"
android:background="#000000"
android:padding="20dp" />
<ImageView
android:id="#+id/imageview_signin_or_drawline"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="2"
android:src="#drawable/or" />
<View
android:layout_width="fill_parent"
android:layout_height="1dip"
android:layout_gravity="center"
android:layout_weight="4"
android:background="#000000"
android:padding="20dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll_signin_parent_loginwith_facebook"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_marginTop="13dp"
android:layout_weight="1"
android:orientation="horizontal"
android:visibility="visible"
android:weightSum="10" >
<TextView
android:id="#+id/textview_space_signin_facebook_lhs"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<ImageView
android:id="#+id/imageview_signin_facebook_logo"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:background="#drawable/fb" />
<Button
android:id="#+id/button_singin_facebook"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="6"
android:background="#3B5998"
android:text="login with facebook"
android:textColor="#FFFFFF" />
<TextView
android:id="#+id/textview_space_sigin_facebook_rhs"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/signup_main"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="6"
android:orientation="vertical"
android:visibility="visible" >
<LinearLayout
android:id="#+id/ll_signup_parentlayout_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="20sp"
android:layout_weight=".8"
android:background="#drawable/border"
android:orientation="vertical"
android:visibility="visible" >
<LinearLayout
android:id="#+id/ll_singnup_firstname"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="2"
android:orientation="horizontal"
android:visibility="visible"
android:weightSum="10" >
<TextView
android:id="#+id/textview_signup_firstname"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="3"
android:gravity="center"
android:text="First Name"
android:textColor="#FFFFFF" />
<EditText
android:id="#+id/edittext_signup_firstname"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="3"
android:background="#android:color/transparent"
android:gravity="center"
android:hint="John"
android:singleLine="true"
android:textColor="#FFFFFF"
android:textColorHint="#FFFFFF"
/>
<EditText
android:id="#+id/edittext_singup_email"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="3"
android:background="#android:color/transparent"
android:gravity="center"
android:hint="john#xyz.com"
android:singleLine="true"
android:textColor="#FFFFFF"
android:textColorHint="#FFFFFF"
android:textSize="13dp"
android:visibility="gone" >
</EditText>
</LinearLayout>
<View
android:id="#+id/view_signup_line_draw_name_first_last_name"
android:layout_width="fill_parent"
android:layout_height="1dip"
android:background="#FFFFFF" />
<LinearLayout
android:id="#+id/ll_signup_lastname"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="2"
android:orientation="horizontal"
android:visibility="visible"
android:weightSum="10" >
<TextView
android:id="#+id/textview_signup_lastname"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="3"
android:gravity="center"
android:text="Last Name"
android:textColor="#FFFFFF" />
<EditText
android:id="#+id/edittext_signup_lastname"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="4.47"
android:background="#android:color/transparent"
android:gravity="center"
android:hint="Smith"
android:password="false"
android:singleLine="true"
android:textColor="#FFFFFF"
android:textColorHint="#FFFFFF" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/ll_singnup_email_parent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="20sp"
android:layout_weight=".8"
android:background="#drawable/border"
android:orientation="vertical"
android:visibility="visible" >
<LinearLayout
android:id="#+id/ll_signup_email_address"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="2"
android:orientation="horizontal"
android:weightSum="10" >
<TextView
android:id="#+id/textview_signup_email"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="3"
android:gravity="center"
android:text="Email Address"
android:textColor="#FFFFFF" />
<EditText
android:id="#+id/edittext_signup_enteremail"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="4.49"
android:background="#android:color/transparent"
android:gravity="center"
android:hint="john#xyz.com"
android:password="false"
android:singleLine="true"
android:textColor="#FFFFFF"
android:textColorHint="#FFFFFF" />
</LinearLayout>
<View
android:id="#+id/view_signup_draw_line_email"
android:layout_width="fill_parent"
android:layout_height="1dip"
android:background="#FFFFFF" />
<LinearLayout
android:id="#+id/ll_signup_reenter_email"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="2"
android:orientation="horizontal"
android:visibility="visible"
android:weightSum="10" >
<TextView
android:id="#+id/textview_signup_reenteremail"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="3"
android:gravity="center"
android:singleLine="true"
android:text="Re Enter Email Address"
android:textColor="#FFFFFF" />
<EditText
android:id="#+id/edittext_signup_reenteremail"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="4.49"
android:background="#android:color/transparent"
android:gravity="center"
android:hint="john#xyz.com"
android:password="false"
android:singleLine="true"
android:textColor="#FFFFFF"
android:textColorHint="#FFFFFF" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/ll_signup_dob_button_parent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="13dp"
android:divider="#drawable/divider"
android:gravity="center"
android:orientation="horizontal"
android:showDividers="middle"
android:visibility="visible"
android:weightSum="3" >
<Button
android:id="#+id/button_signup_day"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/round_button"
android:text="BirthDate"
android:textColor="#000000"
android:textSize="10sp" />
<Button
android:id="#+id/button_signup_month"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/round_button"
android:divider="#drawable/divider"
android:showDividers="middle"
android:text="BirthMonth"
android:textColor="#000000"
android:textSize="10sp" />
<Button
android:id="#+id/button_singup_year"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/round_button"
android:singleLine="true"
android:text="BirthYear"
android:textColor="#000000"
android:textSize="10sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll_singup_radio_gender_parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_marginTop="10dp"
android:orientation="horizontal"
android:visibility="visible" >
<RadioGroup
android:id="#+id/radio_signup_radiogroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<RadioButton
android:id="#+id/radiobutton_signup_male"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:cursorVisible="true"
android:text="male "
android:textColor="#FFFFFF"
android:textColorHighlight="#ED933E" />
<RadioButton
android:id="#+id/radiobutton_signup_female"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="female"
android:textColor="#FFFFFF" />
</RadioGroup>
</LinearLayout>
<Button
android:id="#+id/button_signup_createaccount"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="13dp"
android:layout_marginRight="13dp"
android:layout_weight=".003"
android:background="#drawable/colored_button"
android:text="Create My Account"
android:visibility="visible" />
</LinearLayout>
These are the causes of your issue
android:weightSum="10"
You have to fill parent on every view and give each one a weight to just to make this work. You can achieve a good looking app that way but it is quite labor intensive and we have not even discussed text size among different devices.
Also other stuff like
android:layout_marginLeft="7dp"
Imagine a 10 inch tablet and a normal sized phone. Think of the different dimensions of the two and how your application will stretch . What happens if your turn your app sideways? How would it look then?
Go here and when your done reading it read it again.
http://developer.android.com/training/basics/supporting-devices/screens.html
Please have a look at the following code
input.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"
tools:context=".MainActivity"
android:background="#drawable/background_main" >
<ImageView
android:id="#+id/logo_image"
android:background="#drawable/background_green"
android:src="#drawable/titleimage"
android:layout_width="match_parent"
android:layout_height="50dp"
/>
<ScrollView
android:id="#+id/scroller"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/logo_image"
android:layout_marginTop="10dp"
>
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:stretchColumns="*" >
<TableRow
android:id="#+id/device_type_row"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:layout_marginRight="5dp" >
<RadioButton
android:id="#+id/device_type_radio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_weight="2"
android:text="#string/device_type" />
<RadioGroup
android:id="#+id/device_type_radio_selection"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<RadioButton
android:id="#+id/radioIos"
android:layout_width="wrap_content"
android:layout_height = "wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/iOS"
/>
<RadioButton
android:id="#+id/radioAndroid"
android:layout_width="wrap_content"
android:layout_height = "wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/android"
/>
</RadioGroup>
</TableRow>
<TableRow
android:id="#+id/days_as_customers_row"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:layout_marginRight="5dp" >
<RadioButton
android:id="#+id/days_as_customers_radio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/days_as_customers" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:weightSum="2" >
<SeekBar
android:id="#+id/days_as_customer_seekbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
<TextView
android:id="#+id/days_as_customer_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1/210"
android:layout_weight="1"
android:singleLine="true"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</TableRow>
</TableLayout>
</ScrollView>
<Button
android:id="#+id/input_submit_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="#drawable/submit_button_img" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="#drawable/logo"/>
</RelativeLayout>
Basically, this gives the following UI
Now the problem is, the RadioButtons with text in the first column of the table takes only 40% of the available width. But, I need them to take 75% of the available width, and the things in second column can get the rest.
How can I do this?
Try this..
<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"
android:background="#drawable/background_main" >
<ImageView
android:id="#+id/logo_image"
android:background="#drawable/background_green"
android:src="#drawable/titleimage"
android:layout_width="match_parent"
android:layout_height="50dp"
/>
<ScrollView
android:id="#+id/scroller"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/logo_image"
android:layout_marginTop="10dp"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<LinearLayout
android:id="#+id/device_type_row"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:layout_marginRight="5dp" >
<RadioButton
android:id="#+id/device_type_radio"
android:layout_width="0dp"
android:layout_weight="0.75"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/device_type" />
<RadioGroup
android:id="#+id/device_type_radio_selection"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:orientation="horizontal">
<RadioButton
android:id="#+id/radioIos"
android:layout_width="wrap_content"
android:layout_height = "wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/iOS"
/>
<RadioButton
android:id="#+id/radioAndroid"
android:layout_width="wrap_content"
android:layout_height = "wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/android"
/>
</RadioGroup>
</LinearLayout>
<LinearLayout
android:id="#+id/days_as_customers_row"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:layout_marginRight="5dp" >
<RadioButton
android:id="#+id/days_as_customers_radio"
android:layout_width="0dp"
android:layout_weight="0.75"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/days_as_customers" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25">
<SeekBar
android:id="#+id/days_as_customer_seekbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
<TextView
android:id="#+id/days_as_customer_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1/210"
android:layout_weight="1"
android:singleLine="true"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</ScrollView>
<Button
android:id="#+id/input_submit_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="#drawable/submit_button_img" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="#drawable/logo"/>
</RelativeLayout>
Please have a look at the following code
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".HomeScreen" >
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="*"
android:layout_margin="10dp"
android:layout_centerInParent="true"
android:weightSum="4" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:background="#android:drawable/btn_default"
android:clickable="true"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/fStr"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:gravity="center"
android:clickable="true"
android:background="#android:drawable/btn_default"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/rStr"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:gravity="center"
android:background="#android:drawable/btn_default"
android:clickable="true"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/sStr"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:gravity="center"
android:background="#android:drawable/btn_default"
android:clickable="true"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/cStr"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:gravity="center"
android:background="#android:drawable/btn_default"
android:clickable="true"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/aStr"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:gravity="center"
android:background="#android:drawable/btn_default"
android:clickable="true"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/lStr"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:gravity="center"
android:background="#android:drawable/btn_default"
android:clickable="true"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/oStr"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:gravity="center"
android:background="#android:drawable/btn_default"
android:clickable="true"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tStr"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:gravity="center"
android:background="#android:drawable/btn_default"
android:clickable="true"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/eStr"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:gravity="center"
android:background="#android:drawable/btn_default"
android:clickable="true"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hStr"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:gravity="center"
android:background="#android:drawable/btn_default"
android:clickable="true"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/dStr"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:gravity="center"
android:background="#android:drawable/btn_default"
android:clickable="true"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/aStr"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
</TableRow>
</TableLayout>
</RelativeLayout>
In WVGA 5.1 Screen, this generates the following UI
As you can see, there is a massive gap between rows. I want to avoid this, so it will look good in all smartphones. How can I do this?
Make height & width of tableRow as fill_parent and height of every LinearLayout also as fill_parent
Use this data
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".HomeScreen" >
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="*"
android:layout_margin="10dp"
android:layout_centerInParent="true"
android:weightSum="4" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight=".3"
android:background="#android:drawable/btn_default"
android:clickable="true"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/fStr"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight=".3"
android:gravity="center"
android:clickable="true"
android:background="#android:drawable/btn_default"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/rStr"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight=".3"
android:gravity="center"
android:background="#android:drawable/btn_default"
android:clickable="true"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/sStr"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight=".3"
android:gravity="center"
android:background="#android:drawable/btn_default"
android:clickable="true"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/cStr"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight=".3"
android:gravity="center"
android:background="#android:drawable/btn_default"
android:clickable="true"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/aStr"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight=".3"
android:gravity="center"
android:background="#android:drawable/btn_default"
android:clickable="true"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/lStr"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight=".3"
android:gravity="center"
android:background="#android:drawable/btn_default"
android:clickable="true"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/oStr"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight=".3"
android:gravity="center"
android:background="#android:drawable/btn_default"
android:clickable="true"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tStr"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight=".3"
android:gravity="center"
android:background="#android:drawable/btn_default"
android:clickable="true"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/eStr"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight=".3"
android:gravity="center"
android:background="#android:drawable/btn_default"
android:clickable="true"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hStr"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight=".3"
android:gravity="center"
android:background="#android:drawable/btn_default"
android:clickable="true"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/dStr"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight=".3"
android:gravity="center"
android:background="#android:drawable/btn_default"
android:clickable="true"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/aStr"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
</TableRow>
</TableLayout>
</RelativeLayout>
Table row's height could be match_parent and width could be 0dip.
Try setting android:layout_margin to abit less and let me know if it solves the problem.
It's because your using linear layout in vertical and applying weight of 3
In your TableLayout Set the height to wrap_content and your space will be removed.
android:layout_height="wrap_content"
Also to get the best result of the android:weight property set the each layout's width to 0dp wherever you have assigned a weight.