I want to make below listview row file
So I have set layout row file code as below
<?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">
<RelativeLayout
android:id="#+id/rel_items"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/margin_5dp"
android:background="#drawable/rect_white">
<LinearLayout
android:id="#+id/ll_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="100">
<LinearLayout
android:id="#+id/ll_left"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="70">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<CheckBox
android:id="#+id/ckh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="#dimen/margin_5dp" />
<customtext.BoldText
android:id="#+id/task_title"
style="#style/NormalTextView"
android:layout_marginLeft="#dimen/margin_2dp"
android:layout_marginRight="#dimen/margin_5dp"
android:layout_marginTop="#dimen/margin_10dp"
android:layout_toRightOf="#+id/ckh"
android:singleLine="false"
android:text="Title"
android:textColor="#android:color/black"
android:textSize="#dimen/text_11" />
<customtext.RegularText
android:id="#+id/task_assign"
style="#style/NormalTextView"
android:layout_alignLeft="#+id/task_title"
android:layout_below="#+id/task_title"
android:layout_marginTop="#dimen/margin_2dp"
android:layout_toRightOf="#+id/ckh"
android:background="#drawable/rect_full"
android:padding="#dimen/margin_2dp"
android:text="Title"
android:textColor="#android:color/white"
android:textSize="#dimen/text_8" />
<customtext.RegularText
android:id="#+id/task_date"
style="#style/NormalTextView"
android:layout_alignLeft="#+id/task_assign"
android:layout_below="#+id/task_assign"
android:paddingBottom="#dimen/margin_5dp"
android:text="Title"
android:layout_marginTop="#dimen/margin_2dp"
android:textColor="#color/dark_gray"
android:textSize="#dimen/text_10" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/ll_right"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginBottom="1.5dp"
android:layout_marginRight="1.5dp"
android:layout_marginTop="1.5dp"
android:layout_weight="30"
android:background="#drawable/rect_task_edit_delete"
android:gravity="center|right">
<ImageView
android:id="#+id/img_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/margin_20dp"
android:src="#drawable/edit" />
<ImageView
android:id="#+id/img_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/margin_10dp"
android:src="#drawable/delete" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
When I run this in normal device like 480x800 than it will give output like below image
And when I run this in high resolution device like 1080x1920 with (320dpi)(Sony xperia z Ultra) at that time i give below output
So any idea how can I maintain this layout in very high resolution devices?
I have updated your code with images and variables in one of my projects. I recommend you to change the LinearLayout with the weight sum of 100 to a relative layout and put the item you want to fix the size to align parent right. Here is an example which work. You can fix the relativelayout root height. Hope it help
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/rel_items"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_margin="5dp"
android:background="#android:color/white">
<RelativeLayout
android:id="#+id/ll_main"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/ll_right"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginBottom="1.5dp"
android:layout_marginRight="1.5dp"
android:layout_alignParentRight="true"
android:padding="10dp"
android:layout_marginTop="1.5dp"
android:background="#drawable/button_connexion"
android:gravity="center|right">
<ImageView
android:id="#+id/img_edit"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginRight="20dp"
android:src="#drawable/statut_presence_jaune" />
<ImageView
android:id="#+id/img_delete"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/statut_presence_vert" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<CheckBox
android:id="#+id/ckh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="5dp" />
<TextView
android:id="#+id/task_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:layout_marginRight="5dp"
android:layout_marginTop="20dp"
android:layout_toRightOf="#+id/ckh"
android:singleLine="false"
android:text="Title"
android:textColor="#android:color/black"
android:textSize="11sp" />
<TextView
android:id="#+id/task_assign"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/task_title"
android:layout_below="#+id/task_title"
android:layout_marginTop="2dp"
android:layout_toRightOf="#+id/ckh"
android:background="#android:color/holo_blue_bright"
android:padding="2dp"
android:text="Title"
android:textColor="#android:color/white"
android:textSize="8sp" />
<TextView
android:id="#+id/task_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/task_assign"
android:layout_below="#+id/task_assign"
android:paddingBottom="5dp"
android:text="Title"
android:layout_marginTop="2dp"
android:textColor="#android:color/darker_gray"
android:textSize="10sp" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
change weight for your view with id
android:id="#+id/ll_left"
to 1. And delete your view with id
android:id="#+id/ll_right"
and replace it with following line of code:
<LinearLayout
android:id="#+id/ll_img_edit"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_margin="2dp"
android:background="#drawable/rect_task_edit_delete"
android:gravity="center">
<ImageView
android:id="#+id/img_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/edit" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll_img_delete"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_margin="2dp"
android:background="#drawable/rect_task_edit_delete"
android:gravity="center">
<ImageView
android:id="#+id/img_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/delete" />
</LinearLayout>
in this you can change margin value as per your requirement.
In your LinearLayout which contains Imageviews delete and edit.You have specified right margin to them remove that and weight sum here.
Just change your second layout by below,
<LinearLayout
android:id="#+id/ll_right"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginBottom="1.5dp"
android:layout_marginRight="1.5dp"
android:layout_marginTop="1.5dp"
android:layout_weight="30"
android:background="#android:color/transparent"
android:gravity="center|right">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/rect_task_edit_delete"
android:gravity="center|right">
<ImageView
android:id="#+id/img_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/margin_20dp"
android:src="#drawable/edit" />
<ImageView
android:id="#+id/img_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/margin_10dp"
android:src="#drawable/delete" />
</LinearLayout>
</LinearLayout>
Use weightSum property with second Layout.
<LinearLayout
android:id="#+id/ll_right"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginBottom="1.5dp"
android:weighSum = "1"
android:layout_marginRight="1.5dp"
android:layout_marginTop="1.5dp"
android:layout_weight="30"
android:background="#drawable/rect_task_edit_delete"
android:gravity="center|right">
<ImageView
android:id="#+id/img_edit"
android:layout_width="0dp"
android:layout_weight="0.5"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/margin_20dp"
android:src="#drawable/edit" />
<ImageView
android:id="#+id/img_delete"
android:layout_weight="0.5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/margin_10dp"
android:src="#drawable/delete" />
</LinearLayout>
just add both ImageView weight property like below way. So it will take equal width to both ImageView.
<ImageView
android:id="#+id/img_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/margin_20dp"
android:src="#drawable/edit"
android:layout_weight="1" />
<ImageView
android:id="#+id/img_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/margin_10dp"
android:src="#drawable/delete"
android:layout_weight="1" />
</LinearLayout>
instead of this
<LinearLayout
android:id="#+id/ll_right"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginBottom="1.5dp"
android:layout_marginRight="1.5dp"
android:layout_marginTop="1.5dp"
android:layout_weight="30"
android:background="#drawable/rect_task_edit_delete"
android:gravity="center|right">
<ImageView
android:id="#+id/img_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/margin_20dp"
android:src="#drawable/edit" />
<ImageView
android:id="#+id/img_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/margin_10dp"
android:src="#drawable/delete" />
</LinearLayout>
use this for the image Linear layout your problem will be solved...
<LinearLayout
android:id="#+id/ll_right"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginBottom="1.5dp"
android:layout_marginRight="1.5dp"
android:layout_marginTop="1.5dp"
android:layout_weight="30"
android:background="#drawable/rect_task_edit_delete"
android:gravity="center|right">
<ImageView
android:id="#+id/img_edit"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginRight="#dimen/margin_20dp"
android:src="#drawable/edit" />
<ImageView
android:id="#+id/img_delete"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginRight="#dimen/margin_10dp"
android:src="#drawable/delete" />
</LinearLayout>
Note:-This issue due to you make it imageView wrap-content and Linear Layout with weight so Linear layout adjust due to its weight But imageView is wrap content.So it vary device to device .....
Related
Layout wrap content not working
Below is my XML code . I want to place the portion linear layout with grey colour just above the main image . Screenshot of my code here.
In devices with aspect ratio 16:9 design is correct , but in 18:9 and 18.5:9 the grey portion is on top side .
The topic text and icon must be top left side portion of main image .
The design i want here
Never mind top side . From bottom the hight must be wrap the size of image
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:background="#color/light_green"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/dark_green">
<LinearLayout
android:id="#+id/topLin"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#color/grey"
android:orientation="horizontal">
<TextView
android:id="#+id/nameTxt"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginStart="10dp"
android:ellipsize="end"
android:gravity="center|start"
android:maxLength="25"
android:singleLine="true"
android:text="Abin Stanly"
android:textColor="#color/white"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:adjustViewBounds="true"
android:src="#drawable/test" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#id/imageView"
android:layout_marginStart="20dp"
android:layout_marginTop="15dp">
<ImageView
android:id="#+id/icon"
android:layout_width="#dimen/icon_height"
android:layout_height="#dimen/icon_height"
android:layout_gravity="center"
android:src="#drawable/ic_love" />
<TextView
android:id="#+id/topicTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:gravity="center"
android:paddingEnd="10dp"
android:shadowColor="#color/grey"
android:shadowDx=".5"
android:shadowDy=".5"
android:shadowRadius="3.5"
android:text="Topic"
android:textColor="#color/white"
android:textStyle="bold" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</LinearLayout>
Here the main layout is RelativeLayout and the children are both layout_alignParentBottom="true"
You can just switch the child layouts around until you get the required layout
Tip: The less layouts you use, the faster rendering will be on slow devices.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/light_green">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/grey">
<TextView
android:id="#+id/nameTxt"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginStart="10dp"
android:ellipsize="end"
android:gravity="center|start"
android:maxLength="25"
android:singleLine="true"
android:text="Abin Stanly"
android:textColor="#color/white"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<ImageView
android:id="#+id/icon"
android:layout_width="#dimen/icon_height"
android:layout_height="#dimen/icon_height"
android:layout_gravity="center"
android:src="#drawable/ic_love" />
</LinearLayout>
</RelativeLayout>
I have added weightSum to parent LinearLayout so you can easily divide screen according to your requirements.
Assigned View android:layout_weight="3" so it will cover 3/10th part of the screen, you can change it according to what you feels good for you.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:background="#android:color/holo_green_light"
android:orientation="vertical"
android:weightSum="10"
xmlns:android="http://schemas.android.com/apk/res/android">
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:background="#android:color/holo_green_light"
/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="7">
<TextView
android:id="#+id/nameTxt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLength="25"
android:padding="11dp"
android:background="#android:color/darker_gray"
android:text="Abin Stanly"
android:textColor="#android:color/white"
android:textStyle="bold" />
<RelativeLayout
android:id="#+id/RelativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/nameTxt"
android:layout_alignParentBottom="true"
>
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:scaleType="centerCrop"
android:src="#drawable/mobile_world" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#id/imageView"
android:background="#android:color/black"
android:padding="11dp"
>
<ImageView
android:id="#+id/icon"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_gravity="center"
android:src="#drawable/back_arrow" />
<TextView
android:id="#+id/topicTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:gravity="center"
android:paddingEnd="10dp"
android:shadowColor="#android:color/darker_gray"
android:shadowDx=".5"
android:shadowDy=".5"
android:shadowRadius="3.5"
android:layout_gravity="center_vertical"
android:text="Topic"
android:textColor="#android:color/white"
android:textStyle="bold" />
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
Output
Check this layout:
<?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"
android:background="#android:color/holo_green_light">
<TextView
android:id="#+id/nameTxt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/imageView"
android:background="#android:color/darker_gray"
android:maxLength="25"
android:padding="10dp"
android:text="Abin Stanly"
android:textColor="#android:color/white"
android:textStyle="bold" />
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:scaleType="centerCrop"
android:src="#drawable/test" />
<TextView
android:id="#+id/topicTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView"
android:layout_gravity="center_vertical"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:drawableStart="#drawable/ic_love"
android:drawablePadding="10dp"
android:gravity="center"
android:paddingEnd="10dp"
android:shadowColor="#android:color/darker_gray"
android:shadowDx=".5"
android:shadowDy=".5"
android:shadowRadius="3.5"
android:text="Topic"
android:textColor="#android:color/white"
android:textStyle="bold" />
</RelativeLayout>
This may be dumb question but i couldn't find any solution for my problem, let me explain my problem am trying to align small square shaped button to right of text like in the below image i tried many things but nothing has helped me let me post what i have tried so far:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/content_spare_request"
android:background="#fff"
android:layout_marginBottom="20dp"
android:layout_margin="10dp"
android:layout_below="#+id/root1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:id="#+id/spare_text"
android:layout_marginStart="2sp"
android:paddingLeft="10dp"
android:layout_marginTop="07dp"
android:text="#string/Spare"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/SForange"
android:textSize="16sp" />
<Button
android:id="#+id/btn_spare"
android:layout_width="20dp"
android:layout_height="match_parent"
android:minHeight="0dp"
android:minWidth="0dp"
android:background="#color/SForange"
android:layout_alignParentRight="true"
/>
<View
android:layout_width="match_parent"
android:layout_height="3dp"
android:id="#+id/view2"
android:layout_below="#+id/spare_text"
android:background="#color/SForange"
android:gravity="center" />
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:id="#+id/spare_recyclerview"
android:layout_below="#+id/view2"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/empty_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="75dp"
android:gravity="center_horizontal"
android:layout_below="#+id/view2"
android:visibility="visible"
android:text="No Data Available"
/>
</RelativeLayout>
You can do below things.
Make width of relativelayout as match_parent.
Set btn_spare as right aligned and textview to start of btn_spare.
use ConstraintLayout. it gets you the ability to define exact location of view among others. for example you want a button under the imageview with specific distance between them, ConstraintLayout will give you something like this.
Don't use match_parent for button height. Change your Button height from match_parent to specific height and add android_background to it:
<Button
android:id="#+id/btn_spare"
android:layout_width="35dp"
android:layout_height="35dp"
android:minHeight="0dp"
android:minWidth="0dp"
android:background="#mipmap/ic_launcher"
android:layout_alignParentRight="true"
/>
Output:
Try this
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/content_spare_request"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/root1"
android:layout_margin="10dp"
android:layout_marginBottom="20dp"
android:background="#fff">
<LinearLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="40dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="#+id/spare_text"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:paddingLeft="10dp"
android:text="#string/Spare"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/SForange"
android:textSize="16sp" />
<Button
android:id="#+id/btn_spare"
android:layout_width="40dp"
android:layout_height="match_parent"
android:background="#color/SForange"
android:minHeight="0dp"
android:minWidth="0dp" />
</LinearLayout>
<View
android:id="#+id/view2"
android:layout_width="match_parent"
android:layout_height="3dp"
android:layout_below="#+id/header"
android:background="#color/SForange"
android:gravity="center" />
<android.support.v7.widget.RecyclerView
android:id="#+id/spare_recyclerview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/view2" />
<TextView
android:id="#+id/empty_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/view2"
android:gravity="center_horizontal"
android:paddingBottom="75dp"
android:text="No Data Available"
android:visibility="visible" />
</RelativeLayout>
tried this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/content_spare_request"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/root1"
android:layout_margin="10dp"
android:orientation="vertical"
android:layout_marginBottom="20dp"
android:background="#fff">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal">
<TextView
android:id="#+id/spare_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginStart="2sp"
android:layout_marginTop="07dp"
android:paddingLeft="10dp"
android:text="#string/tip_brush_size"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/facebook"
android:textSize="16sp" />
<Button
android:id="#+id/btn_spare"
android:layout_width="20dp"
android:layout_height="match_parent"
android:background="#color/facebook"
android:layout_alignParentRight="true"
android:minHeight="0dp"
android:minWidth="0dp" />
</RelativeLayout>
<View
android:id="#+id/view2"
android:layout_width="match_parent"
android:layout_height="3dp"
android:layout_below="#+id/spare_text"
android:background="#color/facebook"
android:gravity="center" />
<android.support.v7.widget.RecyclerView
android:id="#+id/spare_recyclerview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/view2" />
<TextView
android:id="#+id/empty_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:gravity="center_horizontal"
android:paddingBottom="75dp"
android:text="No Data Available"
android:visibility="visible" />
</LinearLayout>
So in my program i have a layout implemented in which i want the image to alignTop of the parent. I used to exact same layout code for another activity (with minor changes) and it works perfectly but when using it in this activity it does not. My image still aligns to the center fo the view. Here is the 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-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/darkGray"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.intellidev.fuzionvapor.HomeDetails"
tools:showIn="#layout/activity_home_details">
<ImageView
android:id="#+id/homeDetailsActivityImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:scaleType="fitCenter" />
<TextView
android:id="#+id/homeDetailsActivityTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/homeDetailsActivityImage"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="#+id/homeDetailsActivityPrice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/homeDetailsActivityImage"
android:textColor="#color/fuzionRed"
android:textSize="20sp"
android:textStyle="bold" />
<View
android:id="#+id/homeDetailsActivityRuler"
android:layout_width="fill_parent"
android:layout_height="1dip"
android:layout_below="#+id/homeDetailsActivityTitle"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:background="#color/white" />
<TextView
android:id="#+id/homeDetailsActivityDescription"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/homeDetailsActivityRuler"
android:textColor="#color/white"
android:textSize="15sp" />
<LinearLayout
android:id="#+id/homeDetailsFooter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/homeDetailsActivityButton"
android:layout_centerHorizontal="true"
android:orientation="horizontal">
<fr.ganfra.materialspinner.MaterialSpinner
android:id="#+id/homeDetailsActivitySizeSpinner"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_margin="1dp"
android:layout_weight="1"
app:ms_arrowColor="#color/fuzionRed"
app:ms_arrowSize="16dp"
app:ms_baseColor="#color/fuzionRed"
app:ms_enableFloatingLabel="true"
app:ms_floatingLabelColor="#color/fuzionRed"
app:ms_floatingLabelText="#string/sizeFloatingLabel"
app:ms_highlightColor="#color/fuzionRed"
app:ms_hintColor="#color/fuzionRed"
app:ms_hint="Size"
app:ms_multiline="false"
app:ms_thickness="1dp" />
<fr.ganfra.materialspinner.MaterialSpinner
android:id="#+id/homeDetailsActivityNicotineSpinner"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:layout_weight="1"
app:ms_arrowColor="#color/fuzionRed"
app:ms_arrowSize="16dp"
app:ms_baseColor="#color/fuzionRed"
app:ms_enableFloatingLabel="true"
app:ms_floatingLabelColor="#color/fuzionRed"
app:ms_floatingLabelText="#string/nicotineFloatingLabel"
app:ms_highlightColor="#color/fuzionRed"
app:ms_hintColor="#color/fuzionRed"
app:ms_multiline="false"
app:ms_hint="Nicotine"
app:ms_thickness="1dp" />
</LinearLayout>
<Button
android:id="#+id/homeDetailsActivityButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:background="#color/fuzionRed"
android:text="Add To Cart"
android:textAlignment="center"
android:textColor="#color/white"
android:textSize="25sp"
android:textStyle="bold" />
</RelativeLayout>
change
<ImageView
android:id="#+id/homeDetailsActivityImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:scaleType="fitCenter" />
to
<ImageView
android:id="#+id/homeDetailsActivityImage"
android:layout_width="match_parent"
android:layout_alignParentTop="true"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:adjustViewBounds="true"
android:scaleType="fitStart" />
I have the following layout:-
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="#dimen/default_margin"
android:layout_marginBottom="#dimen/default_margin"
android:layout_marginLeft="#dimen/default_dbl_margin"
android:layout_marginRight="#dimen/default_dbl_margin">
<ImageView
android:id="#+id/lblIcon"
android:src="#drawable/ic_status_confirmed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/default_dbl_margin"
android:layout_marginTop="#dimen/default_margin"
android:layout_marginBottom="#dimen/default_margin" />
<LinearLayout
android:orientation="vertical"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/relativeLayout">
<TextView
android:id="#+id/lblFirstLine"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="FirstLine"
android:singleLine="true"
android:ellipsize="end"
android:textAppearance="?android:attr/textAppearanceMedium"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_below="#+id/lblFirstLine"
android:layout_alignParentLeft="true"
android:layout_marginTop="#dimen/default_margin">
<ImageView
android:layout_width="14sp"
android:layout_height="14sp"
android:id="#+id/imgTimeIcon"
android:src="#drawable/ic_action_time" />
<TextView
android:id="#+id/lblSecondLine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2:00pm"
android:textSize="14sp"
android:layout_gravity="center_vertical"
android:textColor="#android:color/secondary_text_dark" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_gravity="center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/newIndicator"
android:src="#drawable/new_indicator"
android:layout_marginRight="#dimen/default_quad_margin"/>
<ImageButton
android:id="#+id/btnChat"
android:src="#drawable/ic_action_chat"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
However the layout looks like below:
Notice that the time TextView is slightly displaced downwards. I don't understand why?
specify gravity for the parent linear layout and change the image width and height from sp to dp
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_vertical"
android:layout_below="#+id/lblFirstLine"
android:layout_alignParentLeft="true"
android:layout_marginTop="#dimen/default_margin">
<ImageView
android:layout_width="14dp"
android:layout_height="14dp"
android:id="#+id/imgTimeIcon"
android:src="#drawable/ic_action_time" />
<TextView
android:id="#+id/lblSecondLine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2:00pm"
android:textSize="14sp"
android:textColor="#android:color/secondary_text_dark" />
</LinearLayout>
</LinearLayout>
i Hope it will help
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center_vertical">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:id="#+id/imgTimeIcon"
android:gravity="center"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/lblSecondLine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="2:00pm"
android:textColor="#android:color/secondary_text_dark"
android:textSize="14sp" />
</LinearLayout>
Adding android:layout_gravity="center_vertical" to android:id="#+id/imgTimeIcon"" ImageView should solve your problem
Also don't use sp except on fonts. Use dpinstead
Instead of:
<ImageView
android:layout_width="14sp"
android:layout_height="14sp"
android:id="#+id/imgTimeIcon"
android:src="#drawable/ic_action_time" />
Use:
<ImageView
android:layout_width="14dp"
android:layout_height="14dp"
android:id="#+id/imgTimeIcon"
android:layout_gravity="center_vertical"
android:src="#drawable/ic_action_time" />
Use RelativeLayout for the ImageView and TextView:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_below="#+id/lblFirstLine"
android:layout_alignParentLeft="true"
android:layout_marginTop="#dimen/default_margin">
<ImageView
android:layout_width="14sp"
android:layout_height="14sp"
android:id="#+id/imgTimeIcon"
android:layout_centerVertical="true"
android:src="#drawable/ic_action_time" />
<TextView
android:id="#+id/lblSecondLine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2:00pm"
android:textSize="14sp"
android:layout_toRightOf="#+id/imgTimeIcon"
android:layout_centerVertical="true"
android:textColor="#android:color/secondary_text_dark" />
</LinearLayout>
</LinearLayout>
im trying to work out how to space 6 images on the screen in a 2X3 formation, All images have to be square and the same size with a small margin around them. Here is what I have so far which is giving me this:
Which comes from Layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="3">
<!-- Top Row -->
<LinearLayout
android:baselineAligned="false"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/relative_1"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="6dp"
android:layout_marginRight="3dp"
android:layout_marginTop="6dp"
android:layout_marginBottom="3dp">
<ImageView
android:id="#+id/img_head"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/text_head"
android:src="#drawable/headlines"
android:clickable="true"
/>
<TextView
android:id="#+id/text_head"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#id/img_head"
android:layout_alignLeft="#id/img_head"
android:layout_alignRight="#id/img_head"
android:layout_margin="1dp"
android:gravity="center"
android:text="#string/text_head"
/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/relative_2"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="3dp"
android:layout_marginRight="6dp"
android:layout_marginTop="6dp"
android:layout_marginBottom="3dp">
<ImageView
android:id="#+id/img_custom1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/text_custom1"
android:src="#drawable/headlines"
android:clickable="true"
/>
<TextView
android:id="#+id/text_custom1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#id/img_custom1"
android:layout_alignLeft="#id/img_custom1"
android:layout_alignRight="#id/img_custom1"
android:layout_margin="1dp"
android:gravity="center"
android:text="#string/text_custom1"
/>
</RelativeLayout>
</LinearLayout>
<!-- Second Row -->
<LinearLayout
android:baselineAligned="false"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/relative_3"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="6dp"
android:layout_marginRight="3dp"
android:layout_marginTop="3dp"
android:layout_marginBottom="3dp">
<ImageView
android:id="#+id/img_custom2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/text_custom2"
android:src="#drawable/headlines"
android:clickable="true"
/>
<TextView
android:id="#+id/text_custom2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#id/img_custom2"
android:layout_alignLeft="#id/img_custom2"
android:layout_alignRight="#id/img_custom2"
android:layout_margin="1dp"
android:gravity="center"
android:text="#string/text_custom2"
/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/relative_4"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="3dp"
android:layout_marginRight="6dp"
android:layout_marginTop="3dp"
android:layout_marginBottom="3dp">
<ImageView
android:id="#+id/img_custom3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/text_custom3"
android:src="#drawable/headlines"
android:clickable="true"
/>
<TextView
android:id="#+id/text_custom3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#id/img_custom3"
android:layout_alignLeft="#id/img_custom3"
android:layout_alignRight="#id/img_custom3"
android:layout_margin="1dp"
android:gravity="center"
android:text="#string/text_custom3"
/>
</RelativeLayout>
</LinearLayout>
<!-- Third Row -->
<LinearLayout
android:baselineAligned="false"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/relative_5"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="6dp"
android:layout_marginRight="3dp"
android:layout_marginTop="3dp"
android:layout_marginBottom="6dp">
<ImageView
android:id="#+id/img_custom4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/text_custom4"
android:src="#drawable/headlines"
android:clickable="true"
/>
<TextView
android:id="#+id/text_custom4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#id/img_custom4"
android:layout_alignLeft="#id/img_custom4"
android:layout_alignRight="#id/img_custom4"
android:layout_margin="1dp"
android:gravity="center"
android:text="#string/text_custom4"
/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/relative_6"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="3dp"
android:layout_marginRight="6dp"
android:layout_marginTop="3dp"
android:layout_marginBottom="6dp">
<ImageView
android:id="#+id/img_custom5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/text_custom5"
android:src="#drawable/headlines"
android:clickable="true"
/>
<TextView
android:id="#+id/text_custom5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#id/img_custom5"
android:layout_alignLeft="#id/img_custom5"
android:layout_alignRight="#id/img_custom5"
android:layout_margin="1dp"
android:gravity="center"
android:text="#string/text_custom5"
/>
</RelativeLayout>
</LinearLayout>
</LinearLayout>
As you can see the bottom images are squashed, i have tried using android:weight on the linear layouts but supposedly i cant use that. What do i need to change?
use a GridView. it allows you to arrange sub views into an arbitrary grid arrangement with a high degree of customizability.