Hi I have problem with apportionment of layouts in android xml.
The master layout is Relative layout. Whole screen is occupied by ExoPlayer and these three elements are placed over the player.
On the picture blue is linear layout and it should take 1/3 of the screen height.
The green layout(linear) should takes 1/9 of the screen height and the red linear should also takes 1/3 of the screen.
I have tried to use weights but unfortunately my approach doesn't work and I am getting warning that could affect performance of the application.
Please, can you assist me to achieve this design?
Thanks
EDIT:
<?xml version="1.0" encoding="utf-8"?>
<data>
<import type="android.view.View" />
<import
alias="position" />
<variable
name="vm"/>
</data>
<RelativeLayout
android:id="#+id/master_layoout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.exoplayer2.ui.SimpleExoPlayerView
android:id="#+id/player_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:layoutMode="#{vm.fullScreen}"
android:player="#{vm.player}"
app:use_controller="false" />
<!-- STARTof menu layout-->
<LinearLayout
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="9">
<View
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"/>
<LinearLayout
android:id="#+id/menu_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/info"
android:layout_alignParentEnd="true"
android:background="#000000"
android:orientation="vertical"
android:paddingLeft="1dp"
android:paddingRight="1dp"
android:paddingTop="1dp"
android:visibility="#{vm.menuVisibility}"
android:layout_weight="3">
<LinearLayout
android:id="#+id/details"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#{vm.getSelectedCurrentOption == 0 ? #color/selectedMenuItem : #color/unselectedMenuItem }"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="15dp"
android:src="#drawable/mockup_icon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginRight="20dp"
android:fontFamily="sens-serif"
android:paddingEnd="10dp"
android:text="DETALJNO"
android:textColor="#000000" />
</LinearLayout>
<LinearLayout
android:id="#+id/favorites"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="1dp"
android:layout_marginTop="1dp"
android:background="#{vm.getSelectedCurrentOption == 1 ? #color/selectedMenuItem : #color/unselectedMenuItem }"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="15dp"
android:src="#drawable/mockup_icon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginRight="20dp"
android:fontFamily="sens-serif"
android:text="OMILJENI"
android:textColor="#000000" />
</LinearLayout>
<LinearLayout
android:id="#+id/record"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#{vm.getSelectedCurrentOption == 2 ? #color/selectedMenuItem : #color/unselectedMenuItem }"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="15dp"
android:src="#drawable/mockup_icon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginEnd="20dp"
android:fontFamily="sens-serif"
android:text="VRATI NA POCETAK"
android:textColor="#000000" />
</LinearLayout>
<LinearLayout
android:id="#+id/remind_me"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="1dp"
android:layout_marginTop="1dp"
android:background="#{vm.getSelectedCurrentOption == 3 ? #color/selectedMenuItem : #color/unselectedMenuItem }"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="15dp"
android:src="#drawable/mockup_icon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginEnd="20dp"
android:fontFamily="sens-serif"
android:text="SNIMI"
android:textColor="#000000" />
</LinearLayout>
<LinearLayout
android:id="#+id/return_to_begin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#{vm.getSelectedCurrentOption == 4 ? #color/selectedMenuItem : #color/unselectedMenuItem }"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="15dp"
android:src="#drawable/mockup_icon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginEnd="20dp"
android:fontFamily="sens-serif"
android:paddingEnd="10dp"
android:text="PODSETI ME"
android:textColor="#000000" />
</LinearLayout>
<!-- end of menu layout-->
</LinearLayout>
<LinearLayout
android:id="#+id/info"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical"
android:layout_weight="1">
<RelativeLayout
android:id="#+id/media_control_view"
android:layout_width="match_parent"
android:layout_height="58dp"
android:background="#96000000"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:visibility="#{vm.getMediaControlView==true ? View.VISIBLE : View.INVISIBLE}">
<ImageView
android:id="#+id/channel_icon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_gravity="center_vertical"
android:src="#{vm.icon}" />
<TextView
android:id="#+id/media_title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_marginTop="12dp"
android:layout_toEndOf="#+id/channel_icon"
android:fontFamily="sens-serif"
android:maxLength="50"
android:padding="12dp"
android:text="#{vm.getTitle}"
android:textColor="#f15a29"
android:textSize="12sp" />
<ImageView
android:id="#+id/play_pause_icon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_toStartOf="#+id/animate_progress_bar"
android:src="#drawable/play_icon" />
<com.daasuu.ahp.AnimateHorizontalProgressBar
android:id="#+id/animate_progress_bar"
android:layout_width="300dp"
android:layout_height="2dp"
android:layout_centerVertical="true"
android:layout_gravity="center_vertical"
android:layout_toStartOf="#+id/remaining_time"
android:max="#{vm.maxProgress}"
android:paddingStart="10dp"
android:progress="#{vm.progress}"
app:ahp_backgroundColor="#C0C0C0"
app:ahp_progressColor="#f15a29" />
<TextView
android:id="#+id/remaining_time"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_marginEnd="25dp"
android:layout_marginTop="12dp"
android:layout_toStartOf="#+id/icon_info"
android:fontFamily="sens-serif"
android:padding="12dp"
android:text="#{vm.times}"
android:textColor="#D3D3D3" />
<ImageView
android:id="#+id/icon_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:layout_toStartOf="#+id/icon_menu"
android:src="#drawable/icon_info" />
<ImageView
android:id="#+id/icon_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:layout_marginEnd="5dp"
android:layout_marginStart="10dp"
android:src="#drawable/icon_menu" />
</RelativeLayout>
<LinearLayout
android:id="#+id/additional_info"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
android:background="#80000000"
android:orientation="horizontal"
android:visibility="#{vm.infoVisibility}"
android:weightSum="90"
android:layout_weight="3">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/cover_image" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:layout_marginTop="15dp"
android:layout_weight="60"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sens-serif"
android:text="The Gardian of the Galaxy Vol.2"
android:textColor="#color/primary_orange"
android:textSize="25sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sens-serif"
android:text="19:00 - 21:00 | 2017 | Science fiction film/Action | 2h 18m\n"
android:textColor="#color/epg_event_layout_text" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sens-serif"
android:text="Peter Quill and his fellow Guardians are hired by a power-\nful alien race, the Sovereign, to protect their precious bat-\nteries from invaders. When it is discovered that Rocket\nhas stolen the items they were sent to guard, the Sover-\n"
android:textColor="#color/epg_event_layout_text" />
</LinearLayout>
<View
android:layout_width="3dp"
android:layout_height="match_parent"
android:layout_marginBottom="15dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="15dp"
android:background="#FFFFFF" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:fontFamily="sens-serif"
android:text="Rezija:\nMajkl Kejn\n\nGLUMCI:\nChris Pratt, Zoe\nSaldana, Dave Bau-\ntista, Bradley\nCooper, Vin Diesel,\nMichael Rooke\n"
android:textColor="#color/epg_event_layout_text" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Layout Weight works only with LinearLayout
Use weights for your views and test them. The example given in the documentation is pretty self-explanatory.
Related
I'm making a design in android using simple LinearLayout I create a TextView inside CardView when I enter long text inside TextView it hides some of the text, why this is happening? Check below image
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="#dimen/universal_padding"> <!-- 8dp -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical">
<ImageView
android:id="#+id/ivCommentProfilePic"
android:layout_width="#dimen/card_profile_pic_width_height"
android:layout_height="#dimen/card_profile_pic_width_height"
app:srcCompat="#drawable/circular_photo" />
<ImageView
android:id="#+id/ivCommentUserBadge"
android:layout_width="#dimen/badge_width_height"
android:layout_height="#dimen/badge_width_height"
android:layout_marginTop="10dp"
android:layout_marginLeft="-10dp"
android:layout_marginStart="-10dp"
app:srcCompat="#drawable/shap_circle_badge" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginLeft="4dp"
android:layout_marginStart="4dp"
android:layout_marginRight="8dp"
android:layout_marginEnd="8dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1">
<TextView
android:id="#+id/tvCommentUserFullName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:textStyle="bold"
android:textColor="#color/colorPrimaryText"
android:text="Azeem Haider" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/colorSecondaryText"
android:text=" - 2d"/>
</LinearLayout>
<TextView
android:id="#+id/tvCommentText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/colorSecondaryText"
android:text="This is a comment for testing purpose This is a comment for testing purpose This is a comment for testing purpose"
/>
</LinearLayout>
</LinearLayout>
Try this
<LinearLayout 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="wrap_content">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<ImageView
android:id="#+id/ivCommentProfilePic"
android:layout_width="96dp"
android:layout_height="96dp"
app:srcCompat="#drawable/kid" />
<ImageView
android:id="#+id/ivCommentUserBadge"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginLeft="-10dp"
android:layout_marginStart="-10dp"
android:layout_marginTop="10dp"
app:srcCompat="#drawable/ic_online" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="4dp"
android:layout_marginRight="8dp"
android:layout_marginStart="4dp"
android:layout_weight="1"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1">
<TextView
android:id="#+id/tvCommentUserFullName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="Azeem Haider"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" - 2d" />
</LinearLayout>
<TextView
android:id="#+id/tvCommentText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="This is a comment for testing purpose This is a comment for testing purpose This is a comment for testing purpose" />
</LinearLayout>
</LinearLayout>
OUTPUT
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 .....
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" />
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.
I am trying to reduce the space between 2 columns, have tried using negative margins, but did not work. Is there a way to bring the 2 elements in the image closer ?
<?xml version="1.0" encoding="utf-8"?>
<GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:useDefaultMargins="true"
android:alignmentMode="alignBounds"
android:columnOrderPreserved="false"
android:layout_gravity="center"
android:orientation="horizontal"
android:stretchMode="columnWidth"
android:background="#color/orange"
android:textSize="12sp"
android:columnCount="8">
<ImageButton
android:id="#+id/settings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnSpan="1"
android:layout_gravity="left"
android:src="#drawable/settings" />
<TextView
android:id="#+id/currentCityName"
android:layout_column="2"
android:textSize="22sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="City name"
android:layout_columnSpan="4"
android:layout_gravity="center_horizontal"
/>
<ImageButton
android:id="#+id/refresh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="7"
android:layout_columnSpan="1"
android:layout_gravity="right"
android:src="#drawable/reload" />
<ImageView
android:id="#+id/currentWeatherImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnSpan="8"
android:layout_rowSpan="3"
android:layout_gravity="center_horizontal"
android:src="#drawable/cloud" />
<ImageView
android:id="#+id/humidityIcon"
android:layout_width="20dp"
android:paddingTop="10dp"
android:paddingLeft="0dp"
android:paddingRight="0dp"
android:layout_marginRight="0dp"
android:layout_gravity="left"
android:background="#000000"
android:src="#drawable/humidity" />
<TextView
android:id="#+id/humidity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13sp"
android:paddingTop="10dp"
android:paddingLeft="0dp"
android:layout_marginLeft="0dp"
android:layout_gravity="left"
android:background="#FFFFFF"
/>
<TextView
android:id="#+id/temperature"
android:layout_columnSpan="4"
android:layout_rowSpan="2"
android:textSize="49sp"
android:layout_marginLeft="10dp"
android:layout_marginRight="5dp"
android:layout_gravity="center_horizontal"/>
<ImageView
android:id="#+id/windSpeedIcon"
android:layout_width="30dp"
android:layout_marginRight="1dp"
android:paddingRight="1dp"
android:layout_gravity="right"
android:src="#drawable/wind" />
<TextView
android:id="#+id/windSpeed"
android:textSize="12sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
/>
<!-- android:layout_width="40dp" -->
<TextView
android:id="#+id/precipitationIcon"
android:textSize="28sp"
android:layout_width="40dp"
/>
<TextView
android:id="#+id/precipitation"
android:layout_column="0"
android:textSize="13sp"
android:layout_width="40dp"
/>
<TextView
android:id="#+id/windDirection16Point"
android:textSize="13sp"
android:layout_width="80dp"
android:layout_columnSpan="2"
/>
<TextView
android:id="#+id/weatherDescription"
android:layout_gravity="center_horizontal"
android:layout_row="7"
android:layout_columnSpan="8"/>
<TextView
android:id="#+id/section_label"
android:layout_margin="5dp"
android:layout_columnSpan="8" />
<EditText
android:minLines="4"
android:maxLines="4"
android:id="#+id/edit"
android:layout_columnSpan="8"/>
I suggest implementing the entire view using a RelativeLayout, should be the best solution for the entire view.
You are tackling the wrong problem – you are asking how to reduce the space between columns in a grid layout, but maybe you should’t have used such a layout in the first place!
What you should have been using for your specific layout, is a combination of relative positioning and compound drawables (here, with android:drawableStart).
<?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="80dp"
android:background="#d89018"
android:paddingBottom="4dp"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="4dp"
>
<TextView
android:id="#+id/temperature"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:text="25 ℃"
android:textColor="#fff"
android:textSize="49sp"
/>
<TextView
android:id="#+id/humidity"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:drawableStart="#drawable/humidity"
android:gravity="center_vertical"
android:text="83 %"
android:textColor="#fff"
/>
<TextView
android:id="#+id/windSpeed"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:drawableStart="#drawable/wind"
android:gravity="center_vertical"
android:text="19 km/h"
android:textColor="#fff"
/>
<TextView
android:id="#+id/precipitation"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:drawableStart="#drawable/precipitation"
android:gravity="center_vertical"
android:text="0.1 mm"
android:textColor="#fff"
/>
<TextView
android:id="#+id/windDirection16Point"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignLeft="#id/windSpeed"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:drawableStart="#drawable/windDirection"
android:gravity="center_vertical"
android:text="NNW"
android:textColor="#fff"
/>
</RelativeLayout>
Not only this layout is simpler, you also let Android take care of all the spacing for you. To change the spacing between the compound drawable and the text, use android:drawablePadding in the layout’s code above; in Java code, that would be TextView.setCompoundDrawablePadding).
Icons used for the sample: water, windsock, rainy-weather and wind-rose.
I think what's happening is that your Views are being stretched because they are trying to match the width of another view in their columns.
Try decreasing the columnSpan of your Views or separate your layout into two separate GridLayouts.
Or, consider using a different layout altogether. I would recommend RelativeLayout here instead of GridLayout, but I don't know how this fits into a larger window.
try this:
<?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="100dp">
<LinearLayout
android:id="#+id/col1"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="2.4"
>
<LinearLayout
android:id="#+id/col1_row1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="83%"/>
</LinearLayout>
<LinearLayout
android:id="#+id/col1_row2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1.0mm"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/col2"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="2.0"
android:gravity="center"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="25'"
android:textSize="50dp"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/col3"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="2.4"
>
<LinearLayout
android:id="#+id/col3_row1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="19Km"/>
</LinearLayout>
<LinearLayout
android:id="#+id/col3_row2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="NNW"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
I think you should change usedefaultMargins to false and give your own margins to the elements.
android:useDefaultMargins="false";